Add an Event Listener in MXML

Flex components dispatch events whenever an action occurs, such as a user clicking a button, the selected item in a combo box changing, or data loading. To listen to these events being broadcast, simply add a reference to a function that will handle the event. For example:

Code View:




private function buttonClick():void
{
trace(" Button has been clicked ");
}

]]>








Adding click="buttonClick()" invokes the function buttonClick whenever the button dispatches a click event.

You can also pass the event object itself to the function. Every time a component dispatches an event, the component sends an object of type Event that any object listening to the event can receive. For example:

Code View:




private function buttonClick(event:Event):void
{
trace(event.target.id);
if(event.target.id == "buttonOne")
{
trace(" button one was clicked")
}
else
{
trace(" button two was clicked")
}
}

]]>


label="Click Me One" id="buttonOne"/>






By telling the event listener to listen for an object of type Event, you can send the event to the event listener and then respond to that event in different ways depending on specified criteria. In this example, the response depends on where the event originated.

The event object and the event dispatching system in Flex are some of the most important things to understand. All events contain a type that is used when the event is being listened for; if an event is of type click, then the event-listening method will be added to the click event of the child

Metadata tags

In Flex,there are 12 Metadata tags available:

Metadata tags provide information to the Flex compiler that describes how your components are used in a Flex application. For example, you might create a component that defines a new event. To make that event known to the Flex compiler so that you can reference it in MXML, you insert the [Event] metadata tag into your component, as the following ActionScript class definition shows:

[Event(name="enableChanged", type="flash.events.Event")]
class ModalText extends TextArea {
...
}


In this example, the [Event] metadata tag specifies the event name and the class that defines the type of the event object dispatched by the event. After you identify the event to the Flex compiler, you can reference it in MXML, as the following example shows:

About DataBinding

Data binding is the process of tying the data in one object to another object. It provides a convenient way to pass data between the different layers of the application. Data binding requires a source property, a destination property, and a triggering event that indicates when to copy the data from the source to the destination. An object dispatches the triggering event when the source property changes.

Adobe Flex provides three ways to specify data binding: the curly braces ({}) syntax in MXML, the tag in MXML, and the BindingUtils methods in ActionScript. The following example uses the curly braces ({}) syntax to show a Text control that gets its data from a TextInput control's text property:

creating TreeControl

You define a Tree control in MXML by using the tag. The Tree class extends the List class and Tree controls take all of the properties and methods of the List control. For more information about using the List control, see List control. Specify an id value if you intend to refer to a control elsewhere in your MXML, either in another tag or in an ActionScript block.

The Tree control normally gets its data from a hierarchical data provider, such as an XML structure. If the Tree represents dynamically changing data, you should use a collection, such as the standard ArrayCollection or XMLListCollection object, as the data provider.

The Tree control uses a data descriptor to parse and manipulate the data provider content. By default, the Tree control uses a DefaultDataDescriptor instance, but you can create your own class and specify it in the Tree control's dataDescriptor property.

The DefaultDataDescriptor class supports the following types of data:

Collections
A collection implementation, such as an XMLListCollection or ArrayCollection object. The DefaultDataDescriptor class includes code to handle collections efficiently. Always use a collection as the data provider if the data in the menu changes dynamically; otherwise the Tree control might display obsolete data.


XML
A string containing valid XML text, or any of the following objects containing valid E4X format XML data: or compile-time tag, or an XML or XMLList object.


Other objects
An array of items, or an object that contains an array of items, where a node's children are contained in an item named children.



The DefaultDataDescriptor class also supports using an tag as a data provider for a menu, but all leaf nodes must have the name children; As a general rule, it is a better programming practice to use the or tags when you need a Tree data provider that uses binding.

For more information on hierarchical objects and data descriptors, including a detailed description of the formats supported by the DefaultDataDescriptor, see Data descriptors and hierarchical data structure.

Tree Control

The Tree control lets a user view hierarchical data arranged as an expandable tree.

For complete reference information, see the Adobe Flex Language Reference. For information on hierarchical data providers, see Hierarchical data objects.

For information on the following topics, which are often important for using advanced Tree controls, see:

How to format the information in each Tree node and control how users enter data in the nodes; see Using Item Renderers and Item Editors.
How to drag objects to and from the Tree control; see Using Drag and Drop.
About Tree controls
A Tree control is a hierarchical structure of branch and leaf nodes. Each item in a tree is called a node and can be either a leaf or a branch. A branch node can contain leaf or branch nodes, or can be empty (have no children). A leaf node is an end point in the tree.

By default, a leaf is represented by a text label beside a file icon and a branch is represented by a text label beside a folder icon with a disclosure triangle that a user can open to expose children.

DataGrid Control

The DataGrid control is a list that can display more than one column of data. It is a formatted table of data that lets you set editable table cells, and is the foundation of many data-driven applications.

For information on the following topics, which are often important for creating advanced data grid controls, see:

