Standard Smartphone CSS/HTML Architecture

• HTML Structure
• Forms
• Form fields

HTML Structure

page (\

)

The page div contain other divs for header, footer and content. For custom attributes used by jQuery Mobile look at jQuery Mobile documentation.

<div data-role="page">
    <!-- page parts here -->
</div>

For pages which you will refer by links with controller name only and without action name, you have to use data-url attribute with the trailing slash in the value. Here is the sample for default start page, which is addressed by ‘/app’ URL:

<div data-role="page" data-url="<%= Rho::RhoConfig.start_path %>/">
    <!-- page parts here -->
</div>

header and toolbar (\

)

The header div contains the title of the current page, wrapped in an h1 tag and toolbar as set of a tags. The page title will be displayed in the appropriate location for each device.

The header div is not displayed on Windows Mobile devices.

<div data-role="header" data-position="inline">
    <h1>Things</h1>
    <a href="#" class="ui-btn-left">Left button</a>
    <a href="#" class="ui-btn-right">Right button</a>
</div>

The toolbar contains interaction elements that allow users to perform actions and navigate through the application. Most frequently, these elements are links styled as buttons. The toolbar div is displayed at the top of the page on standard smartphones.

• On the iPhone, the content of the toolbar is overlaid on top of the header div.
• On Android, the application toolbar is typically displayed at the bottom of the screen. However, the position:fixed attribute does not exhibit the expected behavior in webkit-based mobile browsers. To ensure that the view is rendered at the appropriate resolution, mobile webkit-based browsers use a viewport to determine which content is displayed.

You can read more about the conflict between viewports and fixed positioning at the end of this document.

<div id="toolbar">
    <div id="leftItem" class="regularButton"><%= link_to "Home", Rho::RhoConfig.start_path %></div>
    <div id="rightItem" class="regularButton"><%= link_to "New", :controller => :Thing, :action => :new %></div>
</div>

The toolbar div supports three positions:

• class="ui-btn-left"
• class="ui-btn-center"
• class="ui-btn-right"

Note that placing an item as the <a class="ui-btn-center"> tag will prevent the page title from being displayed on the iPhone, and is not in compliance with Apple’s human interface guidelines. If you wish to include more than two items in an application targeting iPhone, you may wish to add a secondary toolbar directly below the application toolbar.

Toolbar Button Styles

Four button styles are supported for the toolbar. Note that variation in height and width are due to variation in toolbar height between the platforms. Additionally, in Windows Mobile, the button is a simple text-based link without decoration on a black background.

class	iPhone	Android	Windows Mobile
.regularButton
.blueButton
.backButton
.deleteButton

Note: the variation in width of the buttons for Android is due to the length of the text in the button, and should not be attributed to the classes described in this section.

Content (\

)

The features described below are only accessible when used inside the content div. The content div includes support for native-styled forms and lists.

Lists

Static list (title)

<ul>
    <li>Item A</li>
    <li>Item B </li>
    <li>Item C </li>
</ul>

Sample: no current example

List of links

<ul>
    <li><%= link_to :controller => :Product %></li>
    <li><%= link_to :controller => :Inventory %></li>
    <li><%= link_to :controller => :Location %></li>
    <li><%= link_to :controller => :Purchase %></li>
</ul>

Sample: generated application index.erb page

Note: Disclosure indicators are only displayed on iPhone, and are not displayed on Android or Windows Mobile.

List with left, right-aligned text (label/value pairs)

<ul>
    <li>Item A</li>
    <li>Item B </li>
    <li>Item C </li>
</ul>

Sample: generated application Model show.erb

Note: WinMo cuts off text, overflow doesn’t work.

By default, list items dynamically resize to fit your content on iPhone and Android.

To enforce a standard height for list items, select one of the following options:

1. Assign a static height to some list items:
2. Create a class as follows, and
   • apply that class to each list item to assign a static height to some list elements: div#content ul li.fixed { height:50px; }
   • OR
   • Apply a class to the ul tag to assign a static height to all elements in that list: div#content ul.fixed li { height:50px; }
