MACROMEDIA FLEX - DEVELOPING COMPONENTS AND THEMES Manual
MACROMEDIA FLEX - DEVELOPING COMPONENTS AND THEMES Manual

MACROMEDIA FLEX - DEVELOPING COMPONENTS AND THEMES Manual

Developing flex components and themes in flash authoring

Advertisement

Quick Links

Developing Flex Components and Themes
in Flash Authoring

Advertisement

Table of Contents
loading
Need help?

Need help?

Do you have a question about the FLEX - DEVELOPING COMPONENTS AND THEMES and is the answer not in the manual?

Questions and answers

Summary of Contents for MACROMEDIA FLEX - DEVELOPING COMPONENTS AND THEMES

  • Page 1 Developing Flex Components and Themes in Flash Authoring...
  • Page 2 If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.
  • Page 3: Table Of Contents

    CONTENTS CHAPTER 1: Working with Flash MX 2004 ......5 About creating components......... . . 5 Working in the Flash environment .
  • Page 4 Contents...
  • Page 5: Chapter 1: Working With Flash Mx 2004

    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.
  • Page 6 FocusManager that lets you control which object receives focus in a Flex application. Flex components are built on Version 2 of the Macromedia Component Architecture, which lets you easily and quickly build robust applications with a consistent appearance and behavior. This...
  • Page 7: Working In The Flash Environment

    Working in the Flash environment The Macromedia Flash MX 2004 and Flash MX Professional 2004 environments are set up to make the structure of classes and components logical. You must take the following steps to prepare your Flash environment for extending or creating new components for Flex: Import Flex components into Flash, and make Flex classes available to Flash.
  • Page 8 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 symbol is a graphic, button, or movie clip that you create in Flash MX 2004.
  • Page 9 Files\Macromedia\Flex\resources\flexforflash\FlexforFlash.zip. Extract the contents of the FlexForFlash.zip file to the Flash First Run directory. The default location is C:/Program Files/Macromedia/Flash MX 2004/en/First Run. This file creates the Components/Flex Components directory and copies the Flex SWC files to that directory. In addition, it creates the Flex Classes directory, which contains the ActionScript source files for the Flex classes.
  • Page 10 “Adding Flex classes and components to the Flash IDE” on page Changing the Flash classpath This section describes how to change the global and local classpaths. Macromedia recommends changing only the local classpath and adding the following entries to your local classpath: •...
  • Page 11 To change the global classpath: Select Edit > Preferences. The Preferences dialog box appears. Select the ActionScript tab. Click the ActionScript 2.0 Settings button. The Classpath dialog box appears. Add, remove, or edit entries in the Classpath dialog box. Click OK to save your changes. About importing classes Flash imports all files referenced in ActionScript classes with statements.
  • Page 12: Working With Component Symbols

    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 insert a new symbol into a new FLA file. You then convert the symbol to a component so that you can link the component to a class file.
  • Page 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 information: •...
  • Page 14 To edit symbol layers: Enter Edit Symbols mode. 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. In the first frame of the main layer, add a action in the Actions panel, as the following stop() figure shows:...
  • Page 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 the component symbols (or compiled clips) of the components on which your new component depends to the component FLA file’s Library.
  • Page 16: Exporting Components

    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 convert a symbol into a component: Create an ActionScript class file and save it with an .as filename extension.
  • Page 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 methods and properties of the component.
  • Page 18 File Description Icon (Optional) Contains the 18 x 18, 8-bit-per-pixel icon used to display a component in the authoring tool user interface(s). If you don’t supply an icon, a default icon appears (see “Adding an icon” on page 71). The icon must be a PNG file. Property (Optional) Supports a custom Property inspector in the authoring tool.
  • Page 19 C:/Program Files/Macromedia/Flash MX 2004/en/First Run/SWCRepair/bin/ SWCRepair.exe C:/myProjects/myComponent.SWC The SWCRepair utility assumes that Flash is installed in C:/Program Files/Macromedia/Flash MX 2004. If this is not the actual path, a second argument to the program specifies the Flex Components directory. For example, if Flash is installed in D:/MM/Flash, you would run the SWCRepair utility as the following example shows: D:/MM/Flash/en/First Run/SWCRepair/bin/SWCRepair.exe C:/myProjects/foo.swc...
  • Page 20 To use your component in your Flex applications, at a minimum you must declare a namespace and use a tag that matches the name of the component, as the following example shows: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:my="*"> <my:ModalText /> </mx:Application>...
  • Page 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: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:myp="myPackage.*" > <myp:myComponent /> </mx:Application> For more information on using namespaces for Flex components, see Developing Flex Applications.
  • Page 22 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.
  • Page 23: Chapter 2: Creating Basic Components In Flash Mx 2004

    Creating compound components ..........42 Creating simple components This section describes how to create simple components in Macromedia Flash for Macromedia Flex. As with creating any Hello World–style example, these procedures ignore some practices to help new component developers quickly achieve success and begin creating components.
  • Page 24 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 components illustrate the basic concepts of component creation. Building the components also shows you the minimum requirements for creating a custom visual component in Flash for use in Flex.
  • Page 25 Save the new SWC file as greensquare.swc. In a text editor, create a new MXML file that contains the following code: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*"> <greensquare/> </mx:Application> Save the MXML file as greentest.mxml. You cannot name the file greensquare.mxml. You must give it a name that is different from the component’s name, such as greentest.mxml.
  • Page 26 To create the Orange Circle: 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 In Flash, create a new FLA file. Edit the FLA file’s local classpath settings to include the following two classpath entries: $(LocalData)/Flex Classes .
  • Page 27 Right-click the symbol in the Flash Library and select Export SWC File. Save the new SWC file as orangecircle.swc. In a text editor, create an MXML file that contains the following code: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns:myp="myPackage.*" > <myp:orangecircle /> </mx:Application>...
  • Page 28 In the Create New Symbol dialog box, perform the following steps: Enter BlueButton in the Name field. Enter BlueButton in the Identifier field. Enter BlueButton in the AS2.0 Class field. To access the Identifier and AS 2.0 Class field, you must select the Export for ActionScript check box.
  • Page 29 Right-click the component in the Flash Library and select Export SWC File. Save the new SWC file as BlueButton.swc. In a text editor, create a new MXML file that contains the following code: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*"> <BlueButton label="Blue Button" /> </mx:Application> Creating simple components...
  • Page 30: Working With Component Properties

    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 structure so that Flex can compile a SWF from the MXML file.
  • Page 31: Binding Properties To A Custom Component

    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 place and trigger events when the variable changes. You define getter and setter functions using the get and set method properties within a class definition block.
  • Page 32 "change" }); The following MXML file binds the component’s property to the TextArea control’s char property: text <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*" > <BindChar id="myComp1" char="F" /> <mx:TextArea id="ta1" text="{myComp1.char}" /> </mx:Application> Chapter 2: Creating Basic Components in Flash MX 2004...
  • Page 33: Adding Events To Custom Components

    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 property that is labels typed Array, do not use data binding in the MXML as the following example shows: <yourSWC labels={myArray}/>...
  • Page 34 To define a handler for it, you add the property to the initialize component’s MXML tag, and then add ActionScript code that processes the event, as the following example shows: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*"> <mx:Script> <![CDATA[ function myInit() { trace('init greensquare'); ]]>...
  • Page 35 ]]> </mx:Script> <greensquare id="myGS" mouseOver="changeAlpha(100);" mouseOut="changeAlpha(startAlpha);" /> </mx:Application> To handle an event that is not supported by the current parent class, such as a event on a click UIObject, you must edit the component class file. However, to add a event to your click component, it is sometimes easier to extend the Button or SimpleButton class than it is to write...
  • Page 36 The following MXML file handles the event within an block: click <mx:Script> <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*" initialize="createListener();" > <mx:Script> <![CDATA[ var startAlpha:Number = 40; var curState:Number = 100; function myInit() { myGS.alpha=startAlpha; function modAlpha(curAlpha:Number) { gs.alpha=curAlpha; if (curState==100) { curState=40;...
  • Page 37: Setting Default Sizes

    The following MXML file handles the keyboard event that the class file emits. The MXML file inspects the event object’s property to determine which key the user pressed. myKey <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*"> <mx:Script> <![CDATA[ function handleKeyDown(evt) { if (evt.myKey == 8) { // backspace ta1.text = "";...
  • Page 38: Styling Custom Components

    500 by 200 pixels, with a label of 24. fontSize <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns=”*” > <BlueButton label="My Big Button" /> </mx:Application> You can override custom style settings in the MXML file, as the following example shows: <BlueButton label="My Big Button"...
  • Page 39: Skinning Custom Components

    The following MXML file instantiates the BlueButton control without overriding the default styles set in the component’s class file: <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*" > <BlueButton label="Blue Button" /> </mx:Application> In addition to setting the color property, you can set the font face, font size, and other style properties.
  • Page 40 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 method rather than rely on the timing of the instantiation process. This is...
  • Page 41 Add a second layer called assets, and add a second blank keyframe to this layer. Return to the main FLA file. Insert a new symbol by selecting Insert > New Symbol. The Create New Symbol dialog box appears. This new symbol will be the new skin. In the Create New Symbol dialog box, do the following: Select the MovieClip for Behavior option (the default).
  • Page 42: Creating Compound Components

    Right-click the component’s symbol in the Library and select Component Definition. In the AS 2.0 Class field, enter the class name. Export the SWC file. For more information, see “Creating SWC files” on page Add the new component to an MXML file and request that file to see the new skin. If the skin is not positioned properly on the Stage, you can rearrange it by returning to the FLA file and editing the skin’s symbol.
  • Page 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 extends UIComponent { static var symbolName:String="CompoundComponent"; static var symbolOwner:Object = CompoundComponent; var className:String = "CompoundComponent"; function CompoundComponent() { function init() { super.init();...
  • Page 44 Chapter 2: Creating Basic Components in Flash MX 2004...
  • Page 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 derives from Flex existing classes, and adding your own custom functionality.
  • Page 46: Writing The Component's Actionscript Code

    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 optimizations available to Flex applications that require that components behave in a more sophisticated manner.
  • Page 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, methods, and declarations for a component that inherits from the UIObject class.
  • Page 48 UIObject and UIComponent. By extending these classes, your components have a basic set of methods, properties, and events. 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.
  • Page 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 draw on the screen. By providing a wrapper around its methods and properties, Flex makes the UIObject syntax more intuitive and improves the conceptual management of representing graphic objects.
  • Page 50 Accessing application scope Every class that extends the UIObject class has an property that stores a reference to application the Application object. You can use this property to access data or methods at the application level. Because the event handlers and the bindings of a component execute in the context of that component, using the Application object gives you access to the application scope.
  • Page 51 The following example adds the , and properties to the symbolName symbolOwner className MyButton class: class MyButton extends mx.controls.Button { static var symbolName:String = "myPackage.MyButton"; static var symbolOwner = myPackage.MyButton; var className:String = "MyButton"; About the component instantiation life cycle When you instantiate a new component, Flex calls a number of methods, and those methods call other methods that you can override.
  • Page 52 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 this example, when a new component is instantiated, the constructor is called.
  • Page 53 When it instantiates the component, the Flex framework creates an initialization object ( {foo: ) and passes it to the method. The "myvalue"} constructObject2() constructObject2() method sets this property. Clip parameters can take any number of comma-separated arguments. Flex stores the clip parameters as an array.
  • Page 54 Implementing the constructObject2() method method is effectively the constructor for your class. The constructObject2() method calls the methods. It UIObject.constructObject2() init() createChildren() should apply any properties in the initObj that are needed by init() createChildren() and then call super.constructObject2() method has the following signature: constructObject2() constructObject2(initObj:Object):Void In addition, if you use clip parameters, you should add a call to the...
  • Page 55 The following table describes the arguments: Argument Type Description Object The name of the class. className instanceName String The name of the instance. Number The depth for the instance. depth Object The object that contains the initialization properties. initObject To call the method, you must know what those children are (for example, createClassObject() a border or a button that you always need), because you must specify the name and type of the...
  • Page 56 You can use the method to explicitly set the size of the component, measure() although Macromedia does not recommend doing this when developing components. You can set the following properties in the method. Flex calculates them, but you can...
  • Page 57 By default, Flex sets the values of _ and _ measuredPreferredWidth measuredPreferredHeight to the values of the current height and width, but you should override them. The following example of the method from the Label component sets a default width and height if measure() the label text field is empty: function measure(Void):Void {...
  • Page 58 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 method displays objects on the screen. Whenever the component needs to draw an draw() interface element, it calls a method. You use the method to create or modify draw() draw() elements that are subject-to-change.
  • Page 59 To define getter and setter methods, precede the method name with , 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 function get initialColorStyle(): Number The variable that stores the property’s value cannot have the same name as the getter or setter.
  • Page 60 Metadata tags The following table describes the metadata tags that you can use in ActionScript class files: Description Bindable Reveals a property in the Bindings tab of the Component inspector. For more information, see “Bindable” on page ChangeEvent Identifies events that cause data binding to occur. For more information, see “ChangeEvent”...
  • Page 61 Use the metadata keyword to make properties and getter and setter functions in your Bindable ActionScript classes appear on the Bindings tab in the Component inspector. metadata keyword has the following syntax: Bindable [Bindable[readonly|writeonly[,type="datatype"]]] keyword must precede a property, a getter or setter function, or other metadata Bindable keyword that precedes a property or getter or setter function.
  • Page 62 keyword is required when you use the metadata keyword. For more Bindable ChangeEvent information, see “Bindable” on page In the following example, the component generates the event when the value of the change property changes: flavorStr [ChangeEvent("change")] public var flavorStr:String; When the event specified in the metadata occurs, Flash informs whatever is bound to the property that the property has changed.
  • Page 63 The following example identifies the event as an event that the component myClickEvent can dispatch: [Event("myClickEvent")] If you do not identify an event in the class file with the metadata keyword, the compiler Event ignores the event during compilation, and Flex ignores this event triggered by the component during runtime.
  • Page 64 Option Type Description environment String (Optional) Notes which inspectable properties should not be allowed ), which are used only for Flash ( ), and which are used none Flash only by Flex and not Flash ( MXML String (Optional) Indicates that the property holds a value with a file path. format Number (Optional) Defines the default index of a List value.
  • Page 65 metadata keyword has the following syntax: InspectableList [InspectableList("attribute1"[,...])] keyword must immediately precede the class definition because it applies InspectableList to the entire class and not individual members of the class. The following example allows the properties to be displayed in the flavorStr colorStr Property inspector, but excludes other inspectable properties (such as...
  • Page 66 Style metadata keyword describes a style property allowed for the component. The Style Style metadata keyword has the following syntax: [Style(name=style_name[,option=value,...])] The following table describes the options for the metadata keyword: Style Option Type Description String (Required) The name of the style. name String The type of data.
  • Page 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 dispatcher-listener model based on the DOM Level 3 proposal for event architectures.
  • Page 68 Event 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 is changed, and call one of the three invalidation methods.
  • Page 69: Skinning Custom Controls

    invalidate() Indicates that just the visuals for the object have changed, but size and position of subobjects have not changed. This method calls the method. draw() invalidateProperties() Indicates that you have changed properties. This method calls the method. commitProperties() You should call the method infrequently because it measures and redraws invalidateSize() everything on the screen, and this can be an expensive action.
  • Page 70: Adding Styles

    In some cases, you must call the method after changing skin properties. This invalidate() depends on where you set the skin. If you set it prior to the method, the layoutChildren() call in that method takes care of it for you. But if you set skin properties late in the invalidate() component instantiation life cycle, you might have to call the method again to...
  • Page 71: Making Components Accessible

    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 description of the material on the screen. When you create a component, you can include ActionScript that enables the component and a screen reader to communicate.
  • Page 72: Best Practices When Designing A Component

    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 keyword outside the class definition in the tiptext component’s ActionScript class file.
  • Page 73: Using The Modaltext Example

    • Always implement an method and call the method, but otherwise keep init() super.init() the component as lightweight as possible. • Use the methods to invoke the method invalidate() invalidateStyle() draw() instead of calling the method explicitly. draw() Using the ModalText example The following code example implements the class definition for the ModalText component.
  • Page 74 // 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 optional if you do not want to allow skinning. var modeUpSkinName:String = "ModalUpSkin";...
  • Page 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. function draw():Void clear();...
  • Page 76: Troubleshooting

    The following is an example MXML file that instantiates the ModalText control and sets the property to labelPlacement "left" <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns=”*” width="800" height="400"> <ModalText labelPlacement="left"/> </mx:Application> Troubleshooting This section describes some common problems and their solutions when creating components for Flex in Flash.
  • Page 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 in the metadata. The Inspectable metadata syntax is not checked, so ensure that there are no misspellings or syntax errors. Also be sure that it is not private.
  • Page 78 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 properties are _measuredPreferredWidth _measuredPreferredHeight nonzero. If they are zero, ensure that you implemented the method correctly.
  • Page 79: Index

    INDEX creating SWC files 18 event metadata 68 accessibility, for custom components 71 extending a class 49 ActionScript process for writing ActionScript 47 classpath in Flash 9 selecting a class name 50 writing for a new component 46, 47 selecting a symbol name 50 applyProperties 52 using metadata statements 59 AS 2.0 Class option, setting 25, 26, 28, 50...
  • Page 80 Edit Symbol mode 12 layers, symbols 13 editing symbols, for components 13 layoutChildren() method 57 Effect metadata keyword 60, 62 life cycle of components 51 effects, custom components 62 linkage identifier 13 enableAccessibility() method 71 Live Preview SWF files 17 Event metadata keyword 60, 62 events adding 67...
  • Page 81 redraw() method 58 UIComponent class resizing custom components 56 compared to UIObject class 49 description 48 UIObject class description 48 usability, custom components 71 scope, custom components 50 screen readers, accessibility in custom components 71 setStyle() method 70 setters, defining for custom components 31 variables, custom components 30 skinning custom components 69 versioning 72...
  • Page 82 Index...

This manual is also suitable for:

Flex

Table of Contents