Creating the Structure of the Class | Adobe Flex 2: Training from the Source

To create a component with ActionScript 3.0, you will define the component as an ActionScript class. You must decide what superclass you will use for the class. This decision will often be based on the functionality you want for your new component. In the case of the MaxRestorePanel class that you are building here, you want the general look, feel, and behavior of the Panel class, so you can use that as your superclass.

In Flex Builder 2, choose File > New > ActionScript Class. Set the package to be views, the name of the class to be MaxRestorePanel, and the superclass to be Panel. Save this file as FlexGrocer/views/MaxRestorePanel.as.

This class is created in the views directory because it is not specific to any of the three applications, but can be used by any or all of them. Panel was chosen as a superclass because the intention is to create a component that looks like a Panel, with the addition of a Button for the user to maximize the Panel, or to restore it to its original state.

After the package declaration, but before the class declaration, add imports for the flash.events.Event and mx.controls.Button classes.

The import for mx.containers.Panel was automatically added by the wizard when you chose Panel as the superclass. The completed class will need to broadcast events to let a containing MXML file know the user has requested the Panel be maximized or restored, so you will need the Event class. The button, which the user will click to change the state of the Panel, will be an instance of the mx.controls.Button class, so it also needs to be imported.

package views {    import mx.containers.Panel;    import mx.controls.Button;    import flash.events.Event;    public class MaxRestorePanel extends Panel {    } }

Inside the class definition, create a private property named state, which will hold a value representing whether the Panel is currently maximized or not. Set its default value to 0.

private var state:int = 0;

A value of 0 will indicate the Panel is in its normal state; a value of 1 will indicate that it is maximized. Your Panel will start in a normal (non-maximized) state, so the initial value is 0.

Tip

Because there will be only two states for the panel, you could use a Boolean property instead; however, in the future you might want to further extend this component with other states, such as minimized, so this is being set as an int.

Create another private property named btStateUp as an instance of the Button class.

private var btStateUp: Button;

btStateUp will be a reference to the button a user can click to request the Panel be maximized.

Create one more private property named btStateDown as an instance of the Button class.

private var btStateDown: Button;

btStateDown will be a reference to the button a user can click to request the Panel be restored.

Next, you need to embed the images that will be used for the buttons. In Lesson 4, "Using Simple Controls," you learned about the @Embed directive for embedding images from MXML. You can use the same strategy, with slightly different syntax, for embedding images in an ActionScript 3.0 class. In ActionScript 3.0, the [Embed("path to file")] metadata tag is used to embed an asset. On the line immediately following the @Embed directive, a variable should be created (of the type Class) to hold a reference to the embedded asset.

After the other property definitions, use an [Embed] metadata tag to embed upArrow.gif.

[Embed("../assets/upArrow.gif")]

When using the [Embed] metadata tag, the path to the file is relative to the component into which the asset is embedded. Many other things you do in Flex (such as defining XML namespaces) are relative to the application's root. The [Embed] tag does not follow this model; it uses a relative reference from the component that is using it.

On the next line, create a variable named buttonUpIcon of the type Class.

private var buttonUpIcon:Class;

By declaring this variable right after the [Embed] tag, the Flex compiler knows to use this variable as a reference to the embedded image.

Create another [Embed] metadata tag, this time referencing downArrow.gif. Create a variable for this asset, named buttonDownIcon of the type Class.

[Embed("../assets/downArrow.gif")] private var buttonDownIcon:Class;

At the top of the class, after the import statements but before the class definition, declare metadata tags for the Maximize and Restore events.

[Event(name="restore")] [Event(name="maximize")]

As was discussed in the previous lesson, when a component broadcasts custom events, the events should be explicitly enumerated with metadata. Because these events are both of the default flash.events.Event type, the type attribute of the [Event] metadata tag does not need to be specified.

10.

Create a new private method setState(), which takes an int as an argument and returns void. This method will take the argument and set the component instance's state property equal to the value passed in. Then it will check the value and dispatch either a maximize event or restore event, depending on whether the value is 1 or 0, respectively.

private function setState(state:int):void{    this.state=state;    if (state==0){       this.dispatchEvent(new Event('restore'));    } else {       this.dispatchEvent(new Event('maximize'));    } }

This method will dispatch the events that you defined, which gives you a single method that is solely responsible for informing any listeners that the user has clicked the Maximize or Restore buttons. When you add the buttons later in this lesson, the event handlers for each of the buttons will call this method to handle the event dispatching.

11.

Save your class file.

There is no need to test the class at this point because you haven't yet created any visual elements for your new component. At the end of the next exercise, you will have the ChartPod.mxml component use your new class.

At this point, the class definition for your MaxRestorePanel should read like this:

package views{    import mx.containers.Panel;    import mx.controls.Button;    import flash.events.Event;    [Event(name="restore")]    [Event(name="maximize")]    public class MaxRestorePanel extends Panel{       private var state:int = 0;       private var btStateUp: Button;       private var btStateDown: Button;       [Embed("../assets/upArrow.gif")]       private var buttonUpIcon:Class;       [Embed("../assets/downArrow.gif")]       private var buttonDownIcon:Class;       private function setState(state:int):void{          this.state=state;          if (state==0){             this.dispatchEvent(new Event('restore'));          } else {             this.dispatchEvent(new Event('maximize'));          }       }    } }