4 Skinning

This chapter describes ADF Mobile Skinning.

This chapter includes the following sections:

Section 4.1, "Introduction to ADF Mobile Skinning"
Section 4.2, "Implementing ADF Mobile Skinning"
Section 4.3, "Example iPhone Components"

4.1 Introduction to ADF Mobile 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 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. For more information, see Section 4.2, "Implementing ADF Mobile Skinning." For examples of how to use skinning, see Section 4.3, "Example iPhone Components," which includes an example of an iPhone skin. You can apply a similar style sheet to other mobile browsers, such as BlackBerry, Windows Mobile 6, and Nokia S60. Sample implementations are available from Oracle Technology Network (www.oracle.com/technology).

Note:

Browsers must support the Cascading Style Sheet (CSS) syntax.

Features supported on specific browsers require means other than customizing style sheets.

4.2 Implementing ADF Mobile Skinning

To create a skin, refer to Apache Trinidad Skinning in the Development Guidelines for Apache MyFaces Trinidad (http://myfaces.apache.org/trinidad/devguide/skinning.html) which includes descriptions on how to:

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).

4.2.1 How to Implement Skinning in an ADF Mobile Application

For ADF Mobile, you implement skinning by performing the following tasks:

Within the trinidad-config.xml component, define the <skin-family> tag with an EL (Expression Language) expression that is used with a managed bean that identifies the browser type.
Specify the renderkit and style sheet in trinidad-skins.xml
Create a managed bean that returns the appropriate browser identifier
Define the <managed-bean> element
Include the CSS files within the ADF Mobile project

4.2.1.1 How to Define the <skin-family> in trinidad-config.xml

Add the <skin-family> tag within the <trinidad-config> element and specify an EL expression that evaluates to the string that identifies a browser type. The fragment of trinidad-config.xml illustrated in Example 4-1 assumes that a phoneFamily property in a managed bean, AgentUtil, returns a string that identifies the requesting browser type.

Example 4-1 Defining the Skin Family

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
   <skin-family>#{AgentUtil.phoneFamily}</skin-family>
         ...
</trinidad-config>

4.2.1.2 How to Define <skin-family> in trinidad-config.xml to Enable Switching Between Skins

After you create the skin, you can switch between the default skin and another skin, such as an iPhone skin as illustrated in Example 4-2 using the <skin- family> element in Trinidad-config.xml. This component, which is located within WEB-INF (illustrated in Figure 4-1), enables you to set the default skins for an application. To switch between the default skin and an alternate skin, use Expression Language (EL).

To enable switching between skins

Open the Trinidad-config.xml file.
Define the EL expression in the <skin- family> element as illustrated in Example 4-2, which shows switching between the default (minimal) and iPhone skins.
Example 4-2 Setting an Alternative Skin
```
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
  <skin- family>
      #{agentUtil.isiPhone ? 'iphoneFamily':'minimal'} 
  </skin- family>
</trinidad-config>
```
Save the file.

4.2.2 How to Specify the Renderkit and Style Sheet Name in trinidad-skins.xml

Under <skins>, define the <skin> tags that specifies the render-kit-id and style-sheet-name (org.apache.myfaces.trinidad.desktop and iPhone/iPhone.css, respectively in Example 4-3) for browser types identified in <family>. The value of <family> is the result string from the EL expression in <skin-family> tag in trinidad-config.xml (illustrated in Example 4-1).

Example 4-3 Defining the Skins

<?xml version="1.0" encoding="ISO-8859-1"?> 
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin> 
    <id>iphone</id> 
    <family>iphoneFamily</family> 
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
     <style-sheet-name> iPhone/iPhone.css </style-sheet-name> 
</skin> 
<skin> 
    <id>symbian</id> 
    <family>symbianFamily</family> 
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
     <style-sheet-name> symbian/symbian.css </style-sheet-name> 
</skin> 
<skin> 
    <id>windowsMobile</id> 
    <family>windowsFamily</family> 
    <render-kit-id>org.apache.myfaces.trinidad.pda</render-kit-id>
    <style-sheet-name> windowsMobile/windowsMobile.css </style-sheet-name> 
 </skin> 
<skin>

4.2.3 How to Create a Managed Bean that Implements an Agent Parser

The managed bean illustrated in Example 4-4 parses User-Agent in the request header and returns appropriate browser identifier for the request. This managed bean must also be included in faces-config.xml. For more information, see Section 4.2.4, "How to Add the Managed Bean to faces-config.xml."

