Introduzione a jQueryMobile

Introduzione a
JQuery Mobile

Francesco Valente @ Alca Soc. Coop.

Who am I

Mobile Web Developer/Sviluppo Android
Alca Soc. Cooperativa
https://github.com/francov
francesco.valente [at] alcacoop.it

Mobile Web Developement

Ottimizzare la resa grafica su dispositivi e risoluzioni eterogenei
Layout fluidi
Graceful degradation
Responsive Web Design
Progressive enhancement

jQueryMobile basics

HTML5 UI framework basato su jQuery
compatibile con le piattaforme mobile più diffuse
responsive web design (RWD) basato sui principi di progressive enhancement
supporto a eventi mouse/touch

jQueryMobile features

sintassi dichiarativa (basata su attributi HTML)
customizzazione grafica mediante tool online theme-roller
possibilità di build personalizzate (ottimizzazione)
il framework offre un vasto assortimento di widget ottimizzati per touch screen
supporto a tabelle responsive e listview
last stable release: 1.4.1

Esempio UI Jquery Mobile

Esempio base (link esempio)

HTML preview

HTML sourcecode

<body>
  <div data-role="page" id="pag1">
    <div data-role="header" data-theme="b" data-position="fixed">
        <a href="" data-rel="back" data-icon="back">Back</a>
        <h1>Header</h1>
    </div>

    <div role="main" class="ui-content">
      <div data-role="controlgroup" data-type="horizontal" data-mini="true">
        <a href="#" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-plus ui-btn-b">Add</a>
        <a href="#" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-delete ui-btn-b">Delete</a>
        <a href="#" class="ui-shadow ui-btn ui-corner-all ui-btn-icon-left ui-icon-grid ui-btn-b">More</a>
      </div>

      <fieldset data-role="controlgroup">
        <input name="checkbox-1a" id="checkbox-1a" checked="" type="checkbox"/>
        <label for="checkbox-1a">Cheetos</label>
        <input name="checkbox-2a" id="checkbox-2a" type="checkbox"/>
        <label for="checkbox-2a">Doritos</label>
        <input name="checkbox-3a" id="checkbox-3a" type="checkbox"/>
        <label for="checkbox-3a">Fritos</label>
        <input name="checkbox-4a" id="checkbox-4a" type="checkbox"/>
        <label for="checkbox-4a">Sun Chips</label>
      </fieldset>
      <p>
        Adipisicing a voluptatum aspernatur eum dolores excepturi nesciunt deleniti? Earum sint explicabo nulla expedita enim mollitia consequatur. Ratione totam laudantium perspiciatis nulla quisquam natus architecto veritatis sed molestiae nisi eaque nam non voluptatibus aperiam. Eius quasi facere adipisci voluptas impedit nemo! Placeat odio tempora corrupti minus fugit. 
      </p>
    </div>

    <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
    </div>
  </div>
</body>

Documento minimo jQuery Mobile

HTML preview

HTML sourcecode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery.mobile-1.4.1.css">
    <script src="jquery-2.1.0.min.js"></script>
    <script src="jquery.mobile-1.4.1.js"></script>
  </head>

  <body>
    jQuery Mobile Ready Document!
  </body>
</html>

jQuery Mobile Design

Un documento HTML -> Molte schermate dell'applicazione (Pagine)
per creare una pagina è sufficiente assegnare ad un elemento DOM l'attributo data-role="page"
all'interno di ciascuna pagina è possibile inserire codice HTML arbitrario
ogni pagina dovrebbe essere caratterizzato da un header, un content e un footer

Creazione di una pagina

Esempio pagina base (link esempio)

HTML preview

HTML sourcecode

<body>
  <div data-role="page" id="pag1">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Header</h1>
    </div>

    <div role="main" class="ui-content">
      Page content!
    </div>

    <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
    </div>
  </div>
</body>

La navigazione tra le pagine si ottiene mediante semplici coppie anchor/link
I back-link alla pagina precedente si ottengono mediante un apposito attributo:
- <a href="" data-rel="back">Back</a>
- utilizzare data-rel previene l'accumulo di stato nella history del browser
- l'approccio descritto ottimizza il supporto al tasto Indietro presente nei principali SO Mobile
È possibile configurare una serie di animazioni di transizione tra pagine

Es. Navigazione tra pagine

Esempio: (link esempio)

HTML preview

HTML sourcecode

