WDV 331 Dreamweaver Applications

JQuery Mobile for AppsDreamweaver CS6

Chapter 11 Page 537 Kindle 11543

jQuery Mobile• jQuery Mobile - a “mobile development framework,” it

provides the tools to build web pages that act more like mobile applications than traditional web pages.

• A page built with jQuery Mobile includes– screen transitions (one web page slides into view as the old one

slides out), – a more phone-like interface (large, rounded-corner buttons and

smooth color gradients), and – support for non-mouse-like interactions (like screen taps and

swipes).• basic HTML & CSS, transformed into a phone-like

presentation• uses JavaScript framework

– solves cross-browser problems – JavaScript programming a lot easier.

Creating a Basic JQuery Mobile Page

• A lot of complex programming behind a jQuery Mobile web page

• Adding content and building a page uses techniques you hnow:– inserting divs ( The Insert Div Tag Tool ),– typing in text, – adding images.

• Lab – Create a basic jQ Mobile Page.– Page 539 kindle 11548

Lab Basic JQuery Mobile Page

• Choose File →New. • Select the Page From Sample category from

the left-hand list of options and then click the Mobile Starters folder from the Sample Folder column.

• Three options listed:

Lab Three options

• 1> jQuery Mobile (CDN), “content delivery network,” jQuery’s web server stores the required external files. JavaScript, CSS, and graphic files from jQuery.com. CDN option won’t work without an Internet connection, and you’re dependent on the jQuery.com

• 2> jQuery Mobile (Local), puts all the required files in your site folder.

Lab Three options • 3> jQuery Mobile with theme (Local). – The most flexible option,– Like #2>, all necessary files in your local site folder. – Breaks the CSS file into two external files: – jquery.mobile.structure-1.0. min.css provides all the

CSS required for the basic functions and layout. • Do not edit.

– jquery.mobile.theme-1.0. min.css — contains styles for basic look fonts, colors, drop-shadows, and so on.

– Also works with jQuery Mobile’s ThemeRoller website. Visually customize the look of jQuery Mobile elements and then download a new mobile theme CSS file.

jQuery Mobile with theme (Local).

• When creating a new jQuery Mobile page, CHOOSE jQuery Mobile with theme (Local). • provides the easiest way to customize the look of your mobile site

Make sure you leave the HTML5

doctype selected.

Click Create

What does the code look like?• A jQuery Mobile page are a bunch of nested divs. • Dreamweaver applies a special attribute to each div

that tells jQuery Mobile what to do with the div.• For example, a screen’s worth of information is one

div, and its code looks like this: < div data-role =“ page” >.

• Within that div are other divs: – header (< div data-role =“ header” >), – content (< div data-role =“ content” >), – footer (< div data-role =“ footer” >).

• When you mouse over one of the divs, Dreamweaver displays a blue tab indicating that div’s role.

Anatomy of a JQurey Mobile Page• Visit the site, and the browser downloads a

single HTML file, but only display a portion of the HTML at a time. See Figure 11-12 (next slide)

• jQuery Mobile applies special attributes to other HTML tags. i. e. a simple unordered list: < ul data-role =" listview" data-inset =" true" > < li >< a href ="# pg3"> Page Three </ a ></ li > < li >< a href ="# pg4" > Page Four </ a ></ li > </ ul >

• data-role =" listview“ changed basic bulleted set to a special, mobile-enhanced list.

Figure 11-21

Adding Content header &footer

• Select the dummy text Dreamweaver provides and change it.

• a long sentence in either the header or footer is kept to a single line and is cut off if it doesn’t fit. – keep the text in a header or footer short.

Adding Content central div

• The central div in each page is where you add the main content.

• The word “content” is inside that div, delete it and add HTML as you normally would:– headlines, paragraphs, bulleted lists, and images

• Also insert special jQuery Mobile items – list views, layout grids, collapsible blocks, and link

buttons — as well as additional “pages”.

Adding JQurey Mobile List View• jQuery Mobile includes its own “widgets” —

elements for links, layout, and content display. The page, header, and footer divs are widgets, for example.

• You can also insert a list of links • Dreamweaver’s stock mobile “home page” includes

