Search:
  • Home
  • Examples
    • Thumb

      Flex Examples

      Check out our Flex Examples!

    • Thumb

      Flash Builder Examples

      Check out our Flash Builder Examples!

    • Thumb

      AIR Examples

      Check out our AIR Examples!

    Adobe® Flex, Adobe® Flash Builder and Adobe® AIR are registered trademarks of Adobe Systems.
  • Components
    • Thumb

      WP Flex Contact Form

      Check out our WP Flex Contact Form!

    • Thumb

      Flash CountDown Plugin

      Check out our Flash CountDown Plugin!

    This is an overview of all our Flash/Flex based Components.
  • Jobs
  • Guest Poster
  • Forum
  • Contact Us
Subscribe to Flex BlogSubscribe
  • Examples
Browse > Home / Examples / Viewstack Repeater Example

Viewstack Repeater Example

16 November 2009

Line Break

Author: Roelof (11 Articles) - Author Website

Roelof is a SAP Consultant specialized in Front-End development. In his spare free time he is either developing on the web, playing basketball, watching soccer, travelling or just being lazy. He is also the co-owner of Flex-Blog.com.


The following example shows you how to use a repeater inside a viewstack.  Our example about viewstack effects is very popular, and I recently found out how to use the repeater inside a viewstack, I decided to write an example about this subject.

We are using a Linkbar, Viewstack and Repeater component in this example. As dataprovider we will use an ArrayCollection.

The ArrayCollection will be the dataprovider for the Repeater. The Repeater will be the dataprovider for the Viewstack, and the Viewstack will be the dataprovider for the Linkbar. (ArrayCollection -> Repeater -> Viewstack -> Linkbar)

Here is the example: (Source can be viewed underneath the example or via Right Mouse Click -> View Source ).

The complete source code is right here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               initialize="init()" viewSourceURL="srcview/index.html">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <mx:WipeLeft duration="500" id="wipeLeft"/>
        <mx:WipeRight duration="500" id="wipeRight"/>
    </fx:Declarations>
   
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
           
            [Bindable]
            private var myDataProvider:ArrayCollection;
           
           
            private function init():void {
                myDataProvider = new ArrayCollection;
               
                var obj:Object = new Object;
               
                obj.title = "Screen 1";
                obj.color = 0x00FFCC;
                myDataProvider.addItem(obj);
                obj = new Object;
                obj.title = "Screen 2";
                obj.color = 0x00FF00;
                myDataProvider.addItem(obj);
                obj = new Object;
                obj.title = "Screen 3";
                obj.color = 0xFFCCCC;
                myDataProvider.addItem(obj);               
            }
           
        ]]>
    </fx:Script>
   
    <mx:VBox>
        <mx:LinkBar dataProvider="{myViewstack}"/>

        <mx:ViewStack id="myViewstack" width="500" height="300">
            <mx:Repeater id="myRepeater" dataProvider="{myDataProvider}" >
                <mx:VBox backgroundAlpha="1" backgroundColor="{myRepeater.currentItem.color}"
                         label="{myRepeater.currentItem.title}"
                         showEffect="{wipeRight}"
                         hideEffect="{wipeLeft}"/>
            </mx:Repeater>
        </mx:ViewStack>
   
    </mx:VBox>
</s:Application>

Related posts:

  1. ViewStack, LinkBar and ButtonBar Example
  2. Flex Effects Example in a ViewStack
  3. Using the Repeater in Flex
  4. Flex 4 / Flash Builder 4: Repeater changed to DataGroup
  5. Style AdvancedDataGrid depending on data example

Written by Roelof · Filed Under Examples 

Was this post useful to you?

1 Star2 Stars3 Stars4 Stars5 Stars (3 votes, average: 4.67 out of 5)
Loading ... Loading ...

Comments

One Response to “Viewstack Repeater Example”

  1. sundeep machado on December 9th, 2009 1:17 pm

    Dude the code is working just fine. But can you kindly use comments for describing the code. Thank you I am just a beginner in Flex.

Get Adobe Flash player

  • Sponsors

  • Popular Tags

    • AdvancedDataGrid
    • AIR
    • ArrayCollection
    • baseColor
    • Button
    • ButtonBar
    • ComboBox
    • CursorManager
    • DataGrid
    • Effects
    • File
    • Flash Builder
    • Flash Builder 4
    • Flashvars
    • Flex 4
    • HSlider
    • Icon
    • Image
    • itemRenderer
    • LinkBar
    • MouseWheel
    • PHP
    • ProgressBar
    • Repeater
    • Style
    • Timer
    • Tree
    • Twitter
    • ViewStack
    • VSlider
  • Flex Blog Readers

  • Testing..

  • Flex Jobs (from Flex Jobs.org)

    Your Job here? Post your job @ Flex Jobs.org

    Advertisement

  • Recent Posts

    • How to make a magnetic button in Flex 4
    • Using ASDoc as an External Tool in Flash Builder 4
    • Flex Encryption (MD5, SHA1, SHA224, SHA256, HMAC)
    • The SWIZ framework for Flex 3 / Flex 4: Easy, Light and Very Powerfull
    • Call Javascript function from Flex / Flash Builder (AS3)
    • Flex FlashVars in AS3 Example
    • Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction
    • WordPress Flash / Flex Comments Form
    • Adobe AIR SQLite Example
    • Flex 4 Effect Example: Sliding text using the Move Effect
  • Categories

    • Examples
    • Guest Poster
  • Archives

    • June 2010
    • May 2010
    • April 2010
    • March 2010
    • February 2010
    • January 2010
    • December 2009
    • November 2009
    • October 2009
    • March 2009
    • February 2009
  • Blogroll

    • Adobe Flex Jobs
    • NL for Business
  • Meta

    • Register
    • Log in
    • WordPress
    • XHTML

Copyright © 2010 Flex Blog · Adobe® and Adobe® Flex are registered trademarks of Adobe Systems.

WordPress Adobe Flex Adobe Flash Builder Adobe AIR Creative Commons License

  • Popular Posts

    • Progressbar in Datagrid Example 6 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 5 (5.00 out of 5)
    • List Directory with AIR in Flex 4 6 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 5 (5.00 out of 5)
    • Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction 5 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 5 (5.00 out of 5)
    • Control Webpage in HTML Control in AIR 4 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 5 (5.00 out of 5)
    • WordPress Flash / Flex Comments Form 4 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 5 (5.00 out of 5)