Creating jQuery Mobile themes in Adobe Fireworks

Fireworks allows you to convert jQuery Mobile themes, view them and export the corresponding CSS code and sprite. The article teaches the creation of jQuery's own themes in Adobe Fireworks CS6.

JQuery Mobile Framework

As you know, jQuery Mobile Framework is a JavaScript framework that allows you to quickly rebuild a website for mobile devices. This is a touch-optimized web framework designed for smartphones and tablets. jQuery Mobile runs on the vast majority of modern PCs, smartphones, tablets and e-reader platforms. The jQuery Mobile framework is easy to use and includes web-based controls such as buttons, scrolling, list items and more.

Each layout and interface element included in jQuery Mobile is built around a new object-oriented CSS framework. The framework allows you to apply a complete single visual design themes for mobile sites and applications.

To reduce the weight of the image and increase speed jQuery Mobile uses CSS3 properties to create rounded corners, gradients, as well as the shadows of objects and text, and the most frequently used elements are included in the sprite format.
')
Themes contain many color samples consisting of a header (bar), content (content bode), and a status bar (button states) that you can freely mix and match. Each open theme supports up to 26 unique designs, which allows you to add almost unlimited variety to your design.

So, the theme contains the following five styles of the horizontal menu (fig. 1):



Fig. 1. Choose from five different default styles.

By default, an “A” pattern is assigned for all headers and footers, because the heder and footer elements are usually visually prominent elements in a mobile application.

1. Set the color from the horizontal menu to another color swatch.
2. Add the theme attribute data to the header and footer.
3. Install an alternate spelling pattern (for example, “B” or “D”).
4. Apply the specified color swatch theme.

The CSS code generated for the menu is shown below:

