21
Web-Apps mit jQuery Mobile – Update zum Buch 1 Update für jQuery Mobile 1.4 und etwas mehr... August 2014, Philipp Friberg

Update’ für’ jQuery’ Mobile’ 1.4’ und’ etwas’ mehr’ · Web-Apps mit jQuery Mobile – Update zum Buch 3 1 Update auf jQuery Mobile 1.4 Mit&jQuery&Mobile&in&der&Version&1.4&hat&sich&einiges&in&der&Bibliothek&als&

Embed Size (px)

Citation preview

Web-Apps mit jQuery Mobile – Update zum Buch 1

 

Update   für   jQuery   Mobile   1.4   und   etwas  mehr...   August  2014,  Philipp  Friberg  

 

Web-Apps mit jQuery Mobile – Update zum Buch 2

1   UPDATE  AUF  JQUERY  MOBILE  1.4   3  1.1   JQM-­‐PAGE   3  1.2   NAVIGATION  MIT  CHANGEPAGE()   4  1.3   EVENTS   5  1.4   AKTIVE  PAGE   6  1.5   THEMEN   6  1.6   COLLAPSIBLE  SETS   7  1.7   ICONS   7  1.8   FIELD-­‐CONTAINER   7  1.9   DATUMSEINGABE   8  1.10   FLIP  TOGGLE  SWITCH   9  1.11   BUTTONS   9  1.12   LISTVIEW   10  1.12.1   BILDER  IN  DER  LISTVIEW   10  1.12.2   FILTER   10  1.13   PANELS   11  

2   WEITERE    JQM-­‐THEMEN   12  2.1   FOCUS  SETZEN   12  2.2   HASH  LÖSCHEN   12  2.3   INPUT-­‐FIELD  X  LÖSCHEN  BEIM  IE10   12  2.4   AUF  WELCHER  PAGE  BEFINDET  SICH  DER  ANWENDER?   12  2.5   KONTRAST   13  2.6   AJAX   13  2.7   DIALOG  BREITE  UND  ABSTÄNDE  BEEINFLUSSEN   14  

3   BILD  IN  DIE  WHISKY-­‐APP  EINFÜGEN   15  3.1   WHISKY-­‐APP  UND  FOTOS   15  3.2   HTML-­‐ANPASSUNGEN   16  3.3   DATENBANK   17  3.4   CONTROLLER   17  

4   WEITERES  SIMPLES  BEISPIEL   18  

5   KORRIGENDA   21  

Web-Apps mit jQuery Mobile – Update zum Buch 3

1 Update auf jQuery Mobile 1.4

Mit  jQuery  Mobile  in  der  Version  1.4  hat  sich  einiges  in  der  Bibliothek  als  auch  außerhalb  der  Bibliothek  getan,  z.B.  wurde  die  langersehnte  Road-­‐map1  veröffentlicht.  Das  API  soll  bis  zur  Version  2.0  schrittweise  überar-­‐beitet  werden  und  gewisse  jQuery  UI  Widgets  auf  die  Mobile-­‐Philosophie  adaptiert  werden.  

In   der   Version   1.4   von   jQuery  Mobile  wurde   die   Performance   ver-­‐bessert,   das   Widget-­‐Konzept   konsequenter   angewendet,   die   Themen  überarbeitet  und  auf  SVG-­‐Icons  gewechselt.  Einen  1:1  Update  der  Biblio-­‐thek   von   der   Version   1.3   auf   1.4   ist   leider   nicht   möglich.   Anhand   der  Whisky-­‐App   aus   dem   Buch   Web-­‐Apps   mit   jQuery   Mobile2     zeige   ich  Ihnen,  was  sich  geändert  hat.  

1.1 jQM-Page

Abschnitt  4  

data-role=“content“  wird  ab   jQM  1.5  nicht  mehr  unterstützt.  Neu  muss  die  CSS-­‐Klasse  verwendet  werden:  

<div class="ui-content"> ... </div>

In   unsere  Whisky-­‐App  muss   dies   ersetzt   werden,   zum   Glück   kann   dies  mit   „Suchen/Ersetzen“   vollzogen   werden.   Somit   ergibt   sich   folgendes  neues  Grundgerüst  für  eine  jQM  1.4  Applikation:  

