Flex4 Study Notes-Flex project Renderer

Flex uses the label control as the default project Renderer. This default rendering only serves to render the text provided to it. When a project Renderer is specified,

The default Renderer will be overwritten with the custom Renderer.

The procedure is as follows:

Flex creates a Renderer instance for each object in the set.

The creationcomplete event is triggered when each Renderer is created.

The listener function of creationcomplete checks the next object and determines whether a Renderer has been created for the object. if not, a new Renderer will be created. Ice sets its data attribute as the data object itself, so that any necessary value to be called can be extracted as needed.

Note that

In terms of performance, flex will reuse existing rows-if you need to display 1000 objects, it will not generate 1000 rows at the same time; on the contrary, it generates rows that are the same as the number of required rows displayed on the current screen. If the number of rows is 1, this means that a row is not drawn. there may be some time delay, because the next row of data is not loaded before the rolling event

To avoid this problem, follow these steps:

• Continue to use the creationcomplete event to initialize the project Renderer. For example, the arraycollection may not be filled. Or, you can override the data configurator.
• Test the datachange event to check whether the following rows and the preceding rows need to be loaded.
• Override the following methods of the uicomponent class: invalidatedisplay, updatedisplaylist. invalidateproperties, updateproperties and updatedisplaylist. make sure to call Super in each of the methods, and add the logic for creating the following rows and the previous rows so that users can display them when scrolling the mouse, however, set the visbile attribute of these rows to false.

The following is the improved project Renderer.

<? XML version = "1.0" encoding = "UTF-8"?> <Mx: hbox xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/mx "width =" 100% "creationcomplete =" initdisplay () "datachange =" checkemail () "> <FX: SCRIPT> <! [CDATA [import flash.net. navigatetoURL; import MX. events. flexevent; Private function initdisplay (): void {// emailbutton. visible = false;} private function checkemail (): void {If (data. email. length> 0) emailbutton. visible = true; elseemailbutton. visible = false;} private function Sendmail (): void {var U: URLRequest = new URLRequest ("mailto:" + data. email); navigatetoURL (u, "_ Self") ;}]> </FX: SCRIPT> <FX: declarations> < ! -- Place non-visual elements (such as services and value objects) Here --> </FX: declarations> <s: button id = "emailbutton" visible = "false" label = "Send email" Click = "Sendmail ()" </MX: hbox>

The following code is used:

<? XML version = "1.0" encoding = "UTF-8"?> <! -- Multi-column label function --> <s: Application xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/mx "> <s: layout> <s: verticallayout paddingleft =" 20 "paddingtop =" 20 "/> </S: layout> <FX: declarations> <! -- Place a non-visual element (such as a service or value object) Here --> <s: arraycollection id = "myac"> <FX: object email = "hello@qq.com" firstname = "Zhang" lastname = "San" phone = "123456"/> <FX: object email = "hello@qq.com" firstname = "Li" lastname = "Si" phone = "654321"/> </S: arraycollection> </FX: declarations> <mx: dataGrid id = "DG" width = "500" Height = "100" dataprovider = "{myac}"> <mx: columns> <mx: datagridcolumn headertext = "name"> <mx: itemrenderer> <FX: component> <mx: Text text = "{data. firstname} {data. lastname} "/> </FX: component> </MX: itemrenderer> </MX: datagridcolumn> <mx: datagridcolumn headertext = "email" itemrenderer = "ch10.myrenderer"/> </MX: columns> </MX: DataGrid> </S: Application>

The in-row Renderer is also used.