Summary of the use of the Flex component project Renderer (itemrenderer)

SeriesArticleNavigation

1. Index of flex and fms3 articles
2. Free video adult chat room for air and free online remote video conferencing system (jointly created by flex and fms3 ))

 

Flex provides a large number of components for data presentation. Among them, list components are the most common and frequently used, such as ComboBox, list, tree, tilelist, and DataGrid. These components share a common feature that supports custom itemrenderer. This feature is very powerful and can help us implement many practical functions.

The itemrenderer (itemrenderer) is an important attribute of the listbase class list control. In normal work, we often customize the project Renderer to realize the special display effect of this class control.

The default project Renderer depends on the component class. The tilelist and horizontallist classes use tilelistitemrenderer; the list class uses listitemrenderer. The DataGrid class uses the datagriditemrenderer in the datagridcolumn.

What is itemrenderer?
Itemrenderer can be understood as the data representation. Specifically, it refers to the form used to display each piece of data. When using data processing components, we only need to organize the data according to a certain format, and then assign it to the components, so there is no need to worry about the rest.
Each component has a default itemrenderer, such as the list component:
The default itemrenderer of the list component is similar to the label component. Only one line of text is displayed. As shown in the right figure, the red box selects an itemrenderer.
Essentially, itemrenderer is no different from other container components. It can contain any visual elements, including text, images, and videos. It can be any visual element supported by Flex.

Customize itemrenderer
The default itemrenderer of a component is too simple. To enhance the expressiveness, you must create a personalized itemrenderer.
There are two ways to customize itemrenderer: one is embedded, directly written in the tag of the component, allCodeAll are concentrated in one mxml file; the other is to separate itemrenderer to form an mxml component or an ActionScript class.

 

As shown in the following figure, I use the custom itemrenderer OF THE tilelist control to achieve the following results:

 

Download Code:

Http://files.cnblogs.com/aierong/Air_TestWin.rar

 

 

Code Description:

First, define a mxml named itemh.

horizontalscrollpolicy = "off" verticalscrollpolicy = "off">

DATA =" {data. label} "Source =" assets \ Tx. jpg "width =" 40 "/>



source =" assets \ camera. jpg "width =" 16 "Height =" 20 "/>

</MX: hbox>

 

In the main call application:

<Mx: arraycollection id = "arrcoll_keysetup">
<Mx: Source>
<Mx: array id = "arr_keysetup">
<Mx: Object Data = "00" sel = "false" label = "AAA"/>
<Mx: Object Data = "11" sel = "false" label = "BBB"/>
<Mx: Object Data = "22" sel = "true" label = "CCC"/>
</MX: array>
</MX: Source>
</MX: arraycollection>

<Mx: tilelist id = "tlist" maxcolumns = "1"
Dataprovider = "{arrcoll_keysetup }"
Itemrenderer = "itemh"
X = "34" Y = "10" width = "148">
</MX: tilelist>

 

Assign itemh to the itemrenderer attribute of tilelist and bind the array collection class.

 

Dynamically specify itemrenderer

You can use the classfactory class to dynamically specify itemrenderer

The Code is as follows:

Private function inittilelist (): void
{
This. tlist. dataprovider = This. arrcoll_keysetup;
This. tlist. itemrenderer = new classfactory (itemh );
}

<Mx: tilelist id = "tlist" maxcolumns = "1" x = "34" Y = "10" width = "148"
Creationcomplete = "inittilelist ()">
</MX: tilelist>

 

 

You can use parentdocument to reference how to access the members of the main call application in the project Renderer;
In turn, the main calling application needs to access members in the project Renderer, generally by sending an event in the project Renderer, and then registering the event listener in the main calling application.

For example, click an image event in the project Renderer and notify the master to call the application.

<Mx: ImageClick = "This. parentdocument. imgclick (event )"
Data = "{data. Label}" Source = "assets \ Tx. jpg" width = "40"/>

