4 Skinning
This chapter describes skinning for ADF Mobile browser applications.
This chapter includes the following sections:
4.1 About ADF Mobile Browser Skinning
Skinning enables a page to display consistently on a variety of devices through the automatic delivery of device-dependent style sheets. These style sheets enable the optimal display of pages that share the same page definitions on various mobile browsers. Within these style sheets, which enable you to set the look and feel of an application, you not only tailor a component to a specific browser by setting its size, location, and appearance, but you also specify the types of browsers on which components can be displayed or hidden.
Note:
Browsers must support the Cascading Style Sheet (CSS) syntax.
4.2 Implementing ADF Mobile Browser Skinning
As noted in Section 2.3.2, "What Happens When You Create a Mobile JSF Page," JDeveloper creates two mobile-specific stylesheets, mobile.css and richmobile.css within the ADF Mobile browser-specific view-controller project, as shown in Figure 4-1. Creating a mobile JSF page also populates the trinidad-config.xml with an EL expression for selecting the skin families defined by these skinning files and also populates trinidad-skins.xml with definitions for the ADF Mobile browser skins.
Table 4-1 lists the skinning files provided to ADF Mobile pages.
Table 4-1 The ADF Mobile Browser Skins
| CSS File | Skin Family | Use |
|---|---|---|
|
|
mobile |
Used for basic HTML browsers. This family is used for rendering on Windows Mobile and BlackBerry, Version 4.6 and higher. See Chapter 5, "Supporting Basic HTML Mobile Browsers." |
|
|
richmobile |
Used for smartphone browsers that use the Webkit rendering engine. Such browsers are used on the Nokia S60 and also iOS- and Android-powered devices. |
Example 4-1 illustrates the trinidad-config.xml with the EL expression embedded within its <skin-family> element that evaluates to the string that returns the skin family type requested by the browser.
Example 4-1 The Skin Family Selection Logic within Trinidad-config.xml
<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>#{requestContext.agent.type == 'desktop'? 'richmobile': 'mobile'}</skin-family>
</trinidad-config>
Example 4-2 illustrates trinidad-skins.xml, whose <skin> elements are defined for the default ADF Mobile browser skins when you create a mobile JSF page.
Example 4-2 trinidad-skins.xml Populated with ADF Mobile browser <skin> Definitions
<?xml version="1.0" encoding="windows-1252"?>
<!-- To use mobile skin families in your app, please update trinidad-config.xml with below tags -->
<!-- <skin-family>#{requestContext.agent.type == 'desktop'?'richmobile': 'mobile'}</skin-family> -->
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>richmobile</id>
<family>richmobile</family>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>styles/richmobile.css</style-sheet-name>
</skin>
<skin>
<id>mobile</id>
<family>mobile</family>
<render-kit-id>org.apache.myfaces.trinidad.pda</render-kit-id>
<style-sheet-name>styles/mobile.css</style-sheet-name>
</skin>
</skins>
4.2.1 Extending the ADF Mobile Skins
You can configure trinidad-config.xml and trinidad-skins.xml to call other CSS files. You can also modify the richmobile.css and mobile.css files to render to a specific mobile device or platform using @rule.
To add mobile features to a non-mobile project:
-
Create a skin (
trinidad-skins.xml, located in the either the WEB-INF or META-INF directories). -
Create a style sheet.
-
Set the skin family in
trinidad-config.xml(located in the WEB-INF directory).For more information, see "Create a Skin—An Overview" in Development Guidelines for Apache MyFaces Trinidad (
http://myfaces.apache.org/trinidad/devguide/skinning.html).
Skin families in Apache MyFaces Trinidad are associated with a renderkit and a unique CSS file. Because Trinidad uses the desktop renderkit for Webkit-based mobile browsers and the PDA renderkit for all other mobile browsers, you can support all mobile browsers by creating two skin families, both of which reference one of these renderkits and a CSS file. Use the @agent and @platform selector rules to enable rendering based on the browser's name, version, or platform. For more information, see "Skinning CSS Features" in Development Guidelines for Apache MyFaces Trinidad (http://myfaces.apache.org/trinidad/devguide/skinning.html).
4.3 Example iPhone Components
CSS 3.0 features enables a Web application to have the same look and feel as a native iPhone application. By creating a new skin in Trinidad for iPhone, you can include iPhone-specific components. Examples of these components include:
-
Header
-
Navigation Panel
-
Field Set
These components illustrate how to apply style classes and how to define style classes using the styleClass attribute.
4.3.1 How to Create Headers in iPhone Applications
The backButton, toolBar, toolBar > h1, and button style classes used with the <tr:panelHeader> and <tr:commandLink> components set the appearance of the Header (Figure 4-2).
Table 4-2 lists the tags used to build headers, the style classes that you define within them, and the layout effects of these classes.
Table 4-2 Header Component Classes
| Tag | Style Class | Layout Effects |
|---|---|---|
|
|
Sets the height, width, border, and background of the header |
|
|
|
Sets the width, height, color, and position of the back button in the header |
|
|
|
Sets the width, height, color, and position of the button in the header |
Example 4-3 illustrates the toolbar style class, which sets the height, width, border, and background for the header.
Example 4-3 The toolbar Style Class
.toolbar {
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
border-bottom: 1px solid #2d3642 !important;
border-top: 1px solid #000000 !important;
padding: 10px !important;
height: 45px !important;
background: url(/images/toolbar.png) #6d84a2 repeat-x !important;
display: block !important;
}
Example 4-4 illustrates the toolbar > h1 style class, which sets the height, width, font size, and style of the toolbar title.
Example 4-4 The toolbar > h1 Style Class
.toolbar > h1 {
position: absolute !important;
overflow: hidden !important;
left: 50% !important;
margin: 1px 0 0 -75px !important;
height: 45px !important;
font-size: 20px !important;
width: 150px !important;
font-weight: bold !important;
text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0 !important;
text-align: center !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
color: #FFFFFF !important;
border-bottom: none !important;
}
Example 4-5 illustrates the button style class, which sets the width, height, color, and position of a button in the header.
Example 4-5 The button Style Class
.button {
position: absolute !important;
overflow: hidden !important;
top: 8px !important;
right: 6px !important;
margin: 0 !important;
border-width: 0 5px !important;
padding: 0 3px !important;
width: auto !important;
height: 30px !important;
line-height: 30px !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: bold !important;
color: #FFFFFF !important;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0 !important;
text-overflow: ellipsis !important;
text-decoration: none !important;
white-space: nowrap !important;
background: none !important;
-webkit-border-image: url(/images/toolButton.png) 0 5 0 5 !important;
}
Example 4-6 illustrates the backbutton style class, which sets the width, height, color, and position of the back button in the header.
Example 4-6 The backbutton style class
.backButton {
position: absolute !important;
overflow: hidden !important;
top: 8px !important;
left: 6px !important;
margin: 0 !important;
height: 30px !important;
max-width: 45px !important;
line-height: 30px !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: bold !important;
color: #FFFFFF !important !important;
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0 !important;
text-overflow: ellipsis !important;
text-decoration: none !important;
white-space: nowrap !important;
background: none !important;
-webkit-border-image: url(/images/toolButton.png) 0 5 0 5 !important;
padding: 0 !important;
border-width: 0 8px 0 14px !important;
-webkit-border-image: url(/images/backButton.png) 0 8 0 14 !important;
}
4.3.1.1 Using the styleClass Attribute to Create Header Components
Example 4-7 illustrates how to define the styleClass attribute to create the header components.
4.3.2 How to Create Navigation Panels in iPhone Applications
There are two style classes that define the navigation panel:
-
For static lists, use the
Panel Liststyle class. This style class displays a simple list of navigation items. It sets the width, position, and height of this list. -
For dynamic lists, use the
Table Liststyle class.
4.3.2.1 Using the Panel List Style Class to Create a Static List of Navigation Panels
You define the Panel List style class within a <tr:panelList> component, using <tr:commandLink> tags for each navigation item as illustrated in Example 4-8.
Example 4-8 Defining a Static List of Navigation Items
<tr:panelList styleClass="panelList">
<tr:commandLink text="commandLink 1"/>
<tr:commandLink text="commandLink 2"/>
<tr:commandLink text="commandLink 3"/>
</tr:panelList>
Many CSS features are applied by default on this component when using expressions similar to the ones listed in Table 4-3 on an iPhone skin, as shown in Figure 4-3.
| CSS Expression | Layout Effect |
|---|---|
|
Sets the width, position, and height of the list |
|
|
Sets the position and border at the bottom for each item in the list |
|
|
Sets the margin, font size, height, and background for each navigation item defined within the |
Example 4-9 illustrates the panelList ul style class, which sets the width, position, and height of the list.
Example 4-9 The panelList ul Style Class
.panelList ul {
position: absolute !important;
margin: 0 !important;
padding: 0 !important;
left: 0 !important;
top : 45px !important;
width: 100% !important;
min-height: 372px !important;
}
Example 4-10 illustrates the panelList ul > li style class, which sets the position and border at the bottom for each item in the list.
Example 4-10 The panelList ul > li Style Class
.panelList ul > li {
position:relative !important;
margin:0 !important;
border-bottom:1px solid #E0E0E0 !important;
padding:8px 0 8px 10px !important;
list-style:none !important
}
Example 4-11 illustrates the panelList ul > li > a style class, which sets the margin, font size, height, and background for each navigation item.
Example 4-11 The panelList ul > li > a Style Class
.panelList ul > li > a {
display:block !important;
margin:-8px 0 -8px -10px !important;
padding:8px 32px 8px 10px !important;
text-decoration:none !important;
color:inherit !important;
background:url(/images/listArrow.png) no-repeat right center !important;
min-height:34px !important;
font-size:20px;
font-weight:bold;
}
4.3.2.2 Using the Table List Style Component to Create a Dynamic List of Navigation Items
The Table List component enables you to build dynamic tables, such as a table that includes a list of dynamic links as illustrated by Example 4-12. Because the Table List component is a table, it includes built-in navigation. Unlike Panel List, the Table List includes style classes for including images and detailed descriptions below the navigation items, shown in Figure 4-4.
Example 4-12 Building a List of Dynamic Links
<tr:table value="#{bindings.EmployeesView15.collectionModel}"
var="row"
rows="7"
width="100%"
styleClass = “iphoneTable”
emptyText="#{bindings.EmployeesView15.viewable ? 'No rows yet.' :
id="mainTable" horizontalGridVisible="false" >
<tr:column >
<tr:panelGroupLayout layout="vertical" styleClass="listing">
<tr:outputText value="#{row.bindings.PhoneNumber.inputValue}"
styleClass="listingDetails"/>
<tr:commandLink text="#{row.bindings.LastName.inputValue} ,
#{row.bindings.FirstName.inputValue} “
styleClass="listingLink"
partialSubmit="true"
actionListener = "#{agentUtil.gotoPage2}"
id="myLink1"
disabled="#{!bindings.Execute.enabled}"
onclick='iPhone.slideFragments("page2", "page1")'>
</tr:commandLink>
<tr:image styleClass="listingImage"
source="/images/326425649.png"/>
</tr:panelGroupLayout>
</tr:column>
</tr:table>
To create a table of dynamic links:
-
Create a Trinidad read-only table using data control.
-
Set the
styleClassattribute for the table asiphoneTable.The expressions listed in Table 4-4 apply the needed iPhone-related CSS properties when you set the
styleClassasiPhoneTable.Expression Layout Effects .iphoneTable .af_table_contentSets the background color for the table content. It overrides the table's default outer-border style to none.
.iphoneTable .af_table_control-bar-topSets the background color for the table controller (pagination)
.iphoneTable .af_column_cell-textSets the background color of the column
-
Set the width of the table to 100.
-
Set the
horizontalGridVisibleattribute to false.Note:
There must be only one column within the
<tr:table>tag. Within this column, all tags must be wrapped by a<tr:panelGroupLayout>component with astyleClassset aslisting.
Table 4-5 lists the style classes used within the subelements of the <column> tag.
Table 4-5 Table Listing Style Classes
| Element | Style Class | Layout Effects |
|---|---|---|
|
|
Sets the position and the border for each row |
|
|
|
Sets the width, position, and height of the image |
|
|
|
Sets the position, height, font size, text alignment, background image, and color of the navigation item |
|
|
|
Sets the position, height, font size, text alignment, background image, and color of the navigation description |
Example 4-13 illustrates the listing style class, which sets the position and the border for each row.
Example 4-13 The listing StyleClass
.listing {
position: relative !important;
margin: 0 !important;
border-bottom: 1px solid #E0E0E0 !important;
padding: 8px 0 8px 10px !important;
font-size: 20px !important;
font-weight: bold !important;
list-style: none !important;
}
Example 4-14 illustrates the listingLink style class, which sets the width, position, and height of the image.
Example 4-14 The listingLink StyleClass
.listingLink {
display: block !important;
margin: -8px 0 -8px -10px !important;
padding: 8px 32px 8px 10px !important;
text-decoration: none !important;
color: inherit !important;
background: url(/images/listArrow.png) no-repeat right center !important ;
padding-left: 54px !important;
padding-right: 40px !important;
min-height: 34px !important;
font-size: 20px !important;
font-weight: bold !important;
}
Example 4-15 illustrates the listingDetails style class, which sets the position, height, font size, text alignment, background image, and color of the navigation item.
Example 4-15 The listingDetails StyleClass
.listingDetails {
display: block !important;
position: absolute !important;
margin: 0 !important;
left: 54px !important;
top: 27px !important;
text-align: left !important;
font-size: 12px !important;
font-weight: normal !important;
color: #666666 !important;
text-decoration: none !important;
height: 13px !important;
padding: 3px 0 0 0 !important;
}
Example 4-16 illustrates the listingImage style class, which sets the position, height, font size, text alignment, background image, and color of the navigation description.
4.3.3 How to Create Detail Items in iPhone Applications
On the destination page, this component displays the detail of an item selected through panel navigation. As illustrated in Figure 4-5, these details include salary, phone numbers, and a hire date for a selected employee.
The Destination Page - Field Set component contains one or more rows where each row contains a label or a message (which can be simple text or another navigation item). As illustrated in Example 4-17, you use the <div> tags to create these rows. The <div> tags are subelements of a <tr:panelCaptionGroup> component.
Example 4-17 Creating a Field Set
<div class="panelBase“>
<tr:panelCaptionGroup>
<div class="row">
<tr:outputText styleClass="labeltext" value="#{agentUtil.name}"
truncateAt="0"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.FirstName}" />
</div>
<div class="row">
<tr:outputText styleClass="labeltext" value="Last Name"/>
<tr:commandLink text="#{sessionScope.LastName}"
styleClass="messageLink"
partialSubmit="true"
id="myLink2"
actionListener="#{agentUtil.gotoPage3}"
onclick='iPhone.slideFragments("page3", "page2");'
/>
</div>
</tr:panelCaptionGroup>
<tr:panelCaptionGroup>
<div class="row">
<tr:outputText styleClass="labeltext" value="Email"/>
<tr:outputText styleClass="messageText"
value="#{bindings.LastName}@oracle.com"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext" value="Salary"/>
<tr:outputText styleClass="messageText" }"
value="#{sessionScope.Salary}"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext" value="Phone"
truncateAt="5"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.PhoneId}"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext" value="Hired"
truncateAt="7"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.HireDate}"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext" value="Phone"
truncateAt="5"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.PhoneId}"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext" value="Hired"
truncateAt="7"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.HireDate}"/>
</div>
<div class="row">
<tr:outputText styleClass="labeltext" value="Hired"
truncateAt="7"/>
<tr:outputText styleClass="messageText"
value="#{sessionScope.HireDate}"/>
</div>
</tr:panelCaptionGroup>
</div>
To create field set components:
-
Insert as many
<div>tags as needed within a<tr:panelCaptionGroup>component (illustrated in Example 4-17). -
To create rows, define each
<div>tag with the row class attribute. For example:<div class="row">
The
rowattribute sets the position, height, and border for each row. -
Within each
<div>tag, create a label element as follows:-
Create a
<tr:outputText>tag. -
Set the position, width, font, and color of the label element by defining the
StyleClassas labeltext.
For example:
<tr:outputText styleClass="labeltext" value="Phone" truncateAt="5"/> -
-
Create a message element using either the
<tr:outputText>tag or the<tr:commandLink>component as follows:-
The
<tr:outputText>component withstyleClassset asmessageText. For example:<tr:outputText styleClass="messageText" value="#{sessionScope.PhoneId}"/>The messageText style class sets the position, width, font, and color for the label element.
-
Example 4-18 illustrates the
<tr:commandLink>component withstyleClassset asmessageLink.Example 4-18 Setting the styleClass Attribute as messageLink
<tr:commandLink text="#{sessionScope.LastName}" styleClass="messageLink" partialSubmit="true" id="myLink2" actionListener="#{agentUtil.gotoPage3}" onclick='iPhone.slideFragments("page3", "page2");' />The messageLink element sets the position, width, font, height, and color for the message element.
-
-
For a panel base background, wrap the
<div>tags with the panelBase class attribute (illustrated in Example 4-17).Note:
The panelBase fieldset sets rounded edges. The
fieldsetelement is added by the renderer for the<tr:panelCaptionGroup>component.
4.3.3.1 Field Set Style Classes
This section lists the style classes for field set components and their layout properties.
Example 4-18 illustrates the labeltext style class, which sets the position, width, font, and color of the label element
Example 4-19 The labeltext Style Class
.labeltext {
position: absolute !important;
margin: 0 0 0 14px !important;
line-height: 42px !important;
font-weight: bold !important;
color: #7388a5 !important;
text-align: right !important;
width: 90px !important;
white-space: nowrap !important;
}
Example 4-20 illustrates the messageText style class, which sets the position, width, font, and color for the message element.
Example 4-20 The messageText Style Class
.messageText {
display: block !important;
margin: 0 !important;
border: none !important;
padding: 12px 10px 0 110px !important;
text-align: left !important;
font-weight: bold !important;
text-decoration: inherit !important;
height: 42px !important;
color: inherit !important;
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
}
.messageLink {
display: block !important;
text-align: left !important;
text-decoration: none !important;
color: inherit !important;
background: url(/images/listArrow.png) no-repeat right center !important ;
padding-top: 12px !important;
padding-left: 111px !important;
padding-right: 40px !important;
min-height: 34px !important;
font-size: 16px !important;
font-weight: bold !important;
}
Example 4-21 illustrates the panelBase style class, which sets the background of the panel base.
Example 4-21 The panelBase Style Class
.panelBase {
box-sizing: border-box !important;
-webkit-box-sizing: border-box !important;
padding: 10px !important;
background: #c8c8c8 url(/images/pinstripes.png) !important;
}
Example 4-22 illustrates the panelBase fieldset style class, which sets rounded edges. The <fieldSet> element is rendered by the renderer for the <tr:panelCaptionGroup> component.
Example 4-22 The panelBase fieldset Style Class
.panelBase fieldset {
position: relative;
margin: 0 0 20px 0;
padding: 0;
background: #FFFFFF;
-webkit-border-radius: 10px;
border: 1px solid #999999;
text-align: right;
font-size: 16px;
}
Example 4-23 illustrates the row style class, which sets the position, height, and border for each row.
Example 4-23 The row Style Class
.row {
position: relative !important;
min-height: 42px !important;
border-top: 1px solid #999999 !important;
-webkit-border-radius: 0 !important;
text-align: right !important;
}
Example 4-24 illustrates the row:first-child style class.
4.3.4 What You May Need to Know About CSS Classes in iPhone Applications
Although you manually apply most of the CSS classes to specific components using the styleClass attribute (as in Example 4-7), some CSS features are applied by default when you use the iPhone skin.
4.4 Applying ADF Mobile Browser Skinning
Although CSS styles are applied automatically for many components, some components require you to manually set the style classes to its styleClass attribute.
4.4.1 Headers
Augmenting the <tr:panelHeader> component with the styleClass attribute enables you to display title-only headers and headers with a title and links on various browsers.
4.4.1.1 Creating a Title-Only Header
To create a title-only header, add styleClass="af_m_toolbar" to the <tr:panelHeader> component as illustrated in Example 4-25.
Example 4-25 Adding Attributes to Create a Title-Only Header
<tr:panelHeader styleClass="af_m_toolbar" text="Welcome"/>
Figure 4-6 shows how this ADF Mobile browser attribute creates a title-only header on an Apple iPhone.
Table 4-6 lists examples of how title-only headers display on Windows Mobile devices, BlackBerry smartphones, and the Nokia Webkit.
4.4.1.2 Creating Headers with Titles and Links
As illustrated in Figure 4-7, you can add links and a title within a header. Figure 4-7 shows such a header as it displays in on the Apple iPhone.
As described in Section 4.4.1.1, "Creating a Title-Only Header," you define the title for the header (in Figure 4-7, a title called Transfer) by adding styleClass="af_m_toolbar" within the <tr:panelHeader> element. The links are defined as buttons (styleClass="af_m_backButton" and styleClass="af_m_button", respectively) within the child <tr:commandLink> element as illustrated in Example 4-26. In Example 4-26, the <tr:panelHeader> element includes these attributes (in bold).
Example 4-26 Adding Titles and Links to Headers
<tr:panelHeader styleClass="af_m_toolbar" text="Transfer"> <tr:commandLink styleClass="af_m_backButton" text="Back" action="back"/> <tr:spacer rendered= "#{requestContext.agent.skinFamilyType eq 'blackberryminimal'}" height="5" width="105"/> <tr:spacer rendered= "#{requestContext.agent.skinFamilyType eq 'windowsmobile'}" height="" width="28"/> <tr:commandLink text="Sign Off" styleClass="af_m_button" action="signoff"/> </tr:panelHeader>
Table 4-7 lists examples of how the <tr:panelHeader> that includes a title and links display on Windows Mobile devices, BlackBerry smartphones, and the Nokia Webkit.
4.4.2 Table Components
Using the styleClass attribute enables table components within ADF Mobile browser application to render appropriately on various browsers.
4.4.2.1 Multi-Column Tables
Unlike panel headers, which require that you include the styleClass attribute to apply the style appropriately on the target platform, the table column headers do not require any attributes. Instead, you use the <tr:columns> component described in Section 3.7.1, "Creating Tables." Figure 4-8 illustrates how column headers render on the Apple iPhone.
Example 4-27 illustrates how to define the <tr:columns> element (in bold).
Example 4-27 Creating Column Headers
<tr:table var="row" …./>
<tr:column headerText="LastName">
<tr:outputText value="#{row.bindings.LastName.inputValue}"/>
</tr:column>
<tr:column headerText="FirstName">
<tr:outputText value="#{row.bindings.FirstName.inputValue} "/>
</tr:column>
<tr:column headerText="Phone">
<tr:outputText value="#{row.bindings.Phone.inputValue}"/>
</tr:column>
</tr:table>
Table 4-8 shows examples of how column headers display on Windows Mobile devices, the Nokia Webkit, and BlackBerry smartphones.
4.4.2.2 Adding Images and Primary Details with Links
Figure 4-9 demonstrates creating the links and details within a table using the styleClass values af_m_listingLink and af_m_listingDetails.
As illustrated in Example 4-28, you create these features by adding a <tr:panelGroupLayout> component as a child of a <tr:column> component. You then add the styleClass="af_m_listingLink" and styleClass="af_m_listingDetails" attributes to the panelGroupLayout's <tr:commandLink> and <tr:outputText> subcomponents. See Chapter 3, "Component Support" for information on the tr:panelGroupLayout, tr:commandLink, and tr:outputText.
Example 4-28 Adding Links with Details
<tr:table horizontalGridVisible="false" var="row" width="100%" …> <tr:column> <tr:image source="#{row.bindings.TypeIconUrl.inputValue}"/>1 </tr:column> <tr:column inlineStyle="width:100%;"> <tr:panelGroupLayout layout="vertical"> <tr:commandLink text="#{row.bindings.DescShort.inputValue}" action="detail" styleClass="af_m_listingLink"> </tr:commandLink> <tr:outputText value="#{row.bindings.Balance.inputValue}" styleClass="af_m_listingDetails"> </tr:outputText> </tr:panelGroupLayout> </tr:column> </tr:table>
Table 4-9 shows examples of how images, links, and details display on Windows Mobile devices, the Nokia Webkit, and BlackBerry smartphones.
4.4.2.3 Creating Primary Details with Links
Figure 4-10 illustrates how to create primary details and links within a table.
Similar to adding the primary links and details with images described in Section 4.4.2.2, "Adding Images and Primary Details with Links," you create these features by adding a <tr:panelGroupLayout> component as a child of a <tr:column> component. As illustrated in Example 4-29, you then add the styleClass="af_m_listingLink" and styleClass="af_m_listingDetails" attributes to the panelGroupLayout's <tr:commandLink> and <tr:outputText> subcomponents. See Chapter 3, "Component Support" for information on the tr:panelGroupLayout, tr:commandLink, and tr:outputText.
Example 4-29 Primary Details and Links
<tr:table horizontalGridVisible="false" var="row" width="100%" ….> <tr:column> <tr:panelGroupLayout layout="vertical"> <tr:commandLink text="#{row.bindings.Email.inputValue}" styleClass=" af_m_listingLink"> </tr:commandLink> <tr:outputText value="#{row.bindings.FirstName.inputValue}” styleClass="af_m_listingDetails"/> </tr:panelGroupLayout> </tr:column> </tr:table>
Table 4-10 shows examples of how links and details display on Windows Mobile devices, the Nokia Webkit, and BlackBerry smartphones.
4.4.2.4 Creating Primary Details Without Links
As illustrated in Figure 4-11, af_m_listingPrimaryDetails and af_m_listingDetails style classes enable you to create details that do not function as links; their behavior is different from the primary details described in Section 4.4.2.2, "Adding Images and Primary Details with Links."
As illustrated in Example 4-30, you create non-linking primary details by adding styleClass=af_m_listingPrimaryDetails and styleClass="af_m_listingDetails" to the <tr:outputText> element. This element is a child of the <tr:panelGroupLayout> element (which is itself a child of the <tr:column> element).
Example 4-30 Adding Non-Linking Primary Details
tr:table horizontalGridVisible="false" var="row" width="100%" …> <tr:column> <tr:panelGroupLayout layout="vertical"> <tr:outputText value="#{row.bindings.Amount.inputValue} styleClass="af_m_listingPrimaryDetails"> </tr:outputText> <tr:outputText value=" #{row.bindings.FromAccountName.inputValue} “ styleClass="af_m_listingDetails"/> </tr:panelGroupLayout> </tr:column> </tr:table>
Table 4-11 shows examples of how non-linking details display on Windows Mobile devices, the Nokia Webkit, and BlackBerry smartphones.
4.4.3 Panel List Components
Defining the value of the styleClass as af_m_panelBase within the <tr:panelGroupLayout> component applies padding to the <tr:panelList> components, as shown in Figure 4-12.
As illustrated in Example 4-31, you do not have to include a styleClass attribute in the child <tr:panelList> component. For more information on using <tr:panelList> and <tr:panelGroupLayout>, see Section 3.2.2, "Creating Lists" and Section 3.4, "Layout Components," respectively.
Example 4-31 Adding Padding to panelList Components
<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelList>
<tr:commandLink text="Welcome" action="welcome"/>
<tr:commandLink text="Branch" action="branch"/>
</tr:panelList>
</tr:panelGroupLayout>
Table 4-12 shows examples of padding in the <tr:panelList> component on Windows Mobile devices, the Nokia Webkit, and BlackBerry smartphones.
4.4.4 PanelFormLayout
Defining the value of the styleClass attribute as af_m_panelBase within the <tr:panelGroupLayout> component applies padding to the child <tr:panelFormLayout> components, as shown in Figure 4-13.
As illustrated in Example 4-32, you do not need to add styleClass to the <tr:panelFormLayout> component.
Example 4-32 Applying Padding to the PanelFormLayout Component
<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelFormLayout labelWidth="35%" fieldWidth="65%">
<tr:selectOneChoice value="#{transferBean.transferFromAccount}"
label="From:" showRequired="false">
<f:selectItems value="#{bindings.AccountView1.items}"/>
</tr:selectOneChoice>
<tr:selectOneChoice value="#{transferBean.transferToAccount}"
showRequired="false" unselectedLabel="- select -"
label="To:">
<f:selectItems value="#{bindings.AccountView1.items}"/>
</tr:selectOneChoice>
<tr:inputText id="amount"
columns="#{requestContext.agent.capabilities.narrowScreen ? '8' : '12'}"
required="false" showRequired="false"
value="#{transferBean.transferAmount}"
label="Amount:">
<f:converter converterId="Bank10.amountConverter"/>
</tr:inputText>
<tr:panelLabelAndMessage label="Date: ">
<tr:outputText value="#{transferBean.transferDate}"/>
</tr:panelLabelAndMessage>
<f:facet name="footer">
<tr:panelGroupLayout>
<tr:spacer
rendered=
"#{requestContext.agent.skinFamilyType eq 'blackberryminimal'}"
height="5" width="75"/>
<tr:commandButton text="Submit"
action="#{transferBean.validateTransferRequest}"/>
</tr:panelGroupLayout>
</f:facet>
</tr:panelFormLayout>
</tr:panelGroupLayout>
Table 4-13 shows examples of padding in the <tr:panelList> component on Windows Mobile devices, the Nokia Webkit, and BlackBerry smartphones.
4.4.5 Panel Accordion
Defining the value of the styleClass component as af_m_panelBase within the <tr:panelGroupLayout> component applies padding to its <tr:panelAccordion> component, as shown in Figure 4-14.
As illustrated in Example 4-33, you do not need to add the styleClass attribute to the <tr:panelAccordion> component.
Example 4-33 Applying Padding to the <tr:panelAccordion> Component
<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelAccordion discloseMany="true">
<tr:showDetailItem text="Name" disclosed="true">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
…..
</tr:panelFormLayout>
</tr:showDetailItem>
<tr:showDetailItem text="Contact" disclosed="true">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
……
</tr:panelFormLayout>
</tr:showDetailItem>
<tr:showDetailItem text="Address">
<tr:panelFormLayout fieldWidth="70%" labelWidth="30%">
….
</tr:panelFormLayout>
</tr:showDetailItem>
</tr:panelAccordion>
</tr:panelGroupLayout>
Example 4-33 shows examples of padding in the <tr:panelAccordion> component on Windows Mobile devices, the Nokia Webkit, and BlackBerry smartphones.
