MOBILE WEBANWENDUNGEN MIT JQUERY MOBILE UND PRIMEFACES MOBILE Giebelhaus Alexander 1
Agenda Die mobile Welt UI-Design bei mobilen Webanwendungen Technologien zur Umsetzung jquery Mobile PrimeFaces Mobile Vergleich der beiden Technologien in der Praxis Fazit Giebelhaus Alexander 2
Die mobile Welt Anteil der Internetnutzer, die mit mobilen Endgeräten online gehen (2012) 76% 71% 59% 74% 59% Spanien Österreich Deutschland Italien Frankreich Giebelhaus Alexander 3
Mobiltelefone Tablets Mobile Endgeräte Low-end Mobilgeräte Smartphones Mid- and high-end Mobilgeräte Giebelhaus Alexander 4
Nutzung des mobilen Internets 87% 68% 60% 57% 37% Informationen Navigation Unterhaltung Einkauf Langeweile Giebelhaus Alexander 5
Klassifizierung mobiler Applikationen Native App Mobile Webanwendung ios Android Windows Phone Plattformunabhängig Hybrid App Web App Responsive Website Giebelhaus Alexander 6
UI-Design für mobile Geräte User interface design [ ] is the design of [ ] mobile communication devices, software applications and websites with the focus on the user's experience and interaction. Kleinerer Bildschirm Less is more und mobile first Neue Benutzerinteraktion beachten Touchen Wischen Zoomen Der User ist weniger fokussiert Giebelhaus Alexander 7
UI-Design für mobile Geräte Das User-Interface muss den User dabei unterstützen schnell und effizient an sein Ziel zu kommen: Die wichtigsten Funktionen bereits auf der Startseite Bedienelemente müssen eindeutig gekennzeichnet sein Die Anwendungen sollte auf Events Feedback geben Navigation per Liste oder Zurück-Buttons Verlinkung auf die Desktop-Version Giebelhaus Alexander 8
Positive User Experience Touchoptimiert Einheitliches look and feel Ortsangaben per GPS abfragen auto-complete bei Texteingaben Daten merken. Auswahlfelder anstatt Textfelder. Giebelhaus Alexander 9
Weitere Besonderheiten Schlechte Verbindung oder Verbindungsabbruch Begrenzte Datenrate und eingeschränktes Datenvolumen Kontrastarmes Display Gerätespezifische Browser Unterschiedliches Anzeigeverhalten (Hoch- bzw. Querformat) Giebelhaus Alexander 10
Wie bekommt man diese User Experience? CSS3 Javascript HTML5 Mobile Events Giebelhaus Alexander 11
Wie bekommt man diese User Experience? CSS3 Javascript HTML5 jquery Mobile Mobile Events Giebelhaus Alexander 12
jquery Mobile Eine auf HTML5 basierende UI-Bibliothek Basiert auf jquery sowie jquery UI Touchoptimiertes Webframework Progressive Enhancement Plattformunabhängig write less do more Giebelhaus Alexander 13
Ein Ring sie alle zu knechten Einteilung der Geräte in Klassen: A B C Das volle Nutzererlebnis mit Ajax-basierten und animierten Seitenübergängen. Keine Ajax- Technologien für die Navigation. Reine HTML-Seite ohne Effekte. Giebelhaus Alexander 14
Aufbau einer jquery Mobile Webanwendung Giebelhaus Alexander 15
Das data-* Attribut HTML5 Attribut Initialisierung und Konfiguration von Komponenten sog. Markup-based data-role Legt die Rolle eines Elements fest. datatransition Wird für Seitenübergänge verwendet. data-theme data-type data-ajax Ermöglicht es mehrere swatches zu verwenden. Ausrichtung des Elements. Verwenden von Ajax? Giebelhaus Alexander 16
Navigation Verwendung eines Hyperlinks: <a href= page.html >Seitenname</a> Page im selben Dokument Page in externem Dokument Fremde Anwendung Ermöglicht die Navigation auf eine Page im selben Dokument. Bsp: #IDderPage Wird per JS/CSS eingeblendet. Bindet eine externe Page in das eigene Dokument ein. Bsp: Seite2.html Wird per Ajax in die Seite geladen. Deaktivierung per Attribut: rel= external oder data-ajax= false. Öffnet eine externe Webanwendung/Webseite. Bsp: http://www.hm.edu Wird nicht per Ajax geladen. Giebelhaus Alexander 17
Seitenübergänge Wert slide slideup slidedown pop fade flip turn flow slidefade none Funktion Die neue Seite fliegt von rechts ein und ersetzt somit die alte Seite. Die neue Seite fliegt von unten ein. Die neue Seite fliegt von oben ein. Zoomt die neue Seite ein. Die neue Seite wird mit langsam eingeblendet. Erstellt einen Flip-Effekt. Die Seite dreht sich Die neue Seite zoomt herein. Eine Kombination von slide und fade. Es wird kein Effekt verwendet. Giebelhaus Alexander 18
Auswahl an Komponenten Listen Grid- Layouts Accordion Buttons Theming Formula re Giebelhaus Alexander 19
Grid-Layouts 5-spaltiges Grid-Layout Ermöglicht die horizontale Anordnung von Inhalten. Einbindung erfolgt über CSS-Klassen Initialisierung: ui-grid-[a-d] Spaltenzuordnung: ui-block-[a-d] Giebelhaus Alexander 20
Accordions Ermöglichen Klappbare Inhaltselemente Einbindung durch data-role= collapsible Überschrift bildet die Abschnittsüberschrift Gruppierung: Umschließen der Accordions mit data-role= collapsibleset. Giebelhaus Alexander 21
Listen Basieren auf den unordered und ordered lists Dienen als Navigationskonzept Sehr flexibel und userfreundlich Auszeichnung mit data-role= listview Giebelhaus Alexander 22
Buttons Buttons können genutzt werden, um ein Formular abzusenden oder zur Navigation als klickbare, userfreundliche Lösung. Definition per Hyperlink und data-role= button sowie automatisch bei <button></button>, <input type= submit../>, <input type= button /> Weitere Optionen: Attribut data-corners data-icon data-iconpos Beschreibung Button mit runden Ecken? Icon dem Button hinzufügen Position des Icons ( no-text für nur Icon) data-inline Ob der Button als Block dargestellt Giebelhaus Alexander werden soll 23
Formulare Formulare sind ein zentraler Bestandteil um vom User Eingaben entgegenzunehmen. Dazu zählen: INPUT-Felder CHECKBOXEN RADIOBOXEN SELECT-BOXEN SLIDERS SWITCHES Giebelhaus Alexander 24
Themes Anpassung des Designs an eigene Bedürfnisse durch swatches. Ein Theme besteht aus mehreren swatches, welche unterschiedlichen Designvorlagen entsprechen. Diese können an jeder Komponente oder global für eine page angebracht werden. Keyword: data-theme= [a-e] Ein eigenes Theme kann per Webanwendung erstellt werden. Giebelhaus Alexander 25
Einbindung in meine JEE-Applikation? JSF PrimeFaces PrimeFaces Mobile Giebelhaus Alexander 26
Java Server Faces View-Technologie zum erstellen von Benutzeroberflächen Komponentenorientiert Phasen der Requestverarbeitung: Giebelhaus Alexander 27
PrimeFaces Erweiterung um 100 aufeinander abgestimmte Komponenten Besteht nur aus einem einzigen jar-file. Einfach zu nutzen. Keine Abhängigkeiten. Keine Konfiguration nötig. Nutzt zur Darstellung jquery und HTML5. Unterstützt allen modernen Browser (IE6 ist kein moderner Browser!) Giebelhaus Alexander 28
Auswahl an PrimeFaces Komponenten datalist messages accordion buttons calendar slider toolbar Giebelhaus Alexander 29
PrimeFaces Mobile JSF-Seiten Optimierung für mobile Geräte UI-Baukasten bestehend aus: Einem mobiles RenderKit für JSF sowie PrimeFaces-Komponenten Eigenen mobilen JSF-Komponenten Verwendet unter anderem jquery Mobile. Giebelhaus Alexander 30
Das RenderKit Rendert bestehende Komponenten für die mobile Ausgabe Einbinden des RenderKits: <f:view renderkitid="primefaces_mobile">//content</f:view> oder global in der faces-config.xml: <application> <default-render-kit-id>primefaces_mobile</default-render-kit-id> </application> Giebelhaus Alexander 31
Mobile Komponenten navbar input range view page header view footer Giebelhaus Alexander 32
Demo und Vergleich mit jquery Mobile Giebelhaus Alexander 33
Vorteile gegenüber jquery Mobile Übersichtlicher und weniger Sourcezeilen Verwendung bekannter Technologien Kombiniert die Vorteile von JSF sowie PrimeFaces mit jquerymobile Giebelhaus Alexander 34
Fazit Schnell sehenswerte Ergebnisse Für gezielte Anpassungen erhöhter Einarbeitungsaufwand nötig Nutzung der Stärke von jquery Mobile als plattformunabhängige Präsentationstechnologie sowie PrimeFaces Mobile mit allen Vorteilen von PrimeFaces und JSF Giebelhaus Alexander 35
Giebelhaus Alexander 36