Page History

The Flex Repeater component lets you easily create multiple instances of views for display in another view. 

When first dropped on a view, the Flex Repeater looks like any other empty container. Set the 'path' to the component that you want to create multiple instances of, and then under 'instances' add an object for each instance that you want to create. The 'object' will usually contain one or more parameters that will be passed into that particular instance.

When a Flex Repeater is deep selected, there is a Graphical User Interface (GUI) at the top of the Perspective Property Editor that enables you to set the container's properties. Functionality is similar to that of the properties in the Props Tree, but you may find the visual interface easier or quicker to use.

Direction

This sets the direction for the child layout. Options are Row or Column. When the Reverse  icon is selected, the contents of this container are displayed in reverse order.

Direction: Row

The following table shows the icons and properties they represent when Direction: Row is selected. The icon that's displayed if Reverse order is selected is also shown.

Left/right/top/bottom notes in the descriptions refer to non-reversed directions. The phrase "when there is extra space" means when no components have are stretching to fill the space (i.e., when no components have "grow" greater than 0).

Expand
title Click here to see the Direction: Row icons and properties...
Items Row Icon Row Reversed Icon Property Description Flex Start Child items are placed along the start (top) of the container when there is extra space. Center Child items are placed along the center of the container when there is extra space. Flex End Child items are placed along the end (bottom) of the container when there is extra space. Stretch Child items are stretched from top to bottom of the container. Baseline Child items are placed so the baseline of the text matches for all of them when there is extra space. Justify Row Icon Row Reversed Icon Property Description Flex start Adjusts placement of children to the start (left) of the container when there is extra space. If reversed, children are placed along the right. Center Adjusts placement of children along the center of the container when there is extra space. Flex End Adjusts placement of children along the end (right) of the container when there is extra space. If reversed, children are placed along the left. Space Between Adjusts placement of children with space in between them reaching to the edges of the container when there is extra space. Space Around Adjusts placement of children with even spacing in between them with some space along the edges when there is extra space. Space Evenly Adjusts placement of children with even spacing in between them and the edges of the container when there is extra space. Children Icon Property Description N/A Don't Wrap If there are more components than the width allows, shrink them. N/A Wrap If there are more components than the width allows, wrap onto the next line. Reverse Wrap Toggle to reverse the direction of wrap from top-down to bottom-up Content (Only applicable when Children:Wrap is selected.) Row Icon Row Reversed Icon Property Description Flex start Adjusts placement of wrapped content to the start (top) of the container when there is free space. Center Adjusts placement of wrapped content to the middle of the container when there is free space. Flex End Adjusts placement of wrapped content to the end (bottom) of the container when there is free space. Space Between Adjusts placement of wrapped content evenly with space in between each wrapped line, reaching to the edges (top and bottom) of the container when there is extra space. Space Around Adjusts placement of wrapped content evenly with space in between each wrapped line and the edges (top and bottom) of the container when there is extra space. Stretch Adjusts placement of wrapped content evenly with space in between each wrapped line and after the last line (bottom) of the container when there is extra space.

Direction: Column

The following table shows the icons and properties they represent when Direction: Column is selected. The icon that's displayed if Reverse order is selected is also shown.

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Perspective Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

1. In order to use the Flex Repeater, you need a view that will be shown inside the repeater. To do this, we made a new View with a Coordinate layout called "RepeatedView".
   
   
   1. In the Project Browser, select the new View
   2. In the Property Editor. Under PARAMS, select Add View Parameter, select a property type of Value.
   3. Rename the parameter from "key" to "labelText".
   4. Select the root container for the view, and set the mode property to "percent".
      
      

2. Add a Label component to the view, and configure a property binding on its text property to the labelText parameter we just created. We set the component's alignVertical property to "center", and we stretched the label to fill the entire view. We also configured some styling on the Label:
   
   

   Style Category	Value
   borderStyle	solid
   fontSize	30px
   textAlign	center

   
   

3. Now we can configure our Flex Repeater. Drag a Flex Repeater component onto the view, then set the following properties:
   
   

   Property Name	Value
   path	RepeatedView
   direction	Column
   useDefaultViewWidth	false
   useDefaultViewHeight	false

   
   

4. Finally, create three object members in the instances array. Add a "labelText" property to each object of type value, and replace the "value" strings to the desired strings to show. Here's how the property editor looks for our Flex Repeater:

   
   
   

5. You should now see the Flex repeater populated as shown in the image above.