3. Redefine the default li style as follows to assign a static height to all list elements in the content div: div#content ul li { height:50px; }
4. Redefine the behavior of li globally to assign a static height to all list elements in your application: ul li { height:50px; }

You can make these modifications in the original device stylesheets individually, but for maximum flexibility, it is recommended that you include custom styles in a separate stylesheet or in the application layout’s head element.

Note that the standard rules of css inheritance apply, so if using options B or C, make sure that you have redefined the style ‘'after’‘ the standard device stylesheet has been included to override the style.

Forms

In Rhodes applications, object attributes are stored as strings, so by default, when you generate your model, all editable fields in your generated views will be text fields. However, each field can easily be changed to support your desired input type. Refer to the following guidelines for styling form elements using the default device stylesheets.

Form Structure

To simplify layout of forms in a horizontally constrained space, form fields are organized in one or more unordered lists. In order to access the custom styles for each device, follow the guidelines below. You can structure your forms in a single set of fields or grouped sets of related fields in a form.

Add a \<ul> tag inside your form to display your fields in a single cluster. To create groupings of related fields within a form, cluster fields in separate \<ul> tags. Each \<ul> will be displayed according to the device’s default form styling.

To apply natively-styled labels to a grouping of fields, apply the groupTitle class to an \<h4> tag immediately outside the grouping \<ul> tag.

<h2 class="groupTitle">Person</h2>
<ul>  
    <li>...</li>
    <li>...</li>
</ul>
<h2 class="groupTitle">Address</h2> 
<ul>  
    <li>...</li>
    <li>...</li>
</ul>

Typically, each list item in the form should contain a label element and an input element. Any exceptions will be noted below.

Sample Code

Sample code for forms

Sample rhodes application with forms

Creating a custom “New” Form

Custom “new” form for iPhone, Android, and Windows Mobile platforms

You can create native-styled forms by organizing form fields in one or more unordered lists inside a view’s “content” div.

Include a form tag inside the \

tag. The form should use the post method to submit to the current controller’s create or update actions.

<form method="POST" action="<%= url_for :action => :create %>">
</form>

Add a \<ul> tag inside your form. To break your fields into multiple groupings, include one \<ul> tag to contain each group as described above.

Note: to append a label to a group of fields, use the \

tag to apply styling appropriate for each platform.

Add one \<li> tag inside the \<ul> tag for each input field. You must adhere to the syntax found in the examples below to access the natively-styled form elements for each platform.

Note: each check-box and radio button will need to be contained inside its own list item. Further discussion of the formatting can be found later in this document.

To include a “submit” button, immediately below the last closing \</ul> tag and immediately above the closing \</form> tag.

Note: the button should not be contained inside an \<li> tag, and must have the standardButton class to be appropriately styled.

<input type="submit" class="standardButton" value="Create" />

Creating a custom “Edit” Form

You can create native-styled forms by organizing form fields in one or more unordered lists inside a view’s “content” \<div>.
Include a form tag inside the \

tag. The form should use the post method to submit to the current controller’s “create” or “update” actions.

<form method="POST" action="<%= url_for :action => :create %>">
</form>

Add a \<ul> tag inside your form. To break your fields into multiple groupings, include one \<ul> tag to contain each group as described above.

Note: to append a label to a group of fields, use the \

tag to apply styling appropriate for each platform.

When creating an edit form, it should include a hidden field that contains the id of the object being edited.

<input type="hidden" name="id" value="<%= @model_name.object %>"/>

Add one \<li> tag inside the \<ul> tag for each input field. You must adhere to the syntax found in the examples below to access the natively-styled form elements for each platform.

Note: each check-box and radio button will need to be contained inside its own list item. Further discussion of the formatting can be found later in this document.

To include a form submission button, immediately below the last closing \</ul> tag and immediately above the closing \</form> tag.

Note: the button should not be contained inside an

tag, and must have the standardButton class to be appropriately styled.

<input type="submit" class="standardButton" value="Create" />

