FLEX3: Use Itemrenderer to create the book information display page of the online bookstore

Part I: itemrenderer knowledge----Understanding

We often use Itemrenderer, list,datagrid,tilelist and other components often to a itemrenderder. Although I'm familiar with it, I'm going to get to know it again today.

The use of Itemrenderer has two points to note:

1, for the Flex framework, the use of Itemrenderer is a very memory-intensive thing, if you can avoid as far as possible not to use.

2, a misunderstanding.

Let's say I have a list component with 1000 data bound to him and now I'm going to render the list. Do you want to create 1000 itemrenderer instances? This is a misunderstanding.

Assuming that I can only display 10 entries in this list, perhaps flex will only create 12 Itemrender instances for you, as for why there are two more, for caching and performance reasons. You drag the scroll bar, the first and second items disappear, but their corresponding itemrenderder just changes position, loads new data, and displays 11th and 12 items. Therefore, Itemrenderer is a reuse (recycled), which should be particularly noted. Do not attempt to invoke the Itemrenderer of article X and modify it, because if it is not displayed in the range at this time, the corresponding itemrenderer of article X is not known to show who is going? The best way to change a itemrenderer is to change it based on its data.

Part II: primary----inline itemrenderers

What do you mean inline itemrenderer? This is the kind that is written together with the component that calls it (then the list control). This is the simpler kind. Now we use this kind of itemrenderer to first write a page showing the book information.

Here's the code:

<?xml version= "1.0" encoding= "Utf-8"?>
<mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml" layout= "Absolute" >
<mx:Script>
<! [cdata[
[bindable]
public Var bookinfo:xml=
<books>
<book>
<name> Hand to sick self-removal </name>
<price>20.10</price>
<writer> Yang Yi </writer>
<image>bookpic/sdbzc.jpg</image>
<instore>yes</instore>
</book>
<book>
<name> better mother than good teacher </name>
<price>17.30</price>
<writer> Yin </writer>
<image>bookpic/hmmsghls.jpg</image>
<instore>yes</instore>
</book>
<book>
<name> currency war </name>
<price>26.90</price>
<writer> Song Hong Soldier </writer>
<image>bookpic/hbzz.jpg</image>
<instore>no</instore>
</book>
<book>
<name> don't complain about the world </name>
<price>15.4</price>
<writer> Baldwin </writer>
<image>bookpic/bbydsj.jpg</image>
<instore>yes</instore>
</book>
<book>
<name> history is a thing </name>
<price>19.60</price>
<writer> Yuan Take-off </writer>
<image>bookpic/lsssmwy.jpg</image>
<instore>yes</instore>
</book>
<book>
<name> Wisdom not sick </name>
<price>17.20</price>
<writer> Malmqvist Ling </writer>
<image>bookpic/bsbdzh.jpg</image>
<instore>no</instore>
</book>
</books>
]]>
</mx:Script>
<mx:tilelist dataprovider= "{bookinfo.book}" width= "height=" "variablerowheight=" true "x=" y= "0" >
<mx:itemRenderer>
<mx:Component>
<mx:vbox width= "height=" horizontalalign= "Center" >
<mx:image source= "{data.image}"/>
<mx:label text= "{data.name}"/>
<mx:button label= "Buy"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:application