<body>
  <div data-role="page" id="pag1">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Pag1</h1>
    </div>

    <div role="main" class="ui-content">
      Page content!
      <a href="#pag2" data-transition="flow">Go to Pag2</a>
    </div>

    <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
    </div>
  </div>

  <div data-role="page" id="pag2">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Pag2</h1>
    </div>

    <div role="main" class="ui-content">
      Page content!
      <a href="" data-rel="back">Back</a>
    </div>

    <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
    </div>
  </div>
</body>

Execution flow

Page organization:
- il framework carica il primo container con data-role="page"
AJAX Navigation Wrapping + Prevent default behaviours:
- modifica del comportamento dei link mediante richieste AJAX
- per disabilitare questo meccanismo: data-rel="external" o data_rel="back" o data-ajax="false"
- gli eventi di navigazione corrispondono a push e pop nella history
Content Enhancement
- wrap del codice HTML della pagina con i widget della libreria

Widget Library

HTML preview

HTML sourcecode

<body>
    <div data-role="page" id="pag1">
      <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Pag1</h1>
      </div>
      <div role="main" class="ui-content">
        Page content!
        <a href="#dialog" data-rel="popup" data-transition="pop">Open dialog!</a>

        <div data-role="popup" id="dialog" data-dismissible="false" data-overlay-theme="b" style="max-width:400px;">
          <div data-role="header" data-theme="b">
            <h1>Dialog</h1>
          </div>
          <div role="main" class="ui-content">
            <h1>Delete page?</h1>
            <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
            <a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Sounds good</a>
            <a href="dialog/index.html" data-rel="back" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Cancel</a>
          </div>
        </div>

      </div>
      <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
      </div>
    </div>
  </body>

Buttons

Il framework mette a disposizione una serie di bottoni semplici o con icone:

il design degli elementi è ottimizzato per i touch screen
è possibile renderizzare come button widget sia bottoni che link
per istanziare bottoni si può utilizzare un approccio dichiarativo o classi CSS
per disabilitare un bottone è sufficiente aggiungere l'attributo disabled

Buttons

Button widgets: esempio

HTML preview

HTML sourcecode

<body>
    <div data-role="page" id="pag1">
      <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Pag1</h1>
      </div>
      <div role="main" class="ui-content">
        Page content!

        <a href="" class="ui-btn ui-btn-a">Simple Link</a>
        <a href="" class="ui-btn ui-shadow ui-corner-all ui-btn-a">Shadowed/rounded Link</a>
        <a href="" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-btn ui-icon-delete ui-btn-icon-left">Icon Link</a>
        <input type="button" value="Button"/>
        <input type="button" value="Disabled button" disabled="disabled"/>

      </div>
      <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
      </div>
    </div>
  </body>

Listview

Liste HTML con data-role="listview" (Esempio)

HTML preview

HTML sourcecode

<body>
    <div data-role="page" id="pag1">
      <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Unordered</h1>
        <a href="#pag2" data-transition="flow" class="ui-btn-right">Next</a>
      </div>
      <div role="main" class="ui-content">
        <ul data-role="listview">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ul>
      </div>
      <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
      </div>
    </div>

    <div data-role="page" id="pag2">
      <div data-role="header" data-theme="b" data-position="fixed">
        <a href="" data-rel="back" data-transition="flow">Back</a>
        <h1>Ordered</h1>
        <a href="#pag3" data-transition="flow">Next</a>
      </div>
      <div role="main" class="ui-content">
        <ol data-role="listview">
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
          <li>Item 4</li>
          <li>Item 5</li>
        </ol>
      </div>
      <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
      </div>
    </div>

    <div data-role="page" id="pag3">
      <div data-role="header" data-theme="b" data-position="fixed">
        <a href="" data-rel="back" data-transition="flow" class="ui-btn-left">Back</a>
        <h1>Link</h1>
      </div>
      <div role="main" class="ui-content">

        <ul data-role="listview" data-inset="true">
          <li><a href="">SubList 1</a></li>
          <li><a href="">SubList 2</a></li>
          <li><a href="">SubList 3</a></li>
          <li><a href="">SubList 4</a></li>
          <li><a href="">SubList 5</a></li>
        </ul>

      </div>
      <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
      </div>
    </div>
  </body>

Listview + HTML content

All'interno degli elementi li è possibile inserire HTML (Esempio)

HTML preview

HTML sourcecode

