User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1

User Interface Design using jQuery Mobile

CIS 136 Building Mobile Apps

1

2

Navigation Patterns

Primary and Secondary

3

Navigation App ratings

4-5 star reviews Great app Works well and looks good

1-2 start reviews Offer truer picture Most common complaints

Crashing Lack of features (syncing, filtering, linking) Confusing interface design Poor navigation

Can’t go back and find things Design patterns can fix the last two

Good navigation is invisible

4

Primary Navigation Persistent

Navigating from one primary category to another List Menu or Tab Menu

Transient Revealed through tap or gesture Due to sizes of smartphone screens Create side-drawer navigation pattern

If menu needs to be present, use Persistent

5

Primary Navigation Springboard

Landing screen with options that act as launch points

6

Primary Navigation Cards

Stack, shuffle, discard, flip

7

Primary Navigation Cards

Stack, shuffle, discard, flip

8

Primary Navigation List Menu

Show topics hierarchically One choice per screen until

the destination is reached

9

Primary Navigation Dashboard

Snapshot of most relevant info Similar to Springboard and List Menu

10

Primary Navigation Gallery

Displays live content arranged in a gridor carousel

11

Primary Navigation Tab

Similar to Springboard and List Menu Content opens on own tab

12

Themes

Web view appearance

13

Themes jQuery Mobile has a robust theme framework that supports up to 26

sets of toolbar, content and button colors. Provides a consistent and touch-friendly look and feel for your widgets

across platforms. It is built around the following essential concepts:1. Swatch - one of several color schemes provided by your theme

uses single-letter designations the default jQuery Mobile theme provides two swatches

"a" swatch is a neutral, gray swatch "b" swatch has a darker color scheme designed to contrast with the "a" swatch.

2. Active State The theme defines an "active" state Gives immediate feedback upon a user action if there should be a brief processing delay

most mobile devices implement a 300ms delay between the time when the user lifts her finger from the touchscreen and the triggering of the "click" event

JQM adds the "active" state to a button whenever the device is poised to emit a "click" event so the user receives immediate feedback that the application is committed to processing the "click" in the next 300ms.

14

Themes (cont.)3. Theme inheritance

You do not need to specify a swatch for everything A swatch defined on the outermost container will be inherited by all the tags in

the container Can override swatch for portions of a container by specifying a theme swatch for

one of its subcontainers

Can also build your own custom themes Can also download and use 3rd party themes Note: Different releases of jQuery have different themes

1.1.1 is a very popular release

15

How to implement a theme jQuery Mobile (v 1.4) provides two different style themes,

"a" and "b" - each with different colors for buttons, bars, content blocks, and so on.

To customize the look of your application, use the data-theme attribute, and assign the attribute with a letter: <div data-role=“page” id=home” data-theme=“a”> <div data-role=“page” id=home” data-theme=“b”>

16

data-theme = “a” Black text on a light gray background for page content Black text on a gray background for headers and footers Black text on a light gray background for buttons White text on a blue background for active buttons Blue text on links Light gray text (placeholder) or black text (value) on a

white background for input fields

17

data-theme = “b” White text on a dark gray background for page content White text on a dark gray background for headers and

footers White text on a charcoal background for buttons White text on a "cyan" blue background for active

buttons "Cyan" blue text on links Gray text (placeholder) or white text (value) on a black

background for input fields

18

Theming headers, footers, and popups Use data-theme attribute

<div data-role="page" id="pagetwo"> <div data-role="header" data-theme="b"></div> <div data-role="footer" data-theme="b"></div> <div data-role="popup" id="myPopup" data-theme="b"></div>

19

Theme Classes two theme classes: a (gray) and b (black) you can also create your own, custom class values

all the way up to the letter "z" Class Desription

ui-page-theme-(a-z)

Specifies the color for pages

ui-btn- (a-z) Specifies the color for a button

ui-body-(a-z) Specifies the color for a content block, popups, lists etc.

ui-bar- (a-z) Specifies the color for a bar (footers, headers, and other bars)

20

Theming buttons Use styles defined in jQuery classes <a href="#" class="ui-btn ui-btn-b">Black Button</a>

21

Theme overrides add new styles by

using theme classes in local stylesheet add the class "ui-bar-

(a-z)" for toolbars "ui-body-(a-z)" for the

content ui-page-theme-(a-z)"

for the page

<style>.ui-bar-f { color: red; background-color: yellow;}

.ui-body-f { font-weight: bold; color: white; background-color: purple;}

.ui-page-theme-f { font-weight: bold; background-color: green;}</style>

22

Pop-Up windows

Different in JQM 1.4.5

Pop-Ups

23 Learn more at https://demos.jquerymobile.com/1.1.0/docs/api/themes.html

Popups are similar to dialogs, in that they both overlay a part of a page useful when you want to display small text, photos, maps or other content

To create a popup: start with an <a> element and a <div> element. Add the data-rel="popup" attribute to <a>, and

the data-role="popup" attribute to <div>. Then specify an id for <div>, and set the href of <a> to match the specified id. The content inside <div> is the actual content that will pop up when a user clicks on the link.

Note: The popup <div> must be within the same page as the link.<a href="#myPopup" data-rel="popup" >Show Popup</a>

<div data-role="popup" id="myPopup"> <p>This is a simple popup.</p></div>

Positioning Pop-Ups


By default, popups will appear directly over the clicked element To control the position of the popup, use the data-position-to

attribute on the link that is used to open the popup. There are three ways of positioning the popup:

<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window">Window</a><a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a><a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>

Closing Pop-Ups


By default, popups can be closed either by clicking outside the popup box or by pressing the "Esc" key. If you do not want the popup to be closable by clicking outside the

box, you can add the data-dismissible="false" attribute to the popup You can also add a close button to the popup, placed either right or

left.

<a href="#" data-rel="back" class="ui-btn ui-btn-right">Close</a>

<div data-role="popup" id="myPopup" class="ui-content" data-dismissible="false" style="max-width:400px;"> <a href="#" data-rel="back" class="ui-btn ui-btn-right">Close</a>

Pop-Up Arrows


To add an arrow to the popup's border, use the data-arrow attribute, and specify the value "l" (left), "t" (top), "r" (right) or "b" (bottom):

<a href="#myPopup" data-rel="popup" class="ui-btn">Open Popup</a>

<div data-role="popup" id="myPopup" class="ui-content" data-arrow=“b"> <p>There is an arrow on my BOTTOM border.</p></div> There is an arrow

on my BOTTOM border

Pop-Up Photos


Can display images in pop-ups

<a href="#myPopup" data-rel="popup" data-position-to="window"><img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a>

<div data-role="popup" id="myPopup"> <img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View"></div>

Documents

User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1