Filmstrip

amx:filmStrip, amx:filmStripItem

The Filmstrip component is a container that shows data items in a form of a vertical or horizontal strip. Data items that are displayed on pages must be of the same size and type. Each data item is represented by amx:filmStripItem.

This component is commonly used on tablets and phones.

Appearance

Appearance characteristics for this component.

Orientation: Supports either horizontal (default) or vertical orientation.
Pagination Dots: Displayed either at the bottom (default) or end (should be used for vertical orientation) of the Filmstrip. iOS has round dots, while Android has squares.

Behavior

Common behaviors for this component.

Paging: Swipe/Drag navigates between pages. Tap on a dot to navigate between pages.
Trigger: Tap on an item to trigger actions.

Usage

Usage guidelines for this component.

Use it for displaying a collection of related content in a lane.
If you need to implement cover flows, use Carousels instead.

Sample

AMX sample code for this component.


	<amx:filmStrip id="fs1"
               var="item"
               value="#{bindings.contacts.collectionModel}"
               rendered="#{pageFlowScope.pRendered}"
               styleClass="#{pageFlowScope.pStyleClass}"
               inlineStyle="#{pageFlowScope.pInlineStyle}"
               shortDesc="#{pageFlowScope.pShortDesc}"
               halign="#{pageFlowScope.pFsHalign}"
               valign="#{pageFlowScope.pFsValign}"
               maxItemsOnPage="#{pageFlowScope.pMaxItems}"
               orientation="#{pageFlowScope.pOrientation}">

   <amx:filmStripItem id="fsi1"
                      inlineStyle="text-align:center; width:200px;">

      <amx:commandLink id="ciLink"
                       action="details"
                       shortDesc="Navigate to details">

         <amx:image id="ciImage" source="images/people/#{item.first}.png"/>

         <amx:setPropertyListener from="#{item.rowKey}"
                                  to="#{pageFlowScope.currentContact}"
                                  type="action"/>

         <amx:setPropertyListener from="#{item.first}"
                                  to="#{pageFlowScope.currentContactFirst}"
                                  type="action"/>

         <amx:setPropertyListener from="#{item.last}"
                                  to="#{pageFlowScope.currentContactLast}"
                                  type="action"/>

      </amx:commandLink>

   </amx:filmStripItem>

</amx:filmStrip>

Used On: Phone, Tablet
Also Called: None
Related Components: Carousel, Panel
Resources: None

Fig 1. iOS Filmstrip Horizontal

Fig 2. Android Filmstrip Horizontal

Fig 3. iOS Filmstrip Vertical

Fig 4. Android Filmstrip Vertical