神马文学网Adobe - Flex Quick Start Basics: Using the Repeater component
来源：百度文库 编辑：神马文学网 时间：2024/04/28 18:53:30
Flex Quick Starts: Building an advanced user interface
Table of contents
Using the Repeater component
Skinning your components
Using item renderers
Creating item editors
Using data providers
Adding drag-and-drop support
Working with Tree controlsNew!
Repeatercomponents are useful for repeating a small set of simple userinterface components, such as RadioButton controls and other controlstypically used in Form containers. You generally control repetition byusing an array of dynamic data, such as an Array object returned from aweb service, but you can use static arrays to emulate simple for loops.
You use thetag to declare a Repeater component that handles repetition of one ormore user interface components based on dynamic or static data arraysat run time. The repeated components can be controls or containers.Using a Repeater component requires data binding to allow forrun-time-specific values.
You can use the tag anywhere that you can use a control or container tag. To repeat user interface components, you place their tags within the tag. All components derived from the UIComponent class can be repeated with the exception of the container tag. You can also use more than one tag in an MXML document, and you can nest tags.
AlthoughRepeater components look like containers in your code, they are notcontainers and have none of the automatic layout functionality ofcontainers. Their sole purpose is to specify a series of subcomponentsto include in your application one or more times based on the contentsof a specified data provider. To align items that a repeater generatesor perform any other layout task, place the Repeater component and itscontents inside a container and apply the layout to that container.
Forexample, the following snippet creates a number of RadioButton controlsbased on an ArrayCollection of products, each of which contains a name property. Setting the layout property of the Panel container to "horizontal" makes the RadioButton controls appear side-by-side in a row.
Tip:Flex also supports HorizontalList, TileList, and List controls thatprovide better performance when you are displaying large amounts ofdata. Unlike the Repeater component, which instantiates all objectsthat are repeated, the HorizontalList, TileList, and List controlsinstantiate only objects visible in the list. If your data extends pasta single screen or the visible space within any of its containers, youshould use one of the list controls.
Emulating for loops
Thesimplest repeating structures that you can create with a Repeatercomponent are static loops that execute a set number of times.
The Repeater component in the following example emulates a simple for loop that executes four times, prints a simple line of text and increments the counter by one each time.
Example
Tip:The counter is not the data within the array, but the position withinthe array. As long as the array contains four elements, you can provideany data within the array itself, and the Repeater component stillexecutes four times. You can refactor the declaration of the array inthe previous example as shown here:
public var myArray:Array=[,,,]; // The actual values do not matter in this use-case
Result
',1)">
To view the full source, right-click the Flex application and select View Source from the context menu.
Emulating for..in loops
You can use a Repeater component to create child components by iterating over the items in a data collection.
In the following example, you bind the dataProvider property of the tag to an ArrayCollection of product objects. Each product object has name, price, and freeship properties. The Repeater component creates a RadioButton instance for each item in the collection and sets the label property of the RadioButton to the name property of the current item in the collection.
Example
Result
',2)">
To view the full source, right-click the Flex application and select View Source from the context menu.
Referencing repeated components
TheRepeater component places references to individual instances of arepeated component in an array. You define the name of the array bysetting the id attribute of the component that you place in the Repeater.
In the following example, the RadioButton control in the tag has its id property set to buttonsArray.The Repeater component adds into this array a reference to each childRadioButton that it creates. You can refer to these individual childrenby using an index-based look-up on the array. For example, buttonsArray[0] returns a reference to the first RadioButton in the Repeater.
Example
',3)">
To view the full source, right-click the Flex application and select View Source from the context menu.
For more information
For more information, see "Using the Repeater component" in theFlex 2 Developer‘s Guide.
About the author
Aral Balkan acts and sings, leads development teams, designs user experiences, architects rich Internet applications,and runsOSFlash.org, the London Macromedia User Group,and his company,Ariaware. He loves talking design patterns and writing for books and magazines. He also authoredArp,the open-source RIA framework for the Flash platform. Aral is generallyquite opinionated, animated, and passionate. He loves to smile, and caneven chew gum and walk at the same time.
Table of contents
Using the Repeater component
Skinning your components
Using item renderers
Creating item editors
Using data providers
Adding drag-and-drop support
Working with Tree controlsNew!
Repeatercomponents are useful for repeating a small set of simple userinterface components, such as RadioButton controls and other controlstypically used in Form containers. You generally control repetition byusing an array of dynamic data, such as an Array object returned from aweb service, but you can use static arrays to emulate simple for loops.
You use the
You can use the
AlthoughRepeater components look like containers in your code, they are notcontainers and have none of the automatic layout functionality ofcontainers. Their sole purpose is to specify a series of subcomponentsto include in your application one or more times based on the contentsof a specified data provider. To align items that a repeater generatesor perform any other layout task, place the Repeater component and itscontents inside a container and apply the layout to that container.
Forexample, the following snippet creates a number of RadioButton controlsbased on an ArrayCollection of products, each of which contains a name property. Setting the layout property of the Panel container to "horizontal" makes the RadioButton controls appear side-by-side in a row.
Tip:Flex also supports HorizontalList, TileList, and List controls thatprovide better performance when you are displaying large amounts ofdata. Unlike the Repeater component, which instantiates all objectsthat are repeated, the HorizontalList, TileList, and List controlsinstantiate only objects visible in the list. If your data extends pasta single screen or the visible space within any of its containers, youshould use one of the list controls.
Emulating for loops
Thesimplest repeating structures that you can create with a Repeatercomponent are static loops that execute a set number of times.
The Repeater component in the following example emulates a simple for loop that executes four times, prints a simple line of text and increments the counter by one each time.
Example
Tip:The counter is not the data within the array, but the position withinthe array. As long as the array contains four elements, you can provideany data within the array itself, and the Repeater component stillexecutes four times. You can refactor the declaration of the array inthe previous example as shown here:
public var myArray:Array=[,,,]; // The actual values do not matter in this use-case
Result
',1)">
To view the full source, right-click the Flex application and select View Source from the context menu.
Emulating for..in loops
You can use a Repeater component to create child components by iterating over the items in a data collection.
In the following example, you bind the dataProvider property of the
Example
Result
',2)">
To view the full source, right-click the Flex application and select View Source from the context menu.
Referencing repeated components
TheRepeater component places references to individual instances of arepeated component in an array. You define the name of the array bysetting the id attribute of the component that you place in the Repeater.
In the following example, the RadioButton control in the
Example
',3)">
To view the full source, right-click the Flex application and select View Source from the context menu.
For more information
For more information, see "Using the Repeater component" in theFlex 2 Developer‘s Guide.
About the author
Aral Balkan acts and sings, leads development teams, designs user experiences, architects rich Internet applications,and runsOSFlash.org, the London Macromedia User Group,and his company,Ariaware. He loves talking design patterns and writing for books and magazines. He also authoredArp,the open-source RIA framework for the Flash platform. Aral is generallyquite opinionated, animated, and passionate. He loves to smile, and caneven chew gum and walk at the same time.
Adobe - Flex Quick Start Basics: Using the Repeater component
1.2. The Basics
Nutch 笔记（一）：Quick Start
Hadoop (CDH3) Quick Start Guide - Documentati...
Adobe Flex最佳学习路线
Adobe Flex最佳学习路线
Working with Manifest Files: The Basics (The ...
The Flex Programming Model
Adobe Flex最佳学习路线 - 李锟 - CSDNBlog
The wrong place to start learning
The quick brown fox jumps over the lazy dog
Using the SDO Data Graph Editor
Optimal primer design using the novel primer ...
Access the Linux kernel using the /proc files...
Article: The Power of Using the SMART Board i...
The basics of HDTV: A behind the screen look at TV technology
How to make the most of the fresh start of a ...
for everyday products, ads using the everyday woman
Using the Small Screen to Find Bigger Ones
Using the Ruby Development Tools plug-in for Eclipse
CoreGRID Newsletter - Enabling Scalable Online Game Services using the Grid
Using a Web-based System to Estimate the Cost...
How To Write A Novel Using The Snowflake Method
ADOBE