Segment2

Segment

A Segment widget consists of multiple segments (rows or records) and each segment can have multiple child widgets. You can use Segment widgets to create menus and grouped lists in your applications.

To learn how to use this widget programmatically, refer VoltMX Iris Widget guide.

You can place a Segment widget within a number of parent widgets, and you can place a number of child widgets within a Segment widget.

You can add a Segment widget to the following widgets:

Flex Form	VBox Form
FlexContainer	FlexScrollContainer
ScrollBox (vertical orientation only)	Tab
Popup	VBox widget (but not an HBox)

You can place the following widgets within a Segment widget:

Button	Calendar	FlexContainer
Image2	Label	Phone
RichText	Slider	Switch
TextArea2	TextBox2	ListBox

Important Considerations

The following are important considerations for a Segment widget:

Segment occupies memory from two perspectives:
- The amount of data required by the number of rows. For example, if you set data for 100 rows, memory for all 100 records will be in memory.
- The view hierarchy (Box and other supported widgets) in each segment row. If the View hierarchy is complex, the memory usage is high.
  
  Note: iOS, Android, and Windows platforms, if your segment has large data sets (more than 20 records with each record having more than 15 widgets), set the segment as a Screen Level Widget.
You cannot add any elements to the widgets dynamically, but you can hide any elements if you do not provide any data for that element.
You can dynamically change the skin of the widgets in the segment.
A Segment widget can be placed in a ScrollBox widget only if the ScrollBox widget has a vertical orientation.
The height of the Segment widget is determined by the content of the widget. If you set the Screen Level Widget to True, then the height of the Segment widget is the form height excluding headers and footers.

One you add a Segment widget to a component or master, you cannot drop other widgets onto that segment widget. To add a widget to a Segment widget in a component or master, create a segment row template, populate it with the widgets you want it to have, and then you configure the segment widget in the component or master to reference that row template. Once the segment widget in your component or master is populated width content from the row template, you can edit the segment widget's master data to have the per-row customized data that you need.

Note: A segment template can only apply to one channel. To work around this, create the segment template for one channel, copy it, and then paste it into the other channels.

To use a Segment widget in a component or master:

Create a segment row template. To do so, in the Project Explorer, click the Templates tab, open the channel you want to create the segment template for (e.g. Mobile), click the context menu arrow of Segments, and then click New Template. The template is created and opens on the Iris Canvas. It might be a good idea to rename the template to something descriptive, such as rowMobile. To do so, on the Templates tab, click the context menu arrow of the newly-created template, and then click Rename.
Drag a FlexContainer widget onto the new template on the Iris Canvas, and configure it how you want.
Drag onto the FlexContainer the widgets that you want the segment row template to have, and configure them how you want.
Once you have the segment row template configured the way you want it, if you want to copy it to other channels, click the context menu arrow of the configured template, and then click Copy. Navigate to and open the channel you want to paste it to, click the context menu arrow of Segments, and then click Paste. Rename the template if you'd like, and then make any needed modifications so that it looks and behaves correctly in that channel.
On the File menu (the Project menu in Volt MX Iris), click Save All.
Add a Segment widget to the component or master. To do so, in the Project Explorer, on the Templates tab, in the Components or Masters section, select the component or master so that it opens on the Iris Canvas, add (or select an existing) container widget in the component or master, and then drag a Segment widget onto it.
In the Properties Editor for the Segment widget you just added, click the Segment tab. Then from the Row Template drop-down list, select the row template you want to use.
From the Segment tab, click the Edit button for Master Data, and make any changes needed to the segment data.
On the File menu (the Project menu in Volt MX Iris), click Save All.

Look Properties

Look properties define the appearance of the widget. The following are the major properties you can set:

Whether the widget is visible.
The platforms on which the widget is rendered.
How the widget aligns with its parent widget and neighboring widgets.
If the widget displays content, where the content appears.

For descriptions of the properties available on the Look tab of the Properties pane, see Look.

Skin Properties

Skin properties define a skin for the widget, including background color, borders, and shadows. If the widget includes text, you can also specify the text font.

For the Segment widget, you can apply a skin and its associated properties for the following states:

Skin	Definition
Row	The skin that is applied for each row.
Row - Focus	The skin that is applied when user focuses on a row.
Section Header	The skin that is applied to the Section Header of Segment widget.
Widget	The skin that is applied to the entire Segment.
Row - Alternate	The skin that is applied to every alternate even numbered row in the segment.
Blocked UI	The skin that is to block the interface until the action in progress (for example, a service call) is completed. > *Note:* Blocked UI is available only for SPA platforms.
Pressed	The skin to indicate that the row of the segment is pressed or clicked.
Refresh - Pull	The look and feel of a widget when the scroll bar is pulled.
Refresh - Push	The look and feel of a widget when the scroll bar is pushed.

