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

Optimizing MXML code in Flash Catalyst “Panini” - Part 5:
ScrollPanel Component

4 February 2011 2 Comments

In this chapter we will create the scrollable text area of the state ArticleDetails using the ScrollPanel component available in Flash Catalyst.

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

CREATE THE TEXT-AREA SCROLLBAR

Select the ArticleDetails state from the States panel.
Select and open the BlogView component from the artboard (right-click > edit component or double-click).

The Layer panel will now display only the graphics contained in this component.

Then select the graphic elements of the scrollbar (Scrollbar Thumb e Scrollbar Track) from the Layer panel and convert them in Vertical Scrollbar using the same technique previously described.
The elements of the scrollbar are located in the UI elements > TextArea folder (see image below).

Set DetailsVScrollbar as component name

Select the component and click on EDIT PART to define the Thumb and Track elements (operation already described in the chapter 003: Vertical Scrollbar).

CREATE THE SCROLLPANEL

We must now create the ScrollPanel component (the scrollable text area), which will consist of:

the scrollable content: setting the Scrolling Content option from the HUD;
the scroll bar: as in the case of the DataList, to enable a scrollbar in the component ScrollPanel simply insert inside a component an instance of the Vertical Scrollbar just created

Go to the DetailsView component and select both, the text area and the Vertical Scrollbar component created in the previous paragraph. Use then the HUD to convert objects in a component ScrollPanel.

Set ScrollableTextArea as component name.

Select the ScrollPanel you just created and click on EDIT PARTS.

Select the text area and click Scrolling Content (Suggested) to define the content to scroll.

You can change the size of the visible area resizing the component to fit the needs of the layout.

If you compile the project (CTRL + ENTER) the scrollable text area should now work.
However you’ll notice a strange behavior of the scrollbar caused by improper positioning of the levels Thumb and Track). To correct this you must access the scrollbar component (see path below)

From the Layer panel, you can see that the Track level is positioned above the Thumb while it should be otherwise. To resolve this problem, simply drag the Thumb layer above the Track.

Before:

After:

-
Check the tutorial Create a Scrolling Text Panel in Flash Catalyst for more info
-

THE GENERATED MXML CODE

The generated files created in this chapter are many:

1) The three skins of the scrollbar (similar to those described in chapter 003):

DetailsVScrollbar.mxml
DetailsVScrollbarThumb.mxml
DetailsVScrollbarTrack.mxml

The ScrollPanel skin (which is actually a Flex SkinnableContainer component)

ScrollableTextArea.mxml

An MXML component that extends the Group class and that contains the content to scroll.
It is used by the ScrollableTextArea component

ScrollableTextAreaScrollingContent.mxml

Following the structure of the project:

Analyze the code. First when you use a ScrollPanel, Flash Catalyst creates an instance of the SkinnableContainer component, which is applied a custom skin.
In DetailsView.mxml component, which instantiates the new ScrollPanel, there will be a code like this:

<s:SkinnableContainer x="33" y="453" skinClass="components.ScrollableTextArea"/>

Below the source code of the component’s skin, ScrollableTextArea.mxml.
Two instances are then created: the scrollbar created earlier and a new component that will contain the content to scroll.

<?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"
		xmlns:components="components.*"
		fc:resizable="false">
	<fx:Metadata>[HostComponent("spark.components.SkinnableContainer")]</fx:Metadata>
 
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	</s:states>
 
	<components:ScrollableTextAreaScrollingContent 
		id="contentGroup" x="0" y="7" width="410"
		height="246" clipAndEnableScrolling="true"
		height.normal="171"/>
 
	<s:VScrollBar x="410" y="0" 
				  fixedThumbSize="true" 
				  skinClass="components.DetailsVScrollbar"
				  viewport="{contentGroup}"/>
</s:Skin>
 
<s:SkinnableContainer x="33" y="453" skinClass="components.ScrollableTextArea"/>

Here’s the source code of the scrollable content: ScrollableTextAreaScrollingContent.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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">
	<s:RichText d:id="22" d:userLabel="DetailsText" x="0" y="0" width="388"
				height="248" ai:aa="2" color="#F2F2F2" columnCount="1"
				fontFamily="Arial" fontSize="18" kerning="on"
				tabStops="S36 S72 S108 S144 S180 S216 S252 S288 S324 S360"
				flm:variant="12" whiteSpaceCollapse="preserve">
		<s:content><s:p><s:span>I have done a simple comparative launchin… [TEXT REMOVED IN THIS SAMPLE]</s:content>
	</s:RichText>
	<s:RichText x="0" y="258" text="Add&#xa;&#xa;More&#xa;&#xa;Content&#xa;&#xa;Here" fontFamily="Arial"/>
</s:Group>