Datasets: Using Repeater

We can loop over a data set in MXML using a Repeater component. General syntax for Repeater is:

<mx:Repeater id="myRepeater" dataProvider="{someColl}"> </mx:Repeater>

It will loop once for each object in the data set. currentItem property is reference data item being processed. currentIndex property is a zero-based counter indicating position of the current item in the data set. But these will be useful only during looping.

After the looping is finished we need to get data from the items that may have been created dynamically inside the Repeater. For this Repeater has getRepeaterItem() method that returns the item in dataProvider property that was used to make the item as an Object type. This can be used on the appropriate event (say click). The code would look like:

<mx:Repeater id="myRepeater" dataProvider="{someColl}"> <mx:RadioButton label="{myRepeater.currentItem.name}" click="someFunc(event.target.getRepeaterItem())"/>
</mx:Repeater>

The properties of the object this obtained can be used as desired.

Another issue is addressing the components created using Repeater. You give an id in the loop. Flex will create an array of the items created by the name of the id. Using the array index individual items may be accessed. The code

<mx:Repeater id="myRepeater" dataProvider="{someColl}"> <mx:RadioButton label="{myRepeater.currentItem.name}" id="myrb" click="someFunc(event.target.getRepeaterItem())"/>
</mx:Repeater>

will create array myrb. Individual information may be accessed using index as myrb[0].label

TileList control instantiates objects when they are displayed whereas a Repeater inside a Tile container instantiates all the objects in the entire dataset, whether they are initially displayed or not. Depending on size of data, this may delay rendering on the flash player. However scrolling will be better once the page loads in this case as everything is there. If dataset is small, difference will not be noticable. But for bigger sets one has to think and decide.

Q&A

1. Why would you use a Repeater component?
2. How can you get data from the items that may have been created dynamically inside a Repeater?
3. Ho do you address the components created using a Repeater?
4. What is the alternative to using Repeater?
5. What is the difference between using a TileList control and a Repeater? How will you decide when to use what?

Flex Components: Understanding Containers

Flex containers consist of two distinct sections: layout area where the children are drawn and chrome area which has borders, backgrounds, margins, scrollbars,headers, footers etc. In Panel class title bar is implemented as chrome.

The base class flash.display.DisplayObjectContainer does not make any distinction between child components and chrome. But the mx.core.Container class (superclass of all Flex containers) overrides several methods including getChildAt() and numChildren() to give the appearance that the container's only children are child components. To gain access to all elements we need to use the rawChildren property. In panel anything added using addChild() will be rendered below title bar. To add elements to title bar you will need to use this property. eg: rawChildren.addChild(myButton);

However this will only add but not size/position the children in the chrome. To do that we need to override the updatedDisplayList() method. This is called everytime the component is redrawn. Be sure to call super.updatedDisplayList() so as the correct rendering happens for the rest of the component. The method is passed two attributes, unscaledHeight and unscaledWidth, which are the actual height and width of component regardless of any scaling.

Q&A

1. What do you understand by chrome?
2. How can you customize the title bar of a Panel class?

DataSets In Flex: Basic

There are two approaches to dealing with data sets:
1.Using a Repeater in MXML
2.Use data set as a dataProvider

List based controls enable user to scroll through a list of items and select one or more items from the list. All Flex-based list components inherit from ListBase class. They include:
DataGrid, HorizontalList, List, ComboBox, TileList, Tree
They all have the dataProvider property

The property displayed by the list can be specified in labelField property. This is ok if we wish to use one property as label. If we wish to combine various properties, we have to write a function and assign it to labelFunction property. eg:
this function
private function multiPropComboLabelFunc(item:Object):String{
return "label for"+item.name+","+item.id;
}
may be given as
<mx:HorizontalList dataProvider="{myCol}" labelFunction="multiPropComboLabelFunc"/>

Notice that even when there is a parameter to the function in script, the same need not be given in the tag. Flex automatically passes the correct object.

By default HorizontalList and TileList permit only text to be displayed. This can be overridden using the itemRenderer property. itemRenderer can be an mxml component made to customize the display as desired. When you specify the file to be used as itemRenderer, you do not specify the extension (which can be .mxml or .as). The data passed to the renderer will be in an object called "data".

Questions:

1. How will you determine what is displayed by a list control?
2. If you want to display more that text in a list based control, how can you do it?
   

Getting A Screenshot/ Screengrab in Flex

While developing your RIA you may, like me, feel a need for taking a screen shot. This you may want to use in your reports or for a static page.

Solution

Event Bubbling in Flex

Event target may or may not be visible on screen. If not visible (like HTTPService), flash player dispatches event directly to the target. If visible, event flow is divided in three phases:
1. capture phase: flowing from base application to target
2. target phase
3. bubble phase: flow from target to base (reverse of 1)

This design enables using event listeners on any node in the flow. Was not there before Flex2. Due to this an even in the child can be heard by parent. All instances of the Event class have a bubbles property which indicates if event object will participate in bubbling phase. By default false for newly built events; Event class takes it as a second optional parameter set to false by default. Default true for some built in events like click.

You do not need to handle a bubbling event in between but you need to have it declared in the metadata so that the parent component may be able to hear it.

Remember that only custom events need to be enumerated explicitly with a metadata tag. But if they are of base Event type, we can simply mention them after import statements but before class declaration using [Event(name="someEvent")] metadata tag.

Questions:

1. Explain event bubbling in flex.
2. What are the advantages of event bubbling?
3. How do we know if an event object will participate in the bubbling phase?
4. Explain event flow in flex.
   

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.