How to add a scrollbar to a Gumbo Application

Because much of the new Flex 4 (Gumbo) framework is a “pay as you go” strategy, for performance, there is a lot of functionality that doesn’t come out of the box anymore. However, many of these things can be easily customized in the skins. For example, for every container and for your main Application, you won’t get scrollbars, by default. Scrolling was deemed too expensive and a lot of our customers’ applications don’t use them. Therefore, to get a scrollbar in your main Application (or any container), you will need a custom skin. Don’t be alarmed, the change in the skin is VERY simple.

The default Spark Application skin is ApplicationSkin.mxml. It has the following code:

<?xml version=”1.0″ encoding=”utf-8″?>

<!— The default skin class for the Spark Application component. –>
<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009″ xmlns:s=”library://ns.adobe.com/flex/spark”
alpha.disabled=”0.5″ >

<!— A strongly typed property that references the component to which this skin is applied. –>
<fx:Metadata>
[HostComponent("spark.components.Application")]
</fx:Metadata>

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

<!– fill –>
<s:Rect id=”backgroundRect” left=”0″ right=”0″ top=”0″ bottom=”0″  >
<s:fill>
<s:SolidColor color=”{hostComponent.backgroundColor as uint}” />
</s:fill>
</s:Rect>

<s:Scroller left=”1″ top=”1″ right=”1″ bottom=”1″ id=”scroller”>
<s:Group id=”contentGroup” left=”0″ right=”0″ top=”0″ bottom=”0″ />
</s:Scroller>

</s:Skin>

To add a scrollbar, you can just copy the code from the default skin and  add a “Scroller” to surround the Group.  So, in that second to the last line, add:

<s:Scroller  id=”scroller” width=”100%” height=”100%” hasFocusableChildren=”true”>
<s:Group id=”contentGroup” left=”0″ right=”0″ top=”0″ bottom=”0″ />
</s:Scroller>

Finally, in your Spark Application, you want to define this custom skin as your skinClass:

<s:Application xmlns:s=”library://ns.adobe.com/flex/spark” xmlns=”" xmlns:fx=”http://ns.adobe.com/mxml/2009″ skinClass=”FxApplicationSkin2″>

To see the code: TestApp.mxml, FxApplicationSkin.mxml

To see the swf run: TestApp.swf

Note: This post was updated on April 27, 2009 after we renamed and repackaged many of the Gumbo classes to remove the Fx prefix.

New files were updated on December 3, 2009 after we changed the structure of the Application skin.

---

Possibly related posts: (automatically generated)

• Flex 4 SDK downloads now include Spark skins for all the components
• Desktop UI

~ by jlafferty on March 13, 2009.