Flex Examples
The following example shows how you can create a Spark Panel container in Flex 4 with scrolling content by using a nested Spark Scroller container.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
<?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 4 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 4 SDK.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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?
Hi irabbit,
We are facing same problem when using a scroller tag inside custom spark skin to a custom panel class. I need to understand following things
1. Will you be able to point me to the url or bug id which you found on the Adobe bug. I tried to search; however, could not find a relevant one.
2. Not able to access the code at the url – http://flexos.byethost13.com/test/ScrollerDemo.zip
Is it removed from the location now? I was trying to understand and try applying the same solution which might solve the issue that we are facing.
3. Is there any other solution than using skinclass to resolve the issue?
4. Sharing the code that custom skin in our code has :
5. We are using Flex SDK : 4.1.0.16076, is this a version specific issue?
- Any pointers will be helpful,
Not sure why the code was not added in earlier comment –
Here it is –
I try wrapping my code in pre tag. The source code here: http://flexos.byethost13.com/test/ScrollerDemo.zip