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.
To add a scrollbar, you can just copy the code from the default skin and add a “Scroller” to surround the Group with the id “contentGroup”. So, your skin will have something like:
<s:Scroller id=”scroller” width=”100%” height=”100%” hasFocusableChildren=”true”>
<s:Group id=”contentGroup” left=”0″ right=”0″ top=”0″ bottom=”0″ />
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=”CustomApplicationSkin”>
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.
I have updated the samples for this post again after the release of Flex 4 and 4.1.
updated Samples as of November 2, 2010:
To see the swf run: MainScrollableApp.swf