Presentation on theme: "WDV 331 Dreamweaver Applications JQuery Mobile for Apps Dreamweaver CS6 Chapter 11 Page 537 Kindle 11543."— Presentation transcript:
WDV 331 Dreamweaver Applications JQuery Mobile for Apps Dreamweaver CS6 Chapter 11 Page 537 Kindle 11543
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 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:. Within that div are other divs: – header ( ), – content ( ), – 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: Page Three Page Four data-role =" listview“ changed basic bulleted set to a special, mobile-enhanced list.
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 and tags. You can display these two types of list five ways:
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 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 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: Block 1,1 Block 1,2 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/c ontent-grids.html http://jquerymobile.com/demos/1.1.0/docs/content/c ontent-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 Header Content Header Content Header Content
More About Collapsible Collapsible set (accordion) Dreamweaver http://jquerymobile.com/demos/1.1.0/docs/c ontent/content-collapsible-set.html http://jquerymobile.com/demos/1.1.0/docs/c ontent/content-collapsible-set.html Collapsible content http://jquerymobile.com/demos/1.1.0/docs/c ontent/content-collapsible.html http://jquerymobile.com/demos/1.1.0/docs/c ontent/content-collapsible.html
jQuery Mobile Buttons More on buttons http://jquerymobile.com/demos/1.1.0/docs/b uttons/index.html http://jquerymobile.com/demos/1.1.0/docs/b uttons/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.
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 tag like this: To change a List View to the “e” theme, div: http://jquerymobile.com/demos/1.1.0/docs/content/c ontent-themes.html http://jquerymobile.com/demos/1.1.0/docs/content/c ontent-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.
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 – Site PhoneGap Build Service PhoneGap Build Service From dreamweaver Settings – Site PhoneGap Build Service PhoneGap Build Settings