<body>
    <div data-role="page" id="pag1">
      <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Unordered</h1>
        <a href="#pag2" data-transition="flow" class="ui-btn-right">Next</a>
      </div>
      <div role="main" class="ui-content">
        <ul data-role="listview" data-inset="true">
          <li><a href="">
              <img src="../res/album-bb.jpg"/>
              <h2>Broken Bells</h2>
              <p>Broken Bells</p></a>
          </li>
          <li><a href="">
              <img src="../res/album-hc.jpg"/>
              <h2>Warning</h2>
              <p>Hot Chip</p></a>
          </li>
          <li><a href="">
              <img src="../res/album-p.jpg"/>
              <h2>Wolfgang Amadeus Phoenix</h2>
              <p>Phoenix</p></a>
          </li>
        </ul>
      </div>
      <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
      </div>
    </div>
  </body>

Filtered listview

È sufficiente aggiungere l'attributo data-filter="true" (Esempio)

HTML preview

HTML sourcecode

<body>
    <div data-role="page" id="pag1">
      <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Unordered</h1>
        <a href="#pag2" data-transition="flow" class="ui-btn-right">Next</a>
      </div>
      <div role="main" class="ui-content">

        <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
          <li>Apple</li>
          <li>Banana</li>
          <li>Cherry</li>
          <li>Cranberry</li>
          <li>Grape</li>
        </ul>

      </div>
      <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
      </div>
    </div>
  </body>

Collapsible content

Nasconde contenuto e presenta una vista compatta: esempio

HTML preview

HTML sourcecode

<body>
    <div data-role="page" id="pag1">
      <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Unordered</h1>
        <a href="#pag2" data-transition="flow" class="ui-btn-right">Next</a>
      </div>
      <div role="main" class="ui-content">
        <div data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
          <h4>Heading</h4>
          <ul data-role="listview">
            <li><a href="#">List item 1</a></li>
            <li><a href="#">List item 2</a></li>
            <li><a href="#">List item 3</a></li>
          </ul>
        </div>
      </div>
      <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
      </div>
    </div>
  </body>

Source code: esempio

HTML preview

HTML sourcecode

<body>
  <div data-role="page" id="pag1">
    <div data-role="header" data-theme="b" data-position="fixed">
        <a href="#" data-icon="delete" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left">Cancel</a>
        <h1>My App</h1>
        <button data-icon="check" class="ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right">Save</button>
    </div>

    <div role="main" class="ui-content">
      Page content!
    </div>

    <div data-role="footer" data-position="fixed" data-theme="b">
      <div data-role="navbar" data-theme="b">
        <ul>
          <li>
            <a href="#" data-icon="plus">New</a>
          </li>
          <li>
            <a href="#" data-icon="check">Clear</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

Panel

Source code: esempio

HTML preview

HTML sourcecode

<body>
  <div data-role="page" id="pag1">
    <div id="mypanel" data-role="panel" data-display="overlay">
      <div class="ui-bar ui-bar-a">
        Panel
      </div>
      <div class="ui-body">
        This is a panel displayed with overlay and appearing on the left.
        <a class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline" data-rel="close">Close</a>
      </div>
    </div>
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Header</h1>
    </div>

    <div role="main" class="ui-content">
      Page content!
      <br/>
      <a class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-mini" href="#mypanel">
        Open panel
      </a>
    </div>

    <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
    </div>
  </div>
</body>

Form

Source code: esempio

HTML preview

HTML sourcecode

<body>
  <div data-role="page" id="pag1">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Header</h1>
    </div>

    <div role="main" class="ui-content">
      <form>
        <label for="textinput-hide" class="ui-hidden-accessible">Text Input:</label>
        <input name="textinput-hide" id="textinput-hide" placeholder="Text input" value="" type="text"/>

        <label for="textarea">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"/>

        <label for="password">Password:</label>
        <input name="password" id="password" value="" autocomplete="off" type="password"/>

        <label for="number-pattern">Number + [0-9]* pattern:</label>
        <input name="number" pattern="[0-9]*" id="number-pattern" value="" type="number"/>

        <div data-role="rangeslider">
          <label for="range-1a">Rangeslider:</label>
          <input name="range-1a" id="range-1a" min="0" max="100" value="40" type="range"/>
          <label for="range-1b">Rangeslider:</label>
          <input name="range-1b" id="range-1b" min="0" max="100" value="80" type="range"/>
        </div>

        <fieldset data-role="controlgroup">
          <legend>Radio buttons, vertical controlgroup:</legend>
          <input name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" type="radio"/>
          <label for="radio-choice-1">Cat</label>
          <input name="radio-choice-1" id="radio-choice-2" value="choice-2" type="radio"/>
          <label for="radio-choice-2">Dog</label>
          <input name="radio-choice-1" id="radio-choice-3" value="choice-3" type="radio"/>
          <label for="radio-choice-3">Hamster</label>
        </fieldset>

        <label for="submit">Send:</label>
        <input type="submit" id="submit" value="Submit" class="ui-shadow ui-btn ui-corner-all ui-mini"/>
      </form>
    </div>

    <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
    </div>
  </div>

