Fabio Biondi Blog » Blog Archive » Optimizing MXML code in Flash Catalyst “Panini”

Optimizing MXML code in Flash Catalyst “Panini” - Part 4:
DataList Component

2 February 2011 No Comment

In this article we’ll use Flash Catalyst to create a custom DataList component (aka Flex 4 Spark List).

You need to read previous chapters in order to understand this article.

WHAT’S the DATALIST COMPONENT?

The DataList component available in Flash Catalyst represents the Spark List available in Flex 4.x.
In Flash Catalyst this component requires two elements to work properly:

The RepeatedItem: which is the itemRenderer of the list that you can specify using the HUD
The scrollbar: this component is not selectable from the HUD but you can simply place an instance of the component within the DataList.

WHAT IS AN ITEM RENDERER?

Apply a custom itemRenderer to a List-Based component means create a custom layout for its list-items, overriding the default itemRenderer (usually a simple label) and integrating new static and dynamic elements.
In this chapter, the DataList itemRenderer is represented by a multiline text and an horizontal separator but it could also include buttons, images, other components and so on.

CREATE THE DATA-LIST COMPONENT

First open the BlogView component (right-click > Edit Component) located in the BlogList state.
Within this component, as well as the vertical scroll bar that you created earlier, there are a number of itemRenderer samples created in Illustrator.

Since the DataList component in Catalyst requires a single Repeated Item, you must remove all excess itemRenderers with the exception of the first that will be used by the DataList.

Then select (using the Select tool) all the itemRenderer except the first and press the Delete key on the keyboard to remove them.

As an alternative to the previous step, remember that you can easily select the graphic objects using the Layers panel too.
For example, to select all itemRenderers (horizontal lines and labels) you may indeed open the Layers panel and select the folder that contains all the itemRenderers.
As you can see, a good organization of layers in Illustrator greatly facilitates the work in Catalyst.

Now use the Select tool to select all the elements necessary for our DataList component:

1. the multiline textfield (it will be part of RepeatedItem)
2. the horizontal line(it will be part of RepeatedItem)
3. the scrollbar we have created in the previous chapter

From the context menu (right-click) select the option to Choose Component > Data List

Set BlogDataList as component name:

Select the DataList component from the artboard and click on EDIT PARTS from the HUD

Define the objects that will serve as the DataList itemRenderer (Repetead Item), so select the text field and the horizontal line and hit RepeatedItem (suggested).

If the procedure is successful, the DataList component will automatically add five default elements acquiring their layout from the RepeatedItem template.

To test the operation of the scrollbar is still necessary to insert additional elements.
You can do this by clicking the Add Row button available in the Design-Time Data panel, which will duplicate the contents of the item currently selected.
This panel contains in fact the label of each list item.

Through the panel DESIGN-TIME DATA you can also make changes to existing content, double-clicking the item you want to update.

The DataList component will now be composed of many more elements and the label of the fourth element will be also updated.

NOTE: Catalyst allows the creation of complex itemRenderers, with images and different text fields that can be managed by the Design-Time Data Panel. However we won’t discuss the topic in this tutorial.
Check this video for more info: Create a DataList In Flash Catalyst

As explained above, to use the component Vertical Scrollbar within a DataList simply place an instance in it.
There is therefore no need for additional steps and we can build the project (CTRL + ENTER) to finally test the new DataList component.

ADD INTERACTIONS

Now we have to add the OnSelect event to redirect users to the ArticleDetails state after each list selection.

Use the Breadcrumbs bar to back inside the BlogView component.

Select the BlogDataList component on the artboard by using the Select tool.

Click the “Add Interaction” button from the Interactions panel. Enter the following values to redirect users to the ArticleDetails state after the selection of any element of the list.

Alternatively, using the option “When a specific item is selected” (see image below), you can also specify a different iteration for each element of the list, although in this project we do not need.
However, it may be a useful option if we have created several DetailsView component states, each with content (text and images) related to each element of the list.

However, in this example, users will be always directed to the same ArticleDetails state, displaying the same content regardless of the selected list.
Flash Catalyst should in fact to be used to create prototypes and components/view templates and it is therefore not necessary to cover all circumstances that can be handled in Flex at a later stage.

THE MXML GENERATED CODE

When you create a component DataList, Catalyst Flash automatically generates the following files:

ComponentName.mxml
ComponentNameRepeatedItem.mxml

The first file is the skin of the DataList component.
In this project Catalyst has generated BlogDataList.mxml :

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
		xmlns:ai="http://ns.adobe.com/ai/2009"
		xmlns:d="http://ns.adobe.com/fxg/2008/dt"
		xmlns:flm="http://ns.adobe.com/flame/2008"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.List")]</fx:Metadata>
 
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	</s:states>
 
	<s:DataGroup id="dataGroup" x="0" y="0" width="481" height="701" clipAndEnableScrolling="true"
				 itemRenderer="components.BlogDataListRepeatedItem">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
	</s:DataGroup>
 
	<s:VScrollBar x="459" y="5" fixedThumbSize="true" skinClass="components.BlogVScrollbar"
				  viewport="{dataGroup}"/>
</s:Skin>

The file BlogDataListRepeatedItem.mxml represents the ItemRenderer of the DataList component, and it’s used by BlogDataList skin shown above:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
				xmlns:ai="http://ns.adobe.com/ai/2009"
				xmlns:d="http://ns.adobe.com/fxg/2008/dt"
				xmlns:flm="http://ns.adobe.com/flame/2008"
				autoDrawBackground="false" fc:resizable="false">
	<s:states>
		<s:State name="normal"/>
		<s:State name="hovered"/>
		<s:State name="selected"/>
	</s:states>
	<s:RichText d:id="9" d:userLabel="Label" x="24" y="0" width="432" height="47"
				ai:aa="2" color="#F2F2F2" columnCount="1" fontFamily="Arial"
				fontSize="18" kerning="on"
				tabStops="S36 S72 S108 S144 S180 S216 S252 S288 S324 S360 S396"
				text="{data}"
				flm:variant="3" whiteSpaceCollapse="preserve"/>
	<s:Group d:userLabel="HRule" x="0" y="59">
		<s:Line d:userLabel="hrule" x="0.5" y="0.5" xTo="480">
			<s:stroke>
				<s:SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#333333"/>
			</s:stroke>
		</s:Line>
		<s:Line d:userLabel="hrule" x="0.5" y="1.5" xTo="480">
			<s:stroke>
				<s:SolidColorStroke caps="none" joints="miter" miterLimit="10" color="#999999"/>
			</s:stroke>
		</s:Line>
	</s:Group>
	<s:Rect d:userLabel="Item Highlight Rectangle" width="481" height="61"
			alpha.hovered="0.3"
			alpha.normal="0"
			alpha.selected="0.5">
		<s:fill>
			<s:SolidColor color="0xCED7EE"/>
		</s:fill>
	</s:Rect>
</s:ItemRenderer>

Furthermore, when you create and use a DataList component, Flash Catalyst creates an instance of the Spark List component.

Inside the custom component BlogView (created at the beginning of the tutorial) there is now an instance of the List class, whose skinClass property is set to BlogDataList.

<s:List id="list1" x="1" y="90" change="list_changeHandler()"
		skinClass="components.BlogDataList">
	<s:ArrayCollection>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
		<fx:String>Air for Android and Flash CS5: remote xml requests </fx:String>
	</s:ArrayCollection>
</s:List>