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:andy.bosch@jsf-academy.de

Twitter@andybosch

Webwww.jsf-academy.de

© Copyright 2013, Andy Bosch, www.jsf-academy.de Slide 40

www.jsf-academy.de