Example 4-4 A Managed Bean Implementing an Agent Parser

package Model;

import javax.faces.context.FacesContext;
import javax.servlet.http.HttpServletRequest;
 
public class AgentUtil {
    private String phoneFamily;
    private String BLACKBERRYBOLD_SKIN  = "blackberryFamily";
    private String IPHONE_SKIN          = "iphoneFamily";
    private String WINDOWS_FAMILY       = "windowsFamily";
    private String SYMBIAN_SKIN         = "symbianFamily";
    private String DEFAULT_SKIN         = "minimal";
 
    public AgentUtil() {
    }
 
    /**
     * Used for skinning. Can be used in page definition for 
     * agent specific rendering.
     */
    public String getPhoneFamily() {
        FacesContext fc = FacesContext.getCurrentInstance();
        HttpServletRequest req = 
            (HttpServletRequest)fc.getExternalContext().getRequest();
        String agent = req.getHeader("User-Agent");
        if (agent != null && agent.indexOf("iPhone") > -1) {
            return IPHONE_SKIN;
        } else if (agent != null && agent.indexOf("Symbian") > -1) {
            return SYMBIAN_SKIN;
        } else if (agent != null && agent.indexOf("iPhone") > -1) {
            return IPHONE_SKIN;
        } else if (agent != null && agent.indexOf("BlackBerry9000") > -1) {
            return BLACKBERRYBOLD_SKIN;
        } else if (agent != null && agent.indexOf("Windows CE") > -1) {
            return WINDOWS_FAMILY;
        } else {
            return DEFAULT_SKIN;
        }
    }
 
    public void setPhoneFamily(String phoneFamily) {
        this.phoneFamily = phoneFamily;
    }
}

4.2.4 How to Add the Managed Bean to faces-config.xml

Include the managed bean in faces-config.xml (Agent.util, illustrated in Example 4-5).

Example 4-5 faces-config.xml

<faces-config>
      …
  <managed-bean>
    <managed-bean-name>AgentUtil</managed-bean-name>
    <managed-bean-class>Model.AgentUtil</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>
</faces-config>

4.2.5 How to Add the CSS Files to the ADF Mobile Application Project

Include all of the CSS files (such as blackberry.css and iphone.css in Figure 4-1) in the View-Controller project as specified in trinidad-skins.xml.

Figure 4-1 CSS Files in the ADF Mobile Project

4.2.6 What Happens at Runtime

The EL expressions defined within <skin- family> enable the retrieval of the skin appropriate to the browser type.

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).

Figure 4-2 The Header Component

Table 4-1 lists the tags used to build headers, the style classes that you define within them, and the layout effects of these classes.

Table 4-1 Header Component Classes

Tag	Style Class	Layout Effects
`<tr:panelHeader>`	toolbar, toolbar > h1	Sets the height, width, border and background of the header
`<tr:commandLink>`	backButton	Sets the width, height, color, and position of the back button in the header
`<tr:commandLink>`	button	Sets the width, height, color, and position of the button in the header

toolbar

Example 4-6 illustrates the toolbar style class, which sets the height, width, border, and background for the hearder.

Example 4-6 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;
}

toolbar > h1

Example 4-7 illustrates the toolbar > h1 style class, which sets the height, width, font size, and style of the toolbar title.

Example 4-7 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;
}

button

Example 4-8 illustrates the button style class, which sets the width, height, color, and position of a button in the header.

Example 4-8 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;
}

backButton

Example 4-9 illustrates the backbutton style class, which sets the width, height, color, and position of the back button in the header.

Example 4-9 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-10 illustrates how to define the styleClass attribute to create the header components.

Example 4-10 Defining the Header Component

<tr:panelHeader id = "panelHeader" styleClass="toolbar" text="Title">
    <tr:commandLink styleClass="button"  text="Forward"/>
    <tr:commandLink styleClass="backButton"  text="Back"/>
</tr:panelHeader>

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 List style 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 List style 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-11.

Example 4-11 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-2 on an iPhone skin (Figure 4-3).

Table 4-2 CSS Expressions

CSS Expression	Layout Effect
panelList ul	Sets the width, position, and height of the list
panelList ul > li	Sets the position and border at the bottom for each item in the list
panelList ul > li > a	Sets the margin, fonts size, height, and background for each navigation item defined within the `<tr:commandLink>` elements