Form fields

Text fields

In native iPhone applications, text fields display a placeholder attribute, rather than the standard label/value pair used on WiMo and Android devices. To display the label for text fields properly on all supported devices, follow the following steps when adding or editing a text field:

Apply the fieldLabel class to the textfield label. The fieldLabel class prevents the label from being displayed on the iPhone by setting the display property to “none”.

Call the placeholder method inside the text field input tag and include the desired placeholder text as an argument. The text field input tag should contain an embedded ruby tag calling the placeholder method to display placeholder text only on the iPhone. The placeholder method only returns the placeholder attribute when the application is running on an iPhone, since only native iPhone applications use placeholders instead of labels.

<ul>  
    <li>
        <label for="thing[name]" class="fieldLabel">Name</label>
        <input type="text" name="thing[name]" <%= placeholder( "Name" ) %> />
    </li>
    <li>
        <label for="thing[desc]" class="fieldLabel">Desc</label>
        <input type="text" name="thing[desc]" <%= placeholder( "Desc" ) %> />
    </li>
</ul>

Checkboxes/Switches

Checkboxes should be used to allow the user to distinguish between two binary states. On Android and WiMo, checkboxes look like checkboxes. However, traditional checkboxes are not a native component on the iPhone, so to comply with Apple HIG, checkboxes are instead displayed as switches labeled with the diametrically opposed states ‘on/off.’

<ul>
    <li>
        <label for="todo[description1]">C2</label>
        <input type="checkbox" name="todo[description1]" />
    </li>
    <li>
        <label for="todo[description2]">C2</label>
        <input type="checkbox" name="todo[description2]" />
    </li>
</ul>

The custom style can be overridden on the iphone by redefining div#content form input[type=“checkbox”] as follows:

div#content form input[type="checkbox"]{
    background: none;
    -webkit-appearance: checkbox;  #explain webkit appearance
    width:20px;
}

Radio Buttons

Android and iPhone applications display stylized radio buttons that match those used in the native interface. Note that on the iPhone, a selected radio button will be marked with a check-mark.

WiMo applications utilize the default radio button styles.

<h4 class="groupTitle">Current status</h4>
<ul>
    <li><label for="task[status]">Not started</label>
        <input type="radio" name="task[status]" value="new"/>
    </li>
    <li><label for="task[status]">In progress</label>
        <input type="radio" name="task[status]" value="current"/>
    </li>
    <li><label for="task[status]">Finished</label>
        <input type="radio" name="task[status]" value="complete"/>
    </li>
</ul>

Select boxes

The style-sheets included in your Rhodes applications customize the style of the selection box element displayed on the form. Select boxes make use of the device’s native selection components and cannot be modified.

<h4 class="groupTitle">Select</h4>
<ul>
    <li>
        <select name="cars">
            <option value="volvo" selected>Please select</option>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat">Fiat</option>
            <option value="gremlin">Gremlin</option>
        </select>
    </li>
</ul>

Text areas

Although textareas are styled in css for each device, by convention, each textarea tag must include attributes for the number of rows and columns. The recommended values for rows and columns can be found below. Additionally, each textarea tag must have both an opening \<textarea> and closing \</textarea> tag - self-closing textarea tags will not be displayed properly in your application.

<h4 class="groupTitle">Textarea</h4>
<ul>
    <li class="textarea">
        <textarea rows="5" cols="30" ></textarea>
    </li>
</ul>

If your application is targeting Windows Mobile devices, include the textarea class on any \<li> tags containing a text area to ensure that the list item is the proper height.

Buttons

Buttons involved in form submission should be created as input tags, type submit. Buttons should not be contained inside an \<li> tag, and must have the standardButton class to be appropriately styled.

Links / buttons used to perform actions related to the form but not involved in form submission (e.g., Delete, Cancel) should be located in the top toolbar instead.

<input type="submit" class="standardButton" value="Create"/>

\<button> elements are not supported in Windows Mobile and BlackBerry platforms.

Back to Top