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?
   

Working With Data in Flex: Using Cursor

Collections have ability to manipulate and sort data. This uses the concept of "cursor". All classes that implement ICursorView interface have the functionality. Eliminates need of complicated loops.

ArrayCollection implements ICursorView. Before we can use a cursor on it, we need to sort it. For this we use Sort and SortField classes and sort property of the collection.eg:

var cursor:IViewCursor = myArrayCollection.createCursor();
var sort1:Sort = new Sort();
var sortField1:SortField = new SortField("fieldToUse1");
var sortField2:SortField = new SortField("fieldToUse2",false,true,true);
sort1.fields=new Array(sortField1,sortField2);
myArrayCollection.sort = sort1;
myArrayCollection.refresh();

First we make a new instance of Sort. Then we need to make sort fields for the sort ie the property by which the whole collection should be sorted. SortField has one mandatory and three optional parameters with default value of false. First is name of property on which to sort. Second if sort should be case sensitive. Third if it should be descending sort. Fourth if it should be a numeric sort. A Sort can have several fields given to it in an Array. It uses them in the order to sort. In this case it would first sort by field1 and then by field2. Then this sort is given to the collection and refresh method called to sort.

From this point we can various methods on the cursor. The cursor will find using the fields specified for sorting. eg. cursor.findFirst(obj); will see if the obj Object already exists in myArrayCollection and will return true or false accordingly. The search will happen using the sortfield ie field of the Object will be matched with those in the list. We also have findLast and findAny methods. cursor.current gives the current object being pointed to. Dont forget to cast the object obtained. Finally there is the remove() method to remove the object to which the cursor is pointing to.

Questions:

1. How do you sort/manipulate data in flex collections?
2. With an example illustrate how you would sort a collection?
3. How would you ensure that a field is used to sort the collection is case insensitive, ascending and numeric?
4. What is the use of a cursor?
   

Normal -> AJAX -> AJAJ -> AJAJS

The internet world is moving towards a rich and fast user experience at a very rapid speed. AJAX is contributing majorly in this direction.
AJAX [Asynchronous Javascript And XML] is not a technology, it is a concept built on the existing technology provided by major webbrowsers.
The native XMLHttpRequest object or the Microsoft.XMLHTTP ActiveXObject enables the use of AJAX. Using one of these [as the case may be] objects, the javascript code in a webpage can asynchronously send the HTTP's GET/POST request to a webserver. Javascript can be further used to display the responseText/responseXML anywhere on the existing webpage. This way some text [or image or any other HTML object for that matter] can be changed on the existing webpage without reloading the whole page.
Gmail, Orkut, Google Suggest and many other existing and upcoming sites use this concept extensively.
You can find a detailed explanation and examples of how to implement AJAX in your applications here.

AJAX requires the response from the webserver to be in XML format. To further improve the performance of the application, XML can be replaced by something light in weight. JSON (JavaScript Object Notation) provides a fat free notation of JavaScript objects. AJAJ (Asynchronous Javascript And JSON) does exactly this. By the use of AJAJ you may not have to fetch/parse the responseXML of the HTTP object to extrace the relevant info. The responseText can be directly loaded in the JavaScript variables. The official JSON website demonstrates this with beautiful examples.
There are 2 benifits of using AJAJ over AJAX:
1. JSON is lighter that XML.
2. You do not have to parse JSON on the client side to initialize JS variables, unlike XML.

Going a step further, we may even replace the JSON of AJAJ with JavaScript. I call it AJAJS [Asynchronous JavaScript And JavaScript]. Insead of responding with the responseXML or a JSON in the responseText, the server might respond with a javascript code in the responseText. And on the client side, you may use the JavaScript eval() function to execute the responseText. So now the responseText can even be a function call.
Eq:
suppose http.responseText = "showMessage('From: chhabra.kapil@naukri.com', 'Subject: Hey!', 'Body: How do you do, buddy! ...')";
Now suppose that showMessage is a function in your javascript that accepts 3 parameters to display an email mesage on the page, you may just
eval(http.responseText)
in your client side JS code.

Working With Data in Flex-2

