Introduction
- Used for repeating simple UI components
- Repetition can be controlled by an array
- Repeater components look like containers in the code but they are not containers
- Repeaters don’t have automatic layout functionality of containers.
- Purpose of using: To form a series of subcomponents as per the contents of a specified data provider.
- For dealing with large amount of data; use controls like HorizontalList, TileList, and List
How To Use?
- Use the <mx:Repeater> tag to declare a Repeater.
- The repeated components can be either controls or containers.
- To use a Repeater component you need data binding to allow for run-time-specific values.
- You can use the <mx:Repeater> tag anywhere a control or container tag is allowed.
- All components derived from the UIComponent class can be repeated with the exception of the <mx:Application> container tag.
- You can also use more than one <mx:Repeater> tag in an MXML document, and you can nest <mx:Repeater> tags.
Properties of Repeater Component
| Property | Description |
| id | Instance name of the corresponding Repeater component. |
| dataProvider | An implementation of the ICollectionView interface, IList interface, or Array class, such as an ArrayCollection object. You must specify a dataProvider value or the Repeater component will not execute. Generally, you specify the value of the dataProvider property as a binding expression because the value is not known until run time. |
| startingIndex | Number that specifies the element in the data provider at which the repetition starts. The data provider array is zero-based, so to start at the second element of the array, specify a starting index of one. If the startingIndex is not within the range of the dataProvider property, no repetition occurs. |
| count | Number that specifies how many repetitions occur. If the dataProvider property has fewer items than the number in the count property, the repetition stops with the last item. |
| currentIndex | Number that specifies the element of the dataProvider item currently being processed. The data provider array is zero-based, so when the third element is being processed, the current index is two. This property changes as the Repeater component executes, and is -1 after the execution is complete. It is a read-only property that you cannot set in the <mx:Repeater> tag. |
| currentItem | Reference to the item that is being processed in the dataProvider property. This property changes as the Repeater component executes, and is null after the execution is complete. It is a read-only property that you cannot set in the <mx:Repeater> tag. After a Repeater component finishes repeating, you do not use the currentItem property to get the current item. Instead, you call the getRepeaterItem() method of the repeated component itself. For more information. |
| recycleChildren | Boolean value that, when set to true, binds new data items into existing Repeater children, incrementally creates new children if there are more data items, and destroys extra children that are no longer required. For more information. |
Basic principle with Repeater
- Simplest way is to use static loops that execute a set number of times.
- Use the startingIndex and count properties
- To reference individual instances of a repeated component, you use indexed id references
- Referencing repeated child components
- When a container is repeated and indexed in an array, its children are also indexed
- Referencing nested Repeater components
- When <mx:Repeater> tags are nested, the inner <mx:Repeater> tags are indexed Repeater components
Dynamic loops with Repeater
- Works in same way as of satatic data providers.
- The only difference is the source of the data array; instead of a static array written directly into your application, the array is defined in an <mx:Model> tag and drawn from an XML file, a web service, a remote object, or some other source.
- The data is collected and evaluated at run time to determine the number and value of elements in the dataprovider and how the Repeater component behaves.
Event Handling with Repeaters
- While Repeater creates repeated objects; it can be bind to the Repeater component's currentItem property
- Each instance cannot have its own event handler (e.g. click="doSomething {r.currentItem})") because binding expressions are not allowed in event handlers
- Repeated Repeater components have a getRepeaterItem() method that returns the item in the dataProvider property
- After a Repeater component finishes repeating, you do not use the Repeater.currentItem.
- Instead, you call the getRepeaterItem() method of the repeated component itself
- Accessing specific instances of repeated components
| Property | Description |
| instanceIndices | Array that contains the indices required to reference the component from its document. |
| repeaters | Array that contains references to the Repeater components that produced the component. The first element in this array corresponds to the outermost Repeater component. |
| repeaterIndices | Array that contains the indices of the items in the dataProvider properties of the Repeater components that produced the component. The first element corresponds to the outermost Repeater component |
Note:
- This Array is empty unless the component is in one or more Repeater components
- The first element corresponds to the outermost Repeater component
Creating custom Repeater component
- You can use the <mx:Repeater> tag in an MXML component definition
- Accessing an individual repeated item is same as you do for a repeated item defined in the same application file
- Dynamically creating components based on data type:
- Repeaters can be used to dynamically create different types of components for specific items in a set of data.
- A Repeater component broadcasts a repeat event as it executes
- This event is broadcast after the currentIndex and currentItem properties are set.
- You can call an event handler function on the repeat event, and dynamically create different types of components based on the individual data items
Execution of Repeater component
- Repeater re-executes whenever its dataProvider, startingIndex, or count properties are set or modified
- A Repeater component also re-executes in response to paging through the dataProvider property by incrementing or decrementing the startingIndex value
- Recreating children in a Repeater component:
- The recycleChildren property controls whether children of a Repeater component are recreated
- By default, recycleChildren = false; Hence, Repeater destroys any children that it previously created & recreates them causesing a performance lag
- Set this property to true if you are confident that modifying your dataProvider will not recreate the Repeater component's children
Considerations for using a Repeater
- You cannot use a Repeater component to iterate through a two-dimensional Array object that is programmatically generated, because the elements of an Array object do not trigger changeEvent events, and therefore cannot function as binding sources at run time.
- Run-time changes to an array used as a dataprovider are not reflected in the Repeater component. Use a collection if you need to allow run-time modification.
- Forgetting curly braces ({ }) in a dataProvider property is a common mistake. If the Repeater component doesn't executes, make sure that the binding is correct.
- If repeated objects are displayed out of order & you are using adjacent or nested Repeater components, you might need to place a dummy UIComponent immediately after the Repeater that is displaying objects incorrectly.
References
0 comments:
Post a Comment