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. Trinidad 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 use full page rendering instead of PPR. For example, a page submssion on basic HTML browsers (which do not support JavaScript) results in a full page refresh.

Dialogs

MyFaces Trinidad 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.

Rendering Specific to the BlackBerry Browser 4.5 and Lower

Browsers On the Browsers for BlackBerry 4.x and lower versions, the bullets in a list sublevel (such as those from a tr:panelList) 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.

Rendering Specific to the Browser Without JavaScript Support

Trinidad supports mobile browsers that do not provide support for JavaScript. This lack of JavaScript support makes basic HTML mobile browsers less robust than such AJAX-supported browsers as BlackBerry or Apple iPhone. Aside from the browsers listed in Section 1.2, "Supported Platforms," Trinidad considers most common browsers as basic HTML mobile browsers. MyFaces Trinidad may not recognize certain mobile browsers, however. See Basic XHTML Browser Support for details.

Input Components

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

• Creating Input Text Fields
• Creating Lists

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.
• tr:inputDate
• tr:inputHidden
• tr:inputText
Note: Basic HTML browsers do not support the autosubmit attribute of the inputText component.

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.
• tr:selectManyCheckBox
• tr:selectManyListBox
• tr:selectOneChoice
• tr:selectOneListBox
• tr:selectOneRadio
• tr:resetButton
• tr:selectBooleanRadio
• tr:selectItem
• tr:selectManyCheckBox
• tr:selectManyListBox
• tr:selectOneChoice
• tr:selectOneListBox
• tr:selectOneRadio
• tr:resetButton
Note: Basic HTML browsers do not support the autosubmit attribute.

Output Components

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

• Displaying Text
• Displaying Images
• Showing (or Hiding) Components

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 pop up 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

Displaying Images

The following components enable you to display images:

• tr:icon
• tr:image
• tr:panelTip

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.
• tr:panelTabbed
Note: To save space on mobile devices, the renderer intentionally prevents the display of tab bars on both the top and bottom. 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: The disclosure arrow does not display; instead [+] and [-] display.
• tr:showDetailHeader
Note: The disclosure arrow does not appear on mobile browsers.
• tr:showDetailItem
Note: The disclosure arrow does not appear on mobile browsers and flex is not supported.

Layout Components

The following section describes the layout components supported by Trinidad:

• Managing the Page
• Laying Out Sections of the Page
• Inserting Spaces

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 form component.
• tr:page

Laying Out Sections of the Page

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

• tr:group
• tr:panelBorderLayout
Note: Only the top and bottom facets are supported. Mobile browsers do not support the following facets:
• left
• right
• start
• end
• innerLeft
• innerRight
• innerStart
• innerEnd
The panelBorderLayout component does not render if any of these unsupported facets are used.
• tr:panelBox
• tr:panelFormLayout
• tr:panelGroupLayout
• tr:panelHeader
• tr:panelHorizontalLayout
Note: Mobile devices do not support the halign=end in the panelHorizontalLayout component.
• tr:panelLabelAndMessage
• tr:panelPage
• tr:panelPageHeader
Note: Mobile devices only support the following facets of the panelPageHeader component:
• branding
• brandingApp
• navigation1
• navigation2
• tr:panelRadio
• tr:panelCaptionGroup

Inserting Spaces

The following components control the space allocation on pages:

• tr:separator
• tr:spacer
• tr:subform

Creating Buttons

Trinidad 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 commandButton component with an icon attribute renders as a static image with no links.
• tr:goButton

Creating Links

Trinidad supports the following components for creating hyper-links:

• tr:commandLink
• tr:goLink

Navigation Components

Trinidad supports the following navigation components:

• tr:breadcrumbs
• tr:commandNavigationItem
Note: tr:commandNavigationItem : The component does not render when you set the disabled attribute to true for the following components:
• tr:selectOneListBox
• tr:selectOneChoice
• tr:processChoiceBar
• tr:navigationPane with hint, "choice"
• tr:selectRangeChoiceBar
• tr:navigationPane
• tr:train
Note: Appears as x of y instead of listing each item. This is a display-only component in Trinidad; users cannot navigate through the application by clicking the x of y component. To enable navigation, you must add a separate link or button.

Tables and Trees

This section includes the following topics:

• Creating Tables
• Creating Trees

Creating Tables

Trinidad supports tables comprised of the following components:

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

Creating Trees

Trinidad supports the tr:tree component.

Unsupported Components and Attributes

This section lists the components and attributes that Trinidad does not support and includes the following sections:

• Unsupported Components
• Unsupported Attributes

Unsupported Components

Trinidad 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

Unsupported Attributes

Trinidad does not support the following component attributes on any component.

• accessKey
• shortDesc (tooltip)

Integrating an E-Mail Client

To invoke an e-mail application from a Web application:

• 1. Use either the tr:goButton or the tr:goLink components.
• 2. Prepend the mailto: protocol in an HTML link.
• 3. Set the destination property to the HTML link (represented as the Expression Language statement #{sessionScope.empDetails.Email} in the example below.

<goLink styleClass="messageText"
             text="#{sessionScope.empDetails.Email}"
             destination="mailto:#{sessionScope.empDetails.Email}"/>

Adding Mail Properties

The mailto: protocol, enables you to add the mail properties that are listed here:

• Multiple Recipients A comma (,) separating each e-mail address.
• Message Subject subject =<subject text>
• cc Recipients cc=<name@address.com>
• bcc Recipients bcc=<name@address.com>
• Message Text body=<Message Text>

<goLink styleClass="messageText"
             text="#{sessionScope.empDetails.Email}"
             destination="mailto:#{sessionScope.empDetails.Email}?
             subject=howdy&cc=myboss@oracle.com
             &bcc=me@oracle.com&body=howdy partner!"/>

Integrating Telephony

To invoke a call dialog box for a phone number displayed in the application, prepend the phone number with the tel: protocol in an HTML link.

In the example below, the EL expression, #{sessionScope.empDetails.PhoneNumber} represents the phone number.

<goLink styleClass="messageText"
             text="#{sessionScope.empDetails.PhoneNumber}"
             destination="tel:#{sessionScope.empDetails.PhoneNumber}"/>

Integrating Google Maps

To create a link that displays a map that shows the data available in the application, specifying the destination property of the tr:goLink component as follows:

• Define destination= as the URL of Google Maps. (destination=http://maps.google.com/maps, as illustrated in example.)
• To search for a location, append the Google Maps URL with ?q=.
• Define q= using the address string of the target location. This value can be a full street address, a city, landmark, or any item that Google Maps can search and locate. If multiple items are found, Google Maps drops multiple pins automatically.

<goLink styleClass="messageAddrText" text="200 Oracle
             Parkway,Redwood City, CA, USA"
             destination="http://maps.google.com/maps?q=200+Oracle+Parkway,+Redwood+City,+CA,+USA"/>

<tr:goLink styleClass="messageAddrText" text="
             #{sessionScope.empDetails.StreetAddress},
             #{sessionScope.empDetails.City},
             #{sessionScope.empDetails.StateProvince},
             #{sessionScope.empDetails.CountryName}"
             destination="http://maps.google.com/maps?q=#{sessionScope.empDetails.StreetAddress},
             +#{sessionScope.empDetails.City},
             +#{sessionScope.empDetails.StateProvince},
             +#{sessionScope.empDetails.CountryName}"/>

Programming Driving Directions

Google Maps also supports driving directions. Modify the string following the question mark (?) in the Google Maps URL with the starting and destination addresses (saddr=>starting address="">&daddr=<destination address="">). Using this format, the directions from Oracle headquarters at 200 Oracle Parkway in Redwood City to Oracle's San Francisco office at 1 Front Street in San Francisco are as follows:

http://maps.google.com/maps?saddr=200+Oracle+Parkway,+Redwood+City,+CA,+USA&
             daddr=1+Front+Street,+San+Francisco,+CA,+USA

Supporting Google Maps on iPhone

iPhone Safari supports both Google Maps and YouTube applications in that it automatically intercepts certain URL calls and invokes a native application rather than opening the URL using the target Web site. For example, when a user clicks an HTML link to Google Maps (http://maps.google.com), Safari invokes a native Google Maps application rather than navigating to the Google Maps Web site. Because the native Google maps application accepts some of the URL parameters supported by maps.google.com, users can specify a location and drop a pin. Note: Apple and Google have not yet published other APIs.

Introduction to Basic HTML Mobile Browser Support

Trinidad supports mobile browsers that do not provide support for JavaScript. This lack of JavaScript support makes basic HTML mobile browsers less robust than such AJAX-supported browsers as BlackBerry or Apple iPhone. Aside from the browsers listed in Section 1.2, "Supported Platforms," Trinidad considers most common browsers as basic HTML mobile browsers. MyFaces Trinidad may not recognize certain mobile browsers, however.

Requirements for Trinidad Support of Basic HTML Mobile Browsers

The minimum requirement for Trinidad support is XHTML Basic or the XHTML Mobile Profile that includes WAP2.x browsers.

How to Develop Applications for Basic HTML Mobile Browsers

Because the Trinidad framework serves pages to mobile browsers that are appropriate to a browser's capabilities or limitations, you do not have to create user interfaces that are specific to basic HTML mobile browsers. However, the absence of JavaScript support by these browsers limits the functionality of certain HTML elements.

• The autosubmit attribute is not supported on basic HTML mobile browsers. Add a submit button to the form only if the form submission responds to a component's autosubmit feature. For composite components with built-in autosubmit features, Trinidad adds a submit button to enable users to submit the form.
• Basic HTML mobile browsers do not support form-submitting links. All submitting elements are rendered as buttons. For example, tr:commandLink is rendered as a button. Note: Trinidad does not support WAP1.x browsers that do not support XHTML Basic or the XHTML Mobile Profile. How to Style Basic HTML Mobile Browsers

How to Style Basic HTML Mobile Browsers

Trinidad provides basic CSS support for basic HTML mobile browsers. While most of these browsers support CSS, Trinidad applications can still run on those that do not. However, without design-time considerations, the user interface may be difficult to use. Test the Trinidad application on as many browsers as possible.