Dreamweaver Widget Packager:Widget Workflow
From Adobe Labs
Widget Workflow: Using the WDF and Widget Packager
The Widget Packager is a utility extension for Dreamweaver provided by Adobe to assist widget developers in packaging widget extensions for Dreamweaver CS4.
This document provides instructions on packaging widgets for Dreamweaver CS4.
Glossary
Adobe Exchange - Web site that hosts extension for download. There is a "Web Widgets" category on the Exchange. Extension - A package that installs into Dreamweaver, allowing new features to be added to the product. Extension files have a .mxp file extension. MXI - Extension Information file - This is an XML file that the Adobe Extension Manager uses to install the extension files into the application (Dreamweaver). It also contains information such as menu options or license agreements. MXP - Extension Package - The actual extension package file. It is a packaged file that contains the mxi file and all the other dependent files. OAA - The Open Ajax Alliance. WDF- Widget Descriptor File. A XML file that describes all the aspects of the widget. The ultimate reference for the Widget Description File (WDF) format is the Open Ajax Alliance (OAA) Widget Metadata Specification, of which this is an implementation. This document describes the tags and attributes from the Widget Metatdata that the Adobe Widget Packager uses to create a Widget Extension for Dreamweaver. Widget- Markup that renders on a user’s page that has a set of intrinsic behaviors. To create a functioning widget, it usually requires HTML markup, some associated JavaScript, CSS, and perhaps some other assets. Widget Packager - The Dreamweaver utility that consumes the WDF and creates the MXP. The widget packager is delivered as a Dreamweaver extension (MXP).
Widget Assets - External files that are required by the widget for its functionality. They include:
JavaScript files - This includes the widget specific behavioral implementation files *AND* any dependent JS Library/Framework files. CSS files Images file Widget Configuration Files - These are the DW configuration files that are generated by the packager for each specific file. These files are bundled/packaged into the Widget Extension and upon installation are installed into the Dreamweaver Configuration directory. Widget Extension - This is a .mxp file that installs a set of configuration files into dreamweaver that allows dreamweaver to insert and manage widget code and assets in a user’s document. A widget extension contains files necessary for the extension manager, such as the .mxi file, and all the DW configuration files that were generated by the packager.
Basic Workflow
The basic workflow for packaging a widget for Dreamweaver is as follows:
1. Collate dependent files. 2. Create a Widget Descriptor File (WDF) for the widget. 3. Run the Widget Packager (and install in Dreamweaver, if desired). 4. Upload to the Exchange.
The Widget Packager reads the WDF, which is a XML file that completely describes the widget according to Open Ajax Alliance specifications, and creates the files that Dreamweaver needs to insert and render the widget. It then packages the widget into the final extension.
1. Collect Dependent Files
All files on which the widget depends (e.g., JavaScript, CSS, images) must be specified in the WDF using <require> tags.
The <require> tags should appear in the same order that the files should be included in the head of the user's document. (Files that do not need to be included in the head of the document can appear at the end of the list; their order is irrelevant.)
The actual files need to be the location specified in the WDF so that the Widget Packager can find them.
<require type="javascript" src="js/datatable-beta.js" includeRef="true" dw:shared="true"/>
The Widget Packager will look for the file in the 'src' path, relative to the WDF. In this case, it will look for 'datatable-beta.js' in the 'js' folder next to the WDF.
The 'src' field also specifies the location of the dependent files when the widget is inserted onto the page.
Collect and organize all the files required for the widget.
Note: If no icon is provided for the Insert Panel item, Dreamweaver will use a generic icon. You may want to provide a custom icon for the widget.
2. Create Widget Descriptor File
The WDF is a XML file that lists all the properties of a widget:
Default HTML Constructor script Dependent Files Widget properties or options. Author/URLs/Version etc. The best way to write a WDF file is to take an existing file and customize it to your own needs. A bare minimum XML file is here The documentation for the WDF format is here.
The Widget Packager will consume this WDF and using the dependent files, create the final extension (mxp).
3. Run the Widget Packager
Now that the WDF is created and the files collated, it is time to run the Widget Packager.
The Widget Packager is delivered as a Dreamweaver Extension. Use the Adobe Extension Manager to install the extension. File > Import Extension or just double click the mxp.
After restarting, it will show up in the Commands menu in Dreamweaver CS4.
Go to Commands > Import Widget. Browse to the WDF. Click Create Extension to start the process. Go to the folder containing the WDF. You will now see the mxp file, and if the Install Extension checkbox was checked, the widget should be installed into Dreamweaver already. (You may have to restart to see the new menu item.)
4. Upload to the Adobe Exchange
Now that you have a working widget in Dreamweaver, it is time to share it with users around the world. To do this, Adobe provides the Adobe Exchange, which hosts hundreds of extensions for a variety of products.
The Exchange provides a mechanism for uploading and managing your widgets. It's simply a matter following the instructions on the Upload Extension area of the Exchange (Login required with Adobe ID).
Web Widgets have their own category for the upload process, so be sure to follow the Web Widgets path.
Now your widget is available to the world for download into Dreamweaver!