<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"

1  Siehe  http://jquerymobile.com/roadmap/  2  Siehe  dazu  den  Code  im  Verzeichnis  „jQM_1_4“  

Web-Apps mit jQuery Mobile – Update zum Buch 4

href="http://code.jquery.com/mobile/[version]/ jquery.mobile-[version].min.css" /> <script src="http://code.jquery.com/ jquery-[version].min.js"></script> <script src="http://code.jquery.com/mobile/ [version]/jquery.mobile-[version].min.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div role="main" class="ui-content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>

Sie   werden   folgend   öfters   feststellen,   dass   die   data-role-Attribute   zu  CSS-­‐Klassen  geändert  wurden.  

1.2 Navigation mit changePage()

Abschnitt  5.1  

changePage()   und   loadPage()   werden   ab   Version   1.5   nicht   mehr   unter-­‐stützt.   Die   „Page“   wurde   in   ein   eigenes   Widget   gepackt   –   was   ja   aus  Struktur-­‐Gründen   vernünftig   ist.   Somit   muss   aber   dem   Pagecontainer  den  Seitenwechsel  mitgeteilt  werden:  

 Alt:  

$.mobile.changePage("#whisky-home", { transition : "none" });

Neu:  $( "body" ).pagecontainer( "change", "#whisky-home", { transition : "none" });

Web-Apps mit jQuery Mobile – Update zum Buch 5

In   der   Datei   controller.js müssen   wir   also   mittels   „suchen/ersetzen“  die  Methode  ändern.  

1.3 Events

verschiedene  Abschnitte  

Wegen   der   Einführung   des   Pagecontainers   haben   sich   verschiedene  Page-­‐Events  geändert:  

• pageshow  wird  zu  pagecontainershow  •  pageinit  wird  zu  pagecreate  

Es  empfiehlt  sich  die  Doku  zu  konsultieren,  da  weitere  Events  sich  geän-­‐dert   haben.   Für   die  Whisky-­‐App  müssen  wir   im   controller.js und   der  view.js die  Events  anpassen.  

Im   Controller   ist   des   weiteren   zu   beachten,   dass   die   Initialisierung  nur   in  der  Page  whisky-home ausgeführt  werden  darf  und  nicht   für   jede  Page:  

/** Controller aufrufen, wenn pageinit von jQM geworfen wird. */

// $('#whisky-home').live("pageinit", function(event) { $(document).on("pagecreate", "#whisky-home", function(event) { if (( typeof cordova == 'undefined') && ( typeof Cordova == 'undefined')) { WhiskyApp.controller.initialize(); } });

In  der  View:  

/** * Event für neues Tasting darstellen. */ // in jQM 1.4 nicht mehr pageshow sondern pagecontainershow $(document).on("pagecontainershow", function(event, ui) { if( $( "body" ).pagecontainer( "getActivePage" ).attr("id") == "whisky-home" && typeof cordova == 'undefined' && typeof Cordova == 'undefined' && // Nativ oder Web? WhiskyApp.tablet == true ) WhiskyApp.controller.firstView(); )};

Web-Apps mit jQuery Mobile – Update zum Buch 6

1.4 Aktive Page

Abschnitt  7.1  

Auch   die   Methode   $.mobile.activePage()   hat   sich   wegen   dem   neuen  Page-­‐Widget  geändert.  Die  aktuelle  Page  muss  nun  auch  mit  der  pagecon-tainer()-­‐Methode  ermittelt  werden:  

$( "body" ).pagecontainer( "getActivePage" );

Im  Controller  setzen  wir  dies  aus  Performance-­‐Gründen  sehr  häufig  ein.  Zum  Glück  genügt  auch  hier  „Suchen/Ersetzen“.  

1.5 Themen

Abschnitt  5.2  

Die  Überarbeitung  der  Themen  ist  eine  der  größten  Änderungen.  Das  Ziel  war  mehr  CSS  und  weniger  JavaScript.  Es  gibt  nur  noch  zwei  Themen  die  ausgeliefert  werden:  a  für  ein  helles,  leichtes  Design  und  b  für  ein  dunk-­‐les  Design.  Der  ThemeRoller  für  sein  individuelles  Design  existiert  weiter-­‐hin.  

