MACROMEDIA FLEX-CREATING ADVANCED COMPONENTS Manual
  1. Manuals
  2. Brands
  3. MACROMEDIA Manuals
  4. Software
  5. FLEX-CREATING ADVANCED COMPONENTS
  6. Manual
MACROMEDIA FLEX-CREATING ADVANCED COMPONENTS Manual

MACROMEDIA FLEX-CREATING ADVANCED COMPONENTS Manual

Creating advanced components
Hide thumbs
Table of Contents

Advertisement

Quick Links

Download this manual
Creating Advanced Components

Advertisement

Table of Contents
loading
Need help?

Need help?

Do you have a question about the FLEX-CREATING ADVANCED COMPONENTS and is the answer not in the manual?

Questions and answers

Subscribe to Our Youtube Channel

Related Manuals for MACROMEDIA FLEX-CREATING ADVANCED COMPONENTS

Summary of Contents for MACROMEDIA FLEX-CREATING ADVANCED COMPONENTS

  • Page 1 Creating Advanced Components...
  • Page 2 Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally.

  • Page 3: Table Of Contents

    CONTENTS About creating components......... . . 5 Writing the component’s ActionScript code.
  • Page 4 Contents...

  • Page 5: About Creating Components

    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.

  • Page 6: Writing The Component's Actionscript Code

    Implement the method. createChildren() Implement the method. commitProperties() Implement the method. measure() Implement the method. layoutChildren() Implement the method. draw() Add properties, methods, styles, events, and other metadata. Compile a SWC file using compc. The ordering of methods that you implement in this process mirrors that in the component instantiation life cycle.
  • Page 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 UIComponent are the base classes of the component architecture. Understanding the principles at work in these two classes is important for building components.

  • Page 8: About The Component Instantiation Life Cycle

    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 disabling. The UIComponent class inherits all the methods, properties, and events of the UIObject class.

  • Page 9: Implementing The Init() Method

    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 method when the class is created. At a minimum, the method init() init() should call the superclass’s method.

  • Page 10: Implementing The Commitproperties() Method

    Flex calculates the preferred minimum and maximum sizes. You can use the method to explicitly set the size of the component, measure() although Macromedia does not recommend doing this when developing components. Creating Advanced Components...
  • Page 11 You can set the following properties in the method. Flex calculates the values of these measure() properties, but you can override them in the method: measure() • _measuredMinWidth • _measuredMaxWidth • _measuredMinHeight • _measuredMaxHeight • _measuredPreferredWidth • _measuredPreferredHeight The properties define limits for when the object is resized. These measured properties are used for layout in containers if your component doesn’t explicitly set a preferredWidth attribute.

  • Page 12: Implementing The Layoutchildren() Method

    Each UIObject.layoutWidth UIObject.layoutHeight component should implement this method. Use the method rather than the layoutChildren() method, which is used primarily by Macromedia Flash designers to perform the same size() function. Use the properties of the child controls when changing UIObject.width UIObject.height...

  • Page 13: Defining Getters And Setters

    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 14: Embedding Assets

    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: <MyComponent prop1="3" /> To create components that take tag attributes in MXML, you define a variable with the same name in your class definition: class MyComponent extends UIComponent { var prop1:Number;...

  • Page 15: Handling Events

    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, select Export for ActionScript or place the symbols on the stage before saving the file as a SWF file.
  • Page 16 Within the body of your class definition, you then use the method to dispatch dispatchEvent() . You can then handle the event in MXML as the following example shows: myEvent <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*" > <mx:Script> <![CDATA[ function handleText(event) ]]> </mx:Script>...

  • Page 17: About Invalidation

    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: 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 19: Using The Modaltext Example

    • 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. •...
  • Page 20 [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 do this so a subclass can create a different // child instead. function createChildren():Void { if (text_mc == undefined) createClassObject(TextInput, "text_mc", 0, { preferredWidth: 80,...
  • Page 21 (evt.type = "click") { text_mc.editable = !text_mc.editable; The following is an example MXML file that instantiates the ModalText control and sets the labelPlacement property to "left" <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns=”*”> <ModalText labelPlacement="left"/> </mx:Application> Using the ModalText example...

  • Page 22: Troubleshooting

    MXML file and setting the namespace to "*" as the following example shows: <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*"> I get an error "xxx is not a valid attribute ..." when I try to use the component from MXML.
  • Page 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 linker that class A must be initialized before class B: class mx.example.A { static function foo():Number {...
  • Page 24 Creating Advanced Components...

This manual is also suitable for:

Flex

Table of Contents