You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by ma...@apache.org on 2008/11/21 07:09:47 UTC
svn commit: r719493 - in
/myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide: image/
image/mobileSkinningFieldSet.PNG image/mobileSkinningHeader.png
image/mobileSkinningPaneList.PNG image/mobileSkinningTableList.PNG
mobile.xml mobileSkinning.xml
Author: matzew
Date: Thu Nov 20 22:09:46 2008
New Revision: 719493
URL: http://svn.apache.org/viewvc?rev=719493&view=rev
Log:
TRINIDAD-1318 - Developer Guide Mobile Page Improvements
Thanks to Tadashi Enomori for the patch
Added:
myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/
myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningFieldSet.PNG (with props)
myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningHeader.png (with props)
myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningPaneList.PNG (with props)
myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningTableList.PNG (with props)
myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/mobileSkinning.xml
Modified:
myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/mobile.xml
Added: myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningFieldSet.PNG
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningFieldSet.PNG?rev=719493&view=auto
==============================================================================
Binary file - no diff available.
Propchange: myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningFieldSet.PNG
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningHeader.png
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningHeader.png?rev=719493&view=auto
==============================================================================
Binary file - no diff available.
Propchange: myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningHeader.png
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningPaneList.PNG
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningPaneList.PNG?rev=719493&view=auto
==============================================================================
Binary file - no diff available.
Propchange: myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningPaneList.PNG
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningTableList.PNG
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningTableList.PNG?rev=719493&view=auto
==============================================================================
Binary file - no diff available.
Propchange: myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/image/mobileSkinningTableList.PNG
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Modified: myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/mobile.xml
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/mobile.xml?rev=719493&r1=719492&r2=719493&view=diff
==============================================================================
--- myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/mobile.xml (original)
+++ myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/mobile.xml Thu Nov 20 22:09:46 2008
@@ -1,4 +1,6 @@
-<?xml version="1.0" encoding="windows-1252" ?>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE document PUBLIC "-//Apache Software Foundation//DTD XDOC 1.0//EN"
+"http://www.apache.org/dtds/xdoc_1_0.dtd">
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
@@ -30,20 +32,28 @@
<a href="#Introduction">Introduction</a>
</li>
<li>
- <a href="#Mobile Browsers">Mobile Browsers</a>
+ <a href="#Mobile_Browsers">Mobile Browsers</a>
</li>
<li>
- <a href="#Feature and Component Support">Feature and Component Support</a>
+ <a href="#Feature_Support">Feature Support</a>
</li>
<li>
- <a href="#Utilizing Mobile Features">Utilizing Mobile Features</a>
+ <a href="#Component_Support">Component Support</a>
</li>
<li>
- <a href="#Basic XHTML Browser Support">Basic XHTML Browser Support</a>
+ <a href="#Skinning">Skinning for Mobile Browsers</a>
+ </li>
+ <li>
+ <a href="#Utilizing_Mobile_Device_Features">Utilizing Mobile Device
+ Features</a>
+ </li>
+ <li>
+ <a href="#Basic_XHTML_Browser_Support">Basic XHTML Browser Support</a>
</li>
</ul>
</p>
</section>
+ <a name="Introduction"></a>
<section name="Introduction">
<P>When developing a mobile application, you need not focus on the
limitations or capabilities of different browsers, as Trinidad enables you
@@ -60,18 +70,17 @@
automatically render contents that work on HTML by removing all
dependencies on JavaScript.</P>
</section>
+ <a name="Mobile_Browsers"></a>
<section name="Mobile Browsers">
<P>
Trinidad supports the following devices:
<ul>
- <li>
- Microsoft Windows Mobile 5 and 6, Microsoft Pocket Internet Explorer
- <li>Symbian S60 devices</li>
- <li>Apple iPhone</li>
- <li>RIM BlackBerry Browser 4.6</li>
- <li>RIM BlackBerry Browser 4.7</li>
- <li>Android Based Phones</li>
- </li>
+ <li>Microsoft Windows Mobile 5 and 6, Microsoft Pocket Internet Explorer</li>
+ <li>Symbian S60 devices</li>
+ <li>Apple iPhone</li>
+ <li>RIM BlackBerry Browser 4.6</li>
+ <li>RIM BlackBerry Browser 4.7</li>
+ <li>Android Based Phones</li>
</ul>
</P>
<P>
@@ -81,7 +90,6 @@
use JavaScript library on such devices. The folloing list shows the example
of Basic XHTML mobile browsers.
<ul>
- <li>RIM BlackBerry Browser 4.2 ~ 4.5</li>
<li>KDDI Phones</li>
<li>Motorola Phone Browsers</li>
<li>Nokia S40 Phone Browser</li>
@@ -89,13 +97,38 @@
<li>OpenWave Mobile Browser</li>
<li>Opera Mini Browser</li>
<li>Netfront Browser</li>
+ <li>RIM BlackBerry Browser 4.2 ~ 4.5</li>
<li>SonyEricsson Phone Browser</li>
<li>Vodafone Phones</li>
</ul>
</P>
- <P>WAP1.0 (WML) browsers are not supported.</P>
+ <div style="margin:0px 50px 0px 50px; padding:10px; border:2px solid ">
+ <strong>Note:</strong>
+ WAP1.0 (WML) browsers are not supported.
+ </div>
</section>
- <section name="Feature and Component Support">
+ <a name="Feature_Support"></a>
+ <section name="Feature Support">
+ This section describes the Apache MyFaces Trinidad features that are
+ available for mobile application development. This section includes the
+ following topics:
+ <ul>
+ <li>
+ <a href="#Partial Page Rendering">Partial Page Rendering</a>
+ </li>
+ <li>
+ <a href="#Dialogs">Dialogs</a>
+ </li>
+ <li>
+ <a href="#BlackBerry_4.5_Lower">Rendering Specific to the BlackBerry
+ Browser 4.5 and Lower</a>
+ </li>
+ <li>
+ <a href="#Feature_Basic_HTML">Rendering Specific to the Browser Without
+ JavaScript Support</a>
+ </li>
+ </ul>
+ <a name="Partial_Page_Rendering"></a>
<subsection name="Partial Page Rendering">
<P>The high latency and low bandwidth of networks in mobile environments
decrease application responsiveness for mobile users. Screens refresh
@@ -107,32 +140,103 @@
rendering instead of PPR. For example, a page submssion on basic HTML
browsers (which do not support JavaScript) results in a full page refresh.</P>
</subsection>
+ <a name="Dialogs"></a>
<subsection name="Dialogs">
- <P>ADF Mobile 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.</P>
+ <P>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.</P>
</subsection>
+ <a name="BlackBerry_4.5_Lower"></a>
<subsection name="Rendering Specific to the BlackBerry Browser 4.5 and Lower">
<P>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 browsers table handling may
+ 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.</P>
</subsection>
+ <a name="Feature_Basic_HTML"></a>
+ <subsection name="Rendering Specific to the Browser Without JavaScript Support">
+ <p>
+ 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
+ <a href="#Basic_XHTML_Browser_Support">Basic XHTML Browser Support</a>
+ for details.
+ </p>
+ </subsection>
+ </section>
+ <a name="Component_Support"></a>
+ <section name="Component Support">
+ This section describes the Apache MyFaces Trinidad components that are
+ available for mobile application development. This section includes the
+ following topics:
+ <ul>
+ <li>
+ <a href="#Input_Components">Input Components</a>
+ </li>
+ <li>
+ <a href="#Input_Text_Fields">Input Text Fields</a>
+ </li>
+ <li>
+ <a href="#Creating_Lists">Creating Lists</a>
+ </li>
+ <li>
+ <a href="#Output_Components">Output Components</a>
+ </li>
+ <li>
+ <a href="#Displaying_Text">Displaying Text</a>
+ </li>
+ <li>
+ <a href="#Displaying_Images">Displaying Images</a>
+ </li>
+ <li>
+ <a href="#Layout_Components">Layout Components</a>
+ </li>
+ <li>
+ <a href="#Managing_the_Page">Managing the Page</a>
+ </li>
+ <li>
+ <a href="#Laying_Out_Sections_of_the_Page">Laying Out Sections of the Page</a>
+ </li>
+ <li>
+ <a href="#Inserting_Spaces">Inserting Spaces</a>
+ </li>
+ <li>
+ <a href="#Creating_Buttons">Creating Buttons</a>
+ </li>
+ <li>
+ <a href="#Creating_Links">Creating Links</a>
+ </li>
+ <li>
+ <a href="#Navigation_Components">Navigation Components</a>
+ </li>
+ <li>
+ <a href="#Tables_Trees">Tables and Trees</a>
+ </li>
+ <li>
+ <a href="#Unsupported">Unsupported Components and Attributes</a>
+ </li>
+ </ul>
+ <a name="Input_Components"></a>
<subsection name="Input Components">
<p>
This section describes the Trinidad core components that support user
input. This section includes the following topics:
<ul>
- <li>"Creating Input Text Fields"</li>
- <li>"Creating Lists"</li>
+ <li>Creating Input Text Fields</li>
+ <li>Creating Lists</li>
</ul>
</p>
</subsection>
- <subsection name="Creating Input Text Fields">
+ <a name="Input_Text_Fields"></a>
+ <subsection name="Input Text Fields">
<p>
You can create input fields using the following components:
<ul>
@@ -152,6 +256,7 @@
</ul>
</p>
</subsection>
+ <a name="Creating_Lists"></a>
<subsection name="Creating Lists">
<p>
You can create lists using the following components:
@@ -186,18 +291,20 @@
</ul>
</p>
</subsection>
+ <a name="Output_Components"></a>
<subsection name="Output Components">
<p>
- This section describes the Apache MyFacesTrinidad core components that
+ This section describes the Apache MyFaces Trinidad core components that
support output on mobile device applications. This section includes the
following topics:
<ul>
- <li>"Displaying Text"</li>
- <li>"Displaying Images"</li>
- <li>"Showing (or Hiding) Components"</li>
+ <li>Displaying Text</li>
+ <li>Displaying Images</li>
+ <li>Showing (or Hiding) Components</li>
</ul>
</p>
</subsection>
+ <a name="Displaying_Text"></a>
<subsection name="Displaying Text">
<p>
The following components enable you to display text:
@@ -219,6 +326,7 @@
</ul>
</p>
</subsection>
+ <a name="Displaying_Images"></a>
<subsection name="Displaying Images">
<p>
The following components enable you to display images:
@@ -229,6 +337,7 @@
</ul>
</p>
</subsection>
+ <a name="Mobile_Browsers"></a>
<subsection name="Showing (or Hiding) Components">
<p>
The following components enable showing or hiding items:
@@ -266,16 +375,18 @@
</ul>
</p>
</subsection>
+ <a name="Layout_Components"></a>
<subsection name="Layout Components">
<p>
The following section describes the layout components supported by Trinidad:
<ul>
- <li>"Managing the Page"</li>
- <li>"Laying Out Sections of the Page"</li>
- <li>"Inserting Spaces"</li>
+ <li>Managing the Page</li>
+ <li>Laying Out Sections of the Page</li>
+ <li>Inserting Spaces</li>
</ul>
</p>
</subsection>
+ <a name="Managing_the_Page"></a>
<subsection name="Managing the Page">
<p>
The following components enable you to manage the page:
@@ -291,6 +402,7 @@
</ul>
</p>
</subsection>
+ <a name="Laying_Out_Sections_of_the_Page"></a>
<subsection name="Laying Out Sections of the Page">
<p>
The following Trinidad core tags support page layout for mobile device
@@ -344,6 +456,7 @@
</ul>
</p>
</subsection>
+ <a name="Inserting_Spaces"></a>
<subsection name="Inserting Spaces">
<p>
The following components control the space allocation on pages:
@@ -356,17 +469,14 @@
The following sections describe the components that enable users to
navigate to other pages of the application or to external locations.
<ul>
- <li>
- Section 3.5.1, "Creating Buttons"
- <li>
- Section 3.5.2, "Creating Links"
- <li>Section 3.5.3, "Navigation Components"</li>
- </li>
- </li>
+ <li>Creating Buttons</li>
+ <li>Creating Links</li>
+ <li>Navigation Components</li>
</ul>
</subsection>
</p>
</subsection>
+ <a name="Creating_Buttons"></a>
<subsection name="Creating Buttons">
<p>
Trinidad supports the following button types:
@@ -383,6 +493,7 @@
</ul>
</p>
</subsection>
+ <a name="Creating_Links"></a>
<subsection name="Creating Links">
<p>
Trinidad supports the following components for creating hyper-links:
@@ -392,6 +503,7 @@
</ul>
</p>
</subsection>
+ <a name="Navigation_Components"></a>
<subsection name="Navigation Components">
<p>
Trinidad supports the following navigation components:
@@ -400,7 +512,7 @@
<li>tr:commandNavigationItem</li>
<div style="margin:0px 50px 0px 50px; padding:10px; border:2px solid ">
<strong>Note:</strong>
- tr:commandNavigationItem The component does not render when you set the
+ tr:commandNavigationItem : The component does not render when you set the
disabled attribute to true for the following components:
<ul>
<li>tr:selectOneListBox</li>
@@ -422,17 +534,17 @@
</ul>
</p>
</subsection>
+ <a name="Tables_Trees"></a>
<subsection name="Tables and Trees">
<p>
This section includes the following topics:
<ul>
- <li>
- "Creating Tables"
- <li>"Creating Trees"</li>
- </li>
+ <li>Creating Tables</li>
+ <li>Creating Trees</li>
</ul>
</p>
</subsection>
+ <a name="Mobile_Browsers"></a>
<subsection name="Creating Tables">
<p>
Trinidad supports tables comprised of the following components:
@@ -447,21 +559,22 @@
</ul>
</p>
</subsection>
+ <a name="Mobile_Browsers"></a>
<subsection name="Creating Trees">
<p>Trinidad supports the tr:tree component.</p>
</subsection>
+ <a name="Unsupported"></a>
<subsection name="Unsupported Components and Attributes">
<p>
This section lists the components and attributes that Trinidad does not
support and includes the following sections:
<ul>
- <li>
- "Unsupported Components"
- <li>"Unsupported Attributes"</li>
- </li>
+ <li>Unsupported Components</li>
+ <li>Unsupported Attributes</li>
</ul>
</p>
</subsection>
+ <a name="Unsupported_Components"></a>
<subsection name="Unsupported Components">
<p>
Trinidad does not support the following:
@@ -489,56 +602,77 @@
</ul>
</p>
</subsection>
+ <a name="Unsupported_Attributes"></a>
<subsection name="Unsupported Attributes">
<p>
Trinidad does not support the following component attributes on any
component.
<ul>
- <li>
- accessKey
- <li>shortDesc (tooltip)</li>
- </li>
+ <li>accessKey</li>
+ <li>shortDesc (tooltip)</li>
</ul>
</p>
</subsection>
</section>
- <section name="Utilizing Mobile Features">
+ <a name="Skinning"></a>
+ <section name="Skinning for Mobile Browsers">
+ <p>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 can not only
+ tailor a component to a specific browser by setting its size, location,
+ and appearance, but you can also specify the types of browsers on which
+ components can be displayed or hidden.</p>
+ <p>
+ For examples of how to use skinning in mobile applications, see
+ <a href="mobileSkinning.html">Examples of Programming the iPhone Native
+ Look and Feel</a>
+ which describes an example of an iPhone skin. You can apply a similar style
+ sheet to other mobile browsers, such as BlackBerry Bold, Windows Mobile,
+ Android Phones, and Nokia S60.
+ </p>
+ <p>Features supported on specific browsers, such as device
+ orientation-dependent page presentation, require means other than
+ customizing style sheets.</p>
+ <p>
+ To create a skin, refer to
+ <a href="skinning.html">Skinning</a>
+ section.
+ </p>
+ </section>
+ <a name="Utilizing_Mobile_Device_Features"></a>
+ <section name="Utilizing Mobile Device Features">
<p>
- This section describes how to add functionality to Trinidad applications.
- This section includes the following sections:
+ In addition to using style sheets described in "Skinning" section, you can
+ further tailor an Trinidad application to include support for e-mail,
+ telephony, and Google Maps. This section, though the following sections,
+ describes how to use the tr:goButton and tr:goLink components to integrate
+ links to phone numbers, e-mail addresses, and Google Maps into Trinidad
+ applications.
<ul>
- <li>"Introduction to Extending Trinidad Applications"</li>
- <li>"Integrating an E-Mail Client"</li>
- <li>"Integrating Telephony"</li>
- <li>"Integrating Google Maps"</li>
+ <li>
+ <a href="#Integrating_an_EMail_Client">Integrating an E-Mail Client</a>
+ </li>
+ <li>
+ <a href="#Adding_Mail_Properties">Adding Mail Properties</a>
+ </li>
+ <li>
+ <a href="#Integrating_Telephony">Integrating Telephony</a>
+ </li>
+ <li>
+ <a href="#Integrating_Google_Maps">Integrating Google Maps</a>
+ </li>
+ <li>
+ <a href="#Programming_Driving_Directions">Programming Driving Directions</a>
+ </li>
+ <li>
+ <a href="#Supporting_Google_Maps_on_iPhone">Supporting Google Maps on
+ iPhone</a>
+ </li>
</ul>
</p>
- <subsection name="Introduction to Extending Trinidad Applications">
- <p>
- In addition to using style sheets described in "Skinning" section, you can
- further tailor an Trinidad application to include support for e-mail,
- telephony, and Google Maps. This section, though the following sections,
- describes how to use the tr:goButton and tr:goLink components to integrate
- links to phone numbers, e-mail addresses, and Google Maps into Trinidad
- applications.
- <ul>
- <li>"Integrating an E-Mail Client"</li>
- <li>"Integrating Telephony"</li>
- <li>"Integrating Google Maps"</li>
- </ul>
- This section also describes how to hide or show application components
- depending on the orientation of the screen.
- </p>
- </subsection>
- <subsection name="Ensuring the Correct Page Display Dimensions">
- <p>
- To ensure that a page displays in the correct scale, set the viewport
- specification in a meta tag in the hearder of the page. Versions 4.6 and
- later of BlackBerry and later support a similar meta tag. Include the
- following line to the header to enable the page to scale appropriately:
- <source><meta name="HandheldFriendly" content="True"></meta></source>
- </p>
- </subsection>
+ <a name="Integrating_an_EMail_Client"></a>
<subsection name="Integrating an E-Mail Client">
<p>
To invoke an e-mail application from a Web application:
@@ -554,6 +688,7 @@
destination="mailto:#{sessionScope.empDetails.Email}"/></source>
</p>
</subsection>
+ <a name="Adding_Mail_Properties"></a>
<subsection name="Adding Mail Properties">
<p>
The mailto: protocol, enables you to add the mail properties that are
@@ -585,10 +720,12 @@
below.
<source><goLink styleClass="messageText"
text="#{sessionScope.empDetails.Email}"
- destination="mailto:#{sessionScope.empDetails.Email}?subject=howdy&cc=myboss@oracl
- e.com&bcc=me@oracle.com&body=howdy partner!"/></source>
+ destination="mailto:#{sessionScope.empDetails.Email}?
+ subject=howdy&cc=myboss@oracle.com
+ &bcc=me@oracle.com&body=howdy partner!"/></source>
</p>
</subsection>
+ <a name="Integrating_Telephony"></a>
<subsection name="Integrating Telephony">
<p>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
@@ -597,10 +734,19 @@
In the example below, the EL expression,
#{sessionScope.empDetails.PhoneNumber} represents the phone number.
<source><goLink styleClass="messageText"
- text="#{sessionScope.empDetails.PhoneNumber}" destination="tel:#{
- sessionScope.empDetails.PhoneNumber}"/></source>
+ text="#{sessionScope.empDetails.PhoneNumber}"
+ destination="tel:#{sessionScope.empDetails.PhoneNumber}"/></source>
</p>
+ <div style="margin:0px 50px 0px 50px; padding:10px; border:2px solid ">
+ <strong>Note:</strong>
+ The phone number must support the portion of the RFC 2806 protocol
+ (http://www.ietf.org/rfc/rfc2806.txt) which enables you to add pauses or
+ dial extensions after a user dials the primary phone number. Because Apple
+ does not specify which portions of RFC 2086 that it supports, you must test
+ each portion.
+ </div>
</subsection>
+ <a name="Integrating_Google_Maps"></a>
<subsection name="Integrating Google Maps">
<p>
To create a link that displays a map that shows the data available in the
@@ -617,24 +763,25 @@
</ul>
The example below illustrates how to define the tr:goLink component to
invoke a Google Maps application and then drop a pin on 200 Oracle Parkway.
- <source><goLink styleClass="messageAddrText" text="200 Oracle Parkway,
- Redwood City, CA, USA"
- destination="http://maps.google.com/maps?q=200+Oracle+Parkway,+Redwood+City,+CA,+U
- SA"/></source>
+ <source><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"/></source>
The example below illustrates specifying a location using an address
represented by EL expressions.
<source><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},+#{sessionS
- cope.empDetails.City},+#{sessionScope.empDetails.StateProvince},+#{sessionScope.em
- pDetails.CountryName}"/></source>
+ #{sessionScope.empDetails.CountryName}"
+ destination="http://maps.google.com/maps?q=#{sessionScope.empDetails.StreetAddress},
+ +#{sessionScope.empDetails.City},
+ +#{sessionScope.empDetails.StateProvince},
+ +#{sessionScope.empDetails.CountryName}"/></source>
The address string, such as the one in the example, must be have plus sign
(+) characters rather than spaces.
</p>
</subsection>
+ <a name="Programming_Driving_Directions"></a>
<subsection name="Programming Driving Directions">
<p>
Google Maps also supports driving directions. Modify the string following
@@ -642,12 +789,13 @@
destination addresses (saddr=>starting
address="">&daddr=<destination address="">). Using this
format, the directions from Oracle headquarters at 200 Oracle Parkway in
- Redwood City to Oracles San Francisco office at 1 Front Street in San
+ Redwood City to Oracle's San Francisco office at 1 Front Street in San
Francisco are as follows:
<source>http://maps.google.com/maps?saddr=200+Oracle+Parkway,+Redwood+City,+CA,+USA&
daddr=1+Front+Street,+San+Francisco,+CA,+USA</source>
</p>
</subsection>
+ <a name="Supporting_Google_Maps_on_iPhone"></a>
<subsection name="Supporting Google Maps on iPhone">
<p>iPhone Safari supports both Google Maps and YouTube applications in that
it automatically intercepts certain URL calls and invokes a native
@@ -660,8 +808,9 @@
and Google have not yet published other APIs.</p>
</subsection>
</section>
+ <a name="Basic_XHTML_Browser_Support"></a>
<section name="Basic XHTML Browser Support">
- This section describes Trinidads support for basic HTML mobile browsers.
+ This section describes Trinidad's support for basic HTML mobile browsers.
This section includes the following sections: "Introduction to Basic HTML
Mobile Browser Support" "How to Develop Applications for Basic HTML Mobile
Browsers" "How to Style Basic HTML Mobile Browsers"
@@ -671,30 +820,33 @@
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. ADF Mobile may not recognize certain mobile browsers, however.</p>
+ browsers. MyFaces Trinidad may not recognize certain mobile browsers,
+ however.</p>
</subsection>
+ <a name="Requirements_Basic_HTML"></a>
<subsection name="Requirements for Trinidad Support of Basic HTML Mobile Browsers">
<p>
The minimum requirement for Trinidad support is XHTML Basic or the XHTML
Mobile Profile that includes WAP2.x browsers.
<div style="margin:0px 50px 0px 50px; padding:10px; border:2px solid ">
<strong>Note:</strong>
- ADF Mobile does not support WAP1.x browsers that do not support XHTML
- Basic or the XHTML Mobile Profile.
+ MyFaces Trinidad does not support WAP1.x browsers that do not support
+ XHTML Basic or the XHTML Mobile Profile.
</div>
</p>
</subsection>
+ <a name="How_to_Basic_HTML"></a>
<subsection name="How to Develop Applications for Basic HTML Mobile Browsers">
<p>
Because the Trinidad framework serves pages to mobile browsers that are
- appropriate to a browsers capabilities or limitations, you do not have to
+ 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.
<ul>
<li>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 components autosubmit feature. For composite components
+ 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.</li>
<li>Basic HTML mobile browsers do not support form-submitting links. All
@@ -705,6 +857,7 @@
</ul>
</p>
</subsection>
+ <a name="How_to_Style_Basic_HTML"></a>
<subsection name="How to Style Basic HTML Mobile Browsers">
<p>Trinidad provides basic CSS support for basic HTML mobile browsers. While
most of these browsers support CSS, Trinidad applications can still run
Added: myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/mobileSkinning.xml
URL: http://svn.apache.org/viewvc/myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/mobileSkinning.xml?rev=719493&view=auto
==============================================================================
--- myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/mobileSkinning.xml (added)
+++ myfaces/trinidad/trunk_1.2.x/src/site/xdoc/devguide/mobileSkinning.xml Thu Nov 20 22:09:46 2008
@@ -0,0 +1,611 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE document PUBLIC "-//Apache Software Foundation//DTD XDOC 1.0//EN"
+"http://www.apache.org/dtds/xdoc_1_0.dtd">
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License");
+ you may not use this file except in compliance
+ with the License. You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied. See the License for the
+ specific language governing permissions and limitations
+ under the License.
+
+-->
+<document>
+ <properties>
+ <title>Examples of Programming the iPhone Native Look and Feel</title>
+ </properties>
+ <body>
+ <section name="Examples of Programming the iPhone Native Look and Feel">
+ <p>
+ This example describes the following components for iPhone:
+ <ul>
+ <li>
+ <a href="#Header">Header</a>
+ </li>
+ <li>
+ <a href="#Navigation_Panel">Navigation Panel</a>
+ </li>
+ <li>
+ <a href="#Field_Set">Field Set</a>
+ </li>
+ </ul>
+ </p>
+ <p>
+ Although you manually apply most of the CSS classes to specific components using
+ the styleClass attribute, some CSS features are applied by
+ default when you use the iPhone skin.
+ </p>
+ </section>
+ <a name="Header"></a>
+ <section name="Header">
+ <p>This section describes the style classes used for building a header
+ component.</p>
+
+ <p>
+ <img source="image/mobileSkinningHeader.png"/>
+ </p>
+
+ <a name="Header_Style_Classes"></a>
+ <subsection name="Header Style Classes">
+ <p>
+ <source>
+ <strong>Toolbar</strong>
+ .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;
+ }
+
+ <strong>Toolbar Title</strong>
+ .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;
+ }
+
+ <strong>button</strong>
+ .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;
+ Examples of Programming the iPhone Native Look and Feel
+ Beta Draft Skinning Support 4-7
+ }
+
+ <strong>backButton</strong>
+ .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;
+ }
+ </source>
+ </p>
+ </subsection>
+ <a name="How_to_Create_Header_Components"></a>
+ <subsection name="How to Create Header Components">
+ <p>
+ Code below illustrates how to define the styleClass attribute to create the
+ header components.
+ <source>
+ <tr:panelHeader id = "panelHeader" styleClass="toolbar" text="Title">
+ <tr:commandLink styleClass="button" text="Forward"/>
+ <tr:commandLink styleClass="backButton" text="Back"/>
+ </tr:panelHeader>
+ </source>
+ </p>
+ </subsection>
+ </section>
+ <a name="Navigation_Panel"></a>
+ <section name="Navigation Panel">
+ <p>
+ There are two style classes that define the navigation panel:
+ </p>
+ <p>
+ <ul>
+ <li>Panel List (static lists)</li>
+ <li>Table List (dynamic lists)</li>
+ </ul>
+ </p>
+ <a name="Panel_List"></a>
+ <subsection name="Panel List">
+ <p>
+ Panel List This style class displays a simple (static) list of navigation
+ items. It sets the width, position, and height of this list. You define
+ this style class within a <panelList> component, using <commandLink>
+ tags for each navigation item as illustrated in the example below.
+ </p>
+ <p>
+ <source>
+ < tr:panelList styleClass="panelList">
+ < tr:commandLink text="commandLink 1"/>
+ < tr:commandLink text="commandLink 2"/>
+ < tr:commandLink text="commandLink 3"/>
+ < /tr:panelList>
+ </source>
+ </p>
+
+ <p>
+ Many CSS features are applied by default on this component when using expressions
+ similar to the ones listed in the tTable below on an iPhone skin.
+ </p>
+
+ <p>
+ <img source="image/mobileSkinningPaneList.png"/>
+ </p>
+
+ <p>
+ <source>
+ <strong>panelList ul</strong>
+ .panelList ul {
+ position: absolute !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ left: 0 !important;
+ top : 45px !important;
+ width: 100% !important;
+ min-height: 372px !important;
+ }
+
+ <strong>panelList ul > li</strong>
+ .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
+ }
+
+ <strong>panelList ul > li > a</strong>
+ .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;
+ }
+ </source>
+ </p>
+ </subsection>
+
+ <a name="Table_List"></a>
+ <subsection name="Table List">
+ <p>
+ Table List Use the table list component for displaying a dynamic list of
+ navigation items. This component provides built-in navigation since it is a table.
+ Unlike Panel List, the table list component include style classes for including images
+ and detailed descriptions below the navigation items.
+ </p>
+
+ <p>
+ <source>
+ <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>
+ </source>
+ </p>
+ <p>
+ To create a table list:
+ <ul>
+ <li>
+ Create a Trinidad read-only table using data control.
+ </li>
+ <li>
+ Set the styleClass attribute for the table as iphoneTable.
+ The expressions lsited in table below apply the needed iPhone-related CSS properties
+ when you set the styleClass as iPhoneTable.
+ </li>
+ <li>
+ Set the width of the table to 100.
+ </li>
+ <li>
+ Set the horizontalGridVisible attribute to false.
+ </li>
+ </ul>
+ </p>
+
+ <div style="margin:0px 50px 0px 50px; padding:10px; border:2px solid ">
+ <strong>Note:</strong>
+ There must be only one column within the <tr:table> tag.
+ Within this column, all tags must be wrapped by a
+ <tr:panelGroupLayout> tag with a styleClass set as listing.
+ </div>
+
+ <p>
+ <img source="image/mobileSkinningTableList.png"/>
+ </p>
+
+ <source>
+ <strong>listing</strong>
+ .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;
+ }
+
+ <strong>listingLink</strong>
+ .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;
+ }
+
+ <strong>listingDetails</strong>
+ .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;
+ }
+
+ <strong>listingImage</strong>
+ .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;
+ }
+ </source>
+ </subsection>
+ </section>
+
+ <a name="Field_Set"></a>
+ <section name="Field Set">
+ <p>
+ On the destination page, this component displays the detail of an item selected in
+ panel navigation.
+ </p>
+
+ <p>
+ <img source="image/mobileSkinningFieldSet.png"/>
+ </p>
+
+ <p>
+ 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 the example below, you use the <div> tags to create these rows. The
+ <div> tags are subelements of a <tr:panelCaptionGroup> tag.
+ </p>
+ <p>
+ Creating a Field Set
+ </p>
+ <source>
+ <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>
+ </source>
+ <p>
+ How to Create Field Set Components To create this component:
+ <ul>
+ <li>
+ Insert as many <div> tags as needed within a <tr:panelCaptionGroup> tag.
+ </li>
+ <li>
+ To create rows, define each <div> tag with the row class attribute. For example:
+ <source>
+ <div class="row">
+ </source>
+ The row attribute sets the position, height, and border for each row.
+ </li>
+ <li>
+ Within each <div> tag, create a label element as follows:
+ <ul>
+ <li>
+ Create a <tr:outputText> tag.
+ </li>
+ <li>
+ To set the position, width, font, and color or the label element, define the StyleClass as labeltext.
+ </li>
+ </ul>
+ For example:
+ <source>
+ <tr:outputText styleClass="labeltext" value="Phone" truncateAt="5"/>
+ </source>
+ </li>
+ <li>
+ Create a message element using one of the following:
+ <ul>
+ <li>
+ <p>
+ The <tr:outputText> tag with styleClass set as messageText.
+ For example:
+ <source>
+ <tr:outputText styleClass="messageText" value="#{sessionScope.PhoneId}"/>
+ </source>
+ The messageText style class sets the position, width, font, and color for the label element.
+ </p>
+ </li>
+ <li>
+ <p>
+ The <tr:commandLink> tag with styleClass set as messageLink. For example:
+ <source>
+ <tr:commandLink text="#{sessionScope.LastName}"
+ styleClass="messageLink"
+ partialSubmit="true"
+ id="myLink2"
+ actionListener="#{agentUtil.gotoPage3}"
+ onclick='iPhone.slideFragments("page3", "page2");'
+ />
+ </source>
+ The messageLink element sets the position, width, font, height, and color for
+ the message element.
+ </p>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <p>
+ For a panel base background, wrap the <div> tags with the panelBase class
+ attribute.
+ </p>
+ <div style="margin:0px 50px 0px 50px; padding:10px; border:2px solid">
+ <strong>Note:</strong>
+ The panelBase fieldset sets rounded edges. The fieldset
+ element is added by the renderer for the <tr:panelCaptionGroup>
+ element.
+ </div>
+ </li>
+ </ul>
+ </p>
+ <p>
+ Field Set Style Classes This section lists the style classes for field set
+ components and their layout properties.
+ </p>
+ <p>
+ <source>
+ <strong>labeltext</strong>
+ .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;
+ }
+
+ <strong>messageText</strong>
+ .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;
+ }
+
+ <strong>messageLink</strong>
+ .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;
+ }
+
+ <strong>panelBase</strong>
+ .panelBase {
+ box-sizing: border-box !important;
+ -webkit-box-sizing: border-box !important;
+ padding: 10px !important;
+ background: #c8c8c8 url(/images/pinstripes.png) !important;
+ }
+
+ <strong>panelBase fieldset</strong>
+ .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;
+ }
+
+ <strong>row</strong>
+ .row {
+ position: relative !important;
+ min-height: 42px !important;
+ border-top: 1px solid #999999 !important;
+ -webkit-border-radius: 0 !important;
+ text-align: right !important;
+ }
+
+ <strong>row:first-child</strong>
+ .row:first-child {
+ border-top: none !important;
+ }
+ </source>
+ </p>
+ </section>
+ </body>
+</document>
+