3 Component Support

This chapter describes the ADF Components that are supported by ADF Mobile browser client.

This chapter includes the following sections:

• Section 3.1, "Introduction to Apache My Faces Trinidad Components"

• Section 3.2, "Input Components"

• Section 3.3, "Output Components"

• Section 3.4, "Layout Components"

• Section 3.5, "Navigation Components"

• Section 3.6, "Data Visualization (Graphs and Gauges)"

• Section 3.7, "Tables and Trees"

• Section 3.8, "Unsupported Components and Attributes"

3.1 Introduction to Apache My Faces Trinidad Components

ADF Mobile browser client supports more than 60 of Apache MyFaces Trinidad components, enabling you to build applications with a rich component set that renders appropriately to the screens of mobile devices. For more information, refer to the Apache MyFaces Trinidad site (http://myfaces.apache.org/trinidad/).

3.1.1 Supported Features

ADF Mobile browser client supports the following renderer-specific features for the supported browsers:

• Partial Page Rendering

• Dialogs

3.1.2 Partial Page Rendering

The high latency and low bandwidth of networks in mobile environments decrease application responsiveness for mobile users. Screens refresh slowly, diminishing the mobile user experience. ADF Mobile browser client's support of Partial Page Rendering (PPR) compensates for the negative impact that slow connections have on screen updates by minimizing the amount of data requested from the server; using PPR, mobile device screen updates do not require a full refresh. Browsers that do not support AJAX (Asynchronous JavaScript and XML) use full page rendering instead of PPR. For example, a page submission on basic HTML browsers (which do not support JavaScript) results in the refresh of a full page.

Note: Browsers for BlackBerry 4.5 and earlier versions do not support PPR. Specifying the autosubmit attribute on certain form components results in the submission of the page after the user exits the field. A full, not partial, refresh of the page then follows.

3.1.3 Dialogs

ADF Mobile browser client supports dialogs, pages used by applications to obtain user input. Because mobile browsers cannot open a new window that contains a dialog (a pop-up window), dialogs appear as new pages within the main browser window after automatically preserving the state of the current page.

3.1.4 Rendering Specific to the BlackBerry Browser 4.5 and Earlier Browsers

On browsers for BlackBerry 4.5 and earlier versions, the bullets in a list sublevel (such as those in a tr:panelList component) appear large and are not indented. The BlackBerry browser's table handling may affect complex layouts; the BlackBerry browser does not allow horizontal scrolling. Instead, it wraps a table row onto multiple display lines which may disturb the layout. For more information, see Chapter 6, "Design Guidelines for RIM BlackBerry 4.2 to 4.5."

3.2 Input Components

This section describes the ADF Faces core components that support user input. This section includes the following topics:

• Creating Input Text Fields

• Creating Lists

3.2.1 Creating Input Text Fields

You can create input fields using the following components:

• tr:inputColor

  
  

  Note: Mobile browsers do not support an inline chooseColor or a color dialog for the tr:inputColor component.

  
  

• tr:inputDate

• tr:inputHidden

• tr:inputText

  
  

  Note: Basic HTML browsers do not support the autosubmit attribute of the tr:inputText component.

  
  
  
  

  Note: Trinidad optimizes the tr:inputText component for narrow-screen devices (that is, devices with screen width measuring less than 240 pixels). For more information see Chapter 7, "Narrow Screen Support and User-Agent Details Support."

  
  

3.2.2 Creating Lists

You can create lists using the following components:

• tr:panelChoice

• tr:panelList

• tr:selectBooleanCheckBox

• tr:selectBooleanRadio

• tr:selectItem

  
  

  Note: Mobile browsers do not support the disabled attribute for the tr:selectItem component.

  
  

• tr:selectManyCheckBox

• tr:selectManyListBox

• tr:selectOneChoice

• tr:selectOneListBox

• tr:selectOneRadio

• tr:resetButton

Note: Basic HTML browsers do not support the autosubmit attribute for the tr:resetButton component.

3.3 Output Components

This section describes the Apache MyFacesTrinidad core components that support output on mobile device applications. This section includes the following topics:

• Section 3.3.1, "Displaying Text"

• Section 3.3.2, "Displaying Images"

• Section 3.3.3, "Showing (or Hiding) Components"

3.3.1 Displaying Text

The following components enable you to display text:

• tr:iterator

• tr:message

• tr:messages

  
  

  Note: When using the tr:message and tr:messages components, the component-specific messages do not display as they do in a desktop browser. Instead, they display in the region where the message component is placed on the Web page.

  
  

• tr:outputDocument

• tr:outputForwarded

• tr:outputLabel

• tr:outputText

3.3.2 Displaying Images

The following components enable you to display images:

• tr:icon

• tr:image

• tr:panelTip

3.3.3 Showing (or Hiding) Components

The following components enable showing or hiding items:

• tr:panelAccordion

  
  

  Note: Mobile browsers only support a full-page update; they do not support the partialTriggers attribute of the tr:panelAccordion component.

  
  

• tr:panelTabbed

  
  

  Note: To save space on mobile devices, the renderer intentionally prevents the display of tab bars on both the top and bottom of the tr:panelTabbed component. Valid values for the attribute positions are top and bottom. If both is specified, then the renderer displays the tabs on top.

  
  

• tr:showDetail

  
  

  Note: For the tr:showDetail component, the disclosure arrow does not display; instead [+] and [-] display.

  
  

• tr:showDetailHeader

  
  

  Note: For the tr:showDetailHeader component, the disclosure arrow does not appear on mobile browsers.

  
  

• tr:showDetailItem

  
  

  Note: For the tr:showDetailItem component, the disclosure arrow does not appear on mobile browsers and flex is not supported.

  
  

3.4 Layout Components

The following sections describes the layout components supported by ADF Mobile browser client:

• Section 3.4.1, "Managing the Page"

• Section 3.4.2, "Laying Out Sections of the Page"

• Section 3.4.3, "Inserting Spaces"

3.4.1 Managing the Page

The following components enable you to manage the page:

• tr:document

• tr:form

  
  

  Note: Mobile browsers do not support the defaultCommand attribute of the tr:form component.

  
  

• tr:page

Note: Mobile browsers do not support the tr:page facet of the tr:page component.

3.4.2 Laying Out Sections of the Page

The following ADF Faces core tags support page layout for mobile device applications:

• tr:group

• tr:panelBorderLayout

  
  

  Note: Only the top and bottom facets are supported for the tr:panelBorderLayout component. Mobile browsers do not support the following facets: left right start end innerLeft innerRight innerStart innerEnd The tr:panelBorderLayout component does not render if you use any of these unsupported facets.

  
  

• tr:panelBox

• tr:panelFormLayout

• tr:panelGroupLayout

• tr:panelHeader

• tr:panelHorizontalLayout

  
  

  Note: Mobile devices do not support the halign=end in the tr:panelHorizontalLayout component.

  
  

• tr:panelLabelAndMessage

  
  

  Note: Trinidad optimizes the tr:panelLabelAndMessage component for narrow-screen devices (that is, devices with screen width measuring less than 240 pixels). For more information see Section 7.1, "Determining Narrow Screen Support."

  
  

• tr:panelPage

• tr:panelPageHeader

  
  

  Note: Mobile devices only support the following facets of the tr:panelPageHeader component: branding brandingApp navigation1 navigation2

  
  

• tr:panelRadio

  
  

  Note: Trinidad optimizes the tr:panelRadio component for narrow-screen devices (that is, devices with screen width measuring less than 240 pixels). For more information see Section 7.1, "Determining Narrow Screen Support."

  
  

• tr:panelCaptionGroup

3.4.3 Inserting Spaces

The following components control the space allocation on pages:

• tr:separator

• tr:spacer

• tr:subform

3.5 Navigation Components

The following sections describe the components that enable users to navigate to other pages of the application or to external locations.

• Section 3.5.1, "Creating Buttons"

• Section 3.5.2, "Creating Links"

• Section 3.5.3, "Navigation Components"

3.5.1 Creating Buttons

ADF Mobile browser client supports the following button types:

• tr:commandButton

  
  

  Note: Because the text attribute cannot display if the icon attribute has been set, buttons on mobile devices can have either text or an image, but not both. If you set the disabled attribute to true, then the tr:commandButton component with an icon attribute renders as a static image with no links.

  
  

• tr:goButton

See Chapter 8, " Extending ADF Mobile Browser Client Applications" for information on how to use the tr:goButton component to integrate e-mail, telephony, and Google maps into an application.

3.5.2 Creating Links

ADF Mobile browser client supports the following components for creating hyper-links:

• tr:commandLink

  
  

  Note: Because the tr:commandLink component renders as an input element in basic mobile HTML browsers, its child components cannot render. For more information on input elements in basic mobile HTML browsers, see Section 5.2, "Developing Applications for Basic HTML Mobile Browsers."

  
  

• tr:goLink

See Chapter 8, " Extending ADF Mobile Browser Client Applications" for information on how to use the tr:goLink component to integrate e-mail, telephony, and Google maps into an application.

3.5.3 Navigation Components

ADF Mobile browser client supports the following navigation components:

• tr:breadcrumbs

  
  

  Note: Trinidad optimizes the tr:breadcrumbs component for narrow-screen devices (that is, devices with screen width measuring less than 240 pixels). For more information see Chapter 7, "Determining Narrow Screen Support."

  
  

• tr:commandNavigationItem

  
  

  Note: tr:commandNavigationItem does not render when you set the disabled attribute to true for the following: tr:selectOneListBox tr:selectOneChoice tr:processChoiceBar tr:navigationPane with hint, "choice" tr:selectRangeChoiceBar

  
  

• tr:navigationPane

  
  

  Note: tr:navigationPane hint = "choice" with a destination value is not supported for basic HTML browsers.

  
  
  
  

  Note: Trinidad optimizes the tr:navigationPane component for narrow-screen devices (that is, devices with screen width measuring less than 240 pixels). For more information see Chapter 7, "Determining Narrow Screen Support."

  
  

• tr:train

  
  

  Note: The tr:train component appears as x of y instead of listing each item. This is a display-only component in ADF Mobile browser client; users cannot navigate through the application by clicking the x of y component. To enable navigation, you must add a separate link or button.

  
  

• tr:processChoiceBar

  
  

  Note: Trinidad optimizes the tr:processChoiceBar component for narrow-screen devices (that is, devices with screen width measuring less than 240 pixels). For more information see Section 7.1, "Determining Narrow Screen Support."

  
  

• tr:selectRangeChoiceBar

  
  

  Note: Trinidad optimizes the tr:selectRangeChoiceBar component for narrow-screen devices (that is, devices with screen width measuring less than 240 pixels). For more information see Chapter 7, "Determining Narrow Screen Support."

  
  

3.6 Data Visualization (Graphs and Gauges)

ADF Mobile browser client supports data visualization components (DVTs) used to create a wide variety of graphs and gauges in mobile application pages, such as the area graph representing a user's bank balance in Figure 3-1.

Figure 3-1 Graph Displays in Mobile Applications

ADF Mobile browser client supports the following types of graphs:

• area

• bar

• bar (horizontal)

• bubble

• combination (horizontal bar and line)

• funnel

• line

• pareto

• pie

• radar

• scattar/polar

• stock

ADF Mobile browser client supports the following types of gauges:

• dial

• status meter

• status meter (vertical)

• LED

Because Oracle JDeveloper incorporates DVTs, you can quickly add graphs and gauges. To add these components to an application, first move a data control into the editor window using a drag-and-drop operation and then select Trinidad Gauges or Trinidad Graphs from the context menu. For example, Figure 3-2 illustrates the context menu that appears when a data control called BalanceView1 is dragged and dropped into the editor window.

Figure 3-2 Selecting a Data Control

After you select either the Trinidad Graphs or Trinidad Gauges options, the DVT wizard appears and opens to the Component Gallery page (Figure 3-3), where you select the DVT type.

Note: For Oracle Fusion Middleware 11g release 1, ADF Mobile browser client supports only static graphs and gauges which are rendered as PNG images. Any mobile device that supports this image format can display graphs and gauges.

Figure 3-3 The Component Gallery for the DVT Wizard

3.7 Tables and Trees

This section includes the following topics:

• Creating Tables

• Creating Trees

3.7.1 Creating Tables

ADF Mobile browser client supports tables comprised of the following components:

• tr:table

  
  

  Note: ADF Mobile browser client does not support the allDetailsEnabled attribute for the tr:table component; this attribute is always set to false.

  
  

• tr:column

  
  

  Note: When you nest tr:column tags to create column groups, the header facets do not render for the column groups.

  
  

3.7.2 Creating Trees

ADF Mobile browser client supports the tr:tree component.

Note: tr:tree may not render on basic HTML browsers.

3.8 Unsupported Components and Attributes

This section lists the components and attributes that release 11g of ADF Mobile browser client does not support. This section includes the following:

• Section 3.8.1, "Unsupported Components"

• Section 3.8.2, "Unsupported Attributes"

3.8.1 Unsupported Components

Release 11g of ADF Mobile browser client does not support the following:

• tr:chart

• tr:chooseColor

• tr:chooseDate

• tr:inputFile

• tr:inputListOFVariables

• tr:inputNumberSpinbox

• tr:legend

• tr:media

• tr:navigationTree

• tr:panelButtonBar

• tr:panelPopup

• tr:panelSideBar

• tr:poll

• tr:progressIndicator

• tr:selectManyShuttle

• tr:selectOrderShuttle

• tr:singleStepButtonBar

• tr:statusIndicator

• tr:switcher

• tr:treeTable

3.8.2 Unsupported Attributes

Release 11g of ADF Mobile browser client does not support the following component attributes on any component.

• accessKey

• shortDesc (tooltip)