ADF Mobile Browser Style Guide

4/26/2010

Panel Header ....................................................................................................................... 2

Title only ......................................................................................................................... 2
Source Code ................................................................................................................ 2
Screenshots .................................................................................................................. 2
Title and Links ................................................................................................................ 2
Source Code ................................................................................................................ 2
Screenshots .................................................................................................................. 3
Table .................................................................................................................................... 3
Column Headers .............................................................................................................. 3
Source Code ................................................................................................................ 3
Screenshots .................................................................................................................. 4
Image and Primary Detail with Link ............................................................................... 5
Source Code ................................................................................................................ 5
Screenshots .................................................................................................................. 5
Primary Detail without Link ........................................................................................... 6
Source Code ................................................................................................................ 6
Screenshots .................................................................................................................. 7
Primary Detail with Link................................................................................................. 8
Source Code ................................................................................................................ 8
Screenshots .................................................................................................................. 8
PanelList .............................................................................................................................. 9
Source Code .................................................................................................................... 9
Screenshots ...................................................................................................................... 9
PanelFormLayout .............................................................................................................. 10
Source Code .................................................................................................................. 10
Screenshots .................................................................................................................... 11
PanelAccordion ................................................................................................................. 12
Source Code .................................................................................................................. 12
Screenshots .................................................................................................................... 13

ADF Mobile Browser Style Guide

4/26/2010

Panel Header
Title only
iPhone Screenshot

.af_m_toolbar > h1

Source Code
Developers have to include a few attributes for certain components to use our stylesheet. These attributes and their values are highlighted in blue.
<tr:panelHeader styleClass="af_m_toolbar" text="Welcome"/>

Screenshots
BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

Title and Links

iPhone Screenshot

.af_m_backButton

.af_m_button

Source Code
<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'}"

ADF Mobile Browser Style Guide

4/26/2010

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>

Screenshots
BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

Table
Column Headers
iPhone Screenshot

af|table::content tr th

af|column::cell-text

Source Code
No need to include any attribute like styleClass.
<tr:table var="row" ./>
<tr:column headerText="LastName">
<tr:outputText value="#{row.bindings.LastName.inputValue}"/>
</tr:column>

ADF Mobile Browser Style Guide

4/26/2010

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

Screenshots
BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

ADF Mobile Browser Style Guide

4/26/2010

Image and Primary Detail with Link

iPhone Screenshot

.af_m_listingLink

.af_m_listingDetails

Source Code
<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>

Screenshots
BlackBerry 4.6

ADF Mobile Browser Style Guide

4/26/2010

Windows Mobile

Nokia WebKit

BlackBerry 4.2

Primary Detail without Link

iPhone Screenshot .af_m_listingPrimaryDetails

.af_m_listingDetails

Source Code
<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>

ADF Mobile Browser Style Guide

4/26/2010

<tr:outputText value=" #{row.bindings.FromAccountName.inputValue}

styleClass="af_m_listingDetails"/>
</tr:panelGroupLayout>
</tr:column>
</tr:table>

Screenshots
BlackBerry 4.6

Windows Mobile

Nokia Webkit

BlackBerry 4.2

ADF Mobile Browser Style Guide

4/26/2010

Primary Detail with Link

iPhone Screenshot
.af_m_listingLink

.af_m_listingDetails

Source Code
<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>

Screenshots
BlackBerry 4.6

Windows Mobile

ADF Mobile Browser Style Guide

4/26/2010

Nokia Webkit

BlackBerry 4.2

PanelList
iPhone Screenshot

af|panelList ul > li a

Source Code
PanelGroupLayout component with styleClass af_m_panelBase just applies padding.
No need to include any attribute like styleClass in PanelList component.
<tr:panelGroupLayout styleClass="af_m_panelBase">
<tr:panelList>
<tr:commandLink text="Welcome" action="welcome"/>
<tr:commandLink text="Branch" action="branch"/>
</tr:panelList>
</tr:panelGroupLayout>

Screenshots
BlackBerry 4.6

ADF Mobile Browser Style Guide

4/26/2010

Windows Mobile

Nokia Webkit

BlackBerry 4.2

PanelFormLayout
iPhone Screenshot
af|panelFormLayout::label-cell
af|panelFormLayout::content-cell

Source Code
PanelGroupLayout component with styleClass af_m_panelBase just applies padding.
No need to include any attribute like styleClass in PanelFormLayout.
<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"

ADF Mobile Browser Style Guide

4/26/2010

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>

Screenshots
BlackBerry 4.6

Windows Mobile

ADF Mobile Browser Style Guide

4/26/2010

Nokia Webkit

BlackBerry 4.2

PanelAccordion
iPhone Screenshot

af|panelAccordion::content

af|panelAccordion::title-link

Source Code
PanelGroupLayout component with styleClass af_m_panelBase just applies padding.
No need to include any attribute like styleClass in PanelAccordion.
<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">

ADF Mobile Browser Style Guide

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

Screenshots
BlackBerry 4.6

Windows Mobile

Nokai Webkit

4/26/2010

ADF Mobile Browser Style Guide

BlackBerry 4.2

4/26/2010