Alt:  

<ul data-role="listview" data-theme="d"> <li>List item</li> </ul>

Neu:  

<ul data-role="listview" data-theme="a"> <li>List item</li> </ul>

In  der  Whisky-­‐App  wurde  entsprechend  data-theme  auf  a  gesetzt.  Auf  das  gelbe   Design   habe   ich   aus   persönlichen   Gründen   verzichtet,   es   störte  mich  mit   der   Zeit.   Einzig   der   header   habe   ich   auf   das   Thema   b   gesetzt.  Eine  typische  „suchen/ersetzen“  Arbeit.  

Abb. 1: Die Whisky-App im neuen Design

Web-Apps mit jQuery Mobile – Update zum Buch 7

1.6 Collapsible Sets

Abschnitt  5.3.1  

Wer   bis   anhin   das   Aufklappen   eines   Bereiches   mit   $("#mycollapsib-le").trigger( "expand" );  steuerte,  muss  den  Code  ändern:  

$( "#mycollapsible" ).collapsible( "expand" );

1.7 Icons

Abschnitt  5.3.1  

Die  Icons  wurden  komplett  überarbeitet  und  erweitert:  

Abb. 2: Die neuen Icons

Entsprechend  habe   ich   in  der  Whisky-­‐App  die   Icons  angepasst.  Da   jQM  1.4  mit  dem  verwendeten  Icon-­‐Pack  nicht  mehr  kompatibel  ist,  habe  ich  dieses  ganz  entfernt.  Dank  der  erweiterten   Icon-­‐Auswahl  benötigen  wir  diese  in  der  Whisky-­‐App  nicht  mehr.  

Der  Schatten  bei  den  Icons,  den  wir  im  header  ausschalten  mussten,  ist  mit  dem  neuen  Design  hinfällig,   sprich  es  gibt   ihn  nicht  mehr.  Somit  können  wir  die  data-shadow="false"  Attribute  entfernen.  

1.8 Field-Container

Abschnitt  5.4.1  

Einen  Field-­‐Container  hatte  man  bis  anhin  wie  folgt  definiert:  

<div data-role="fieldcontain"> ... </div>

Web-Apps mit jQuery Mobile – Update zum Buch 8

Dies  wird  ab  jQM  1.5  nicht  mehr  unterstützt  und  sollte  auch  hier  mit  CSS  gelöst  werden.  Aber  keine  Angst,  eine  typische  „suchen/ersetzen“-­‐Arbeit  durch  die  ganze  Whisky-­‐App  und  erledigt  ist  es:  

<div class="ui-field-contain"> ... </div>

1.9 Datumseingabe

Abschnitt  5.4.4  

Da  die  Strategie  vom  jQM-­‐Team  Richtung  jQuery  UI  geht,  macht  es  sinn,  die   für   jQM  empfohlene  Datumseingabe  aus  dem  jQuery  UI  zu  verwen-­‐den.  Dazu  wurde  ein  Wrapper  entwickelt.  

1. Das  CSS  uns  Java-­‐Script  einbinden:  <link rel="stylesheet"

href="lib/datepicker/jquery.mobile.datepicker.css" />

<script src="lib/datepicker/datepicker.js"></script>

<script id="mobile-datepicker"

src="lib/datepicker/jquery.mobile.datepicker.js"></script>

2. Das  Input-­‐Feld  vereinfacht  sich  um  einiges:  <input data-role="date" required type="text" name="date" id="date"

data-mini="true">

3. In  der  main.js  –  Datei  können  wir  die  Parameter  setzen  –  inkl.  den  Übersetzungen:  

