Flex Components: Using AS3.0 To Build Components

Generally we build custom components using MXML. If more flexibility is needed then AS3.0 should be used. More powerful.

To create a component decide which class to extend, methods to implement/override and properties. Take care that you will need to declare any events that the component will dispatch. For visual components we will need to override createChildren() and updateDisplayList() methods as they are needed by flex to create children.

To embed a resource into the component use [Embed("../pathToAsset/asset.jpg")] metadata tag and follow with declaration of a property name to be used to hold reference to the same data-typed to Class.

On the backend when we create a component, the initialization sequence is as follows:
Constructor
createChildren()
commitProperties()
measure()
updateDisplayList()

In most cases we will need to override createChildren() and updateDisplayList().

commitProperties() override needed if we need to set properties dependent on other properties already set. Called after all children have been created.

measure() override needed if we want to manually calculate height and width of all the children created. Used to contain new containers with unique layout rules.

Children can be created and added to a component using addChild() and addChildAt() methods

Questions:

1. How will you embed a resource into a component?
2. What is the initialization sequence when a component is created (key methods)?
3. In the sequence in Q2, which methods will you need to override? Explain.
4. How can you create children for a component?
   

Flex Events: Introduction

Using events enables a loosely coupled architecture. To broadcast an event from a component you need to use the dispatchEvent method. This method is defined in the flash.events.EventDispatcher class. Observer pattern.

You need to declare the events that may be dispatched by a component. A component may dispatch any event declared by any of the superclasses

In Flex events can be declared using metadata tag [Event], which is used to declare the event publicly so that the MXML compiler recognizes it.
<mx:Metadata>
[Event(name="eventName",type="flash.events.Event")]
</mx:Metadata>
We can specify type. If not mentioned, default is flash.events.Event
The name used here is used to initialize the event type parameter before it is dispatched i.e.
var e:Event = new Event("eventName");

Now when this component is initialized, we can use the event name like any other attribute and specify a function to call
<m:CustomComponent id="myComp" eventName="someLocalFunction()"/>

Many times we may also need to pass around data with the events. Cannot be done with the basic flash.events.Event class. But we can create an event subclass. You will generally need to override clone method of the Event class

Summarizing, we will have these elements in event handling:
1. The event class: you can extend the Event class. clone method is overridden then and the data that we expect the event to carry is member var
2. Event dispatching component: Generally a UI component will dispatch the event after creating in at the appropriate function. The component declares all the events it can dispatch.
3. The listener/event target component/app: This is generally the parent/top level component that uses the event dispatching component. If it is interested in any event dispatched by it, it handle it by listening to it.

Questions

1. Why should you use events?
2. What design pattern does events mechanism employ?
3. How will you declare an event?
4. What is default event type?
5. Why would you use a custom event?
6. With a small example and code explain how events work in flex.

Road To Flex-7

At runtime you can add a property to an Object as:
var myObj:Object = new Object();
myObj.someID=new Array();
Like javascript...
If you are using e4x notation to get the property name dynamically, you will have to enclose it in square brackets ie
myObj[c.@someID]=new Array();

implementing toString method in the AS classes will help in tracing.

to remove extra tabs select all and use Shift+Tab key combo in the eclipse based flex editor

Use source property of the Script tag to specify external script.

In AS3.0 we can override functions. For this they should have the same access specifier (public/private), have same number & type of parameters in the same order and should be explicitly preceded by the keyword override.

<mx:metadata> tag can be used to declare metadata

Questions:

1. How do you override functions in AS3.0?
2. Which tag will you use to declare metadata?
3. How will you specify an external file for the Script tag?
4. How will you add a property to an object at runtime?
   

Flex Components: Introduction

Why do we need to make components? Helps organize the code, make it modular. The aim most of the times will be to either add functionality to a pre-defined component or group numerous components together.

The general approach is
1. Plan what you want your component will be, what will it do and where it will lie in the hierarchy. Choose an appropriate name.
2. First line will be the XML DTD we are using with the main application. No application tags as one app can have only one.
3. As the first MXML tag we insert the root tag of our component
4. In tag body add the functionality
5. In the file where we want to use the component we add an XML namespace so as we can access the component
6. Instantiate the component as any predefined component.
eg: Lets say we want a component to extend a TitleWindow, skeleton may look like:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
</mx:TitleWindow>
Say we create it at location ui.popups by name DataPopup. We will add namespace in Application tag in the main file as: xmlns:p="ui.popups.*"
and then instantiate in the body at appropriate place as:
<p:DataPopup/>
All the properties that we put in the script element in component can be instantiated as properties in the instantiation like property of any other component

UIComponent is the lightest-weight component that you can use when creating an MXML component. It is ideal to use for root tag of non-visual data manager type of components.

You cannot assign id to root tag of a component

It is a good idea to bundle a few UI components in a canvas tag to control mouse events on all of them. Combine it with currentState to get appropriate changes in the ui, including mouse hovers.

The inheritance hierarchy of UIComponent class:
mx.core.UIComponent extends
flash.display.Sprite extends
flash.display.DisplayObjectContainer extends
flash.display.InteractiveObject extends
flash.events.EventDispatcher (superclass of all flex components)