{ border:1px solid #2a2a2a; background:#111; color:#fff;font-weight:bold; text-shadow:0 -1px 1px #000; background-image:-moz-linear-gradient(top,#3c3c3c,#111); background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111)); -msfilter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')" } 

Create and modify the jQuery theme template.

JQuery Mobile themes include several default image and sample sprites (swatches). You can use the functionality provided by Fireworks for extended changes to sprites and sweeps. You can also create multiple samples by duplicating an already existing page and modifying it.

Start by creating a new theme in Fireworks CS6:

Choose “Commands”> “jQuery Mobile Theme”> “Create a New Theme” (fig. 2):



Fig. 2. Create a new jQuery Mobile theme.

The page name is used for the sample name (swatch). It is recommended to use a single character (az) for the page name. You can create new pages by duplicating existing ones and modify topics to suit your requirements. Each page generates its own CSS sample.

The default template contains the following sprites (Fig. 3):



Fig. 3. Sprites by default.

You can include your icons in an existing set of sprites. To enable additional icons, insert the icon placeholder in the default jQuery template. After inserting a placeholder, create a working icon for other resolutions and color schemes.

Create an icon placeholder

1. To add an icon placeholder, choose jQuery Mobile Themes> Insert Icon Placeholder.
2. Enter the icon name and click OK (four placeholders are added to the icon in the Global Assets (General Properties) and the Style page (Page Style).
3. Select the option "Hide Slices" on the toolbar.
4. Create options for icons and add them to placeholders.

Fig. 5. Creating variants of icons and adding them to placeholders.

Modifying the jQuery Mobile Template

Using Fireworks, you can change the skin based on the theme corresponding to the design of the site.

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

Each object on the canvas corresponds to a section with CSS code in the sample. The code is indicated by the name of each object (Figure 6):



Fig. 6. Fireworks document after changing the page.

After the changes are made, we will look at the promotion of the design.

Follow these steps to view the modified template file:

Window> Extensions> Live View jQuery Mobile Theme or
Windows> Extensions> jQuery Mobile Theme In-App Preview (Figure 7):



Fig. 7. Theme preview option in the Fireworks workspace.

A preview panel has appeared and shows the updated page (Fig. 8):



Fig. 8. Updates in the preview pane of the jQuery Mobile theme.

To view all themes and sprites at once in the browser, select:

Commands> jQuery Mobile Theme> View themes in a browser or
Commands> jQuery Mobile Theme> Preview Theme in Browser (fig. 9):



Fig. 9. Browse topics in the browser.

Clicking on the tabs in the top panel, switch between different themes to view the individual samples for different elements.

Generating CSS and sprite

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

Option 1: Simultaneous export of CSS and sprites.
To simultaneously export all samples (swatches) and sprites, select:

Commands> jQuery Mobile Theme> Export Theme to generate the swatches and sprites for all pages (fig. 10):



Option 2: Export a specific sample or sprite.
To export a specific sample, click:

Export Current Swatch in the jQuery Mobile Theme In-App Preview panel.

Use this option when you want to customize only the menu of a specific sample in order to update it (Fig. 11):



Fig. 11. When you select the Export Current Swatch option, only the current item is exported and updated.

To export only sprite images, click:

Export Sprite Images in the jQuery Mobile Theme In-App Preview panel.

Sprites will be generated for different resolutions and color schemes. Also generated are CSS styles containing displaced values ​​for each sprite. Use this method when you want to include your own icons in the sprite list or modify existing ones.

Apply generated CSS file to jQuery page.

To this point, you have already created a new CSS style file for updating the theme of the site for a mobile device.

In this section, you will learn how to associate a CSS file with your website.

Do the following:

1. Launch Dreamweaver CS6.
   Open an existing site or
   select File> New or
   Choose the option to create a blank HTML page in the New Document dialog box.
2. Choose Insert> jQuery Mobile> Page to create a jQuery Mobile page.
   In the jQuery Mobile Files dialog box that appears, you can link local or remote copies of jQuery files. Michael Dominic recommends using the structure and themes of files separately. The structure style sheet consists of all styles except the theme. For the theme style sheets, navigate to the theme stylesheet folder created in Fireworks.
   
   
   Fig. 12. Link to local or remote copies of jQuery files.
   
   The default page created in the jQuery Mobile structure of style sheets and theme files that you generated in Fireworks is defined by the following tags:
   />

/>
3. An overview of the code allows you to see how the CSS style is associated with an HTML page (Figure 13):
   
   
   
   Fig. 13. Under the “title” tag is a tag that connects the CSS file to the jQuery HTML page by default in Dreamviwer.
4. In the code window, add a link to the jQuery CSS style sheet that you generated using Fireworks, as shown in the following tag:
   />
   Using this strategy, you can apply new themes created in Fireworks to the entire page or to specific elements.

For example, instead of using the default horizontal menu design “A”, you can use code to apply other menu styles, as follows:
/>

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

Adding an icon 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 to which you want to add an icon.
3. Click Refresh in a pop-up window in jQuery Mobile Swatches.
4. Select the icon you created.

Fig. 15. Samples (swatches) jQuery Mobile.

Adding an icon to the jQuery page

1. Select the tag to which you want to add an icon.
2. In the open code that includes the icon, enter the attribute data for the Button icon in the tag, as shown below (Figure 16):

The values ​​of the favorites or favorites icons are the name with which the icon was created in Fireworks.



Fig. 16. Add icon attribute data to code.

Note: In accordance with the jQuery Mobile framework, Fireworks does not export models to optimize the size of the content being transferred.

Afterword

With Fireworks, it's easier than ever to create and develop web design for multiple screens. In addition, the generated CSS is cross-platform, the websites you create are functioning and displayed exactly as you would expect on smartphones and tablets. Use the preview options in Dreamweaver to view the changes in Live View or in the browser to test your work before you publish the changes, which, by the way, you can also view inside Fireworks.

This article was prepared after reading the jQuery Mobile website by Michael Dominic.

More about Fireworks extensions for creating CSS style sheets:

http://www.adobe.com/devnet/fireworks/articles/css3-mobile-pack-extracting.html

http://tv.adobe.com/watch/fireworks-tips-and-tricks/using-the-new-css3-mobile-pack

http://tv.adobe.com/watch/cs6-creative-cloud-feature-tour-for-web/new-jquery-mobile-theme-skinning-support-in-fireworks-cs6

http://www.adobe.com/devnet/html5.html

jQuery Mobile Framework Theme Documentation


This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike license (Attribution - Non-Commercial Use - Under the Same Conditions) 3.0 Unported .