Use a FlexContainer widget to create a layout area on a form that can contain other widgets. If you want the layout area to include scroll bars, use a FlexScrollContainer widget. For more information, see Convert Flex Container Widgets.
To learn how to use this widget programmatically, refer Quantum Visualizer Widget guide.
Look properties define the appearance of the widget. The following are the major properties you can set:
For descriptions of the properties available on the Look tab of the Properties pane, see Look.
You can specify that a FlexContainer widget dynamically adjusts its height based on the height of its child widgets by setting the Height property on the Look tab to Preferred. The height of the FlexContainer then adjusts when the height of any child widgets changes.
Following are important considerations for a FlexContainer that is set to adjust dynamically:
The following table summarizes how to calculate the height of child widgets:
Height | Center Y | Top | Bottom | Child Height |
---|---|---|---|---|
Yes | Yes | Yes | Yes | centerY + height/2 + bottom |
Yes | Yes | No | Yes | centerY + height/2 + bottom |
Yes | Yes | Yes | No | centerY+ height/2 |
Yes | Yes | No | No | centerY+ height/2 |
No | Yes | Yes | Yes | (centerY – top) * 2 + top + bottom |
No | Yes | Yes | No | (centerY – top) * 2 + top |
No | Yes | No | Yes | centerY + bottom + cph/2 |
No | Yes | No | No | centerY + CPH/2 |
Yes | No | Yes | Yes | top + height + bottom |
No | No | Yes | Yes | top + CPH + bottom |
Yes | No | Yes | No | top + height |
No | No | Yes | No | top + CPH |
Yes | No | No | Yes | height + bottom |
No | No | No | Yes | cph + bottom |
Yes | No | No | No | height |
No | No | No | No | CPH |
Note: The Computed Preferred Height (CPH) is determined by the calculated height for the content-driven widget, the default value returned from the configuration file, and the calculated height of the Auto Grow Segment or FlexContainer.
Limitations:
Note: You can place a FlexContainer inside an HBox or VBox only while creating a Map or Gridcalendars template.
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 a FlexContainer widget, you can apply a skin and its associated properties for the following states:
Skin | Definition |
---|---|
Normal | The default skin of the widget. |
Focus | The skin applied when the widget has the focus. |
Blocked UI |
The skin applied to block the interface until the action in progress (for example, a service call) completes. Note: Blocked UI is available only for SPA platforms. |
For more information about applying skins, see Understanding Skins and Themes.
FlexContainer properties specify properties that are available on any platform supported by Quantum Visualizer, and assign platform-specific properties.
Specifies whether to clip child widgets when they go out of boundaries.
Specifies whether the arrangement of widgets in the FlexContainer flows horizontally, vertically, or in both directions.
Default: Vertical
Specifies whether the arrangement of widgets in the child widget of the FlexContainer flows horizontally, vertically, or in both directions.
Default: Right to Left.
Visualizer generates reverseLayoutDirection property with true for Right to Left and Bottom to Top. Visualizer generates this property with false for Left to Right and Top to Bottom.
Specifies whether the widget aligns to the nearest intersection of lines in the grid, or other widgets.
Specifies the grid size. This option is available only when Snap to Grid is enabled.
Specifies the default unit used for interpretation of numbers with no qualifiers when passed to layout properties.
Following are the options:
From Quantum Visualizer V9 onwards, you can configure the swipe functionality for a Segment widget. The Swipe config settings enable users to dismiss a row or to reveal certain actions when they swipe a row to the left or right.
Note: The Swipe Config setting is applicable only on the Flex Container widget that is present inside a segment widget.
To enable the swipe left or swipe right functionality on the rows of a Segment, follow these steps:
Note: If you have not used a row template but dragged the widgets directly onto the Segment, the onSwipeLeftor onSwipeRight properties are available on the Action tab of the Segment.
The swipe functionality can be configured to a row of a segment through code by using the widgetSwipeMove property.
Note: On Android and SPA/Desktop Web platforms, if you reset the data of a Segment widget, make sure that you include entries for the widgets that are inside the swipe container. Otherwise, the widgets are not rendered at the run time.
Actions define what happens when an event occurs. On a FlexContainer widget, you can run an action when the following events occur:
onSwipeLeft: This action is triggered when you swipe a row of a Segment widget to the left. This action is available only when the enable Swipe and enable Swipe Left options are enabled and the Type is set to Swipe to Dismiss for the Segment template.
onSwipeRight: The action is triggered when you swipe a row of a Segment widget to the right. This action is available only when the enable Swipe and enable Swipe Right options are enabled and the Type is set to Swipe to Dismiss for the Segment template.
For more information, see Add Actions.
Rev | Author | Edits |
V8 SP2 | PG | PG |
8 | SHS | SHS |
7.2.1 | SHS | SHS |
Copyright © 2020 Temenos. All rights reserved. |