The following example shows how you can create a Spark Panel container with scrolling content by using a nested Spark Scroller container.
Full code after the jump.
To use the following code, you must have Flash Player 10 and a Flex 4 SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Flex 4 SDK in Flex Builder 3″. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/01/creating-a-scrolling-spark-panel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_Scroller_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:Panel id="panel"
title="Spark Panel title"
horizontalCenter="0"
verticalCenter="0"
width="320"
height="240">
<s:Scroller width="100%" height="100%">
<s:Group width="100%" height="100%">
<s:VGroup left="20" right="20" top="20" bottom="20">
<s:SimpleText text="DateChooser #1:" />
<mx:DateChooser />
<s:SimpleText text="DateChooser #2:" />
<mx:DateChooser />
<s:SimpleText text="DateChooser #3:" />
<mx:DateChooser />
</s:VGroup>
</s:Group>
</s:Scroller>
</s:Panel>
</s:Application>
View source is enabled in the following example.
This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.
{ 4 comments… read them below or add one }
Hi Peter.
I have a problem with scroller tag.
I create custom spark skin for panel. I do not want to create scroller each time create panel, so i create scroller tag in skin by wrap group of contentGroup by Scoller(I see at here http://livedocs.adobe.com/flex/gumbo/html/WS422719A4-7849-4921-AF39-57FF567B483B.html).
The problem occurs when i use this panel with custom spark skin at module using module tag
The error say that can not find skin for Scroller or so on…
Then i remove scroller tag in custom spark skin and add it on Panel by the way you do. But this panel is child of . And the error occurs again. Please help me?
irabbit,
I’m not really familiar with the Scroller tag w/ modules. Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case.
Thanks,
Peter
Thank Peter.
After find some bug on flex adobe bug. I have some useful information.
I create MyCotainer that extends SkinnableContainer class, create MySkin class that extends Skin class. Then i set skinClass style for MyContainer is MySkin. And put it into Module:
<!-- error at here-->If i remove skinClass style at Button, i debug and run application, i will get error. And i must set skinClass for Button Gumbo in Moxie Module.
Another, In MySkin class:
If i remove skinClass of Scroller, i will get error too. But if i use MyContainer at Application i nerver get error.
The code:
And this is my question. When we use skinClass or need not skinClass. Why?
I try wrapping my code in pre tag. The source code here: http://flexos.byethost13.com/test/ScrollerDemo.zip