Monday, October 8, 2007

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?

Thursday, October 4, 2007

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

Tuesday, October 2, 2007

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.