MOBILE WEBANWENDUNGEN MIT JQUERY MOBILE UND PRIMEFACES MOBILE. Giebelhaus Alexander 1

Transkript

1 MOBILE WEBANWENDUNGEN MIT JQUERY MOBILE UND PRIMEFACES MOBILE Giebelhaus Alexander 1

2 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

3 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

4 Mobiltelefone Tablets Mobile Endgeräte Low-end Mobilgeräte Smartphones Mid- and high-end Mobilgeräte Giebelhaus Alexander 4

5 Nutzung des mobilen Internets 87% 68% 60% 57% 37% Informationen Navigation Unterhaltung Einkauf Langeweile Giebelhaus Alexander 5

6 Klassifizierung mobiler Applikationen Native App Mobile Webanwendung ios Android Windows Phone Plattformunabhängig Hybrid App Web App Responsive Website Giebelhaus Alexander 6

7 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

8 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

9 Positive User Experience Touchoptimiert Einheitliches look and feel Ortsangaben per GPS abfragen auto-complete bei Texteingaben Daten merken. Auswahlfelder anstatt Textfelder. Giebelhaus Alexander 9

10 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

11 Wie bekommt man diese User Experience? CSS3 Javascript HTML5 Mobile Events Giebelhaus Alexander 11

12 Wie bekommt man diese User Experience? CSS3 Javascript HTML5 jquery Mobile Mobile Events Giebelhaus Alexander 12

13 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

14 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

15 Aufbau einer jquery Mobile Webanwendung Giebelhaus Alexander 15

16 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

17 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: Wird nicht per Ajax geladen. Giebelhaus Alexander 17

18 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

19 Auswahl an Komponenten Listen Grid- Layouts Accordion Buttons Theming Formula re Giebelhaus Alexander 19

20 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

21 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

22 Listen Basieren auf den unordered und ordered lists Dienen als Navigationskonzept Sehr flexibel und userfreundlich Auszeichnung mit data-role= listview Giebelhaus Alexander 22

23 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

24 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

25 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

26 Einbindung in meine JEE-Applikation? JSF PrimeFaces PrimeFaces Mobile Giebelhaus Alexander 26

27 Java Server Faces View-Technologie zum erstellen von Benutzeroberflächen Komponentenorientiert Phasen der Requestverarbeitung: Giebelhaus Alexander 27

28 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

29 Auswahl an PrimeFaces Komponenten datalist messages accordion buttons calendar slider toolbar Giebelhaus Alexander 29

30 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

31 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

32 Mobile Komponenten navbar input range view page header view footer Giebelhaus Alexander 32

33 Demo und Vergleich mit jquery Mobile Giebelhaus Alexander 33

34 Vorteile gegenüber jquery Mobile Übersichtlicher und weniger Sourcezeilen Verwendung bekannter Technologien Kombiniert die Vorteile von JSF sowie PrimeFaces mit jquerymobile Giebelhaus Alexander 34

35 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

36 Giebelhaus Alexander 36