Creating jQuery Mobile website themes in Fireworks

In this article you'll learn how to work with Adobe Fireworks CS6 to create custom jQuery mobile skins and use them in mobile websites based on the jQuery Mobile Framework.

jQuery Mobile Theme Skinning feature enables you to create custom themes or icons using the jQuery template provided within Fireworks. After modifying the jQuery Mobile themes in Fireworks, you can preview it and export the corresponding CSS code and related sprite assets. This article describes how to work with the jQuery Mobile Theme Skinning feature provided by Fireworks.

The jQuery Mobile Framework is a JavaScript framework that allows you to quickly build websites for mobile devices. It is a touch-optimized web framework designed for smartphones and tablets. jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. The jQuery Mobile Framework is easy to use and includes web-specific controls such as buttons, sliders, list elements, and many more. When you build mobile websites with the jQuery Mobile Framework you can leverage the default theme provided with the framework.

The jQuery Mobile theme skinning feature enhances the Fireworks workspace to enable you to create custom themes or modify the default jQuery Mobile theme. It also allows to add additional icons or modify the default set of icons used in jQuery Mobile. It generates associated CSS style sheet and sprite assets. You can use the CSS generated by Fireworks to modify the default theme for jQuery Mobile pages to customize it for your projects.

This article describes how you can change or create jQuery Mobile themes using Fireworks and how to apply the new or updated themes to your jQuery Mobile pages.

Without this feature, you have to manually create or modify the CSS styles for jQuery Mobile web pages. You should know the classes that need modification. You should also know the specific class names for applying styles to jQuery webpage elements. Also, it wasn't possible to preview the site to check the appearance of the theme on the website. It was rather time-consuming because you had to switch between modifying the code on a web page and then previewing it in a browser until the desired theme changes are finalized. Also, it was not possible to include additional icons to the sprites or modify existing sprites.

This feature in Fireworks helps save time because you can now modify the default swatches or create new swatches.  You can also modify the default icons or include additional icons using the template provided in Fireworks, preview it, and then generate the CSS style sheet and spritesto be used in the jQuery web page. When you apply the CSS code to your jQuery-based web pages for mobile devices, the theme is displayed exactly as it was when you previewed the design in Fireworks.

Using the jQuery Mobile Framework to design mobile sites

Every layout and widget included in jQuery Mobile is designed around a new object-oriented CSS framework. The framework makes it possible to apply a complete unified visual design theme to mobile sites and applications.

Consider the following benefits:

• jQuery Mobile uses CSS3 properties to create rounded corners, box and text shadows, and gradients. Using CSS3 properties instead of images is advantageous because it reduces the size of the theme file and the number of server requests.
• Themes include multiple color swatches—each consisting of a header bar, content body, and button states—that you can freely mix and match. These swatches enable you to create visual textures and richer designs.
• Open-ended themes support up to 26 unique swatches per theme. This makes it possible to add almost unlimited variety to your designs.
• All backgrounds now use CSS3 gradients to dramatically reduce the file size and number of server requests to improve performance.
• A simplified icon set includes elements most commonly used for mobile, in a sprite format to reduce image weight.

The default theme contains the following five bar styles (see Figure 1):

By default, the framework assigns the "A" swatch to all headers and footers because header and footer elements are typically visually prominent in a mobile application. To set the color of a bar to a different swatch color, add the data-theme attribute to your header or footer and set an alternate swatch letter such as "B" or "D" to apply the specified theme swatch color. The CSS code generated for a bar is shown below:

To learn more about how the default theme works, read the jQuery Mobile Framework Theme Documentation.

The jQuery Mobile theme includes some default sprite images and swatches. You can use the functionality provided by the Fireworks extension to modify the sprites and swatches. You can also create multiple swatches by duplicating an existing page and customizing a copy of it.

Begin by creating a new theme:

1. In Fireworks CS6, choose Commands > jQuery Mobile Theme > Create New Theme to create a new theme (see Figure 2).

The page name is used to name the swatch. We recommend that you use a single character (a–z) when naming pages. You can create pages by duplicating existing pages and modifying the theme according to the requirement. Each page generates a unique CSS swatch.

The template contains the default sprites and related assets (see Figure 3).

Custom icons can be included to the existing set of sprites. To include additional icons, add icon placeholders to the default jQuery template. After adding placeholders, create icon artwork for different resolutions and color schemes.

Creating icon placeholders

1. Click Commands > jQuery Mobile Theme > Insert Icon Placeholders.

2. Enter the icon name and click OK.
   Four placeholders are added for the icon in the Global Assets and Style page.
3. Click the Hide Slices option in the Tools bar.
4. Create artwork for icons and add them in the placeholders.

Modifying a jQuery Mobile template

Using Fireworks, you can modify the skin based on the theme to match a site's design.

Follow these steps to modify an existing template to update it:

1. Open a page in Fireworks and select the desired elements.
2. Modify individual elements on the canvas. (For example, you can update colors, change text styles, add gradient fill, adjust the degree of rounded corners, apply effects such as drop shadows, or make other updates as desired.)
3. Save the changes by choosing File > Save.

Each object on the canvas corresponds to a section of CSS code in a swatch. The code is indicated by the title of each object (see Figure 6).

After making changes, the next step involves reviewing the recent changes to see how the design appears.

Previewing changes applied to a jQuery Mobile template

Follow these steps to preview the revised template file:

1. Select Windows > Extensions > jQuery Mobile Theme In-App Preview (see Figure 7).

The Preview panel appears and displays the updated page (see Figure 8).

2. To preview all themes and sprites at once in a browser, select Commands > jQuery Mobile Theme > Preview Theme in Browser (see Figure 9).

Click the tabs along the top to switch between the different themes to preview individual swatches applied to various elements.

After you have created or updated a template, you can use Fireworks to generate the jQuery CSS code and the sprites for the site. Choose between one of the following two options to export the CSS swatches and sprites.

Option 1: Export both the CSS and sprites simultaneously

To export all of the swatches and sprites at once, choose Commands > jQuery Mobile Theme > Export Theme to generate the swatches and sprites for all pages (see Figure 10).

Option 2: Export a specific swatch or sprite individually

To export a particular swatch, click Export Current Swatch in the jQuery Mobile Theme In-App Preview panel. Use this strategy when you want to customize only the bar of a particular swatch in order to update it (see Figure 11).

To export only the sprite images, click Export Sprite Images in the jQuery Mobile Theme In-App Preview panel. Sprites for different resolutions and color schemes are generated. A CSS Style sheet contains displacement values for each sprite is also generated. Use this strategy when you want to include custom icons or modify existing icons in the sprite sheet.

Applying the generated CSS file to a jQuery page

At this point you've created the new CSS style sheet file to update the mobile website theme. In this section, you'll learn how to link the CSS file to your mobile website. Follow these steps:

1. Launch Dreamweaver CS6. Open an existing site or choose File > New and choose the options in the New Document dialog box to create a blank HTML page.
2. Choose Insert > jQuery Mobile > Page to create a jQuery Mobile page. In the jQuery Mobile Files dialog box that appears, you can link to local or remote copies of jQuery files. You are recommended to use structure and theme files separately. The structure style sheet consists of all styles except the theme. For the theme style sheet, browse to the location of the theme style sheet generated by Fireworks.

The page is created using the default jQuery Mobile structure style sheet and the theme file that you generated from Fireworks. It is defined in the following tags:

3. Review the code to see how the CSS style sheet is linked to the HTML page (see Figure 13).

4. In the Code window, add a link to point to the jQuery CSS style sheet that you generated using Fireworks, as defined in the following tag:
   <link href="jquery-mobile/theme_f.css" rel="stylesheet" type="text/css"/>.
   Using this strategy, you can apply the new themes you create in Fireworks to the entire page or to specific elements of the page.

For example, rather than using the default "A" bar design, you can use code to apply a different bar style, like this:

After applying these changes, click the Live View button to review how the updated theme appears within the Dreamweaver workspace (see Figure 14).

Adding an icon that you exported to a jQuery page using the jQuery Swatch panel in Dreamweaver

1. Open the jQuery Swatch panel by clicking Window > jQuery Mobile Swatch.
   
2. Select the button on which you want to add the icon.
   
3. In the jQuery Mobile Swatches pop-up window, click Refresh.
   
4. Select the icon that you created.

Adding an icon to a jQuery page

1. Select the tag to which you want to add an icon.
   
2. In the code view, to include an icon, provide the data-icon attribute in the tag as shown below (See Figure 16):

<a href=”#” data-role="button" data-icon="favorites">Button</a>

The data-icon value, “favorites”, is the name with which the icon was created in Fireworks.

For more details, see the Creating icon placeholders section above.

Note: In accordance with the jQuery Mobile Framework, Fireworks does not export patterns to optimize the size of the exported content.

As you've seen in this article, you can use Fireworks to create and update jQuery Mobile website themes to build and manage websites for devices. The updated interface includes the ability to generate the CSS style sheets that you can use to redesign mobile apps and sites.

Fireworks makes it easier than ever before to build and deploy web designs across multiple screens. Additionally, since the generated CSS is cross-platform compatible, the sites you create will perform and appear as expected on smartphones and tablets. Use the preview options in Dreamweaver to review the changes in Live View or in a browser in order to check your work before publishing the changes. You can also preview inside Fireworks.

To learn more about extending Fireworks to create CSS style sheets, read Extracting CSS properties from design objects in Fireworks using the CSS3 Mobile Pack, and watch the Fireworks senior product manager, Takashi Morifusa, demonstrate the CSS3 Properties panel and jQuery Mobile theme skinning tool. Also be sure also to check out the HTML5 and CSS3 Development Center.