Questions:

1. Why do we need components?
2. Explain in brief how you would go about making a component?
3. What base component would you use to make a non-visual component?
4. What is the inheritance hierarchy of UIComponent class?
   

Road To Flex-6

for loop has two flavors in AS3.0. One is the regular vanilla: for(var i:int;i<somecol.length;i++){}. The other looks like this: for each(var p:Object in someCollection){}.

You can call a function from the parent MXML document as:
if(this.parentDocument.parentFunction!= null){
this.parentDocument.parentFunction(param1);
}
But this is not a good practice. Can be handled using events.
Another not so good way for a component to call a function from the top level application:
mx.core.Application.application.funcToCall(params);

Use TitleWindow class+PopUpManager class to make a modal window. TitleWindow well suited. Has a showCloseButton property.

To create a popup using PopUpManager, use PopUpManager.createPopUp(parent, popUpWinClass, isModal); This method returns IFlexDisplayObject.

Use PopUpManager.removePopUp(this); to execute the actual close ie removing the popup.

UIComponent -> Container, Button, NumericStepper, ComboBase
Container -> Box, Form
Box -> VBox, HBox
ComboBase -> ComboBox

Questions:

1. Your child component need to call a function from the parent component. How will you handle it?
2. A component needs to call a function from the top level application. How can this be done?
3. How would you work on making a popup?
4. What is syntax for the for loop in AS3.0?
   

Road To Flex-5

• addItem() method of the ArrayCollection does the same thing as push() method of Array
• Making an XMLListCollection in MXML pointing to HTTPService data <mx:XMLListCollection id="myList" source="{serviceId.lastResult.family}"/>
• XMLListCollection is very much like ArrayCollection except that it is used for XML data. It is a best practice to bind to an XMLListCollection instead of the native XML object. Useful to use it for Tree control.
• In AS3.0 we can specify functions with parameters and give a default value to them. Such params if lying at the end are optional while calling the function
• AS3.0 has native XML support in the form of ECMAScript for XML(E4X). E4X specs define a set of functionalities and classes for working with XML data. These are collectively called E4X.
• XML class in AS3.0 is NOT the same as XML class in AS2.0. That class has been renamed as XMLDocument.
• RichTextEditor allows user to markup the text entered into the control.
• You can use as operator to cast an object. Collection lists generally return an object type (remids me of Java in pre Java5 days) and needs to be cast. Eg. You have a ArrayCollection col1 which holds objects of type myObject. You have function which need object of this type, function func1(data:myObject): void{}. The call to this function using an item retrieved from the collection may look like this: func1(col1.getItemAt(0) as myObject). If you dont fo do that, it gives an implicit coercion error.

Questions:

1. What is the difference between XML class in AS2.0 and AS3.0?
2. When would you use a RichTextEditor?
3. Why would you use the as operator?
4. What is E4X?
   

Working With Data in Flex: E4X

When using E4X notation, root node is not used in statements.

E4X makes dealing with AS XML objects much easier and flexible. Eliminates the need to build complicated for loops to obtain data. Was not there before 3.0.

Let us see some key E4X operators

dot [.] operator allows to navigate to a particular node type. Eg:
for XML:
private var myXML:XML = new XML();
myXML=
<parent>
   <family>
      <child age="2" weight="10">
         <name>child1</name>
         <id>0</id>
      </child>
       <child age="2" weight="15">
         <name>child2</name>
         <id>1</id>
       </child>
   </family>
   <family>
      <child age="4" weight="17">
          <name>child3</name>
         <id>2</id>
       </child>
      <child age="5" weight="20">
          <name>child4</name>
         <id>3</id>
      </child>
    </family>
</parent>

now,
myXML.family.child.name
would give
<name>child1</name>
<name>child2</name>
<name>child3</name>
<name>child4</name>

parantheses [()] operator allows to get node using condition
eg:
myXML.family.child.(name="child1")
will give
<child age="2" weight="10">
    <name>child1</name>
    <id>0</id>
</child>

attribute [@] operator can be used to do the same thing using an attribute
eg:
myXML.family.child.(@age="2")
will give
<child age="2" weight="10">
    <name>child1</name>
    <id>0</id>
</child>
<child age="2" weight="15">
    <name>child2</name>
    <id>1</id>
</child>
All the nodes matching the criteria are returned

descendant accessor [..] operator allows getting any descendant, no matter how deep they are buried.
myXML..name
will give
<name>child1</name>
<name>child2</name>
<name>child3</name>
<name>child4</name>

When we want E4X format we specify resultFormat in HTTPService:
<mx:HTTPService id="serviceId" url="http://www.myUrl.com/myXml.xml" result="handlingFunc(event)" resultFormat="e4x"/>

Questions:

1. What is the advantage of using E4X?
2. In E4X explain the usage of dot [.] operator.
3. In E4X explain the usage of attribute [@] operator.
4. In E4X explain the usage of parentheses [()] operator.
5. In E4X explain the usage of descendant accessor [..] operator.
6. How will HTTPService know that the format of result returned?