Summary of FLEX-CREATING ADVANCED COMPONENTS
Page 1
Creating advanced components.
Page 2
Trademarks 1 step robopdf, activeedit, activetest, authorware, blue sky software, blue sky, breeze, breezo, captivate, central, coldfusion, contribute, database explorer, director, dreamweaver, fireworks, flash, flashcast, flashhelp, flash lite, flashpaper, flex, flex builder, fontographer, freehand...
Page 3: Contents
3 contents about creating components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 writing the component’s actionscript code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 simple example of a class file . . . . . . . . . . . . . . . . . . . . ...
Page 4
4 contents.
Page 5
5 creating advanced components this article describes the details of creating advanced components for use in macromedia flex applications. The majority of the work is in writing the actionscript class file, which derives from flex existing classes, and adding your own custom functionality. For an ad...
Page 6
6 creating advanced components e implement the createchildren() method. F implement the commitproperties() method. G implement the measure() method. H implement the layoutchildren() method. I implement the draw() method. J add properties, methods, styles, events, and other metadata. 3 compile a swc ...
Page 7
Writing the component’s actionscript code 7 note: macromedia recommends that you base your components on the uicomponent class rather than the uiobject class. The uicomponent class provides more built-in functionality, but maintains the flexibility of extending the uiobject class. Uiobject and uicom...
Page 8
8 creating advanced components the uicomponent (mx.Core.Uicomponent) class is a subclass of the uiobject class. It defines high-level behaviors that are specific to a graphical object. The uicomponent class handles end- user interactions (such as clicking and focus) and component enabling and disabl...
Page 9
Writing the component’s actionscript code 9 each class can contain only one constructor method; overloaded constructor methods are not supported in actionscript 2.0. Implementing the init() method flash calls the init() method when the class is created. At a minimum, the init() method should call th...
Page 10
10 creating advanced components application performance is better when you pass style properties in the initobject argument instead of calling the setstyle() method. The following example creates textinput and simplebutton components: function createchildren():void { if (text_mc == undefined) create...
Page 11
Writing the component’s actionscript code 11 you can set the following properties in the measure() method. Flex calculates the values of these properties, but you can override them in the measure() method: • _measuredminwidth • _measuredmaxwidth • _measuredminheight • _measuredmaxheight • _measuredp...
Page 12
12 creating advanced components implementing the layoutchildren() method the layoutchildren() method positions subobjects within the confines set by the uiobject.Layoutwidth and uiobject.Layoutheight properties of your component. Each component should implement this method. Use the layoutchildren() ...
Page 13
Writing the component’s actionscript code 13 inside the draw() method, you can use calls to the flash drawing api, defined by the movieclip class, to draw borders, rules, and other graphical elements. You can also call the clear() method, which removes the visible objects. In general, to set lengths...
Page 14
14 creating advanced components to make your components reusable in mxml, you can set component properties using tag attributes. For example, you might want to allow the user to pass a value to your component, as the following example shows: to create components that take tag attributes in mxml, you...
Page 15
Writing the component’s actionscript code 15 you add these keywords anywhere inside the class definition. For more information on embedding assets, see developing flex applications. To create a swf file from which you embed assets, create a new fla file and insert new symbols. For each symbol, selec...
Page 16
16 creating advanced components for example, you define a component called modaltext as the following example shows: [event("myevent")] class modaltext extends uicomponent { ... } within the body of your class definition, you then use the dispatchevent() method to dispatch myevent . You can then han...
Page 17
Compiling components 17 about invalidation macromedia recommends that a component not update itself immediately in most cases, but instead save a copy of the new property value, set a flag indicating what changed, and call one of the invalidation methods. The following are the invalidation methods: ...
Page 18
18 creating advanced components 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 de...
Page 19
Using the modaltext example 19 • assume an initial state. Because style properties are on the object, you can set initial settings for styles and properties so your initialization code does not have to set them when the object is constructed, unless the user overrides the default state. • when defin...
Page 20
20 creating advanced components [embed(source="modal2.Swf", symbol="modaloverskin")] var modeoverskinname:string; [embed(source="modal2.Swf", symbol="modaldownskin")] var modedownskinname:string; // note that we test for the existence of the children before creating them. // this is optional, but we...
Page 21
Using the modaltext example 21 // draw a simple border around everything. Linestyle(1,0x000000,100); drawrect(0, 0, width, height); } /*** h) add methods, properties, and metadata. ***/ // the general pattern for properties is to specify a private // holder variable. Private var __labelplacement:str...
Page 22
22 creating advanced components you can also handle the textchanged event if you want to determine when the modaltext.Text property is modified, as the following example shows: function handletext(event) { mytext.Text = "modaltext.Text changed"; } ]]> textchanged="handletext(event);" /> note that to...
Page 23
Troubleshooting 23 one possible remedy is to add a static variable dependency to the class definition. Flex knows that all static variable dependencies must be ready before the class is initialized, so it orders the class loading correctly. The following example adds a static variable to tell the li...
Page 24
24 creating advanced components.