</body>

Flip Switch

Source code: esempio

HTML preview

HTML sourcecode

<body>
  <div data-role="page" id="pag1">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Header</h1>
    </div>

    <div role="main" class="ui-content">
      <form>
        <label for="flip-checkbox">Switch debugger mode:</label>
        <input data-role="flipswitch" id="flip-checkbox" data-on-text="On" data-off-text="Off" type="checkbox"/>
      </form>
    </div>

    <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
    </div>
  </div>

</body>

Responsive tables

Source code: esempio

HTML preview

HTML sourcecode

<body>
  <div data-role="page" id="pag1">
    <div data-role="header" data-theme="b" data-position="fixed">
        <h1>Header</h1>
    </div>

    <div role="main" class="ui-content">
      <table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive">
        <thead>
          <tr>
            <th>Rank</th>
            <th>Movie Title</th>
            <th>Year</th>
            <th>Rating</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>1</th>
            <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
            <td>1941</td>
            <td>100%</td>
          </tr>
          <tr>
            <th>2</th>
            <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
            <td>1942</td>
            <td>97%</td>
          </tr>
          <tr>
            <th>3</th>
            <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
            <td>1972</td>
            <td>97%</td>
          </tr>
          <tr>
            <th>4</th>
            <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
            <td>1939</td>
            <td>96%</td>
          </tr>
          <tr>
            <th>5</th>
            <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
            <td>1964</td>
            <td>94%</td>
          </tr>
          <tr>
            <th>6</th>
            <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
            <td>1962</td>
            <td>92%</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div data-role="footer" data-position="fixed" data-theme="b">
        Footer
    </div>
  </div>
</body>

Theme roller

jQuery Mobile supporta la customizzazione grafica di tutti i componenti attraverso il theme rolling

WebAPP specifica per la generazione del tema: http://themeroller.jquerymobile.com
Inclusione del nuovo CSS generato
Selezione del tema specifico sull'intera applicazione o sul singolo componente: data-theme="A"
È possibile configurare fino a 26 temi all'interno di un unico CSS (selezionabili attraverso le lettere dell'alfabeto)

Put it all together

Source code: esempio

Introduzione a JQuery Mobile

Francesco Valente @ Alca Soc. Coop.

Who am I

Mobile Web Developement

jQueryMobile basics

jQueryMobile features

Esempio UI Jquery Mobile

Esempio base (link esempio)

HTML preview

HTML sourcecode

Documento minimo jQuery Mobile

HTML preview

HTML sourcecode

jQuery Mobile Design

Creazione di una pagina

Esempio pagina base (link esempio)

HTML preview

HTML sourcecode

Page navigation

Es. Navigazione tra pagine

Esempio: (link esempio)

HTML preview

HTML sourcecode

Execution flow

Widget Library

Popup windows

Per creare una popup si utilizza l'attributo data-role="popup" (esempio)

HTML preview

HTML sourcecode

Buttons

Il framework mette a disposizione una serie di bottoni semplici o con icone:

Buttons

Button widgets: esempio

HTML preview

HTML sourcecode

Listview

Liste HTML con data-role="listview" (Esempio)

HTML preview

HTML sourcecode

Listview + HTML content

All'interno degli elementi li è possibile inserire HTML (Esempio)

HTML preview

HTML sourcecode

Filtered listview

È sufficiente aggiungere l'attributo data-filter="true" (Esempio)

HTML preview

HTML sourcecode

Collapsible content

Nasconde contenuto e presenta una vista compatta: esempio

HTML preview

HTML sourcecode

Navbar e Toolbar

Source code: esempio

HTML preview

HTML sourcecode

Panel

Source code: esempio

HTML preview

HTML sourcecode

Form

Source code: esempio

HTML preview

HTML sourcecode

Flip Switch

Source code: esempio

HTML preview

HTML sourcecode

Responsive tables

Source code: esempio

HTML preview

HTML sourcecode

Theme roller

jQuery Mobile supporta la customizzazione grafica di tutti i componenti attraverso il theme rolling

Put it all together

Source code: esempio

Introduzione a
JQuery Mobile