When retrieving data, one needs to know the structure of XML being fetched. In order to form a collection out of the same on needs to point to the repeating structure. For eg. in the following XML:
<parent>
<child>
<name>child1</name>
<id>0</id>
</child>
<child>
<name>child2</name>
<id>1</id>
</child>
<child>
<name>child3</name>
<id>2</id>
</child>
<child>
<name>child4</name>
<id>3</id>
</child>
</parent>
we would have some function:

[Bindable]
private var resultList:ArrayCollection=new ArrayCollection();

public function getResult(event:ResultEvent):void{
resultList = event.result.parent.child;
}

In this case child is the repeating unit.
When using a list-based control we could directly specify the data from this xml as follows:
<mx:List id="id" rowCount="3" dataProvider="{resultList}" labelField="name"/>
Note that for labelField we have directly specified the name of the node to be used.

The actual call will happen only when the send method is invoked using the id given to HTTPService class. It is prudent to call it on creationComplete event of application if data is to be used application wide. Else on creationComplete of the specific ui objects.

Always use collections instead of arrays for data-binding. Much more useful. By default complex data-structure is returned as an ArrayCollection. Multiple control enable display datastructures using the dataProvider property. List-based controls (List,Tree,DataGrid,TileList,ComboBox) use this property for sure. dataProvider control have a lot of advantage in the sense they are dynamic and can be used to populate multiple controls. UI control data-binding does not happen with AS2.0 Array. You can pass the array to creation constructor of a collection to form a collection with the array elements.

Questions:

1. What is the advantage of using collections instead of arrays for data-binding?
2. Explain usage of HTTPService with an example.
3. When does the call to the URL mentioned in HTTPService happen?

Working With Data in Flex : Using HTTPService

<mx:Model> tag allows you to build a client-side data-model. AS can access it in id.tagName format. When using databinding in MXML, it is indicated by {}. You can either type the tags or specify an external file. Useful to embed data that will not change (like options in option box/label text). Also useful for applications that need data offline. However this data is not typed: can result in poor performance and severly limit error trapping. It is just a simple substitute for server-side data. Can be addressed by using AS class for client side data-structure. Another reason that it is a bad idea is because it embeds XML into the swf. Besides increasing the size it also means that we need to recompile the swf every time we change the XML. A better option will be to pick the XML at runtime using the HTTPService class. It will retrieve XML using HTTP/HTTPS protocol by making a GET or POST request.

HTTPService class can be used to make asychronous calls. send() method of the object is used to send the request. After data has been received, result event (ResultEvent) is broadcast. The result is stored in lastResult property. A resultFormat can be specified or Flex will parse it approproately. Format can be array, e4x, flashvars, object, text or xml.

Flex gives the flexibility to convert to native XML object (E4X) or to directly convert into a object(like ArrayCollection, XMLListCollection).

For automatic conversion, we will have a tag similar to this in the MXML:
<mx:HTTPService id="serviceId" url="http://www.myUrl.com/myXml.xml" result="handlingFunc(event)" fault="handleFault(event)"/>

Use fault event to handle errors. The event in this case will be FaultEvent and not ResultEvent

Questions:

1. What are the advantages and disadvantages of using a Model tag in flex?
2. How can you avoid using a Model tag?
3. Describe in brief how HTTPService class works.
4. What are possible result formats for HTTPService?
5. What are the advantages of using HTTPService?

Sample MXML would make sense after a few more writings in this series. This is a very important feature in flex and well worth the time spent on it :) !

Road To Flex-4

• All tags added to MXML represent an object
• creationComplete is a system event, dispatched by flex components after being screen rendered. Application dispatches it after all components drawn and individual components dispatch too.
• [Bindable] metadata tag, when specified in front of the class keyword, means that every property in the class can be bound to controls or other datastructures. We can also specify individual properties as bindable. Allows changes to be reflected from source to destination.
• A class constructor is defined using function keyword followed by the name of the class
• Event class holds a lot of useful information about the event generated. currentTarget property refers to the element which generated the event. type property tells about the event type.

Questions that can be asked:

1. How can we find out if a ui component has been rendered completely or not in flex?
2. What is the use of Bindable tag?
3. How do you define a class constructor in AS?

Road To Flex-3

