Put a border around your scrollable Flex 4 app

– February 23, 2010

Remember back in the Flex 3 days where we had to set verticalScrollPolicy/horizontalScrollPolicy to off all the time? Well, no more of that. About the only thing that gets scrollBars automatically is the TextArea. You want scrollBars somewhere else then you have to use the <s:Scroller> class.

If you would like to make your Flex application scrollable and put a border around it then all you have to do is skin the application by setting its skinClass like so:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     width="300" height="300"
     skinClass="skins.AppSkin" >
view source

Your AppSkin is simple. Just throw in a <s:Scroller> around the <s:Group id=”contentGroup”> and then use FXG to throw a border around the whole mess and you can call it a day.

<s:Skin
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     alpha.disabled="0.5">

<fx:Metadata>
     [HostComponent("spark.components.Application")]
</fx:Metadata>

<s:states>
     <s:State name="normal" />
     <s:State name="disabled" />
</s:states>

<s:Scroller
     id="scroller" width="100%" height="100%"
     hasFocusableChildren="true"
     verticalScrollPolicy="auto"
     horizontalScrollPolicy="auto">

     <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />

</s:Scroller>

<!--
Strokes are centered on the described shape.
So a width of 4 means we have to move the Rect 2 pixels
x and y and then make the Rect width/height 4 pixels less
than the actual width/height of the area we want to encompass.
Plus, we have to take into account the dimensions of the scrollbars.-->

<s:Rect x="1" y="1"
     width="{ hostComponent.width - scroller.verticalScrollBar.width - 2 }"
     height="{ hostComponent.height - scroller.horizontalScrollBar.height - 2 }">
     <s:stroke>
          <s:SolidColorStroke color="#000000" alpha="0.5" weight="2" />
     </s:stroke>
</s:Rect>

</s:Skin>

That’s all.

Tags: ,