Fireworks Article

Creating rich symbols for MXML and Images export in Fireworks CS3

Converting rich symbols to MXML

Rich symbols are a new kind of symbol introduced in Fireworks CS3 that can have instance-specific properties associated with them. These are added by means of an external JavaScript definition applied to the symbol when it is added to your document from the Common Library. For more information on creating custom rich symbols, see Creating Rich Symbols.

The Flex component rich symbols that come with Fireworks work with the MXML and Images export feature to generate specific tags in MXML that separate them from other objects and relate to their Flex component type. Their JavaScript definitions have an additional property that enables the export to associate them with their respective MXML tags. Look at the definition created for the Button component, for example. You can see this definition as: Widget.elem.customData["flexClassName"] = "Button";

When the MXML export reads that definition from within a rich symbol on the canvas, it knows to create an <mx:Button> tag in the exported MXML and not to export the object as an image (see Figure 1).

Figure 1. Button component's conversion to MXML

Assigning a Flex class name

The easiest way to create a new rich symbol's JavaScript is with the Create Symbol Script command. This dialog box enables you to specify the symbol properties you want for your rich symbol. The dialog box will not go so far as to let you specify MXML export properties, so you will need to edit the JavaScript file yourself for those. This command, however, will get you your basic script definition from which you can then add your additional MXML values.

The most basic rich symbol definition used by the MXML and Images export feature is the flexClassName definition defined in Widget.elem.customData, as seen used in the Button component's script. Defined in the setDefaultValues event, this is what lets the export know that this symbol relates to a specific MXML class, or tag. Which tag is associated with the symbol is determined by the value of flexClassName. For the Button component, the value is "Button," indicating that the tag created for that symbol will be <mx:Button>. If you wanted a symbol to defined in MXML as <mx:Component>, you would define the flexClassName property in your rich symbol with a value of Component. Widget.elem.customData["flexClassName"] = "Component";

Example: simple DateChooser

One of the Flex components not available in Fireworks is the DateChooser component. This particular component is simply too complex to replicate completely in Fireworks, so it was not included with the other components that Fireworks does support. A simple version of the component, however, could be created easily enough, and be designed to export as an <mx:DateChooser> tag in an MXML and Images export.

To define a DateChooser component:

1. From the source files, copy both DateChooser.graphic.png and DateChooser.jsf from
   [samplefiles]/Fireworks/Custom Symbols/ into your Custom Symbols folder in your user directory:
• Windows: C:\Documents and Settings\[user]\Application Data\Adobe\Fireworks CS3\Common Library\Custom Symbols
• Mac OS: Mac HD/Users/[user]/Library/Application Support/Adobe/Fireworks CS3/Common Library/Custom Symbols
2. Open the version of DateChooser.jsf you just copied into your user directory. It should contain a base rich symbol definition with no properties defined, but with setDefaultValues and applyCurrentValues functions already in place.
3. Within the setDefaultValues function, define flexClassName to have a value of DateChooser. When you're finished, setDefaultValues should look like this: function setDefaultValues()

   {
       Widget.elem.customData["flexClassName"] = "DateChooser";
   }

4. Save DateChooser.jsf.
5. Open Fireworks, if not already open, and create a new document.
6. Find DateChooser in the Custom symbols folder in the Common Library. If you do not see it there, use the reload icon to refresh the list.

7. Drag a copy of the DateChooser symbol to the canvas (see Figure 2).

   

   Figure 2. DateChooser component

8. Use File > Export to export the document using the MXML and Images export feature.
9. Open the resulting MXML file. You should see something like the following:

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="500" layout="absolute" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
       <mx:DateChooser id="dateChooser" x="50" y="50" width="174" height="163"/>
   </mx:Application>
   
   

   With the added flexClassName definition, the symbol in Fireworks now exports as a specific MXML tag and not an image.

   Note: The MXML and Images export feature does not require that an object be a symbol for it to be recognized as a specific MXML tag. It simply looks for the flexClassName definition in the object's customData object. You could define flexClassName manually for any object in Fireworks, not just symbols. Rich symbols are easier to work with, and more standardized, because their definitions are stored within their JSF files. Additionally, if any properties were defined for that symbol in the JSF file, they would also become part of that tag as attributes.

10. Add the following lines of code to the setDefaultValues function in DateChooser.jsf:

    var currValues = new Array();
       currValues.push({ name:"enabled", type:"Boolean",
       value:"true" });
       Widget.elem.customData["currentValues"] =
       currValues;

11. Save DateChooser.jsf.
12. In Fireworks, reload the Common Library/
13. Drag an instance of DateChooser from the Common Library onto the canvas/
14. Select Replace Existing Items in the Resolve Library Conflict dialog box.
15. Delete the duplicate instance.
16. Export as MXML. You should now have something similar to the following:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="500" layout="absolute" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
    	<mx:DateChooser id="dateChooser" x="61" y="110" width="174" height="163" enabled="true"/>
    </x:Application>
    
    

The MXML and Images export feature automatically recognizes rich symbol properties and adds them as attributes in the MXML tag. This way, you can create your own Fireworks components to represent Flex components with whatever definitions you need them to have in Flex.

Page 2 of 4

Previous Page

Next Page