How to format the information in each DataGrid cell and control how users enter data in the cells; see Using Item Renderers and Item Editors.
How to drag objects to and from the data grid; see Using Drag and Drop.
For complete reference information, see the Adobe Flex Language Reference.

About the DataGrid control

The DataGrid control provides the following features:

Resizable, sortable, and customizable column layouts, including hidable columns
Optional customizable column and row headers, including optionally wrapping header text
Columns that the user can resize and reorder at run time
Selection events
Ability to use a custom item renderer for any column
Support for paging through data
Locked rows and columns that do not scroll

Creating HorizontalList Control

You use the tag to define a HorizontalList control. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

The HorizontalList control shares many properties and methods with the List control; see List control for information on how to use several of these shared properties. The HorizontalList control uses a list-based data provider. For more information, see Using Data Providers and Collections.

You specify the data for a HorizontalList control by using the dataProvider property of the tag

HorizontalList Control

The HorizontalList control displays a horizontal list of items. The HorizontalList control is particularly useful in combination with a custom item renderer for displaying a list of images and other data. For more information about custom item renderers, see Using Item Renderers and Item Editors.

For complete reference information, see HorizontalList in the Adobe Flex Language Reference.

About HorizontaList controls


The contents of a HorizontalList control can look very similar to the contents of an HBox container in which a Repeater object repeats components. However, performance of a HorizontalList control can be better than the combination of an HBox container and a Repeater object because the HorizontalList control only instantiates the objects that fit in its display area. Scrolling in a HorizontalList can be slower than it is when using a Repeater object. For more information about the Repeater object, see Dynamically Repeating Controls and Containers.

The HorizontalList control always displays items from left to right. The control usually contains a horizontal scroll bar, which lets users access all items in the list. An optional vertical scroll bar lets users view items when the full height of the list items is unlikely to fit. The user can select one or more items from the list, depending on the value of the allowMultipleSelection property.

TileList

The Tile List control displays a number of items laid out in tiles.

* The items are tiled in vertical columns or horizontal rows.
* Specify the size of the tiles by using the rowHeight or columnWidth properties
* The default item renderer displays text and an icon
* Custom item renderers can be used for more complex item displays
* The user can interact with the items being displayed

Recycling Renderers

One thing many people try to do is access an itemRenderer from outside of the list. For example, you might want to make the cell in the fourth column of the fifth row in a DataGrid turn green because you've just received new data from the server. Getting that itemRenderer instance and modifying it externally would be a huge breech of the Flex framework and component model.

To understand itemRenderers, you have to understand why they are what they are and what our intentions were when we designed them. By the way, when I say "we," I really mean the Adobe Flex engineering team. I had nothing to do with it. Anyway, suppose you have 1,000 records you want to show. If you think the list control creates 1,000 itemRenderers, you are incorrect. If the list is showing only 10 rows, the list creates about 12 itemRenderers—enough to show every visible row, plus a couple for buffering and performance reasons. The list initially shows rows 1–10. When the user scrolls the list, it may now be showing rows 3–12. But those same 12 itemRenderers are still there: no new itemRenderers are created, even after the list scrolls.

ItemRenderer with List

Flex provides a number of controls to display large amounts data in a variety of ways. There is the List control itself, the DataGrid, the Tree, and the visualization classes, which include the charts and the AdvancedDataGrid.

By default, the Flex list controls display the data they are given as simple text.

But Flex is capable of much more, and the list controls provide a way to customize their content using itemRenderers.
By giving you complete control over the content of each row (or cell) of a list using itemRenderers, Flex enables you to write more engaging,

ItemRenderer

Hi

Today i learned about,how to creating item renderer with list,tilelist,horizontallist,datagrid,tree.

With Regards
sivakumar manam

ItemRender

In Flex, there are several controls that represent a list of items.
These controls let the application user scroll through the item list and select one or more items from the list.All Flex list components are derived from the List Base class, and include the following controls:
Data Grid
Horizontal List
List
Menu
Menu Bar
Tile List and Tree

In Flex, the Item Renderer will use in that controls only.
The main advantage is that One Control will use with in another control using Item Renderer

DataGrid

Using Data-Driven Controls
Several Adobe® Flex™ controls take input from a data provider, an object that contains data. For example, a Tree control reads data from a data provider to define the structure of the tree and any associated data assigned to each tree node.

Several of the controls that use a data provider let you visualize complex data, and there are different ways to populate these controls by using a data provider. The following topics also provide information on data providers and controls that use data providers:

Using Data Providers and Collections contains details on data providers and how to use collections as data providers.
Using Menu-Based Controls contains information on using Menu, MenuBar, and PopUpMenuButton controls.
Using the AdvancedDataGrid Control contains information on using the AdvancedDataGrid control, which expands on the functionality of the standard DataGrid control to add data visualization features to your Adobe Flex application.
Creating OLAP Data Grids contains information on using the OLAPDataGrid control, which lets you aggregate large amounts of data for easy display and interpretation.
List control
HorizontalList control
TileList control
ComboBox control
DataGrid control
Tree control