MACROMEDIA FLEX - DEVELOPING COMPONENTS AND THEMES Manual
Summary of FLEX - DEVELOPING COMPONENTS AND THEMES
Page 1
Developing flex components and themes in flash authoring.
Page 2
Trademarks activeedit, activetest, add life to the web, afterburner, aftershock, andromedia, allaire, animation powerpack, aria, attain, authorware, authorware star, backstage, blue sky software, blue sky, breeze, bright tiger, captivate, clustercats, coldfusion, contents tab composer, contribute, d...
Page 3: Contents
3 contents chapter 1: working with flash mx 2004 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 about creating components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 working in the flash environment . . . . . . . . . . . . . . . . . . . . . ....
Page 4
4 contents.
Page 5: Chapter 1
5 chapter 1 working with flash mx 2004 this chapter describes how to set up and work in the macromedia flash environment when creating components for macromedia flex. It helps familiarize you with setting the classpath in flash, working with symbols, and exporting component swc files. If you are an ...
Page 6
6 chapter 1: working with flash mx 2004 • create components that feature complex user interaction, such as the data grid. You can make the component respond to different user input, such as adding keyboard event listeners. • take advantage of the flash tools, such as font and drawing tools, to creat...
Page 7
Working in the flash environment 7 about component types flex uses the following types of components: ui controls ui controls are visual components that represent discrete elements of a user interface (checkbox, combobox, textinput components, and so on) and are the interface between application dat...
Page 8
8 chapter 1: working with flash mx 2004 symbols and movieclips in flash, most assets are also known as symbols, and each symbol must have a unique name. You can store symbols anywhere in the fla file, because flex accesses the assets by the symbol name rather than by the timeline or stage. A symboli...
Page 9
Working in the flash environment 9 to compile a new component’s swc file in flash for use in flex, you must add the flex swc files and actionscript class files to your local fla file’s classpath. These files are included in the flexforflash.Zip file, which is included in the flex installation proces...
Page 10
10 chapter 1: working with flash mx 2004 about the default classpath the default local classpath is empty. The default global classpath consists of the following paths: • . (the dot) • $(localdata)/classes the dot (.) indicates the current working directory. Flash searches the fla file’s current dir...
Page 11
Working in the flash environment 11 to change the global classpath: 1. Select edit > preferences. The preferences dialog box appears. 2. Select the actionscript tab. 3. Click the actionscript 2.0 settings button. The classpath dialog box appears. 4. Add, remove, or edit entries in the classpath dial...
Page 12
12 chapter 1: working with flash mx 2004 working with component symbols all components are movieclip objects, which are a type of symbol. This section describes how to create new symbols, edit existing symbols, and convert symbols to components. Adding new symbols to create a new component, you must...
Page 13
Working with component symbols 13 editing symbols each symbol has its own timeline. You can add frames, keyframes, and layers to a symbol’s timeline, just as you can to the main timeline. On these layers and in these frames you store the graphical assets for the symbol. To edit the symbol’s linkage ...
Page 14
14 chapter 1: working with flash mx 2004 to edit symbol layers: 1. Enter edit symbols mode. 2. Rename an empty layer, or create a layer called main. You can use any name for the main layer; however, this document refers to this layer as the main layer. 3. In the first frame of the main layer, add a ...
Page 15
Working with component symbols 15 adding dependent components you can create new components based on existing flex components, such as button, checkbox, uiobject, and uicomponent. In many cases your new component combines the functionality and symbols of existing visual flex components. You must add...
Page 16
16 chapter 1: working with flash mx 2004 you must create the class file before turning the symbol into a component. If flash does not convert your symbol into a component, it most likely cannot find the actionscript class. Another possibility is that the class file is not in the flash classpath. To ...
Page 17
Exporting components 17 about component files when you create a new component with flash mx 2004, you have a minimum of four files, as follows: *.Fla file the flash source file that contains the symbols and skins used by the component. *.As file the actionscript source class file that defines the me...
Page 18
18 chapter 1: working with flash mx 2004 flex includes a single swc file that contains all the built-in components. This swc file is located in the flex_app_root/web-inf/flex/frameworks directory. In addition, you expanded a zip file containing all of the individual swc files when you prepared the f...
Page 19
Exporting components 19 using the swcrepair utility if your new component extends a component that is not native to the flash environment (but is instead in the flex components list), you must run the swcrepair utility against the swc file when you finish exporting it from flash and before you use i...
Page 20
20 chapter 1: working with flash mx 2004 note: you should not store custom swc files in the /web-inf/flex/frameworks directory. Swc files must be at the top level of the directory. You cannot put them in subdirectories, unless you explicitly define those subdirectories with the setting. The package ...
Page 21
Exporting components 21 if the component’s actionscript classes are in a package, you must specify a namespace that points to that package in your mxml file, as the following example shows: xmlns:myp="mypackage.*" > xmlns:myp="mypackage.*" > for more information on using namespaces for flex componen...
Page 22
22 chapter 1: working with flash mx 2004 importing swc files into the flash ide swc files are a convenient way to share components among flash developers. After you create a swc file, you can give that swc component to anyone else with flash and they can use your component in their applications. Fla...
Page 23: Chapter 2
23 chapter 2 creating basic components in flash mx 2004 this chapter includes a set of simple examples that illustrate the basics of component development. The first part of the chapter introduces the green square, orange circle, and blue button components, which illustrate simple component construc...
Page 24
24 chapter 2: creating basic components in flash mx 2004 orange circle create a component that exists in a package. By developing this component, you learn how to work in a namespace that uses packaged classes. Blue button create a component that extends an existing visual component. These component...
Page 25
Creating simple components 25 super.Init(); invalidate(); // required call so that flex draws the component. } } 8. Return to the flash environment. Right-click the square and select convert to symbol. The convert to symbol dialog box appears. 9. In the convert to symbol dialog box, set the name, id...
Page 26
26 chapter 2: creating basic components in flash mx 2004 to create the orange circle: 1. Set up the flash environment by adding the flex components and class files. For more information, see “adding flex classes and components to the flash ide” on page 8 . 2. In flash, create a new fla file. 3. Edit...
Page 27
Creating simple components 27 13. Right-click the symbol in the flash library and select export swc file. 14. Save the new swc file as orangecircle.Swc. 15. In a text editor, create an mxml file that contains the following code: xmlns:myp="mypackage.*" > xmlns:myp="mypackage.*" > you must add a name...
Page 28
28 chapter 2: creating basic components in flash mx 2004 5. In the create new symbol dialog box, perform the following steps: a enter bluebutton in the name field. B enter bluebutton in the identifier field. C enter bluebutton in the as2.0 class field. To access the identifier and as 2.0 class field...
Page 29
Creating simple components 29 14. Insert a blank keyframe in the second frame of the assets layer by selecting the frame, and then selecting insert > timeline > blank keyframe. The following figure shows the layers for the bluebutton symbol: 15. Find the button control in the flex components list: i...
Page 30
30 chapter 2: creating basic components in flash mx 2004 23. Copy the swc file that you created (bluebutton.Swc) to the same directory as the mxml file. This should not be the same directory into which you saved the actionscript and fla file. This directory must be in the web application’s directory...
Page 31
Binding properties to a custom component 31 defining getters and setters the recommended way of exposing properties in your class file is with a pair of getters and setters. These functions must be public. The advantage of getters and setters is that you can calculate the return value in a single pl...
Page 32
32 chapter 2: creating basic components in flash mx 2004 add the changeevent metadata keyword to the getter, and a dispatchevent() method call inside the setter. When the property’s value is set, the component dispatches the change event. Since the getter is bound to the changeevent change , the bin...
Page 33
Adding events to custom components 33 if your custom swc file has properties typed array, do not use data binding to supply initial values for array properties. For example, if your custom swc file has a labels property that is typed array, do not use data binding in the mxml as the following exampl...
Page 34
34 chapter 2: creating basic components in flash mx 2004 because nearly all classes extend the uiobject class, the initialize event is already supported in custom components. To define a handler for it, you add the initialize property to the component’s mxml tag, and then add actionscript code that ...
Page 35
Adding events to custom components 35 ]]> mouseout="changealpha(startalpha);" /> to handle an event that is not supported by the current parent class, such as a click event on a uiobject, you must edit the component class file. However, to add a click event to your component, it is sometimes easier ...
Page 36
36 chapter 2: creating basic components in flash mx 2004 } } the following mxml file handles the click event within an block: initialize="createlistener();" > var startalpha:number = 40; var curstate:number = 100; function myinit() { mygs.Alpha=startalpha; } function modalpha(curalpha:number) { gs.A...
Page 37
Setting default sizes 37 function init() { super.Init(); tabenabled = true; invalidate(); } function keydown(void):void { var k = key.Getcode(); trace("key: " + k); dispatchevent({type:"mykeydown", mykey:k}); } } the following mxml file handles the keyboard event that the class file emits. The mxml ...
Page 38
38 chapter 2: creating basic components in flash mx 2004 } function init() { setstyle("fontsize", 24); super.Init(); invalidate(); } function measure() { _measuredpreferredwidth=500; _measuredpreferredheight=200; } } the following mxml file instantiates the bluebutton control. All instances of this ...
Page 39
Skinning custom components 39 setstyle("color", 0x6666cc); // set the background and border to blue when mouse hovers over control. Setstyle("themecolor", 0x6666cc); super.Init(); invalidate(); } } the following mxml file instantiates the bluebutton control without overriding the default styles set ...
Page 40
40 chapter 2: creating basic components in flash mx 2004 in the component’s class file, you must also override the name of the skin. Macromedia recommends that you apply the skin to your component as a clip parameter in the constructobject2() method rather than rely on the timing of the instantiatio...
Page 41
Skinning custom components 41 5. Add a second layer called assets, and add a second blank keyframe to this layer. 6. Return to the main fla file. 7. Insert a new symbol by selecting insert > new symbol. The create new symbol dialog box appears. This new symbol will be the new skin. 8. In the create ...
Page 42
42 chapter 2: creating basic components in flash mx 2004 13. Right-click the component’s symbol in the library and select component definition. In the as 2.0 class field, enter the class name. 14. Export the swc file. For more information, see “creating swc files” on page 18 . 15. Add the new compon...
Page 43
Creating compound components 43 the following actionscript class file creates a component that instantiates textarea and button controls: // import all necessary classes. Import mx.Core.Uicomponent; import mx.Controls.Button; import mx.Controls.Textarea; [event("click")] class compoundcomponent exte...
Page 44
44 chapter 2: creating basic components in flash mx 2004.
Page 45: Chapter 3
45 chapter 3 creating advanced components in flash mx 2004 this chapter describes the details of creating visual, interactive components in the macromedia flash mx 2004 workspace for use in macromedia flex applications. The majority of the work is in writing the actionscript class file, which derive...
Page 46
46 chapter 3: creating advanced components in flash mx 2004 the process of creating a flex component in flash is different from the one for creating general-use flash components. It is possible, and even desirable, to create components that operate in both environments; however, there are certain op...
Page 47
Writing the component’s actionscript code 47 simple example of a class file the following is a simple example of a class file called mycomponent.As. If you were creating this component, you would link this file to the component in the flash ide. This example contains a minimal set of imports, method...
Page 48
48 chapter 3: creating advanced components in flash mx 2004 7. Implement the createchildren() method. 8. Implement the measure() method. 9. Implement the layoutchildren() method. 10. Implement the draw() method. 11. Add properties, methods, and metadata. The ordering of methods that you implement in...
Page 49
Writing the component’s actionscript code 49 about the uiobject and uicomponent classes components based on version 2 of the macromedia component architecture descend from the uiobject class, which wraps the movieclip class. The movieclip class is the base class for the classes in flash that can dra...
Page 50
50 chapter 3: creating advanced components in flash mx 2004 accessing application scope every class that extends the uiobject class has an application property that stores a reference to the application object. You can use this property to access data or methods at the application level. Because the...
Page 51
Writing the component’s actionscript code 51 the following example adds the symbolname , symbolowner , and classname properties to the mybutton class: class mybutton extends mx.Controls.Button { static var symbolname:string = "mypackage.Mybutton"; static var symbolowner = mypackage.Mybutton; var cla...
Page 52
52 chapter 3: creating advanced components in flash mx 2004 writing the constructor generally, component constructors should be empty so that the object can be customized with its properties interface. For example, the following code shows a constructor for mycomponent: function mycomponent() { } in...
Page 53
Writing the component’s actionscript code 53 when it instantiates the component, the flex framework creates an initialization object ( {foo: "myvalue"} ) and passes it to the constructobject2() method. The constructobject2() method sets this property. Clip parameters can take any number of comma-sep...
Page 54
54 chapter 3: creating advanced components in flash mx 2004 implementing the constructobject2() method the constructobject2() method is effectively the constructor for your class. The uiobject.Constructobject2() method calls the init() and createchildren() methods. It should apply any properties in ...
Page 55
Writing the component’s actionscript code 55 the following table describes the arguments: to call the createclassobject() method, you must know what those children are (for example, a border or a button that you always need), because you must specify the name and type of the object, plus any initial...
Page 56
56 chapter 3: creating advanced components in flash mx 2004 flex only calls the commitproperties() method after it calls the invalidateproperties() method. For example, the viewstack container uses the commitproperties() method to maximize performance. When you set the viewstack.Selectedindex proper...
Page 57
Writing the component’s actionscript code 57 by default, flex sets the values of _ measuredpreferredwidth and _ measuredpreferredheight to the values of the current height and width, but you should override them. The following example of the measure() method from the label component sets a default w...
Page 58
58 chapter 3: creating advanced components in flash mx 2004 { mode_mc.Move(layoutwidth - mode_mc.Width, 0); text_mc.Move(0, 0); } else { mode_mc.Move(0, 0); text_mc.Move(mode_mc.Width, 0); } } implementing the draw() method the draw() method displays objects on the screen. Whenever the component nee...
Page 59
Writing the component’s actionscript code 59 to define getter and setter methods, precede the method name with get or set , followed by a space and the property name. Macromedia recommends that you use initial capital letters for the second word and each word that follows. For example: public functi...
Page 60
60 chapter 3: creating advanced components in flash mx 2004 metadata tags the following table describes the metadata tags that you can use in actionscript class files: the following sections describe the component metadata tags in more detail. Bindable data binding connects components to each other....
Page 62
62 chapter 3: creating advanced components in flash mx 2004 the bindable keyword is required when you use the changeevent metadata keyword. For more information, see “bindable” on page 60 . In the following example, the component generates the change event when the value of the flavorstr property ch...
Page 63
Writing the component’s actionscript code 63 the following example identifies the myclickevent event as an event that the component can dispatch: [event("myclickevent")] if you do not identify an event in the class file with the event metadata keyword, the compiler ignores the event during compilati...
Page 64
64 chapter 3: creating advanced components in flash mx 2004 the following example defines the enabled parameter as inspectable: [inspectable(defaultvalue=true, verbose=1, category="other")] var enabled:boolean; the inspectable keyword supports loosely typed properties, as the following example shows...
Page 65
Writing the component’s actionscript code 65 the inspectablelist metadata keyword has the following syntax: [inspectablelist("attribute1"[,...])] the inspectablelist keyword must immediately precede the class definition because it applies to the entire class and not individual members of the class. ...
Page 66
66 chapter 3: creating advanced components in flash mx 2004 style the style metadata keyword describes a style property allowed for the component. The style metadata keyword has the following syntax: [style(name=style_name[,option=value,...])] the following table describes the options for the style ...
Page 67
Writing the component’s actionscript code 67 // a setter. [inspectable(defaultvalue="default text")] function set text(t:string) parameters can be any of the following supported types: • array • object • list • string • number • boolean • font name • color handling events the event model is a dispat...
Page 68
68 chapter 3: creating advanced components in flash mx 2004 the event object has an implicit property, target , that is a reference to the object that triggered the event. For more information on events, see developing flex applications. Defining event handlers you define the event handler object or...
Page 69
Skinning custom controls 69 invalidate() indicates that just the visuals for the object have changed, but size and position of subobjects have not changed. This method calls the draw() method. Invalidateproperties() indicates that you have changed properties. This method calls the commitproperties()...
Page 70
70 chapter 3: creating advanced components in flash mx 2004 in some cases, you must call the invalidate() method after changing skin properties. This depends on where you set the skin. If you set it prior to the layoutchildren() method, the invalidate() call in that method takes care of it for you. ...
Page 71
Improving component usability 71 making components accessible a growing requirement for web content is that it should be accessible to people who have disabilities. Visually impaired people can use the visual content in flash applications by means of screen reader software, which provides an audio d...
Page 72
72 chapter 3: creating advanced components in flash mx 2004 adding tooltips tooltips appear when a user rolls the mouse over your component name or icon in the components panel of the flash authoring environment. To add a tooltip to your component, use the tiptext keyword outside the class definitio...
Page 73
Using the modaltext example 73 • always implement an init() method and call the super.Init() method, but otherwise keep the component as lightweight as possible. • use the invalidate() and invalidatestyle() methods to invoke the draw() method instead of calling the draw() method explicitly. Using th...
Page 74
74 chapter 3: creating advanced components in flash mx 2004 // in this example). Super.Init(); } /*** f) implement createchildren(). ***/ // declare two children member variables. Var text_mc:textinput; var mode_mc:simplebutton; // declare default skin names for the button states. // this is optiona...
Page 75
Using the modaltext example 75 text_mc.Move(0, 0); } else { mode_mc.Move(0, 0); text_mc.Move(mode_mc.Width, 0); } } /*** i) implement draw ***/ // set flags when things change so we only do what we have to. Private var btextchanged:boolean = true; // set text if it changed, and draw a border. Functi...
Page 76
76 chapter 3: creating advanced components in flash mx 2004 btextchanged = true; invalidate(); } function get text():string { if (btextchanged) return __text; return text_mc.Text; } // handle events that are dispatched by the children. Function handleevent(evt:object):void { if (evt.Type == "change"...
Page 77
Troubleshooting 77 i get an error "xxx is not a valid attribute ..." when i try to use the component from mxml. Ensure that the attribute is spelled correctly and is marked as inspectable in the metadata. The metadata syntax is not checked, so ensure that there are no misspellings or syntax errors. ...
Page 78
78 chapter 3: creating advanced components in flash mx 2004 static function bar():number { return mx.Example.A.Foo(); } static var z = b.Bar(); // dependency static var adependency = mx.Example.A; } the component is instantiated properly but does not show up (#2) verify that the _measuredpreferredwi...
Page 79: Index
79 index a accessibility, for custom components 71 actionscript classpath in flash 9 writing for a new component 46, 47 applyproperties 52 as 2.0 class option, setting 25, 26, 28, 50 b bindable metadata keyword 60 c changeevent metadata keyword 60 children, layoutchildren() method 57 classes and act...
Page 80
80 index e edit symbol mode 12 editing symbols, for components 13 effect metadata keyword 60, 62 effects, custom components 62 enableaccessibility() method 71 event metadata keyword 60, 62 events adding 67 binding properties with 31 handling 67 handling in custom components 67 metadata 68 export in ...
Page 81
Index 81 r redraw() method 58 resizing custom components 56 s scope, custom components 50 screen readers, accessibility in custom components 71 setstyle() method 70 setters, defining for custom components 31 skinning custom components 69 startdrag() method 49 styledeclaration object 70 styles adding...
Page 82
82 index.