a list of links to Page Two, Page Three, and Page Four

• Dreamweaver calls a list the “list view,” and jQuery Mobile supplies several variations

• List views are either ordered or unordered lists, created using the < ol > and < ul > tags. You can display these two types of list five ways:

List View

Lab – add a list view

• Lists are used for data display, navigation, result lists, and data entry so jQuery Mobile includes a wide range of list types and formatting examples to cover most common design patterns.

• List of more types http://jquerymobile.com/demos/1.1.0/docs/lists/index.html

• Page 545 Kindle 1166• If you add data-rel =“ dialog” to a link (an < a href> tag)

on a jQuery Mobile page, the linked page pops into view like a dialog box, complete with a close button.

Change: (text & link for each list item)(A inserted List view)

• Each list item includes the text “Page” with an empty link (# appears in the Property Inspector’s link box).

• Select the text and type in whatever you wish. • Link that text to another page, just as you would in a

desktop web site.

• Once you insert a list view into a page, there’s no way to return to the List View window and change its settings.

• You can, however, go into Code view and edit the HTML. Helpful information on creating lists see link on the previous slide.

Adding A Layout Grid

• A layout grid is basically a series of div tags that jQuery floats to create columns, the same technique you used to create the multi-column layouts

• Click inside the content div of a “page” div and then click the Layout Grid button on the Insert panel.

• Book 549 Kindle 11709

A Layout Grid• HTML for a one-row, two-column grid:

< div class =" ui-grid-a" > < div class =" ui-block-a" > Block 1,1 </ div > < div class =" ui-block-b" > Block 1,2 </ div > </ div >

• The letter in the class name determines the grid’s number of columns:– ui-grid-a is a two-column grid, – ui-grid-b gives you a three-column grid,– ui-grid-c results in a four-column grid, – ui-grid-d is a five-column grid.

• Follow pattern in code view to expand, shrink table• http://

jquerymobile.com/demos/1.1.0/docs/content/content-grids.html

Adding A Collapsible Block

• Collapsible blocks the blocks hide content until a visitor wants to read it. Keep’s a page appearance simple.

• To insert a collapsible block:– Click inside the content div of a “page” div and

click the Collapsible Block button in the Insert panel

Edit Collapsible Block• Edit the headline and the content. – Select the dummy “Header” text and type in your

own headline. Header limited to a single line. – Change the dummy content to anything you want.

You can even insert multiple paragraphs, lists, and images.

• Dreamweaver inserts four div tags when you add a collapsible block to a page.

• Collapsible blocks start closed. To make content visible change to: data-collapsed =“ false” instead of “true”

Collapsible Block HTML• < div data-role =" collapsible-set" >

< div data-role =" collapsible" > < h3 > Header </ h3 > < p > Content </ p > </ div > < div data-role =" collapsible" data-collapsed =" true" > < h3 > Header </ h3 > < p > Content </ p > </ div > < div data-role =" collapsible" data-collapsed =" true" > < h3 > Header </ h3 > < p > Content </ p > </ div > </ div >

More About Collapsible

• Collapsible set (accordion) Dreamweaver• http://

jquerymobile.com/demos/1.1.0/docs/content/content-collapsible-set.html

• Collapsible content• http://jquerymobile.com/demos/1.1.0/docs/c

ontent/content-collapsible.html

Adding Form Elements• The jQuery Mobile category of the Insert panel

includes many form elements — text fields, password fields, checkboxes, radio buttons, and so on. However, these fields don’t work like traditional form fields at all unless you add JavaScript programming. Dreamweaver CS6 doesn’t provide any tools to do so.

• Unless you know how to write JavaScript, select only “Link” from the Button Type menu. This lets you insert regular page links that look like attractive buttons. The Input Type menu is only available when you select “Input” from the Button Type menu, and it lets you select one of the HTML form buttons discussed later pg585

jQuery Mobile Buttons

• More on buttons• http://

jquerymobile.com/demos/1.1.0/docs/buttons/index.html

Adding New “Pages”

• jQuery Mobile “pages” are just a series of divs — one for the header, one for content, and one for a footer. You can choose to leave out either the header or footer (or both).

• Find the correct location in the code.• Click the Page button from the jQuery Mobile

category of the Insert panel.

New Page Code

• <div data-role="page" id="page5">• <div data-role="header">• <h1>Header</h1>• </div>• <div data-role="content">Content</div>• <div data-role="footer">• <h4>Footer</h4>• </div>• </div>

Formatting• When viewed in Dreamweaver’s Design view, a jQuery

Mobile Page is pretty unimpressive .• The browser view of the same HTML is astonishingly

different . The mobile page with subtle gradients, rounded corners, shadows, and sophisticated icons.

• Where does this design come from? jQuery Mobile is more than JavaScript — it’s also complex CSS that makes the HTML look like a smartphone application.

• You can use your CSS skills to change the appearance of your jQuery Mobile site, but you’re in for a lot of work

• The CSS is complex, and there are literally hundreds of styles required to make jQuery Mobile work. If you want to give it a try, Dreamweaver’s Inspect mode is your best bet at deciphering the CSS.

Five Built-in Designs• Another approach is to use one of jQuery Mobile’s five

built-in designs that you can switch among simply by adding attributes to the HTML tags.

• By default, jQuery Mobile uses its “a” theme for pages, but you can choose its b, c, d, and e themes.

• To change one page to the “b” theme add data-theme =“ b” to that page’s < div > tag like this:

• < div data-role =" page" id =" page" data-theme =" b" > • To change a List View to the “e” theme, div: • < ul data-role =" listview" data-theme =" e" >• http://

jquerymobile.com/demos/1.1.0/docs/content/content-themes.html

Swatches Panel

• You don’t need to add that theme data by hand. Dreamweaver CS6 includes a handy, context-sensitive jQuery Mobile Swatches panel (see next slide).

• Window → jQuery Mobile Swatches. • Apply a swatch by clicking into a jQuery

mobile element. The Swatches panel displays the formatting options for the current element.

Five Basic Swatches

Panel

Swatches Panel• For example, in last slide, Dreamweaver displays

the options for the selected link (circled) inside a jQuery mobile list view. In this instance, you could apply one of five swatches (labeled a to e) to the list itself, as well as other swatches for the different types of available lists.

• Clicking into another element, like a page header, updates the Swatches panel to list just the swatches available for page headers. Click a swatch to apply it to the selected page element.

ThemeRoller Website

• If you want to create your own look for a jQuery Mobile site,

• Click Get More Themes link at bottom. This will take you to jQuery Mobile ThemeRoller website

• http://jquerymobile.com/themeroller/index.php• Try different fonts, colors, borders, and shadows,

and see a live, interactive rendering of your design choices.

ThemeRoller• Once you’re satisfied, click the Download button.

You’ll end up with a CSS file containing your design, as well as an Images folder containing the icons for the design.

• Simply move those files into the jquery-mobile folder in your site (replacing the original files).

• Change the link from the CSS file Dreamweaver supplies (jquery.mobile.theme-1.0.min.css) to your new theme file, and you’re done.

• Dreamweaver is smart enough to realize you’re using a new theme, and displays it in the jQuery Mobile Swatches panel.

Formatting Summary

• jQuery Mobile Swatches panel makes it easy to apply formatting to mobile page elements.

• You’re not stuck with just the five basic swatches that jQuery Mobile ships with.

• Click the “Get more themes” link to launch a web browser and visit the jQuery Mobile ThemeRoller — an online web application for visually creating mobile theme files.

Launching Your jQuery Mobile Site

• Load to you web server• Link from your main web site to mobile site.• Link ”See our Mobile Site Version”

Convert for use on Android and iPhone

• PhoneGap Build Service• http://build.phonegap.com• From dreamweaver access– SitePhoneGap Build Service PhoneGap Build

Service• From dreamweaver Settings– SitePhoneGap Build Service PhoneGap Build

Settings

PhoneGap Build ServiceHelp videos

• http://tv.adobe.com/watch/cs6-creative-cloud-feature-tour-for-web/using-the-phonegap-build-panel-in-dreamweaver-cs6-to-build-native-applications-for-android-and-ios-devices/

• http://tv.adobe.com/watch/learn-dreamweaver-cs6/packaging-and-uploading-phone-gap-apps/