www.jsf-academy.com
JSF goes Mobile
Mit JavaServer Faces
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 1
Mit JavaServer Faces mobile Welten erschließen
Was habe ich heute vor?
• Aufzeigen, welche Möglichkeiten JSF bietet, um • Aufzeigen, welche Möglichkeiten JSF bietet, um mobile Webanwendungen zu bauen.
• Aufzeigen, wie mit Hilfe von JSF und ergänzenden Frameworks native-like Ergebnisse erzielt werden können.
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 2
Ein paar Worte zu mir
• Name: Andy Bosch• Name: Andy Bosch
• Freiberuflicher Architekt, Trainer, Entwickler, …
• Eigenes Trainingsprogramm zu JSF und Portlets
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 3
• Mitglied der Expert Groups des JSR-301, JSR-329 und JSR-344 (JSF 2.2)
Agenda
• Mobile Web vs. native App
• Mobile Web: Szenarien
• Mobile Web: JSF + Html5
• Mobile Web: JSF + Komponenten
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 4
• Mobile Web: JSF + Komponenten
Zwei Kernthemen
• Mobile• Mobile
• JSF
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 5
„Mobile“ ist die Zukunft
• Für uns als Tekkies eigentlich klar, oder?• Für uns als Tekkies eigentlich klar, oder?
• Aber nur damit es kein Missverständnis gibt …
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 6
Mobile != Handy
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 7
Mobile Web statt native App
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 8
• Was haben alle diese Plattformen gemeinsam?
���� einen Browser
Aber: Es geht doch auch für Native„Write Once, Run Everywhere“
• Apache Cordova, früher Phonegap• Apache Cordova, früher Phonegap
• Entwickung per Html, Css, JavaScript
• Erzeugt native Packages pro Plattform� native App
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 9
Aber: Es geht doch auch für Native„Write Once, Run Everywhere“
• Apache Cordova, früher Phonegap• Apache Cordova, früher Phonegap
• Entwickung per Html, Css, JavaScript
• Erzeugt native Packages pro Plattform� native App
Wir reden heute aber
nur über mobile
Webanwendungen
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 10
Mobile Webentwicklung als Heilsbringer?
• Unterschiedliche Displaygrößen• Unterschiedliche Displaygrößen
• Unterschiedliche Browser
• User möchten “native like” Controls
• User möchten Transitions
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 11
Mobile Webentwicklung mit Hilfsmitteln
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 12
• Aber wohin geht die Reise? Es ist noch kein Mainstream abzusehen!
Jetzt kommt JSF ins Spiel
• JSF hat sich über die letzten Jahre im • JSF hat sich über die letzten Jahre im Unternehmensbereich etabliert.
• Know-how ist in vielen Firmen bereits vorhanden.
• Kostenmässig betrachtet ist ein separater
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 13
• Kostenmässig betrachtet ist ein separaterTechnologiestack für die mobile Strategie fragwürdig.
Mobile mit JSF
• JSF hat viele Konzepte, die sich • JSF hat viele Konzepte, die sich für einen mobilen Einsatz eignen.
• JSF kann als Basis im Zusammenspiel mit anderen (JavaScript-) Frameworks verwendet werden.
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 14
verwendet werden.
Ok, akzeptiert
Aber wie kann ich mit JSF
mobile Webapps bauen?
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 15
Das JSF „Mobile-Tag“
• Nein, sorry, JSF hat kein <h:mobile>-Tag<h:mobile>-Tag
• Die JSF-Spec selbst sagt nichts Spezifisches zu Mobile
• Auch in JSF 2.2 existiert keine besondere mobile Ausrichtung.
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 16
besondere mobile Ausrichtung.
Fehlt dann „Mobile“ in JSF?
• Nein, denn die vorhandenen Konzepte sind • Nein, denn die vorhandenen Konzepte sind vollkommen ausreichend.
• JSF kann mit separaten UI-Technologien bestens kombiniert werden.
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 17
Der Client wird mächtiger
BrowserjQuery BootstrapPresentation-Layer
UI-Layer JSF CDI
BrowserjQuery BootstrapPresentation-Layer
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 18
Service-Layer
Backend-Layer
CDI
JPA Hibernate
Server
Grundsätzliche Möglichkeiten
• JSF + Html5 / JavaScript• JSF + Html5 / JavaScript
• JSF + JQuery Mobile
• JSF + Bootstrap
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 19
• JSF + (choose your own JS)
Wunsch: Eine Website, die sich unterschiedlich verhält
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 20
Responsive Web Design
• CSS3 Media Queries• CSS3 Media Queries
• Fluid-Grid Layouts
• Fluid Images & Media
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 21
Separate mobile Site oder RWD?
• Anstelle RWD � m.firma.com
• Bei JSF: Templating-Ansatz• Bei JSF: Templating-Ansatz
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 22
RWD bei JSF: Welches Template?
• Basis ist ein DDR • Basis ist ein DDR (Device Detection Repository)
• Beispielsweise WURFL
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 23
Welches Template?
<f:event listener="#{myListener.preRender}" <f:event listener="#{myListener.preRender}"
type="preRenderView" />
public void preRender( SystemEvent evt ) {
...
Device device = mgr.getDeviceForRequest(..);
...
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 24
...
navigationHandler.handleNavigation(
jsfContext, null, "mobile" );
Eine Ebene Tiefer: Seitenaufbau
• Transitions
• Native-like Controls
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 25
Verwendung von JS-Frameworks
• JSF hilft mit
– Composite Components
– Resource Handling und
Relocation
– State Handling
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 26
Beispiel Bootstrap
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 27
Beispiel Bootstrap: Html
<ul class="nav nav-pills">
active<li class="active">
<a href="#">Männlich</a>
</li>
<li>
<a href="#">Weiblich</a>
</li>
</ul>
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 28
</ul>
+ Bootstrap JS, Bootstrap CSS, Jquery JS
Beispiel Bootstrap 1/3
<composite:implementation>
<h:outputScript library="bootstrap"
name="jquery-1.8.2.js" target="head" />
<h:outputScript library="bootstrap"
name="bootstrap.js" target="head" />
<h:outputStylesheet library="bootstrap"
name="bootstrap.css" />
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 29
...
</composite:implementation>
Beispiel Bootstrap 2/3
<ul class="nav nav-pills"><ul class="nav nav-pills">
<li class="#{cc.attrs.gender=='m' ? 'active' : ''}">
<h:commandLink value="Männlich"
action="#{personBean.setMale}" />
</li>
<li class="#{cc.attrs.gender=='w' ? 'active' : ''}">
<h:commandLink value="Weiblich"
action="#{personBean.setFemale}" />
</li>
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 30
</li>
</ul>
Beispiel Bootstrap 3/3
<h:body><h:body>
Geschlecht:
<myc:gender gender="#{personBean.gender}"/>
</h:body>
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 31
Resource Handling
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 32
War das meine Idee, das mit dem Wrappen von Bootstrap?
• RichFaces Team war schneller ;-)• RichFaces Team war schneller ;-)
• Bootstrap-RichFaces
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 33
JSF2 + Html5
• WebStorage
• WebSockets / Atmosphere / Push
• …
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 34
JSF Komponentenbibliotheken
• Primefaces Mobile
• RichFaces
• ICEfaces Mobil
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 35
Ausblick Html5
• Geolocation
• Battery Status• Battery Status
• Network Information
• ...
� JSF als Wrapper für diese
Funktionen.
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 36
Funktionen.
JSF Webapps: Zielbild
BrowserjQuery BootstrapPresentation-Layer
UI-Layer JSF CDI
BrowserjQuery BootstrapPresentation-Layer
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 37
Service-Layer
Backend-Layer
CDI
JPA Hibernate
Server
Noch zum Schluss, kurz gesagt
• JavaScript-Anwendungen sind (je nach Betrachtungsweise) stateless.Betrachtungsweise) stateless.Ok, diese Aussage bedarf Erklärung.
• JSF ist durchaus statefull.
• Oftmals ist es sinnvoll und hilfreich, serverseitig einen State zu haben
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 38
einen State zu haben (Performance, Funktionalität, …)
Fazit
• JSF hat keine spezielle Mobile-Integration, eignet • JSF hat keine spezielle Mobile-Integration, eignet sich dennoch hervorragend für die Erstellung mobiler Webapps
• JSF alleine genügt selten, es empfiehlt sich das Hinzuziehen von passenden Komponenten-bibliotheken
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 39
bibliotheken
Fragen?
Gerne E-Mail an mich:[email protected]
Twitter@andybosch
Webwww.jsf-academy.de
© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 40
www.jsf-academy.de