Figure 4-3 A Static List of Navigation Items

panelList ul

Example 4-12 illustrates the panelList ul style class, which sets the width, position and height of the list.

Example 4-12 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; 
}

panelList ul > li

Example 4-13 illustrates the panelList ul > li style class, which sets the position and border at the bottom for each item in the list.

Example 4-13 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
}

panelList ul > li > a

Example 4-14 illustrates the panelList ul > li > a style class, which sets the margin, fonts size, height, and background for each navigation item.

Example 4-14 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-15. 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 (illustrated in Figure 4-4).

Example 4-15 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 styleClass attribute for the table as iphoneTable.

The expressions lsited inTable 4-3 apply the needed iPhone-related CSS properties when you set the styleClass as iPhoneTable.

Table 4-3 CSS Expression

Expression	Layout Effects
`.iphoneTable .af_table_content`	Sets the background color for the table content. It overrides the table's default outer-boarder style to none.
`.iphoneTable .af_table_control-bar-top`	Sets the background color for the table controller (pagination)
`.iphoneTable .af_column_cell-text`	Sets the background color of the column

Set the width of the table to 100.
Set the horizontalGridVisible attribute 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 a styleClass set as listing.

Table 4-4 lists the style classes used within the subelements of the <column> tag.

Table 4-4 Table Listing Style Classes

Element	Style Class	Layout Effects
`<tr:panelGroupLayout>` with layout attribute as vertical	listing	Sets the position and the border for each row
`<tr:panelList>`	listingImage	Sets the width, position, and height of the image
`<tr:commandLink>` : (navigation items)	listingLink	Sets the position, height, font size, text alignment, background image, and color of the navigation item
`<tr:outputText>` : (description of the navigation)	listingDetails	Sets the position, height, font size, text alignment, background image, and color of the navigation description

Figure 4-4 A Listing of Dynamic Links

listing

Example 4-16 illustrates the listing style class, which sets the position and the border for each row.

Example 4-16 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;
}

listingLink

Example 4-17 illustrates the listingLink style class, which sets the width, position, and height of the image.

Example 4-17 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;
}

listingDetails

Example 4-18 illustrates the listingDetails style class, which sets the position, height, font size, text alignment, background image, and color of the navigation item.

Example 4-18 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;
 
}

listingImage

Example 4-19 illustrates the listingImage style class, which sets the position, height, font size, text alignment, background image, and color of the navigation description.

Example 4-19 The listingImage Style Class

.listingImage  {
    display: block !important;
    position: absolute !important;
    margin: 0 !important;
    left: 6px !important;
    top: 7px !important;
    width: 35px !important;
    height: 27px !important;
    padding: 7px 0 10px 0 !important;
}

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-1, these details include salary, phone numbers and a hire date for a selected employee.

Figure 4-5 Field Set

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-20, you use the <div> tags to create these rows. The <div> tags are subelements of a <tr:panelCaptionGroup> component.

Example 4-20 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-20).
To create rows, define each <div> tag with the row class attribute. For example:
```
<div class="row">
```
The row attribute sets the position, height, and border for each row.
Within each <div> tag, create a label element as follows:
1. Create a <tr:outputText> tag.
2. Set the position, width, font, and color of the label element by defining the StyleClass as 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 with styleClass set as messageText. 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-21 illustrates the <tr:commandLink> component with styleClass set as messageLink.
  Example 4-21 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-20).

Note:
The panelBase fieldset sets rounded edges. The fieldset element 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.

labeltext

Example 4-21 illustrates the labeltext style class, which sets the position, width, font, and color of the label element

Example 4-22 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;
}

messageText

Example 4-23 illustrates the messageText style class, which sets the position, width, font, and color for the message element.

Example 4-23 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

.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;   
}

panelBase

Example 4-24 illustrates the panelBase style class, which sets the background of the panel base.

Example 4-24 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;
}

panelBase fieldset

Example 4-25 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-25 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;
}

row

Example 4-26 illustrates the row style class, which sets the position, height, and border for each row.

Example 4-26 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;
}

row:first-child

Example 4-27 illustrates the row:first-child style class.

Example 4-27 The row:first-child style class

.row:first-child {
    border-top: none !important;
 
}

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-10), some CSS features are applied by default when you use the iPhone skin.