/* jQM 1.4: Verwendung des Datepickers aus jQuery.ui */ $.datepicker.setDefaults({ dateFormat: "dd.mm.yy", prevText: '&#x3c;zurück', prevStatus: '', prevJumpText: '&#x3c;&#x3c;', prevJumpStatus: '', nextText: 'Vor&#x3e;', nextStatus: '', nextJumpText: '&#x3e;&#x3e;', nextJumpStatus: '', currentText: 'heute', currentStatus: '', todayText: 'heute', todayStatus: '', clearText: '-', clearStatus: '', closeText: 'schließen', closeStatus: '', monthNames: ['Januar','Februar','März','April','Mai','Juni', 'Juli','August','September','Oktober','November', 'Dezember'], monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun', 'Jul','Aug','Sep','Okt','Nov','Dez'], dayNames: ['Sonntag','Montag','Dienstag','Mittwoch', 'Donnerstag','Freitag','Samstag'], dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'], dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'], showMonthAfterYear: false });

Web-Apps mit jQuery Mobile – Update zum Buch 9

1.10 Flip Toggle Switch

Abschnitt  5.4.7  

Der   Flip   Toggle   Switch   sollte  man   nicht  mehr   verwenden,   statt   dessen  das  Widget  Flipswitch:  

Bisher:  

<label for="switch">Switch:</label> <select id="switch" name="switch" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select>

Neu:  

<label for="switch">Switch:</label> <select id="switch" name="switch" data-role="flipswitch"> <option>Off</option> <option>On</option> </select>

Es  hat  sich  also  aus  Sicht  der  Anwendung  nicht  viel  geändert,  so  dass  wir  mit  „suchen/ersetzen“  durch  die  Whisky-­‐App  gehen  können.  

1.11 Buttons

Abschnitt  5.4.14  

Neu  sollten  die  Buttons  nur  noch  mit  dem  Anker-­‐  oder  Button-­‐Element  erstellt   werden.   Entsprechend   müssen   wir   die   div-­‐Buttons   im   header  anpassen.  

Wir  haben  gelernt,  dass  wir  ein  Button  mit  data-Attributen  anpassen  können.   Dies   funktioniert   in   jQM   1.4   weiterhin.   Zukünftig   sollte   man  jedoch  die  CSS-­‐Klassen  verwenden:  

n data-role="button" → class="ui-btn"

n data-theme="a" → class="ui-btn-a"

n data-corners="true" → class="ui-corner-all"

n data-shadow="true" → class="ui-shadow"

n data-mini="true" → class="ui-mini"

n data-icon="home" → class="ui-icon-home"

n data-iconpos="right" → class="ui-btn-icon-right" (oder left, top,

bottom)

n data-iconshadow="true" → class="ui-shadow-icon"

   

Web-Apps mit jQuery Mobile – Update zum Buch 10

Bisher:  

<a href="#" data-role="button" data-theme="b" data-mini="true" data-icon="grid">Link button</a>

Neu:  

<a href="#" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-icon-right ui-icon-grid">Link button</a>

1.12 Listview

Abschnitt  5.6  

Bei  der  Listview   hat  es   zwei  wesentliche  Änderungen  gegeben:  Bei  der  Integration  von  Bildern  und  dem  Filter.  

1.12.1 Bilder in der Listview

Wir  hatten  gelernt,  dass  mit  der  Klasse  ui-li-icon  ein  Bild  als  Icon  darge-­‐stellt   wird,   vgl.   Seite   131.   Aus   Performance-­‐Gründen   verzichtete   das  Entwickler-­‐Team  auf  diese  Funktionalität.  Neu  muss  ein  Bild,  das  als  Icon  dargestellt   werden   soll   im   Format   16x16   Pixel   vorhanden   sein.  Weiter  muss  die  Klasse  ui-li-has-thumb  dem  li-­‐Element  hinzugefügt  werden.  In  unsere  App  sieht  das  dann  so  aus:  

<li id="entryTemplate" class="ui-li-has-thumb entry" > ... <img style="max-width:16px; max-height:16px; padding-top: 15pt; padding-left: 5pt" class="ui-li-icon ui-li-thumb" /> ... </li>

1.12.2 Filter

Die  bisherige  Art  von  Filter  wird  nicht  mehr  unterstützt.  Es  gibt  ein  neues  Filter-­‐Widget:  

Alt:  

<!-- Liste --> <div id="whiskylist" class="content-list"> <ul class="whiskies" data-role="listview" data-filter="true"> </ul> </div>

Neu:  

Web-Apps mit jQuery Mobile – Update zum Buch 11

<!-- Liste --> <div id="whiskylist" class="content-list"> <form class="ui-filterable"> <input id="filter-input" data-type="search"> </form> <ul class="whiskies" data-role="listview" data-filter="true" data-input="#filter-input"> </ul> </div>

1.13 Panels

Abschnitt  5.8  

Die   CSS-­‐Klassen   zu   den   Panels   wurden   geändert   und   erweitert.   Siehe  dazu  die  Dokumentation.  

Web-Apps mit jQuery Mobile – Update zum Buch 12

2 Weitere jQM-Themen

In  diesem  Kapitel  möchte   ich  ein  paar  weitere   jQM-­‐Themen  erwähnen,  die  immer  mal  wieder  auftauchen.  

2.1 Focus setzen

Der  Focus  kann  mit  der  jQuery-­‐Methode  focus()  gesetzt  werden:  

$('#fbuda').focus();

2.2 Hash löschen

Es   gibt   die   Situation,   dass   die   Hash-­‐Funktion   benötigt   wird,   aber   bei  einem   erneuten   Initialen   Laden   der   Seite   der   Hash   aus   der   URL   nicht  berücksichtigt   werden   soll.   Dieser   kann   im   mobileinit-­‐Event   entspre-­‐chend  gelöscht  werden:  

$(document).bind('mobileinit', function() { parent.location.hash = '' });

2.3 Input-Field X löschen beim IE10

Ab  dem   IE10   stellt   der   IE   selbst   das   X   zum  den   Inhalt   löschen  dar.  Will  man  dies   jedoch  mit   jQM  machen,  werden  beide   Icons  dargestellt.  Dies  kann  einfach   im  IE  „deaktiviert“  werden,   indem  dem  CSS  folgender  Ein-­‐trag  hinzugefügt  wird:  

::-ms-clear { display: none; }

2.4 Auf welcher page befindet sich der Anwender?

Dies  kann  mittels  dem  Attribute  id  abgefragt  werden:  

if ($.mobile.activePage.attr("id") == "home") { .. }

Web-Apps mit jQuery Mobile – Update zum Buch 13

Seit  jQuery  Mobile  1.4  muss  dies  wie  folgt  lauten:  

if( $( "body" ).pagecontainer( "getActivePage" ).attr("id") == "whisky-home" ) { ... }

2.5 Kontrast

Der  Kontrast  von  deaktivierten  Feldern  (disabled)  als  auch  vom  Placehol-­‐der  passe  ich  oft  an:  /* Bessere Placeholder-Kontraste */ ::-webkit-input-placeholder { color: #bbb; } :-moz-placeholder { color: #bbb; } ::-moz-placeholder { color: #bbb; } :-ms-input-placeholder { color: #bbb; } /* Kontrast für disabled */ .ui-disabled { filter: Alpha(Opacity=100); opacity: 0.7; }

2.6 AJAX

jQuery   setzt   den   Mimetype   bei   AJAX-­‐Requests   als   UTF8-­‐URL   codiert.  Damit   die   Sonderzeichen   keine   Probleme   schaffen,   empfiehlt   es   sich,  davor  mit  encodeURIComponent()  die  Daten  zu  encoden:  

var encoded = encodeURIComponent(JSON.stringify(obj)); $.ajax({ type : "POST", data : "data=" + encoded, dataType : "json", ... });

Web-Apps mit jQuery Mobile – Update zum Buch 14

2.7 Dialog Breite und Abstände beeinflussen

Das  Dialog-­‐Widget  stellt  einen  „kleinen“  Dialog  dar.  Möchte  man  diesen  beeinflussen,   so   muss   die   Klasse   .ui-dialog-contain im   eigenen   CSS  entsprechend  überschrieben  werden.  

/* Dialog verbreitern und oben weniger Abstand */ .ui-dialog-contain { width: 92.5%; max-width: 750px; margin: 5% auto 15px auto; padding: 0; position: relative; top: -15px; }

Web-Apps mit jQuery Mobile – Update zum Buch 15

3 Bild in die Whisky-App einfügen

Wie  es  so  oft   ist,  wird  Herr  Weber  etwas  später  wieder  einmal  gerufen.  Das   Unternehmen   möchte   statt   der   Proben-­‐Nummer   lieber   ein   Foto  hinterlegen  können  –  am  liebsten  soll  dies  gleich  mit  der  Kamera  aufge-­‐nommen  werden.  

Herr  Weber  erklärt,  dass  dies  bei  Hybrid-­‐Apps  kein  Problem  darstellt.  Seit   einiger   Zeit   ist   es   aber   auch  mit   dem  HTML5-­‐File-­‐API  möglich,   das  seit  iOS  6  und  Android  3  auch  auf  mobilen  Geräten  zur  Verfügung  steht.  Während   beim   PC   nur   Dateien   hochgeladen  werden   können,   stellt   die  iOS  Implementation  das  Aufnehmen  von  Fotos  zur  Verfügung:  

Abb. 3: Foto aus der Web-App

Die  Spirit  AG  entscheidet  sich  für  einen  einfachen  Prototyp  unter  iOS.  

3.1 Whisky-App und Fotos

Um  möglichst  schnell  den  Prototyp  gemacht  zu  haben,  entscheidet  man  sich,  die  Proben-­‐Nummer  als  Foto-­‐Speicher  zu  verwenden,  so  muss  das  

Web-Apps mit jQuery Mobile – Update zum Buch 16

Modell   nicht   angepasst  werden3.   Folgende   Schritte   sind   nun   auszufüh-­‐ren:  

1. HTML-­‐Seite  anpassen:  File-­‐Upload  und  Bilddarstellung.  2. Datenbank-­‐Feld  anpassen.  3. File-­‐Listener  und  Bilddarstellung  im  Contoller  implementieren.  

3.2 HTML-Anpassungen

Nach  der  Bezeichnung  des  Whiskys  soll  die  Fotoauswahl  sowie  die  Dar-­‐stellung   erfolgen.   Somit   muss   folgender   Code   nach   dem   Feld   „Bez:“  eingefügt  werden:  <div class="ui-field-contain"> <label for="bild">Bild:</label> <input type="file" name="bild" id="bild" accept="image/*" capture > </div> <div class="ui-field-contain"> <label for="bildView"></label> <img name="bildView" id="bildView" src="" style="max-width:250px; max-height:500px;" > </div>

Das  sieht  dann  so  aus:  

Abb. 4: Whisky-Probe mit Foto

Die  Auswahl   des   Fotos   erfolgt  mit   einem   Input-­‐Feld   vom   Typ   file,   das  nur  images/*   akzeptiert.  Mit  einem  img-­‐Feld   stellen  wir  es  dann  drunter  dar.  Die  Größe  der  Grafik  beschränken  wir  mittels  CSS.4   3  und  für  uns  wird  es  einfacher  nachzuvollziehen,  da  es  weniger  Änderungen  an  weniger  Stellen  sind.  Das  scheint  mir  für  dieses  Beispiel  wichtiger  zu  sein.  4  Auf  der  Datenbank  wird  somit  die  volle  Größe  der  Grafik  gespeichert.  Ob  dies  gewollt  ist  oder  nicht,  sei  an  dieser  Stelle  nicht  wesentlich.  

Web-Apps mit jQuery Mobile – Update zum Buch 17

Für   Videos   müssten   wir   accept=“video/*“   resp.   für   Audio   audio/*  schreiben.  

3.3 Datenbank

Für  den  einfachen  Prototyp  ändert  Herr  Weber  in  der  Create()-­‐Methode  der   db.js-­‐Datei   das   Feld   probennr   zu   einem   String.   Zusätzlich   ändert   er  die  Version  auf  2.0  und  vergrößert  den  Datenbedarf.  Auf  eine  Migration  wird   für   den   Prototyp   verzichtet   und   erst   umgesetzt,  wenn   die   App   so  akzeptiert  wird.  

3.4 Controller

Im   Controller  muss   auf   die   Auswahl   eines   Bildes   reagiert  werden.  Des-­‐halb   fügt   er   bei   der   Initialisierung   einen   Listener   auf   den   Change-­‐Event  hinzu:  

$("#bild").change( handleFileSelect );

Jetzt  fehlt  nur  noch  die  Methode  handleFileSelect().   In  dieser  lesen  wir    mit  dem  FileReader-­‐Objekt  den  Inhalt  der  Datei  aus.  Diesen  Inhalt  fügen  wir  anschließend  dem  img-­‐Element  als  Source  hinzu.  

/** Liest das Bild ein und stellt es dar */ function handleFileSelect(evt) { if(typeof FileReader == "undefined") return true; var file = evt.target.files[0]; // nur eine Auswahl var elem = $(this); if (file.type.match('image.*')) { var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { var image = e.target.result; $('#bildView').attr( 'src', image); }; })(file); reader.readAsDataURL(file); } }

Web-Apps mit jQuery Mobile – Update zum Buch 18

4 Weiteres simples Beispiel

Mit  diesem  Beispiel  möchte  ich  eine  ganz  einfache  jQM-­‐Seite  zeigen,  mit  der  man  Werte  in  eine  Liste  einfügen  kann.  Weiter  wird  diese  im  localS-torage gespeichert  und  beim  Start  der  Seite  ausgelesen:  

 

Abb. 5: Simple Beispiel

Die   HTML-­‐Datei   hat   eine   Page   mit   einem   Header   und   dem   Content.   In  diesem  gibt  es  ein  Field-Container  für  die  Eingabe  und  ein  Button.  Wenn  auf  das  Button geklickt  wird,  wird  dessen  Wert  in  die  darunter  liegenden  Liste  eingefügt:  

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Simple jQM Example</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />

Web-Apps mit jQuery Mobile – Update zum Buch 19

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> <script src="index.js"></script> </head> <body> <div id="home" data-role="page"> <div data-role="header"> <h1>Simple jQuery Mobile Example</h1> </div><!-- /header --> <div role="main" class="ui-content"> <h3>Wert in Liste hinzufügen</h3> <div class="ui-field-contain"> <label for="value">Wert:</label> <input type="text" name="value" id="value" /> </div> <button type="button" id="save" data-icon="check">Hinzufügen</button> <ul data-role="listview" data-inset="true" id="meineListe"></ul> </div><!-- /content --> </div><!-- /page --> </body> </html>

In   der   index.js-­‐Datei   implementieren   wir   den   Event-­‐Handler   des   But-­‐tons.   In  dessen  Methode   lesen  wir  den  Wert  aus,   fügen   ihn   in  der  Liste  ein  und  speichern  das  Array  als  JSON-­‐String  im  localStorage.  Zu  beachten  ist,   dass   wir   die   Liste   wegen   den   neu   hinzugefügten   HTML-­‐Elementen  neu   rendern  müssen.   Dazu   rufen  wir   vom  Widget   die   refresh-­‐Funktion  auf.  

// Liste mit den Werten var meineListeAr = Array(); var AppController = function() { // Merkt den Wert und speichert ihn function saveWert() { // 1. Wert auslesen var wert = $('#value').val(); console.log(wert);

Web-Apps mit jQuery Mobile – Update zum Buch 20

// 2. Liste hinzufügen $('#meineListe').prepend('<li>'+wert+'</li>'); $('#meineListe').listview('refresh'); // 3. Speichern meineListeAr.push(wert); localStorage.setItem('SimpleApp.meineListe', JSON.stringify(meineListeAr)); } // Liest die Werte aus dem localStorage function ladenWerte() { try { var meineWerte = JSON.parse(localStorage.getItem( 'SimpleApp.meineListe')); for (var i = 0; i < meineWerte.length; i++) { meineListeAr.push(meineWerte[i]); $('#meineListe').prepend('<li>'+ meineWerte[i]+'</li>'); } } catch(e) { } $('#meineListe').listview('refresh'); } return { initialize : function() { // Save - Button $('#save').click(saveWert); }, laden : function() { ladenWerte(); } } } $(document).on("pagecreate", function(event) { controller = new AppController(); controller.initialize(); controller.laden(); });

Web-Apps mit jQuery Mobile – Update zum Buch 21

5 Korrigenda

Seite 44 im Code:

var whisky = new Whisky("Ardbeg", 46, 15) // Instanz erzeugen console.log(whisky.getName()); // Ardbeg console.log(whisky.getAlcohol()); // 46% alc./vol. console.log(whisky.getInFassGelagert()); // 15 console.log(whisky instanceof Whisky); // true console.log(whisky instanceof Spirituose); // true

Seite 69 im Code:

$('#box').function_a().function_b().function_c();

 

Seite 203, Tabelle 7-1:

Es  war  nicht  der  Browser  Firefox  Max  sondern  Firefox  auf  dem  Mac.