For more information about applying skins, see Understanding Skins and Themes.

Segment Properties

Segment properties specify properties that are available on any platform supported by Volt MX Iris, and assign platform-specific properties.

Note: Properties that can be forked are identified by an icon located to the left of the property. For more information, see Fork a Widget Property.

Master Data

The master data is enabled only when the widgets are added to the Segment widget.

The following example illustrates using the Master Data property to add an image and button to the Segment widget:

Select the Segment widget.
Drag an Image widget and Button widget onto the Segment widget.
From the Segment widget properties, click the Segment tab.
Click the Edit button of the Master Data option to open the Master Data dialog box.
Provide the image and button widget details as shown in the following image.
Click OK.

Row Template

Indicates the common template to be used for each row while creating the row and filling the data. This can be overridden at the row level when setting the data using the template key.You can create a new template without going to the Templates section using the Create New option from the drop-down list. You can also edit a template inline in the segment.

Note: Only those templates that are created from Project Explorer >Templates > Segments are visible on the Row Template drop-down list.

Section Header Template

Specifies the common template to be used for each section while creating the section header and filling the data. This is optional parameter and if not provided the default template provided by each platform will be used. It can also be provided at each section level when setting the data. You can create a new template without going to the Templates section using the Create New option from the drop-down list. You can also edit a template inline in the segment.

Note: Only those templates that are created from Project Explorer >Templates > Segments are visible on the Row Header Template drop-down list.

Note: When a Section Header is provided along with the rows/items, the Section Header is "clamped" to the top of the scrollable area (on the Form) as one scrolls through a long list of items (for example, if you have a long list of contacts that all begin with the letter "A", the "A" header will be fixed at the top until you scroll down past the last "A" item). This behavior can be clearly seen iPhone's Contacts application.
This behavior of Section Headers is available on iOS and Android platform and is enabled when the Screen Level Widget has been set to true.

Group Cells

Specifies whether all the rows in a segment should be grouped using a rounded corner background and border.

If On is selected, the cells will not have rounded border.
If Off is selected, the cells will have a rounded border.

Retain Selection

Specifies whether the segment should retain the selection made when the user navigates out of the form and revisits the form.

If On is selected, the selection is retained when the user navigates to different form.
If Off is selected, the selection is not retained.

Specifies whether the widget should occupy the whole container or not. You must set the value to true if your segment has large data sets (more than 20 records with each record having more than 15 widgets) to facilitate a better reuse of the widgets and a different scrolling behavior.

If On is selected, the widget occupies the whole container and there is a reduction in load time of the Segment as only few rows are loaded at the load time. The rest of the rows are loaded as the user scrolls through the widget. But the scrolling speed reduces.
If Off is selected, the widget does not occupy the whole container and load time of Segment increases because all the rows are loaded at the beginning. But the scrolling speed improves.

Note: This property is available only when a Segment widget is placed in a VBox form.

Separator

Specifies if the segment should display the separator between the rows.

If On is selected, the separator appears.
If Off is selected, the separator is not displayed.

Separator Thickness

Specifies the thickness of the separator in pixels.

Separator Color

Specifies the color of the separator between rows of a Segment widget. Click the color sampler to open the color picker from where you can select a separator color.

Separator Transparency

Provide the desired transparency for the separator.

Show Scrollbars

Specifies if the scrollbars of the segment must be visible all the time.

If On is selected, the scrollbars are displayed.
If Off is selected, the scrollbars are not displayed.

Orientation

Specifies how you can stack the widgets within the Segment. You can set the orientation of the Segment as horizontal or vertical.

Following are the options:

Horizontal: Enables you to stack the content within the Segment horizontally.
Vertical: Enables you to stack the content within the Segment vertically.

Note: This property is available only when Segment widget is placed in a VBox form.

View Type

Specifies the view type of a segment. The following are the available view types that you can select and their appearances on iPhone native client:

Table: The rows of the segment appear in a table as a list.
Page: The rows of the segment appear in pages and you need to scroll through the pages to view the rows.

Layout Alignment

Specifies the direction in which the widgets are laid out.

Default: LEFT

The options are:

Left: The widgets placed inside a Segment are aligned left.
Center: The widgets placed inside a Segment are aligned center.
Right: The widgets placed inside a Segment are aligned right.

Note: This property is avialable only when Segment widget is placed in a VBox form.

Selection Behavior

Specifies whether the segment will support single or multiple selection.