Split View

amx:panelSplitter

The Split View component is used to display multiple content areas that are divided by the splitter. The component consists of the following elements:

Left Panel: This is the Master or Navigator pane that can be shown or hidden in portrait orientation. This panel is always shown in landscape orientation.
Right Panel: This is the Detail pane that is always shown and is controlled by the Master or Navigator pane.
Splitter: This is the divider that separates the left and right panel. Its default position is set to 33%, but can be overridden by developers. In addition, the splitter also contains the Show/Hide control that hides or shows the Master or Navigator pane. Visibility of this control depends on device orientation.

This component is primarily used on tablets.

Appearance

Appearance characteristics for this component.

Landscape Orientation

Panel Width: By default both panels are displayed:

The left panel is about 33% wide.
The right panel is 67% wide.

Show/Hide Control: The Show/Hide control is not available in this orientation.

Portrait Orientation

Visibility: By default, the left panel is hidden in portrait orientation.
Panel Width: The right panel is 100% wide.
Show/Hide Control: The Show/Hide control is presented in this orientation.

Splitter

Panel Width: By default, position of the splitter is set to 33%, but this can be overridden by developers.
Orientation: The splitter, depending on device orientation, may or may not display the Show/Hide control that shows or hides the left panel (Master or Navigator pane) of the Split View component.
Control: This Show/Hide control has an opacity of about 60% so content of the pane may show through.

Behavior

Common behaviors for this component.

Orientation:

Landscape: By default, both panels are shown. The Show/Hide control is not available.
Portrait: By default, the left panel is hidden (data contents are not deleted or merged). When shown, the left panel slides on top of the right panel.

Show/Hide Control:

Tap: Tap on the control to show or hide the left panel (Master or Navigator pane).
Portrait: In portrait orientation, the control remains visible even the left panel is hidden.
Landscape: In landscape orientation, the control is not present.

Transitions:

Master/Detail: When tapping an item/object in the left panel (Master or Navigator pane), animated transitions in the right panel (Details pane) can occur.
Delay: Other than initially loaded panels may have a slight delay in loading. This delay is more noticeable when using animated transitions.
Scrolling: Both panels scroll independently.

Usage

Usage guidelines for this component.

Do not use Split Views for ancillary contents (i.e. branding, copyright, etc.).
Avoid using the Split Views on phones. Instead, the left panel would be the first page and you would drill-down to detail pages.
Consider using Split Views when viewing wide content in both panes, such as grid based list of objects and details for selected objects.
Use Split Views when users need to keep certain contents in view while interacting with other contents on the same page. The left panel is used for navigation.
Use Split Views for information-based productivity or utility applications where manipulating lists of data is central. E.g. an e-mail client where the navigation pane shows list of emails and the detail pane shows content of selected email.
If you need to switch between application areas, use the Navigation Menu instead.
If you need to navigate between different application features, use the Springboard instead.
If you need Headers and/or Footers be displayed on the pane, rather than above and/or below the panes, use a Panel Stretch Layout.
Width of the left panel should always be smaller than width of the right panel.

Sample

AMX sample code for this component.

 <amx:panelSplitter id="ps1">

    <amx:facet name="navigator">

    <amx:outputText value="Navigator Pane" id="ot2"/>

    </amx:facet>

    <amx:panelItem id="pi1">

    <amx:outputText value="Detail Pane" id="ot3"/>

    </amx:panelItem>

    </amx:panelSplitter>