CIS 136 Building Mobile Apps Themes CIS 136 Building Mobile Apps

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

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

Using the JQM Themeroller tool Roll your own theme! Using the JQM Themeroller tool

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 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 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 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 create your theme by dragging the chosen color onto the chosen element in the swatch of your choice

Downloading your theme 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 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 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! http://themeroller.jquerymobile.com/