Dreamweaver and jQuery Mobile Integration

Over the past few years, Dreamweaver^R has been given an increasing number of features for creating mobile web content and mobile applications. This new upgrade to CS6 is no exception. Dreamweaver CS6 has an improved workflow with jQuery Mobile features.

Starting a new mobile project is simple with the new Page from Sample option in the New Document dialog box. You can choose a jQuery Mobile sample from the Mobile Starters folder. This sample page comes with some prebuilt graphic, css and JavaScript files.

From this sample page, we can begin to build our project by adding elements to the page.

In the Insert panel, we will choose jQuery Mobile from the category menu. This will display the prebuilt components.
To add a new component, we will place our cursor in the location where the new design element will be added and click on one of the components in the list. For our example, let's choose a Slider.

Dreamweaver will automatically add the code for the slider to our page. In Live view, we can see our new slider control.

But this page is a little generic looking. We have a fast and easy way to style our page with the new jQuery Mobile Swatches panel.

From the Menubar, click Window - jQuery Mobile Swatches. If you haven't already loaded the supporting graphic, css and JavaScript files, you will see a pop up dialog box. Click Copy to load the files.
The new jQuery Mobile Swatches panel is empty until you select an element on your sample page. When you select an element, the panel will display the corresponding swatches available for that element. If we select the header element, we will see several header themes.
If we switch to Live view, we can click on each the theme swatches to see a preview of how they will look.

We can repeat this for all the design elements on our page. As we do this, the jQuery Mobile Swatches panel will display the corresponding theme swatches available. We can also use the Resolution Switcher to preview the design as it will look on the desktop and tablet resolutions.

If we use the Get More Themes link at the bottom of the panel, a browser will open to the ThemeRoller for jQuery Mobile website.

*Adobe provided a copy of this software to me for review purposes.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|