• To control focus in a form use FocusManager class.
• <mx:CheckBox> is a regular ui component. selected property determines if checked.
• <mx:Script> tag to write AS. functions defined can be called by name in control actions (like click for Button). Script written as is between <![CDATA[]]>
• To display an image we use an Image control. ID property can be used by actionscript to reference the Image class. Scale content property if set to true scales image to container size. Embed directive embeds the image into the swf. eg: source="@Embed('assets/myPic.jpg')". mouseOver/ mouseOut property can be used to change current state.
• Label control allows you to display a single line of text
• Text control allows you to display multiple lines of text
• <mx:Spacer> tag to add space between two controls. Specify width.
• <mx:DateField> for date based input
• All radio buttons must belong to a group. data property helps determine which btn selected in a group.

Questions:

1. Name some common UI controls in flex.
2. What can you do to control focus in a form?
3. How can you ensure that a checkbox componenet is selected on creation?
4. How can you write an actionscript in an MXML?
5. How can you prevent an image in an image component from scaling?
6. What effect will an Embed command have on an Image component?
7. Which component will you use for a date-based input?

Sample MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

private var categories:ArrayCollection = new ArrayCollection();

private function myFunction():void{
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:LinkButton label="Default State" click="this.currentState=''"/>
<mx:LinkButton label="Change State" click="this.currentState='state1'"/>
<mx:Spacer width="100%"/>
<mx:Label text="Date Field"/>
<mx:DateField id="myDate"/>
<mx:RadioButtonGroup id="radioGrp"/>
<mx:RadioButton id="r1"
groupName="radioGrp"
label="Option 1"
data="1"
selected="true"/>
<mx:RadioButton id="r2"
groupName="radioGrp"
label="Option 2"
data="2"/>
</mx:ApplicationControlBar>
<mx:states>
<mx:State name="state1">
<mx:SetProperty target="{mainPanel}" name="width" value="0"/>
<mx:SetProperty target="{mainPanel}" name="height" value="0"/>
</mx:State>
</mx:states>
<mx:Panel id="mainPanel" title="My Panel" height="100%" width="100%">
</mx:Panel>
</mx:Application>

Flex Problems September 2007

Just archiving the flex problems I faced and the solutions that helped me. Will have one of these per month depending on whether I find a problem or not :p.

Problem: This message comes in debug mode: "Installed Flash Player is Not a Debugger. Flex Builder cannot locate the required debug version of the Flash Player. You may need to install the debug version of the Flash Player 9.0 or reinstall Flex Builder. Do you want to try to debug with the current version?"

Solution: Visit this link

The Road to Flex-2

• All constraints are set relative to edges of a Canvas container (or those that can act as a canvas container like Application, Panel). They cannot be set relative to other controls or containers
• Constraints help in controlling the view when window size changes
  
• View state is one of the several views that you define for an application or a custom component. Every MXML page has at least one state, referred to as the base view state.
  

• Each MXML page has a property called currentState that can be used to control which state of application to show to the user at any given time.
• Setting currentState to blank string resets app to initial state
• Forms are needed to collect info from users. In flex form containers can designate fields as optional or required, handle error messages and do validations. Form container uses <mx:Form>, <mx:FormHeading>, <mx:FormItem>. <mx:Form> is outermost tag and always arranges children in vertical fashion and left aligns them. We can have multiple heads. Form heading enable to specify label for a group of form items. Form item will automatically supply one label control. Other controls are added within tags and follow the label. By default all controls laid vertically right to the label. To change one needs to specify 'direction' property.

Questions:

1. How are view constraints set in Flex?
   
2. What is the use of having such constraints?
3. What is the use of view states?
4. What is the use of the property currentState?
   
5. What will happen if the property currentState is set to a blank string?
6. What is the use of forms in flex?
7. How many heads/headings can a form have?
8. What is the default layout for controls in a form? How can that be changed?
   

A sample MXML showing use of forms:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Form>
<mx:FormHeading label="Form Heading"/>
<mx:FormItem label="Item1 Name">
<mx:TextInput id="item1Txt" text=""/>
</mx:FormItem>
<mx:FormItem label="Item2 Name">
<mx:TextInput id="item2Txt" text=""/>
</mx:FormItem>
<mx:FormItem label="Item3 CB">
<mx:CheckBox id="cb1" selected="true"/>
</mx:FormItem>
<mx:FormItem>
<mx:HBox>
<mx:Button label="Save"/>
<mx:Button label="Cancel"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:Application>