Panel

amx:panelGroupLayout

The Panel component is a simple layout container which supports horizontal, vertical and, wrapped layouts. The Panel consists of the following attributes:

• Layout: Specifies the type of layout.
• Horizontal: Controls are laid out horizontally and do not wrap at the screen border. A scroll bar may display if elements do not fit on the screen.
• Vertical: Controls stack vertically down the screen. A scroll bar may display if elements do not fit on the screen.
• Wrapped: Controls are laid out horizontally and wrap at the screen border.
• Halign: Specifies the horizontal alignment for horizontal and vertical layouts. This is ignored if "layout" is "wrap".
• Valign: The vertical alignment of a horizontal layout. This is ignored if "layout" is not "horizontal".
• Rendered: Specifies whether the Panel should be visible or not. This component is commonly used on tablets and phones.

Appearance

Appearance characteristics for this component.

• Layout: A Panel displays vertical by default, but may display in horizontal and wrapped layouts.
• Nesting: A Panel may be nested as needed to achieve the desired layout and alignment of controls.
• Scroll Bars: May display a scroll bar to view all of the contents.

Behavior

Common behaviors for this component.

• Scrollable: If the contents are larger than the Panel size it will become scrollable.
• Gesture: The user may use the swipe, flick, or drag gesture to scroll.
• Performance: Nesting Panels may impact page load performance.
• Group Box: There is a groupbox style that provides background color and border to this container.

Usage

Usage guidelines for this component.

• Panel can be used to help layout simple content such as button rows in a popup or action sheet.
• The Table component may be a better component in some cases to achieve better alignments.
• Panel is also used to create Swim Lanes.

Sample

AMX sample code for this component.

<amx:panelGroupLayout id="pgl1" inlineStyle="width:95%;margin-left:10px" layout="horizontal" >
<amx:iterator id="iterator1" value="#{bindings.reports.collectionModel}" var="row" inlineStyle="display:inline-block;white-space:nowrap;">


Related

• Used On: Phone, Tablet
• Also Called: Container
• Related Components: Carousel, Filmstrip, Form, Table, Page
• Resources: None