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″ />
</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=”CustomApplicationSkin”>
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.
————————————————–
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 some sample code: MainScrollableApp.mxml, CustomAppSkin.mxml
To see the swf run: MainScrollableApp.swf
Butterflies and Bugs 
useful piece of info!
Thanks for the info, that’s just dumb that scrollbars aren’t more easily activated.
Adobe should stop trying to make development softwares, they really can’t do it correctly.
Something worth noting. If I compile as is, I get a compiler error:
1119: Access of possibly undefined property backgroundColor through a reference with static type spark.components:Application.
Which corresponds to the line:
If I change the line as follows, all works fine:
Doesn’t make sense but it works…
It srtipped my code, but you have to change:
hostComponent.backgroundColor as uint
to
this.hostComponent.backgroundColor as uint
Hi Guys, did you notice this doesn’t work anymore with Beta2 of FlashBuilder?
@Oscar: I updated the test files. Thanks for pointing this out. The change was to use width=”100%” height=”100%” on the Scroller rather than left/right/bottom/top constraints. The example files should work with the latest builds now.
Thanks for the very helpful info, Joan. I understand the motivation to keep containers as lightweight as possible in Flex 4, I wish the Flex team had taken the time to make it easier to add scrolling to a Spark Application. Even just providing a “ScrollingAppSkin” as part of the SDK would have done the trick. As it is currently I predict this is going to be a big pain point for new folks learning the Flex framework (and even us old timers!). I can see folks from other UI technology backgrounds – including HTML – commenting “you have to write 100 lines of markup just to add a scrollbar in Flex!?”
This didn’t work for me, but what did work was not using a skin, and simply putting a scroller around the main group in the application and set clipAndEnableScrolling=”true” on the main group.
The width and heigh of 100% don’t present a scroller with flex 2 sdk unless the paretnt container has a non-percentage style height defined for it, any workarounds?
Nevermind, I just had to make sure that everything from top of the parent chain down to the child had a 100% height for the scroller to size properly.
I get the scroll bar with adding the without adding this custom skin. Am I going wrong somewhere?
I get the scroll bar even without adding the custom skin. Am I going wrong somewhere?
Hello,
just a little question. I’ve add a function in my *.mxml’skinClass file. How can i acces it from my main application ?
Does anyone know how to adjust the sensitivity of the scrollbar? I have a very long group with text but when we use the up and down arrows the text jumps a full page rather than just move by one line of text.
I thought it would be something simple like a property to change but I can’t find anything on the docs.
Thanks!
Thx, man!
PS: change WP skin — it’s unuseable
I have a flex app, which has no skin. I created a new skin inside flex builder for the app. I pasted in the scroller stuff, but it always says syntax error on every line that has the world scroller in it anywhere. I have nothing in my app call scroller obvoisly.
Any ideas?
@Bob: I have updated the samples in this post with code that works in the released version of Flex 4. I hope this helps. I’m not sure what your issue is w/o seeing your skin file.
Thanks Joan, I imported your updated examples into FB4, and it works for your example, but not mine with your exact skin filed added (i get no scroll bars when the window is too small to see all the content). I cant see any differnece between the apps.
Is there any way I can send you my simple exmaple app with your skin which doesnt work?
Previously I also tried putting a scroller around my main panel and main group allong with every option I could find (including clipAndEnableScrolling=”true”), but no scrollbars. I also tried adding height=”100%” to every group. No luck. Any help appreciated.
Ok, I have found the problem – if your outermost object is a panel (which i use to give me a nice title bar at the top), this system doesnt work – even if you put a group around the panel. Ive switched to use a dummy menu bar instead of the panel and I get scroll bars – Fantastic!
everybody i know still uses 3.5.
I’ve added a scroller to my custom skin and it works nicely. How do I get the scroller to update if the size of the application changes (dynamic content)? I’m sure there’s an update event I need to tie into but my grasp of skins is still limited – although growing.
Thanks, Jeff