New ItemRenderer Creation Workflow
With the release of Flash Builder 4 there are many new workflows to help you the developer create your visions. One common act that all Flex devs repeat continuously is the creation of custom itemrenderers. Now, in Flash Builder, there is a quick way to do this right from the “New” menu.
When working with Flash Builder there is a slew of new options right from the “New” menu…
When you select “New” > “MXML ItemRenderer” you now get this option box…
New ItemRenderer Creation Options
… Where you can select what kind of ItemRenderer you create right from the beginning with all the parts put together and optimized to their basic elements…
ItemRenderer Options
Depending on your selection you get the following precreated code.
Custom AdvancedDataGrid ItemRenderer
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}" />
</s:MXAdvancedDataGridItemRenderer>
Custom DataGrid ItemRenderer
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" />
</s:MXDataGridItemRenderer>
Custom Spark ItemRenderer
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:Label text="{data}"/>
</s:ItemRenderer>
Custom Tree ItemRenderer
<s:MXTreeItemRenderer 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:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">
<s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Group id="disclosureGroup">
<s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
</s:Group>
<s:BitmapImage source="{treeListData.icon}" />
<s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup>
</s:MXTreeItemRenderer>
