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

Optimizing MXML code in Flash Catalyst “Panini” - Part 3:
Vertical Scrollbar components

1 February 2011 No Comment

In this article we’ll use Flash Catalyst to create a custom Vertical Scrollbar component using some Illustrator assets

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

INTRODUCTION
In the next chapter we will create the scrollable list of the state BlogList using the DataList component provided by Flash Catalyst.
However, this component, to allow scrolling of the items must be combined with a Scrollbar component. So, in this chapter we will create a component Vertical ScrollBar using the art assets imported from Illustrator in the BlogView state.

—
NOTE: SCROLLBAR in FLEX and FLASH CATALYST
The Vertical Scrollbar component available in Flash Catalyst represents the Spark VScrollBar component used in Flex, which consists of four parts:

Thumb

Track

Up Button

Down Button

The last two items are optional, while the first two are explicitly recommended (but I would say almost mandatory)
—

CREATE THE VERTICAL SCROLLBAR COMPONENT
First, we must retrieve the scrollbar graphics assets imported from Illustrator.
As previously done for the component SplashScreenView, select the BlogList state and open the BlogView component (right-click > Edit Component or double-click with your mouse).

To create a Vertical Scrollbar is therefore necessary to select graphics that compose it (Thumb and Track) from the artboard. However, the Track will not be easily selectable because it is invisible and is designed solely to define the area where you can move the Thumb.

To be able to easily select, it will be very useful the Layers panel, from which you can manually select the two elements.

When we select the graphic objects from the Layers panel, even in the artboard will be done automatically such a selection.

With the elements of the scrollbar still selected, open the context menu, select Convert artwork to Components and select then the Vertical Scrollbar component.
Use BlogVScrollbar as the component name.

As an alternative to the previous step, you can also use the Heads-Up Display (HUD) to perform the same operation.

Use the Select tool to select the component you just created and click the EDIT PART button available in the HUD.

The following screen appears.

We must then set the elements of the scrollbar. In this project only Thumb and Track.

Select the graphic object that represents the Thumb from the artboard (see photo below)
From the HUD will then be possible to define the Part, choosing between Thumb, Track, Up Button and Down Button.
Select Thumb.

Repeat the previous step for the Track object.
However, because of its transparency, you can easily select it using the Layers panel.

After selecting the graphic object, choose Track(Suggested) from the HUD

Compile the project (CTRL + ENTER) to test the new component.
Now you can use the scrollbar even if the items remain stationary.
In the next chapter we will use this scrollbar to create the DataList component and move these items.

THE GENERATED MXML CODE
When you create a Scrollbar component, Flash Catalyst automatically generates some files:

ComponentName.mxml
ComponentNameThumb.mxml
ComponentNameTrack.mxml
ComponentNameDownButton.mxml (not used in this project)
ComponentNameButton.mxml (not used in this project)

Open the Code workspace to view the files generated:

BlogVScrollbar.mxml
BlogVScrollbarThumb.mxml
BlogVScrollbarTrack.mxml

The three files generated by the Vertical Scrollbar component represent the Spark Skins of the VScrollBar Flex component and can be easily reused in any Flex 4 project.

The code inside them is very clean, also because the graphics of our scrollbar is very simple.
If, however, we assume a project with a much more complex layout we can imagine the advantage that Flash Catalyst takes in the process of skinning. Making this kind of operation directly in Flash Builder can be a very long and frustrating job.

The file BlogView.mxml now contains an instance of the VscrollBar class, which use the new skin BlogVScrollBar.

[…]
<s:VScrollBar x="461" y="95" fixedThumbSize="true" 
 		  skinClass="components.BlogVScrollbar"/>
[…]

In the next chapter we will move this scrollbar component inside a DataList.

Here is the code of the main skin of the scrollbar (BlogVScrollbar.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:d="http://ns.adobe.com/fxg/2008/dt"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.VScrollBar")]</fx:Metadata>
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
		<s:State name="inactive"/>
	</s:states>
	<s:Button id="track" x="0" y="0" skinClass="components.BlogVScrollbarTrack"/>
	<s:Button id="thumb" x="0" y="93" skinClass="components.BlogVScrollbarThumb"/>
</s:Skin>

Thumb Skin (BlogVScrollbarThumb.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:d="http://ns.adobe.com/fxg/2008/dt"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
		<s:State name="disabled"/>
	</s:states>
	<s:Rect d:userLabel="ScrollBar Thumb" x="0" y="0" width="13" height="170"
			radiusX="6.49999" radiusY="3.3667">
		<s:fill>
			<s:SolidColor color="#666666"/>
		</s:fill>
	</s:Rect>
</s:Skin>

Track Skin (BlogVScrollbarTrack.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:d="http://ns.adobe.com/fxg/2008/dt"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
	<s:states>
		<s:State name="up"/>
		<s:State name="over"/>
		<s:State name="down"/>
		<s:State name="disabled"/>
	</s:states>
	<s:Rect d:userLabel="ScrollBar Track" x="0" y="0" width="13"
			height="696" alpha="0">
		<s:fill>
			<s:SolidColor color="#1A1A1A"/>
		</s:fill>
	</s:Rect>
</s:Skin>