Define in the main call application:

PublicFunction imgclick (EVT: mouseevent): void
{
VaR IMG: Image = EVT. currenttarget as image;
Alert. Show (IMG. Data. tostring ());
}

Remember to be public. Private methods cannot be accessed between different classes.

After the image is clicked:

In fact, the above functions can also be implemented using dispatchevent.

First define an event class

Package
{
Import flash. Events. event;
Public class myevent extends event
{
Public var data: string;
Public Function myevent (type: String, bubbles: Boolean = false, cancelable: Boolean = false, data: String = "")
{
Super (type, Bubbles, cancelable );
This. Data = data;
}
}
}

Then, schedule the event to the event stream in itemh.

<Mx: Image click = "clickhandler (event )"
Data = "{data. Label}" Source = "assets \ Tx. jpg" width = "40"/>

Private function clickhandler (EVT: mouseevent): void
{
VaR IMG: Image = EVT. currenttarget as image;
Dispatchevent (New myevent ("img_click", true, true, IMG. Data. tostring ()));
}

Finally, listen for events in the main application.

Private function inittilelist (): void
{
This. tlist. addeventlistener ("img_click", onitemimg_click );
}

Private function onitemimg_click (EVT: myevent): void
{
Alert. Show (EVT. data );
}

<Mx: tilelist id = "tlist" maxcolumns = "1" x = "34" Y = "10" width = "148"
Dataprovider = "{arrcoll_keysetup}" itemrenderer = "itemh"
Creationcomplete = "inittilelist ()">
</MX: tilelist>

 

 

 

You can also use the <mx: itemrenderer> and <mx: component> labels to declare the itemrenderer.

For example, the above Code can be changed:

<Mx: SCRIPT>
<! [CDATA [
Import MX. Controls. image;
Import MX. Controls. Alert;

PublicFunction imgclick (EVT: mouseevent): void
{
VaR IMG: Image = EVT. currenttarget as image;

Alert. Show (IMG. Data. tostring ());
}
]>
</MX: SCRIPT>

<Mx: arraycollection id = "arrcoll_keysetup">
<Mx: Source>
<Mx: array id = "arr_keysetup">
<Mx: Object Data = "00" sel = "false" label = "AAA"/>
<Mx: Object Data = "11" sel = "false" label = "BBB"/>
<Mx: Object Data = "22" sel = "true" label = "CCC"/>
</MX: array>
</MX: Source>
</MX: arraycollection>

<Mx: tilelist id = "tlist" maxcolumns = "1"
Dataprovider = "{arrcoll_keysetup }"
X = "34" Y = "10" width = "148">
<Mx: itemrenderer>
<Mx: component>
<Mx: hbox width = "145" Height = "41" horizontalscrollpolicy = "off" verticalscrollpolicy = "off">
<Mx: vbox width = "40" Height = "100%" horizontalscrollpolicy = "off" verticalscrollpolicy = "off">
<Mx: Image Click = "This. parentdocument. imgclick (event )"
Data = "{data. Label}" buttonmode = "true" Source = "assets \ Tx. jpg" width = "40"/>
</MX: vbox>
<Mx: vbox width = "95" Height = "100%" horizontalscrollpolicy = "off" verticalscrollpolicy = "off">
<Mx: Label text = "{data. Label}" tooltip = "{data. Label}"/>
<Mx: Image tooltip = "click my video" buttonmode = "true"
Source = "assets \ camera. jpg" width = "16" Height = "20"/>
</MX: vbox>
</MX: hbox>
</MX: component>
</MX: itemrenderer>
</MX: tilelist>

 

Two more examples are provided.

Http://blog.minidx.com/2008/10/03/1457.html

Http://blog.minidx.com/2008/03/09/559.html

 

 

Favorites and sharing

Add QQ bookmarks to Baidu souzang and Yahoo favorites

RSS subscribe to me What is RSS?

Dongguan. Net Club

Welcome to join