6 Creating the MAF AMX User Interface (Release 2.0.0.0.0)
Oracle | Hardware and Software, Engineered to Work Together
Fusion Middleware Documentation
Oracle Enterprise Pack for Eclipse Developing Mobile Applications with Oracle Mobile Application Framework (OEPE Edition)
Table of Contents
The script content on this page is for navigation purposes only and does not alter the content in any way.
6 Creating the MAF AMX User Interface
This chapter describes how to create the user interface for MAF AMX pages.
This chapter includes the following sections:
6.1 Introduction to Creating the User Interface for MAF AMX Pages
MAF provides a set of UI components and operations that enable you to create MAF AMX pages which behave appropriately for both the iOS and Android user experience.
MAF AMX adheres to the typical Oracle Enterprise Pack for Eclipse development experience by allowing you to add UI components and operations in an editor window. In essence, MAF AMX UI components render HTML equivalents of the native components on the iOS and Android platforms, with their design-time behavior in OEPE being similar to components used by other technologies. In addition, the UI components are integrated with MAF's controller and model for declarative navigation and data binding.
For more information, see the following:
6.2 Designing the Page Layout
MAF AMX provides layout components (listed in ) that let you arrange UI components in a page. Usually, you begin building pages with these components, and then add other components that provide other functionality either inside these containers, or as child components to the layout components. Some of these components provide geometry management functionality, such as the capability to stretch when placed inside a component that stretches.
Table 6-1 MAF AMX Page Management, Layout, and Spacing Components
Description
Core Page Structure Component
Creates a view element in a MAF AMX file. Automatically inserted into the file when the file is created. For more information, see
Core Page Structure Component
Creates a panelPage element in a MAF AMX file. Defines the central area in a page that scrolls vertically between the header and footer areas. For more information, see
For more information about MAF AMX files, see
Core Page Structure Component
Creates a facet element in a MAF AMX file. Defines an arbitrarily named facet on the parent component. For more information, see
Core Page Structure Component
Creates a fragment element in a MAF AMX file. Enables sharing of the page contents. For more information, see
Core Page Structure Component
Creates a facetRef element in a MAF AMX Fragment file. Used inside a page fragment definition (fragmentDef) to reference a facet defined in the page fragment usage. For more information, see
Page Layout Container
Creates a panelGroupLayout element in a MAF AMX file. Groups child components either vertically or horizontally. For more information, see
Page Layout Container
Creates a panelFormLayout element in a MAF AMX file. Positions components, such as Input Text, so that their labels and fields line up horizontally or above each component. For more information, see
Page Layout Container
Creates a panelLabelAndMessage element in a MAF AMX file. Lays out a label and its children. For more information, see
Page Layout Container
Creates a panelStretchLayout element in a MAF AMX file. Allows placement of a panel on each side of another panel. For more information, see
Secondary Window
Creates a popup element in a MAF AMX file. For more information, see
Interactive Page Layout Container
Creates a panelSplitter element in a MAF AMX file. For more information, see
Interactive Page Layout Component
Creates a panelItem element in a MAF AMX file. For more information, see
Page Layout Container
Creates a deck element in a MAF AMX file. For more information, see
Spacing Component
Creates an area of blank space represented by a spacer element in a MAF AMX file.
For more information, see
Page Layout Container
Creates a tableLayout element in a MAF AMX file. Represents a table consisting of rows. For more information, see
Page Layout Container
Creates a rowLayout element in a MAF AMX file. Represents a row consisting of cells in a Table Layout component. For more information, see
Page Layout Component
Creates a cellFormat element in a MAF AMX file. Represents a cell in a Row Layout component. For more information, see
You add a layout component by dragging and dropping it onto a MAF AMX page from the Palette (see ). Then you use the Properties window to set the component's attributes. For information on attributes of each particular component, see .
demonstrates several page layout elements defined in a MAF AMX file.
Example 6-1 Page Layout Components Definition
&amx:panelPage id="pp1"&
&amx:outputText id="outputText1"
value="Sub-Section Title 1"
styleClass="adfmf-text-sectiontitle"/&
&amx:panelFormLayout id="panelFormLayout1" labelPosition="start"&
&amx:panelLabelAndMessage id="panelLabelAndMessage1" label="Name"&
&amx:commandLink id="commandLink1" text="Jane Don" action="editname" /&
&/amx:panelLabelAndMessage&
&amx:panelLabelAndMessage id="panelLabelAndMessage2" label="Street Address"&
&amx:commandLink id="commandLink2"
text="123 Main Street"
action="editaddr" /&
&/amx:panelLabelAndMessage&
&amx:panelLabelAndMessage id="panelLabelAndMessage3" label="Phone"&
&amx:outputText id="outputText2" value="212-555-0123" /&
&/amx:panelLabelAndMessage&
&/amx:panelFormLayout&
&amx:outputText id="outputText3"
value="Sub-Section Title 2"
styleClass="adfmf-text-sectiontitle" /&
&amx:panelFormLayout id="panelFormLayout2" labelPosition="start"&
&amx:panelLabelAndMessage id="panelLabelAndMessage4" label="Type"&
&amx:commandLink id="commandLink3" text="Personal" action="edittype" /&
&/amx:panelLabelAndMessage&
&amx:panelLabelAndMessage label="Anniversary"&
&amx:outputText id="outputText4" value="November 22, 2005" /&
&/amx:panelLabelAndMessage&
&/amx:panelFormLayout&
&amx:panelFormLayout id="panelFormLayout3" labelPosition="start"&
&amx:panelLabelAndMessage id="panelLabelAndMessage5" label="Date Created"&
&amx:outputText id="outputText5" value="June 20, 2011" /&
&/amx:panelLabelAndMessage&
&/amx:panelFormLayout&
&/amx:panelPage&
Figure 6-1 Page Layout Components at Design Time
You use the standard Cascading Style Sheets (CSS) to manage visual presentation of your layout components. CSS are located in the View Content/css directory of your Application project, with default CSS provided by MAF. For more information, see
The user interface created for iOS platform using MAF AMX displays correctly in both the left-to-right and right-to-left language environments. In the latter case, the components originate on the right-hand side of the screen instead of on the left-hand side. Some of the MAF AMX layout components, such as the Popup (see ), Panel Item, and Panel Splitter (see ) can be configured to enable specific right-to-left behavior. For more information about right-to-left configuration of MAF AMX pages, see
A MAF sample application called UIDemo demonstrates how to use layout components in conjunction with such MAF AMX UI components as a Button, to achieve some of the typical layouts that follow common patterns. In addition, this sample application shows how to work with styles to adjust the page layout to a specific pattern. The UIDemo application is available from File & New & MAF Examples.
6.2.1 How to Use a View Component
A View (view element in a MAF AMX file) is a core page structure component that is automatically inserted into a MAF AMX file when the file is created. This component provides a hierarchical representation of the page and its structure and represents a single MAF AMX page.
For more information, see .
6.2.2 How to Use a Panel Page Component
A Panel Page (panelPage element in a MAF AMX file) is a component that allows you to define a scrollable area of the screen for laying out other components.
By default, when you create a MAF AMX page, Oracle Enterprise Pack for Eclipse automatically creates and inserts a Panel Page component into the page. When you add components to the page, they will be inserted inside the Panel Page component.
To prevent scrolling of certain areas (such as a header and footer of the page) and enable stretching when orientation changes, you can specify a Facet component for your Panel Page. The Panel Page's header Facet includes the title placed in the Navigation Bar of each page. For information about other types of Facet components that the Panel Page can contain, see
shows the panelPage element defined in a MAF AMX file. This Panel Page contains a header Facet.
Example 6-2 Panel Page Definition
&amx:panelPage id="pp1"&
&amx:facet name="header"&
&amx:outputText id="ot1" value="Welcome"/&
&/amx:facet&
&/amx:panelPage&
For more information, see .
6.2.3 How to Use a Panel Group Layout Component
The Panel Group Layout component is a basic layout component that lays out its children horizontally or vertically. In addition, there is a wrapping layout option that enables child components to flow across and down the page.
To create the Panel Group Layout component, use the Palette.
In the Palette, open the MAF AMX pane and drag and drop a Panel Group Layout to the MAF AMX page.
Insert the desired child components into the Panel Group Layout component.
To add spacing between adjacent child components, insert the Spacer (spacer) component, also available from the MAF AMX pane of the Palette.
Use the Properties window to set the component attributes. For more information, see .
shows the panelGroupLayout element defined in a MAF AMX file.
Example 6-3 Panel Group Layout Definition
&amx:panelGroupLayout styleClass="prod" id="pgl1"&
&amx:outputText styleClass="prod-label" value="Screen Size:" id="ot1"/&
&/amx:panelGroupLayout&
6.2.3.1 Customizing the Scrolling Behavior
Scrolling behavior of the Panel Group Layout component is defined by its scrollPolicy attribute which can be set to auto (default), none, or scroll. By default, this behavior matches the one defined in the active skin.
To disable scrolling regardless of the behavior defined in the active skin, you set the scrollPolicy attribute to none. When the Panel Group Layout component is not scrollable, its content is not constrained.
To enable scrolling regardless of the behavior defined in the active skin, you set the scrollPolicy attribute to scroll. If the Panel Group Layout component is scrollable, the scrolling is provided when the component's dimensions are constrained.
Since scrolling consumes a lot of memory and may lead to the application crashing, you should minimize its use. In the mobileAlta skin (see ), scrolling of the Panel Group Layout, Panel Form Layout (see ), and Table Layout (see ) is disabled. It is recommended that you use the mobileAlta skin for your application and limit instances of setting the scrollPolicy to scroll to when it is necessary. To simulate the scrolling behavior for the Panel Form Layout and Table Layout, you can enclose them within a scrollable Panel Group Layout component when scrolling is required.
6.2.4 How to Use a Panel Form Layout Component
The Panel Form Layout (panelFormLayout) component positions components so that their labels and fields align horizontally. In general, the main content of the Panel Form Layout component is comprised of input components (such as Input Text) and selection components (such as Choice). If a child component with a label attribute defined is placed inside the Panel Form Layout component, the child component's label and field are aligned and sized based on the Panel Form Layout definitions. Within the Panel Form Layout, the label area can either be displayed on the start side of the field area or on a separate line above the field area. Separate lines are used if the labelPosition attribute of the Panel Form Layout is set to topStart, topCenter, or topEnd. Otherwise the label area appears on the start side of the field area. Within the label area, the labelPosition attribute controls where the label text can be aligned:
to the start side (labelPosition="start" or labelPosition="topStart")
to the center (labelPosition="center" or labelPosition="topCenter")
to the end side (labelPosition="end" or labelPosition="topEnd")
Within the field area, the fieldHalign attribute controls where the field content can be aligned:
to the start side (fieldHalign="start")
to the center (fieldHalign="center")
to the end side (fieldHalign="end")
Within the Panel Form Layout, the child components can be placed in one or more columns using maxColumns and rows attributes. These attributes should be used in conjunction with labelWidth, fieldWidth, labelPosition, and showHorizontalDividers attributes to obtain the optimal multi-column layout.
In the Palette, drag and drop a Panel Form Layout component to the MAF AMX page.
In the New Panel Form Layout dialog, set the component's attributes. For more information, see .
shows the panelFormLayout element defined in a MAF AMX file.
Example 6-4 Panel Form Layout Definition
&amx:panelFormLayout styleClass="prod" id="pfl1"&
&amx:panelLabelAndMessage label="Type" id="plm1"&
&amx:commandLink text="Personal" action="edittype" id="cl1"/&
&/amx:panelLabelAndMessage&
&/amx:panelFormLayout&
6.2.5 How to Use a Panel Stretch Layout Component
The Panel Stretch Layout (panelStretchLayout) component manages three child Facet components: top, bottom, and center (see ). You can use any number and combination of these facets.
Example 6-5 Basic Panel Stretch Layout Definition
&amx:panelStretchLayout id="psl1"&
&amx:facet name="top"&
&/amx:facet&
&amx:facet name="center"&
&/amx:facet&
&amx:facet name="bottom"&
&/amx:facet&
&/amx:panelStretchLayout&
If an attempt is made to represent the Panel Stretch Layout component as a set of three rectangles stacked one on top of another, the following would apply:
The height of the top rectangle is defined by the natural height of the top facet.
The height of the bottom rectangle is defined by the natural height of the bottom facet.
The rest of the vertical space is distributed to the rectangle in the middle. If the height of this rectangle is smaller than the value defined for Center.height and the scrollPolicy attribute of the panelStretchLayout is set to either scroll or auto, then scroll bars are added.
In the Palette, drag and drop a Panel Stretch Layout onto the MAF AMX page.
Review the created child Facet components and, if necessary, remove some of them.
Use the Properties window to set the component attributes. For more information, see .
6.2.6 How to Use a Panel Label And Message Component
Use the Panel Label And Message (panelLabelAndMessage) component to place a component which does not have a label attribute. These components usually include an Output Text, Button, or Link.
In the MAF AMX pane of the Palette, drag and drop a Panel Label And Message component into a Panel Group Layout component.
In the New Panel Label and Message dialog, set the component's attributes. For more information, see .
shows the panelLabelAndMessage element defined in a MAF AMX file. The label attribute is used for the child component.
Example 6-6 Panel Label and Message Definition
&amx:panelLabelAndMessage label="Phone" id="plm1"&
&amx:outputText value="212-555-0123" id="ot1"/&
&/amx:panelLabelAndMessage&
6.2.7 How to Use a Facet Component
You use the Facet (facet) component to define an arbitrarily named facet, such as a header or footer, on the parent layout component. The position and rendering of the Facet are determined by the parent component.
The MAF AMX page header is typically represented by the Panel Page component (see ) in combination with the Header, Primary, and Secondary facets:
Header facet: contains the page title.
Primary Action facet: represents an area that appears in the left corner of the header bar and typically hosts Button or Link components, but can contain any component type.
Secondary Action facet: represents an area that appears in the right corner of the header bar and typically hosts Button or Link components, but can contain any component type.
The MAF AMX page footer is represented by the Panel Page component (see ) in combination with the footer facet:
Footer facet: represents an area that appears below the content area and typically hosts Button or Link components, but can contain any component type.
shows the facet element declared inside the Panel Page container. The type of the facet is always defined by its name attribute (see ).
Example 6-7 Facet Definition
&amx:panelPage id="pp1"&
&amx:facet name="footer"&
&amx:commandButton id="cb2" icon="folder.png"
text="Move (#{myBean.mailcount})"
action"move"/&
&/amx:facet&
&/amx:panelPage&
lists predefined Facet types that you can use with specific parent components.
Table 6-2 Facet Types and Parent Components
You can use the context menu displayed on the Outline pane to add a Facet component as a child of another component. The context menu displays options that are valid for your selected parent component.
To add a Facet, first select the parent component in the Outline or Source editor, and complete one of the following steps:
Right-clicking the amx:PanelPage entry in the Outline lets you enter a Facet, as
Figure 6-2 Using Context Menu to Add Facet to Panel Page
In the Palette, drag and drop a Facet component into another component listed in .
In the Properties window, set the component's attributes. For more information, see .
6.2.8 How to Use a Popup Component
Use the Popup (popup) component to display a popup window. You can declare this component as a child of the View component.
You can use the following operations in conjunction with the Popup component:
Close Popup Behavior (closePopupBehavior) operation represents a declarative way to close the Popup in response to a client-triggered event.
Show Popup Behavior (showPopupBehavior) operation represents a declarative way to show the Popup in response to a client-triggered event specified using the type attribute of the Show Popup Behavior.
The popupId attribute of the Show Popup Behavior specifies the unique identifier of the Popup component relative to its parent component. The alignId attribute of the Show Popup Behavior specifies the unique identifier of the UI component relative to which the Popup is to be aligned. Since setting identifiers manually is tedious and can lead to invalid references, you set values for these two attributes using an editor that is integrated with the standard Properties window. There is an Audit rule that is specifically defined to validate these identifiers (see ).
The decoration attribute of the Show Popup Behavior allows you to configure the Popup to have an anchor pointing to the component that matches the specified alignId. You do so by setting the decoration attribute to anchor (the default value is simple).
Values you set for the align attribute of the Show Popup Behavior indicate where the alignment of the Popup component is to be positioned if there is enough space to satisfy that positioning. When there is not enough space, alternate positioning is chosen by MAF.
For more information on the Show Popup Behavior component's attributes and their values, see .
shows popup and showPopupBehavior elements defined in a MAF AMX file.
Example 6-8 Popup and Show Popup Behavior Definition
&amx:view&
&amx:panelPage id="panelPage1"&
&amx:commandButton id="commandButton1" text="Show Popup"&
&amx:showPopupBehavior popupId="popup1" type="action"
align="topStart" alignId="panelPage1"
decoration="anchor"/&
&/amx:commandButton&
&/amx:panelPage&
&amx:popup id="popup1"
animation="slideUp"
autoDismiss="true"
backgroundDimming="off"/&
&/amx:view&
Popup components can display validation messages when the user input errors occur. For more information, see
Select the popup element in the Outline pane and click the right mouse button.
Select Add Child from a list of Popup components (see ).
Figure 6-3 Selecting Popup Child attribute from List
Select the Popup component to be displayed when this Show Popup Behavior is invoked.
A MAF sample application called UIDemo demonstrates how to use the Popup component and how to apply styles to adjust the page layout to a specific pattern. The UIDemo application is available from File & New & MAF Examples.
6.2.9 How to Use a Panel Splitter Component
Use the Panel Splitter (panelSplitter) component to display multiple content areas that may be controlled by a left-side navigation pane. Panel Splitter components are commonly used on tablet devices that have larger display size. These components are typically used with a list on the left and the content on the right side of the display area.
A Panel Splitter can contain a navigator Facet (see ) which is generated automatically when you drag and drop the Panel Splitter onto a MAF AMX page, and a Panel Item component. The Panel Item (panelItem) component represents the content area of a Panel Splitter. Since each Panel Splitter component must have a least one Panel Item, the Panel Item is automatically added to the Panel Splitter when the Panel Splitter is created. Each Panel Item component can contain any component that a Panel Group Layout can contain (see ).
The left side of the Panel Splitter is represented by a navigator facet (navigator), which is optional in cases where only multiple content with animations is desired (for example, drawing a multicontent area with a Select Button that requires animation when selecting different buttons to switch content). When in landscape mode, th in portrait mode, a button is placed above the content area and when clicked, the content of the facet is launched in a popup.
When developing for iOS platform, you can configure the Panel Splitter and Panel Item to accommodate the right-to-left language environment by setting their animation attribute to either slideStart, slideEnd, flipStart, or flipEnd. The animation attribute of the Panel Item components overrides the Panel Splitter's animation attribute. For more information, see .
shows the panelSplitter element defined in a MAF AMX file, with the navigator facet used as a child component.
Example 6-9 Panel Splitter with Navigator Definition
&amx:panelSplitter id="ps1"
selectedItem="#{bindings.display.inputValue}"
animation="flipEnd"&
&amx:facet name="navigator"&
&amx:listView id="lv1"
value="#{bindings.data.collectionModel}"
showMoreStrategy="autoScroll"
bufferStrategy="viewport&
&/listView&
&amx:panelItem id="x"&
&amx:panelGroupLayout&
&/panelGroupLayout&
&/panelItem&
&amx:panelItem id="y"&
&amx:panelGroupLayout&
&/panelGroupLayout&
&/panelItem&
&/panelSplitter&
For more examples, see the UIDemo application, available from File & New & MAF Examples.
For more information, see .
6.2.10 How to Use a Spacer Component
Use the Spacer (spacer) component to create an area of blank space with a purpose to separate components on a MAF AMX page. You can include vertical and horizontal spaces in a page using the height (for vertical spacing) and width (for horizontal spacing) attributes of the spacer:
In the Components window, drag and drop a Spacer onto the MAF AMX page.
Use the Properties window to set the attributes of the component. For more information, see .
shows the spacer element defined in a MAF AMX file.
Example 6-10 Defining Spacer
&amx:outputText id="ot1" value="This is a long piece of text for this page..."/&
&amx:spacer id="s1" height="10"/&
&amx:outputText id="ot2" value="This is some more lengthy text..."/&
6.2.11 How to Use a Table Layout Component
Use the Table Layout (tableLayout) component to display data in a typical table format that consists of rows containing cells.
The Row Layout (rowLayout) component represents a single row in the Table Layout. The Table Layout component must contain either one or more Row Layout components or Iterator components that can produce Row Layout components.
The CellFormat (cellFormat) component represents a cell in the Row Layout. The Row Layout component must contain either one or more CellFormat components, Iterator components, Attribute List Iterator components, or Facet Definition components that can produce CellFormat components.
The Table Layout structure does not allow cell contents to use percentage heights nor can a height be assigned to the overall table structure as a whole. For details, see the description of the following attributes in the :
layout and width attributes of the Table Layout component
width and height attributes of the Row Layout component
In the Components window, drag and drop a Table Layout onto the MAF AMX page.
Insert the desired number of Row Layout, Iterator, Attribute List Iterator, or Facet Definition child components into the Table Layout component.
Insert Cell Format, Iterator, Attribute List Iterator, or Facet Definition child components into each Row Layout component.
Use the Properties window to set the attributes of all added components. For more information, see .
shows the tableLayout element and its children defined in a MAF AMX file.
Example 6-11 Defining Table Layout
&amx:tableLayout id="tableLayout1"
rendered="#{pageFlowScope.pRendered}"
styleClass="#{pageFlowScope.pStyleClass}"
inlineStyle="#{pageFlowScope.pInlineStyle}"
borderWidth="#{pageFlowScope.pBorderWidth}"
cellPadding="#{pageFlowScope.pCellPadding}"
cellSpacing="#{pageFlowScope.pCellSpacing}"
halign="#{pageFlowScope.pHalign}"
layout="#{pageFlowScope.pLayoutTL}"
shortDesc="#{pageFlowScope.pShortDesc}"
summary="#{pageFlowScope.pSummary}"
width="#{pageFlowScope.pWidth}"&
&amx:rowLayout id="rowLayout1"&
&amx:cellFormat id="cellFormatA" rowSpan="2" halign="center"&
&amx:outputText id="otA" value="Cell A"/&
&/amx:cellFormat&
&amx:cellFormat id="cellFormatB" rowSpan="2" halign="center"&
&amx:outputText id="otB" value="Cell B (wide content)"/&
&/amx:cellFormat&
&amx:cellFormat id="cellFormatC" rowSpan="2" halign="center"&
&amx:outputText id="otC" value="Cell C"/&
&/amx:cellFormat&
&/amx:rowLayout&
&amx:rowLayout id="rowLayout2"&
&amx:cellFormat id="cellFormatD" halign="end"&
&amx:outputText id="otD" value="Cell D"/&
&/amx:cellFormat&
&amx:cellFormat id="cellFormatE"&
&amx:outputText id="otE" value="Cell E"/&
&/amx:cellFormat&
&/amx:rowLayout&
&/amx:tableLayout&
6.2.12 How to Use a Deck Component
The Deck (deck) component represents a container that shows one of its child components at a time. The transition from one displayed child component (defined by the displayedChild attribute) to another is enabled by the Transition (transition) operation. The transition can take a form of animation. For more information about the transition, see
The Deck can be navigated forward and backwards.
In the Components window, drag and drop a Deck onto the MAF AMX page.
Insert the desired number of Transition operations and child UI components into the Deck component.
Use the Properties window to set the attributes of all added components. For more information, see .
shows the deck element and its children defined in a MAF AMX file. The Deck component's displayedChild attribute to define which child component ID should be displayed. Typically, this is controlled by a component such as a Select One Button or other selection component.
Example 6-12 Deck Definition
&amx:deck id="deck1"
rendered="#{pageFlowScope.pRendered}"
styleClass="#{pageFlowScope.pStyleClass}"
inlineStyle="width:95height:137overflow:
#{pageFlowScope.pInlineStyle}"
landmark="#{pageFlowScope.pLandmark}"
shortDesc="#{pageFlowScope.pShortDesc}"
displayedChild="#{pageFlowScope.pDisplayedChild}"&
&amx:transition triggerType="#{pageFlowScope.pTriggerType}"
transition="#{pageFlowScope.pTransition}"/&
&amx:transition triggerType="#{pageFlowScope.pTriggerType2}"
transition="#{pageFlowScope.pTransition2}"/&
&amx:commandLink id="linkCardBack1" text="Card Back"&&
&amx:setPropertyListener from="linkCardA"
to="#{pageFlowScope.pDisplayedChild}"/&
&/amx:commandLink&
&amx:commandLink id="linkCardA1" text="Card Front A"&
&amx:setPropertyListener id="setPL1"
from="linkCardB"
to="#{pageFlowScope.pDisplayedChild}"/&
&/amx:commandLink&
&amx:commandLink id="linkCardB1" text="Card Front B"&
&amx:setPropertyListener id="setPL2"
from="linkCardC"
to="#{pageFlowScope.pDisplayedChild}"/&
&/amx:commandLink&
&amx:commandLink id="linkCardC1" text="Card Front C"&
&amx:setPropertyListener id="setPL3"
from="linkCardD"
to="#{pageFlowScope.pDisplayedChild}"/&
&/amx:commandLink&
&amx:commandLink id="linkCardD1" text="Card Front D"&
&amx:setPropertyListener id="setPL4"
from="linkCardE"
to="#{pageFlowScope.pDisplayedChild}"/&
&/amx:commandLink&
&amx:commandLink id="linkCardE1" text="Card Front E"&
&amx:setPropertyListener id="setPL5"
from="linkCardBack"
to="#{pageFlowScope.pDisplayedChild}"/&
&/amx:commandLink&
&/amx:deck&
For more information, see .
6.2.13 How to Use the Fragment Component
The Fragment (fragment) component enables sharing of MAF AMX page contents. This component is used in conjunction with a MAF AMX fragment file. For more information, see
In the Components window, drag and drop a Fragment to the MAF AMX page.
Use the Insert Fragment dialog to set the Src attribute of the Fragment to a fragment file (.amxf).
Optionally, use the Structure view to add child components, such as an Attribute, Attribute List, or Facet.
Use the Properties window to set the attributes of all added components. For more information, see .
shows a fragment element added to a MAF AMX page.
shows the corresponding MAF AMX fragment file.
A MAF sample application called FragmentDemo demonstrates how to create and use the Fragment. This sample application is available from File & New & MAF Examples.
6.3 Creating and Using UI Components
You can use the following UI components when developing your MAF AMX application feature:
Input Text (see )
Input Number Slider (see )
Input Date (see )
Output Text (see )
Button (see )
Link (see )
Image (see )
Checkbox (see )
Boolean Switch (see )
Select Many Checkbox (see )
Select Many Choice (see )
Choice (see )
Select Button (see )
Radio Button (see )
List View (see )
Carousel (see )
Film Strip (see )
Verbatim (see )
Output HTML (see )
Iterator (see )
You can also use the following miscellaneous components that include operations, listener-type components, and converters as children of the UI components when developing your MAF AMX application feature:
Load Bundle (see )
Action Listener (see )
Set Property Listener (see )
Convert Date Time (see )
Convert Number (see )
Navigation Drag Behavior (see )
Loading Indicator Behavior (see )
You add a UI component by dragging and dropping it onto a MAF AMX page from the Palette (see ). Then you use the Properties window to set the component's attributes. For information on attributes of each particular component, see .
You can add event listeners to some UI components. For more information, see
Event listeners are applicable to components for the MAF AMX runtime description on both iOS and Android-powered devices, but the listeners do not have any effect at design time.
For information on the UI components' support for accessibility, see
The user interface created for iOS platform using MAF AMX displays correctly in both the left-to-right and right-to-left language environments. In the latter case, the components originate on the right-hand side of the screen instead of on the left-hand side.
A MAF sample application called CompGallery demonstrates how to create and configure MAF AMX UI components. Another sample application called UIDemo shows how to lay out components on a MAF AMX page. The sample applications are available from File & New & MAF Examples.
6.3.1 How to Use the Input Text Component
The Input Text (inputText) component represents an editable text field. The following types of Input Text components are available:
Standard single-line Input Text, which is declared as an inputText element in a MAF AMX file:
&amx:inputText id="text1"
label="Text Input:"
value="#{myBean.text}" /&
Password Input Text:
&amx:inputText id="text1"
label="Password Input:"
value="#{myBean.text}"
secret="true" /&
Multiline Input Text (also known as text area):
&amx:inputText id="text1"
label="Textarea:"
value="#{myBean.text}"
simple="true"
rows="4" /&
shows the Input Text component displayed in the Preview pane. This component has its parameters set as follows:
&amx:inputText id="inputText1"
label="Input Text"
value="text"/&
Figure 6-4 Input Text at Design Time
The inputType attribute lets you define how the component interprets the user input: as a text (default), email address, number, telephone number, or URL. These input types are based on the values allowed by HTML5.
To enable conversion of numbers, as well as date and time values that are entered in the Input Text component, you use the Convert Number (see ) and Convert Date Time (see ) components.
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application available from File & New & MAF Examples.
On some mobile devices, when the end user taps an Input Text field, the keyboard is displayed (slides up). If an Input Text is the only component on a MAF AMX page, the input focus is on this field and the keyboard is displayed by default when the page loads.
A multiline Input Text may be displayed on a secondary page where it is the only component, in which case the multiline Input Text receives focus when the page loads and the keyboard becomes visible.
Input Text components render and behave differently on iOS and Android-powered devices: on iPhone and iPad, Input Text components may be displayed with or without a border.
When creating an Input Text component, consider the following:
To input or edit content, the end user has to tap in the field, which triggers a blinking insertion cursor to be displayed at the point of the tap, allowing the end user to edit the content. If the field does not contain content, the insertion cursor is positioned at the start of the field.
Fields represented by Input Text components may contain default text, typically used as a prompt. When the end user taps a key on the keyboard in such a field, the default text clears when Edit mode is entered. This behavior is enabled and configured through the Input Text's hintText attribute.
Fields represented by Input Text components do not have a selected appearance. Selection is indicated by the blinking insertion cursor within the field.
If the end user enters more text than fits in the field, the text content shifts left one character at a time as the typing continues.
A multiline Input Text component is rendered as a rectangle of any height. This component supports scrolling when the content is too large to fit within the boundaries of the field: rows of text scroll up as the text area fills and new rows of text are added. The end user may flick up or down to scroll rows of text if there are more rows than can be displayed in the given display space. A scroll bar is displayed within the component to indicate the area is being scrolled.
Password field briefly echoes each typed character, and then reverts the character to a dot to protect the password.
The appearance and behavior of the Input Text component on iOS can be customized (see ).
6.3.1.1 Customizing the Input Text Component
MAF AMX provides support for the input capitalization and correction on iOS-powered devices, as well as the ability to override the return button located at the bottom right of the mobile devices's soft keypad (see ) such that this button would appear and act as the Go or Search button (see ) and trigger a DataChangeEvent for a single-line Input Text component.
Figure 6-5 Return Button on iOS-Powered Device at Runtime
Figure 6-6 Go and Search Buttons on iOS at Runtime
lists attributes of the Input Text component that allow you to customize the appearance and behavior of that component and the soft keypad that is used to enter values into fields represented by the Input Text.
Table 6-3 Input-Customizing Attributes of the Input Text Component
Description
normal: use the operating system's default.
go: request the field to act like a trigger for behavior.
search: request the field to act like a search field that triggers a lookup.
Indicates how the text field is to be used.
If go or search is specified, dismissing the keypad causes the input to blur on both iOS and Android platforms.
Even though support for Go and Search buttons on iOS is subject to change and might be terminated at any time, on some iOS-powered devices keypads are provided with the enhanced functionality. For example, instead of displaying a return button on a single-line text field, it might already replace it with a Go or Search button.
auto: use the operating system's default.
sentences: request that sentences comprising the input start with a capital letter.
none: request that no capitalization be applied automatically to the input.
words: request that words comprising the input start with capital letters.
characters: request that each character typed as an input become capitalized.
Requests special treatment by iOS for capitalization of values while the field represented by the Input Text is being edited.
Note that setting this property has no impact on Android.
auto: use the operating system's default.
on: request auto-correct support for the input.
off: request auto-correct of the input be disabled.
Requests special treatment by iOS for correcting values while the field represented by the Input Text is being edited.
Note that setting this property has no impact on Android.
Since iOS provides limited support for auto-capitalization and auto-correction on its device simulator, you must test this functionality on an iOS device.
6.3.2 How to Use the Input Number Slider Component
The Input Number Slider (inputNumberSlider) component enables selection of numeric values from a range of values by using a slider instead of entering the value by using keys. The filled portion of the trough or track of the slider visually represents the current value.
The Input Number Slider may be used in conjunction with the Output or Input Text component to numerically show the value of the slider. The Input Text component also allows direct entry of a slider value: when the end user taps the Input Text field, the keyboard in nu the keyboard can be dismissed by either using the slide-down button or by tapping away from the slider component.
The Input Number Slider component always shows the minimum and maximum values within the defined range of the component.
demonstrates the inputNumberSlider element defined in a MAF AMX file.
Example 6-13 Input Number Slider Definition
&amx:inputNumberSlider id="slider1" value="#{myBean.count}"/&
shows the Input Number Slider component displayed in the Preview pane. This component has its parameters set as follows:
&amx:inputNumberSlider id="inputNumberSlider1"
label="Input Number"
minimum="0"
maximum="20"
stepSize="1"
value="10"/&
Figure 6-7 Input Number Slider at Design Time
To enable conversion of numbers that are entered in the Input Number Slider component, you use the Convert Number component (see ).
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application available from File & New & MAF Examples.
Similar to other MAF AMX UI components, the Input Number Slider component has a normal and selected state. The component is in its selected state at any time it is touched. To change the slider value, the end user touches, and then interacts with the slider button.
The Input Number Slider component has optional imageLeft and imageRight attributes which point to images that can be displayed on either side of the slider to provide the end user with additional information.
6.3.3 How to Use the Input Date Component
The Input Date (inputDate) component presents a popup input field for entering dates. The default date format is the short date format appropriate for the current locale. For example, the default format in American English (ENU) is mm/dd/yy. The inputType attribute defines if the component accepts date, time, or date and time as an input. The time zone depends on the time zone configured for the mobile device, and, therefore, it is relative to the device. At runtime, the Input Date component has the device's native look and feel.
demonstrates the inputDate element defined in a MAF AMX file. The inputType attribute of this component is set to the default value of date. If the value attribute is read-only, it can be set to either an EL expression or any if value is not a read-only attribute, it can be specified only as an EL expression.
Example 6-14 Input Date Definition
&amx:inputDate id="inputDate1" label="Input Date" value="#{myBean.date}"/&
For more information, see the following:
HTML5 global dates and times defined by
CompGallery, available from File & New & MAF Examples.
6.3.4 How to Use the Output Text Component
MAF AMX provides the Output Text (outputText) component for you to use as a label to display text.
demonstrates the outputText element defined in a MAF AMX file.
Example 6-15 Output Text Definition
&amx:outputText id="ot1"
value="output"
styleClass="#{pageFlowScope.pStyleClass}"/&
shows the Output Text component displayed in the Preview pane.
Figure 6-8 Output Text at Design Time
You use the Convert Number (see ) and Convert Date Time (see ) converters to facilitate the conversion of numerical and date-and-time-related data for the Output Text components.
For more information, illustrations, and examples, see the following:
CompGallery and UIDemo, MAF sample applications available from File & New & MAF Examples.
6.3.5 How to Use Buttons
The Button (commandButton) component is used to trigger actions (for example, Save, Cancel, Send) and to enable navigation to other pages within the application (for example, Back: see
for more information).
You may use the Button in one of the following ways:
Button with a text label.
Button with a text label and an image icon.
Button with an image icon only (for example, the "&+&" and "&-&" buttons for adding or deleting records).
MAF supports one default Button type for the following three display areas:
Buttons that appear in the top header bar: in MAF AMX pages, the header is represented by the Panel Page component (see ) in combination with the header, primary, and secondary facets, which is typical on iPhones:
Header Facet contains the page title.
Primary Action Facet represents an area that appears in the left corner of the header bar and typically hosts Button or Link components, but can contain any component type.
Secondary Action Facet represents an area that appears in the right corner of the header bar and typically hosts Button or Link components, but can contain any component type.
Buttons that appear in the content area of a page.
Buttons that appear in the footer bar of a page. In MAF AMX pages, the footer is represented by the Panel Page component (see ) in combination with the footer facet:
Footer Facet represents an area that appears below the content area and typically hosts Button or Link components, but can contain any component type.
All Button components of any type have three states:
Activated: represents appearance when the Button is tapped or touched by the end user. When a button is tapped (touch and release), the button action is performed. Upon touch, the activated app upon release, the action is performed. If the end user touches the button and then drags their finger away from the button, the action is not performed. However, for the period of time the button is touched, the activated appearance is displayed.
The appearance of a Button component is defined by its styleClass attribute that you set to an adfmf-commandButton-&style&. You can apply any of the styles detailed in
to a Button placed in any valid location within the MAF AMX page.
Table 6-4 Main Button Styles
There is a Rounded style (adfmf-commandButton-rounded) that you can apply to a Button to decorate it with a thick rounded border (see ). You can define this style in combination with any other style.
Figure 6-9 Rounded Button at Design Time
MAF AMX provides a number of additional decorative styles (see ).
There is a particular order in which MAF AMX processes the Button component's child operations and attributes. For more information, see
6.3.5.1 Displaying Default Style Buttons
The following are various types of default style buttons that can be placed within Panel Page facets or content area:
Normal, activated, or disabled Button with a text label only.
Normal, activated, or disabled Button with an image icon only.
demonstrate the commandButton element declared in a MAF AMX file.
Example 6-16 Definition of Default Button with Text Label
&amx:panelPage id="pp1"&
&amx:facet name="primary"&
&amx:commandButton id="cb1"
text="Cancel"
action="cancel"
actionListener="#{myBean.rollback}"/&
&/amx:facet&
&/amx:panelPage&
Example 6-17 Definition of Default Button with Image Icon
&amx:panelPage id="pp1"&
&amx:facet name="primary"&
&amx:commandButton id="cb1"
icon="plus.png"
action="add"
actionListener="#{myBean.AddItem}"/&
&/amx:facet&
&/amx:panelPage&
shows the commandButton element declared inside the Panel Page's footer facet.
Example 6-18 Definition of Default Button with Text Label and Image in Footer Facet
&amx:panelPage id="pp1"&
&amx:facet name="footer"&
&amx:commandButton id="cb2"
icon="folder.png"
text="Move (#{myBean.mailcount})"
action="move"/&
&/amx:facet&
&/amx:panelPage&
demonstrates the commandButton element declared as a part of the Panel Page content area.
Example 6-19 Definition of Default Button with Text Label in the Page Content Area
&amx:panelPage id="pp1"&
&amx:commandButton id="cb1"
text="Reply"
actionListener="#{myBean.share}"/&
&/amx:panelPage&
For more information, illustrations, and examples, see the following:
CompGallery, a sample application is available from File & New & MAF Examples
6.3.5.2 Displaying Back Style Buttons
The following are various types of back style buttons that are placed within Panel Page facets or content area:
Normal, activated, or disabled Button with a text label only.
Normal, activated, or disabled Button with an image icon only:
demonstrates the commandButton element declared in a MAF AMX file.
Example 6-20 Definition of Back Button with Text Label
&amx:panelPage id="pp1"&
&amx:facet name="header"&
&amx:outputText value="Details" id="ot1"/&
&/amx:facet&
&amx:facet name="primary"&
&amx:commandButton id="cb1"
text="Back"
action="__back"/&
&/amx:facet&
&/amx:panelPage&
Every time you place a Button component within the primary facet and set its action attribute to __back, MAF AMX automatically applies the back arrow styling to it, as
Figure 6-10 Back Button at Design Time
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application available from File & New & MAF Examples
6.3.5.3 Displaying Highlight Style Buttons
Similar to other types of Buttons, highlight style buttons that are placed within Panel Page facets or content area can have their state as normal, activated, or disabled.
demonstrates the commandButton element declared in a MAF AMX file.
Example 6-21 Definition of Highlight Button with Text Label
&amx:panelPage id="pp1"&
&amx:facet name="secondary"&
&amx:commandButton id="cb2"
text="Save"
action="save"
styleClass="adfmf-commandButton-highlight"/&
&/amx:facet&
&/amx:panelPage&
Figure 6-11 Highlight Button at Design Time
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application available from File & New & MAF Examples.
6.3.5.4 Displaying Alert Style Buttons
Alert style buttons placed within the Panel Page can have normal, activated, or disabled state.
demonstrates the commandButton element declared in a MAF AMX file.
Example 6-22 Definition of Alert Button with Text Label
&amx:commandButton id="cb1"
text="Delete"
actionListener="#{myBean.delete}"
styleClass="adfmf-commandButton-alert" /&
Figure 6-12 Alert Button at Design Time
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application available from File & New & MAF Examples.
6.3.5.5 Using Additional Button Styles
MAF AMX provides the following additional Button styles:
Dark style
Bright style
Small style
Large style
Highlight style
Confirm style
Two varieties of the Alternate style
Figure 6-13 Additional Button Styles
6.3.5.6 Using Buttons Within the Application
In your MAF application, you can use the Button component within the following contexts:
to perform specific actions
Popup-style
MAF lets you create standard buttons for use on a navigation bar:
Edit button allows the end user to enter an editing or content-manipulation mode.
Cancel button allows the end user to exit the editing or content-manipulation mode without saving changes.
Save button allows the end user to exit the editing or content-manipulation mode by saving changes.
Done button allows the end user to exit the current mode and save changes, if any.
Undo button allows the end user to undo the most recent action.
Redo button allows the end user to redo the most recent undone action.
Back button allows the end user to navigate back to the springboard.
Back to Page button allows the end user to navigate back to the page identified by the button text label.
Add button allows the end user to add or create a new object.
Buttons that are positioned within the content area of a page perform a specific action given the location and context of the button within the page. These buttons may have a different visual appearance than buttons positioned with the navigation bar:
An example of buttons placed within an action sheet is a group of Delete Note and Cancel buttons.
An action sheet button expands to the width of the display.
An OK button can be placed within a validation message, such as a login validation after a failed password input.
6.3.5.7 Enabling the Back Button Navigation
MAF AMX supports navigation using the back button, with the default behavior of going back to the previously visited page. For more information, see
If any Button component is added to the primary facet of a Panel Page that is equipped with the __back navigation, this Button is automatically given the back arrow visual styling (see ). To disable this, set the styleClass attribute to amx-commandButton-normal.
For more information, illustrations, and examples, see the following:
Tag Reference for Oracle Mobile Application Framework
CompGallery, a MAF sample application available from File & New & MAF Examples
6.3.5.8 What You May Need to Know About the Order of Processing Operations and Attributes
The following is the order in which MAF AMX processes operations and attributes when such components as a Button, Link, and List Item are activated:
The following child operations are processed in the order they appear in the XML file:
Set Property Listener
Action Listener
Show Popup Behavior
Close Popup Behavior
The Action Listener (actionListener) attribute is processed and the associated Java method is invoked.
The Action (action) attribute is processed and any navigation case is followed.
6.3.6 How to Use Links
You use the Link (commandLink) component to trigger actions and enable navigation to other views.
The Link component can have any type of component defined as its child. By using such components as Set Property Listener (see ), Action Listener (see ), Show Popup Behavior, Close Popup Behavior see ), and Validation Behavior (see ) as children of the Link component, you can create an actionable area within which clicks and gestures can be performed.
By placing an Image component (see ) inside a Link you can create a clickable image.
demonstrates the commandLink element declared in a MAF AMX file.
Example 6-23 Basic Link Definition
&amx:commandLink id="cl1"
text="linked"
action="gotolink"
actionListener="#{myBean.doSomething}"/&
shows the basic Link component displayed in the Preview pane.
Figure 6-14 Link at Design Time
demonstrates the commandLink element declared in a MAF AMX file. This component is placed within the panelFormLayout and panelLabelAndMessage components.
Example 6-24 Definition of Link Within Form
&amx:panelPage id="pp1"&
&amx:panelFormLayout id="form"&
&amx:panelLabelAndMessage id="panelLabelAndMessage1" label="Label"&
&amx:commandLink id="cl1"
text="linked"
action="gotolink"
actionListener="#{myBean.doSomething}"/&
&/amx:panelLabelAndMessage&
&/amx:panelFormLayout&
&/amx:panelPage&
shows the Link component placed within a form and displayed in the Preview pane.
Figure 6-15 Link Within Form at Design Time
There is a particular order in which MAF AMX processes the Link component's child operations and attributes. For more information, see
MAF AMX provides another component which is similar to the Link, but which does not allow for navigation between pages: Link Go (goLink) component. You use this component to enable linking to external pages.
shows the Link Go component displayed in the Preview pane. This component has its parameters set as follows:
&amx:goLink id="goLink1"
text="Go Link"
url="http://example.com"/&
Figure 6-16 Link Go at Design Time
Image is the only component that you can specify as a child of the Link Go component.
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application This sample application is available from File & New & MAF Examples
6.3.7 How to Display Images
MAF AMX enables the display of images on iOS and Android-powered devices using the Image (image) component represented by a bitmap.
In addition to placing an Image in a Button and List View, you can place it inside a Link component (see ) to create a clickable image.
demonstrates the image element definition in a MAF AMX file.
Example 6-25 Image Definition
&amx:image id="i1"
styleClass="prod-thumb"
source="images/img-big-#{pageFlowScope.product.uid}.png" /&
The following are supported formats on Android platform:
The following are supported formats on iOS platform:
For more information, illustrations, and examples, see the following:
CompGallery and UIDemo, MAF sample applications available from File & New & MAF Examples.
6.3.8 How to Use the Checkbox Component
The Checkbox (selectBooleanCheckbox) component represents a check box that you create to enable single selection of true or false values, which allows toggling between selected and deselected states.
You can use the label attribute of the Checkbox component to place text to the left of the checkbox, and the text attribute places text on the right.
demonstrates the selectBooleanCheckbox element declared in a MAF AMX file.
Example 6-26 Unchecked Checkbox Definition
&amx:selectBooleanCheckbox id="check1"
label="Agree to the terms:"
value="#{myBean.bool1}"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/&
shows the unchecked Checkbox component displayed in the Preview pane. This component has its parameters set as follows:
&amx:selectBooleanCheckbox id="selectBooleanCheckbox1"
label="Checkbox"
value="false"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/&
Figure 6-17 Unchecked Checkbox at Design Time
Example 6-27 Checked Checkbox at Design Time
&amx:selectBooleanCheckbox id="selectBooleanCheckbox1"
label="Checkbox"
value="true"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/&
shows the checked Checkbox component displayed in the Preview pane. This component has its parameters set as follows:
Figure 6-18 Checked Checkbox Definition
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application This sample application is available from File & New & MAF Examples
6.3.8.1 Support for Checkbox Components on iOS Platform
iOS does not support a native Checkbox component. The Boolean Switch is usually used in Properties pages to enable a boolean selection (see ).
6.3.8.2 Support for Checkbox Components on Android Platform
Android provides support for a native Checkbox component. This component is used extensively on Settings pages to turn on or off individual setting values.
6.3.9 How to Use the Boolean Switch Component
The Boolean Switch (selectBooleanSwitch) component allows editing of boolean values as a switch metaphor instead of a checkbox.
Similar to other MAF AMX UI components, this component has a normal and selected state. To toggle the value, the end user taps (touches and releases) the switch once. Each tap toggles the switch.
demonstrates the selectBooleanSwitch element defined in a MAF AMX file.
Example 6-28 Boolean Switch Definition
&amx:selectBooleanSwitch id="switch1"
label="Flip switch:"
onLabel="On"
offLabel="Off"
value="#{myBean.bool1}"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/&
shows the Boolean Switch component displayed in the Preview pane. This component has its parameters set as follows:
&amx:selectBooleanSwitch id="selectBooleanSwitch1"
label="Switch"
value="value1"
valueChangeListener=
"#{PropertyBean.ValueChangeHandler}"/&
Figure 6-19 Boolean Switch at Design Time
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application available from File & New & MAF Examples
6.3.9.1 What You May Need to Know About Support for Boolean Switch Components on iOS Platform
On iOS, Boolean Switch components are often used on Settings pages to enable or disable an attribute value.
6.3.9.2 What You May Need to Know About Support for Boolean Switch Components on Android Platform
Android platform does not directly support a Boolean Switch component. Instead, Android provides a toggle button that allows tapping to switch between selected and deselected states.
6.3.10 How to Use the Select Many Checkbox Component
The Select Many Checkbox (selectManyCheckbox) component represents a group of check boxes that you use to enable multiple selection of true or false values, which allows toggling between selected and deselected states of each check box in the group. The selection mechanism is provided by the Select Items or Select Item component (see ) contained by the Select Many Checkbox component.
demonstrates the selectManyCheckbox element declared in a MAF AMX file.
Example 6-29 Select Many Checkbox Definition
&amx:selectManyCheckbox id="selectManyCheckbox1"
label="Select shipping options"
value="#{myBean.shipping}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}"&
&amx:selectItem id="selectItem1"
label="Air"
value="#{myBean.shipping.air}"/&
&amx:selectItem id="selectItem2"
label="Rail"
value="#{myBean.shipping.rail}"/&
&amx:selectItem id="selectItem3"
label="Water"
value="#{myBean.shipping.water}"/&
&/amx:selectManyCheckbox&
shows the Select Many Checkbox component displayed in the Preview pane. This component has its parameters set as follows:
&amx:selectManyCheckbox id="selectManyCheckbox1"
label="Select Many Checkbox"
value="value2"
valueChangeListener="#{PropertyBean.ValueChangeHandler}"&
&amx:selectItem id="selectItem1" label="Selection 1" value="value1"/&
&amx:selectItem id="selectItem2" label="Selection 2" value="value2"/&
&amx:selectItem id="selectItem3" label="Selection 3" value="value3"/&
&/amx:selectManyCheckbox&
Figure 6-20 Select Many Checkbox at Design Time
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application available from File & New & MAF Examples.
6.3.10.1 What You May Need to Know About the User Interaction with Select Many Checkbox Component
MAF AMX provides two alternative ways for displaying the Select Many Checkbox component: pop-up style (default) and list style that is used when the number of available choices exceeds the device screen size.
The end user interaction with a pop-up style Select Many Checkbox component on both iPhone and iPad occurs as follows: when the end user taps the component, the list of choices is displayed in a popup. To make a choice, the end user taps one or more choices. To save the selections, the end user either taps outside the popup or closes the popup using the close ("&x&") button.
Upon closing of the popup, the value displayed in the component is updated with the selected value.
When the number of choices exceed the dimensions of the device, a full-page popup containing a scrollable List View (see ) is generated.
The end user interaction with a list-style Select Many Checkbox component on both iPhone and iPad occurs as follows: when the end user taps the component, the list of choices is displayed. To make a choice, the end user scrolls up or down to browse available choices, and then taps one or more choices. To save the selections, the end user taps the close ("&x&") button.
Upon closing of the list, the value displayed in the component is updated with the selected value.
6.3.11 How to Use the Select Many Choice Component
The Select Many Choice (selectManyChoice) component allows selection of multiple values from a list. The selection mechanism is provided by the Select Items or Select Item component (see ) contained by the Select Many Checkbox component.
demonstrates the selectManyChoice element declared in a MAF AMX file.
Example 6-30 Select Many Choice Definition Using Select Item Component
&amx:selectManyChoice id="check1"
label="Select Option:"
value="#{myBean.shipping}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}"&
&amx:selectItem id="selectItem1"
label="Signature Required"
value="signature" /&
&amx:selectItem id="selectItem2"
label="Insurance"
value="insurance" /&
&amx:selectItem id="selectItem3"
label="Delivery Confirmation"
value="deliveryconfirm"/&
&/amx:selectManyChoice&
Figure 6-21 Select Many Choice at Design Time
Example 6-31 Select Many Choice Definition Using Select Items Component
&amx:selectManyChoice id="check1"
label="Select Shipping Options:"
value="#{myBean.shipping}"&
&amx:selectItems id="selectItems1" value="#{myBean.shippingOptions}"/&
&/amx:selectManyChoice&
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application available from File & New & MAF Examples
The look and behavior of the Select Many Choice component on all supported devices is almost identical to the Select Many Checkbox component (see
for more information).
6.3.12 How to Use the Select Button Component
The Select Button (selectOneButton) component represents a button group that lists actions, with a single button active at any given time. The selection mechanism is provided by the Select Items or Select Item component (see ) contained by the Select Button component.
demonstrates the selectOneButton element defined in a MAF AMX file.
Example 6-32 Select Button Definition
&amx:selectOneButton id="bg1"
value="#{myBean.myState}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}"&
&amx:selectItem id="selectItem1" label="Yes" value="yes"/&
&amx:selectItem id="selectItem2" label="No" value="no"/&
&amx:selectItem id="selectItem3" label="Maybe" value="maybe"/&
&/amx:selectOneButton&
shows the Select Button component displayed in the Preview pane. This component has its parameters set as follows:
&amx:selectOneButton id="selectOneButton1"
label="Select Button"
value="value1"
valueChangeListener="#{PropertyBean.ValueChangeHandler}"&
&amx:selectItem id="selectItem1" label="Value 1" value="value1"/&
&amx:selectItem id="selectItem2" label="Value 2" value="value2"/&
&amx:selectItem id="selectItem3" label="Value 3" value="value3"/&
&/amx:selectOneButton&
Figure 6-22 Select Button at Design Time
For more information, illustrations, and examples, see the following:
CompGallery, a MAF sample application available from File & New & MAF Examples
6.3.13 How to Use the Radio Button Component
The Radio Button (selectOneRadio) component represents a group of radio buttons that lists available choices. The selection mechanism is provided by the Select Items or Select Item component (see ) contained by the Radio Button component.
demonstrate the selectOneRadio element definition in a MAF AMX file.
Example 6-33 Radio Button Definition Using Select Item Component
&amx:selectOneRadio id="radio1"
label="Choose a pet:"
value="#{myBean.myPet}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}"&
&amx:selectItem id="selectItem1" label="Cat" value="cat"/&
&amx:selectItem id="selectItem2" label="Dog" value="dog"/&
&amx:selectItem id="selectItem3" label="Hamster" value="hamster"/&
&amx:selectItem id="selectItem4" label="Lizard" value="lizard"/&
&/amx:selectOneRadio&
Example 6-34 Radio Button Definition Using Select Items Component
&amx:selectOneRadio id="radio1"
label="Choose a pet:"
value="#{myBean.myPet}"
valueChangeListener="#{PropertyBean.ValueChangeHandler}"&
&amx:selectItems id="selectItems1" value="myBean.allPets"/&
&/amx:selectOneRadio&
shows the Boolean Switch component displayed in the Preview pane. This component has its parameters set as follows:
&amx:selectOneRadio id="selectOneRadio1"
label="Radio Button"
value="value1"
valueChangeListener="#{PropertyBean.ValueChangeHandler}"&
&amx:selectItem id="selectItem1" label="Value 1" value="value1"/&
&amx:selectItem id="selectItem2" label="Value 2" value="value2"/&
&amx:selectItem id="selectItem3" label="Value 3" value="value3"/&
&/amx:selectOneRadio&
Figure 6-23 Radio Button at Design Time
For more information, illustrations, and examples, see the following:
CompG}