Themes CIS 136 Building Mobile Apps 1

Themes 2  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  Built around the following essential concepts: 1. Swatch 2. Active State 3. Theme inheritance  Can also  build your own custom themes  download and use 3 rd party themes Note: Different releases of jQuery have different themes  is a very popular release

Themes 3 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.

Themes 4 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.

Themes (cont.) 5 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

Roll your own theme! Using the JQM Themeroller tool 6

7  Tool to create custom themes  Four easy steps:  Build a theme composed of up to 26 swatches  a "swatch" consists of a header bar, content body, and button states that can be freely mixed and matched to create visual texture — to make richer designs possible  Download the newly created CSS file  Unzip it  Create a themes subfolder in the CSS folder  Copy/move theme files into the subfolder  Refer to new swatches in your project

Themeroller Interface 8  By default, ThemeRoller offers three swatches (a, b and c)  Use the offered default colors  Use the Adobe kuler colors  Create your own

Adding Swatches 9  Add more swatches by pressing the "+" sign near the "A", "B", and "C" tabs, in the left-hand side menu  set the "Global" overarching settings of your theme, such as Font Family, Corner Radii, Icon, and Box

Adding Swatches 10  Expand the various element parts and carry out detailed editing  allows you to change text color, text shadow size, position and color, etc  can also edit the gradient used on each element.

Drag and drop 11  create your theme by dragging the chosen color onto the chosen element in the swatch of your choice

Downloading your theme 12  press the "Download theme zip file button“  enter the name of your theme in the popup window  press the "Download Zip" button on the download popup window

Using the theme 13  The theme gets downloaded on your local machine as a zip file  It contains an index.html file, and a themes folder  The index.html file is an example of how you can now use your theme  The themes folder contains your theme CSS files, and the icons that are used by jQuery Mobile.  To start using your theme, add your theme to the head of your page before the jquery.mobile.structure file (refer to the index.html file contained in the theme)

Notes 14  JQM will default to certain swatches when none are specified  page content will default to swatch “a", list dividers to swatch "b", etc  Pro-tip: you can save yourself a ton of time by already having an idea of what kind of theme you want to build  Having different swatches allows you to create different UI settings for unique components, such as the header bar, navbar, and list view

Lets try it! 15 