Introduction to Datagrids

Datagrids give largest possible options for user to interact with data. This brings performance and size overhead to be kept in mind.

Use editable property to make the grid uneditable. draggableColumns property used to enable/disable column resizing (true by default). variableRowHeight property used to tell Flex to resize row's height according to renderer. The columns for the grid can be specified within <mx:columns> tags. Useful when we want the order of columns to be different from what is received.

Each column is specified using <mx:DataGridColumn> tag. Use its dataField property to specify the field to use to populate, headerText to give column header and editable to determine if it is editable (The parent grid has to be editable for this).




<mx:DataGrid id="myGrid" editable="true" draggableColumns="false">
   <mx:columns>
      <mx:DataGridColumn dataField="field1" headerText="Field1 Data" editable="false"/>
      <mx:DataGridColumn dataField="editableField" headerText="Input"/>
   </mx:columns>
</mx:DataGrid>

Q&A

1. How can you make a DataGrid editable?
2. How do you control column resizing in a DataGrid?
3. What will you do if you want the order of columns to be different from the order of data received in a DataGrid?
4. Briefly explain the steps involved in initializing a column in a DataGrid.

And Then There Was AIR

Kapil and myself have started exploring AIR by Adobe (code-named Apollo) and, man, is it exciting or what. For more, see:

http://labs.adobe.com/technologies/air/

I will be back with more :).

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?