JSF goes Mobile - entwicklertag.de · Title: Microsoft PowerPoint - jsf-mobile-andy-bosch.pptx Author: Bosch Created Date: 6/4/2013 7:57:39 PM

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.


Ein paar Worte zu mir

• Name: Andy Bosch• Name: Andy Bosch

• Freiberuflicher Architekt, Trainer, Entwickler, …

• Eigenes Trainingsprogramm zu JSF und Portlets


• 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


• Mobile Web: JSF + Komponenten

Zwei Kernthemen

• Mobile• Mobile

• JSF


„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 …


Mobile != Handy


Mobile Web statt native App


• 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


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


Mobile Webentwicklung als Heilsbringer?

• Unterschiedliche Displaygrößen• Unterschiedliche Displaygrößen

• Unterschiedliche Browser

• User möchten “native like” Controls

• User möchten Transitions


Mobile Webentwicklung mit Hilfsmitteln


• 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


• 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.


verwendet werden.

Ok, akzeptiert

Aber wie kann ich mit JSF

mobile Webapps bauen?


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.


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.


Der Client wird mächtiger

BrowserjQuery BootstrapPresentation-Layer

UI-Layer JSF CDI



Service-Layer

Backend-Layer

CDI

JPA Hibernate

Server

Grundsätzliche Möglichkeiten

• JSF + Html5 / JavaScript• JSF + Html5 / JavaScript

• JSF + JQuery Mobile

• JSF + Bootstrap


• JSF + (choose your own JS)

Wunsch: Eine Website, die sich unterschiedlich verhält


Responsive Web Design

• CSS3 Media Queries• CSS3 Media Queries

• Fluid-Grid Layouts

• Fluid Images & Media


Separate mobile Site oder RWD?

• Anstelle RWD � m.firma.com

• Bei JSF: Templating-Ansatz• Bei JSF: Templating-Ansatz


RWD bei JSF: Welches Template?

• Basis ist ein DDR • Basis ist ein DDR (Device Detection Repository)

• Beispielsweise WURFL


Welches Template?

<f:event listener="#{myListener.preRender}" <f:event listener="#{myListener.preRender}"

type="preRenderView" />

public void preRender( SystemEvent evt ) {

...

Device device = mgr.getDeviceForRequest(..);

...


...

navigationHandler.handleNavigation(

jsfContext, null, "mobile" );

Eine Ebene Tiefer: Seitenaufbau

• Transitions

• Native-like Controls


Verwendung von JS-Frameworks

• JSF hilft mit

– Composite Components

– Resource Handling und

Relocation

– State Handling


Beispiel Bootstrap


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>


</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" />


...

</composite:implementation>


<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>


</li>

</ul>


<h:body><h:body>

Geschlecht:

<myc:gender gender="#{personBean.gender}"/>

</h:body>


Resource Handling


War das meine Idee, das mit dem Wrappen von Bootstrap?

• RichFaces Team war schneller ;-)• RichFaces Team war schneller ;-)

• Bootstrap-RichFaces


JSF2 + Html5

• WebStorage

• WebSockets / Atmosphere / Push

• …


JSF Komponentenbibliotheken

• Primefaces Mobile

• RichFaces

• ICEfaces Mobil


Ausblick Html5

• Geolocation

• Battery Status• Battery Status

• Network Information

• ...

� JSF als Wrapper für diese

Funktionen.


Funktionen.

JSF Webapps: Zielbild


UI-Layer JSF CDI



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


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


bibliotheken

Fragen?

Gerne E-Mail an mich:[email protected]

Twitter@andybosch

Webwww.jsf-academy.de


www.jsf-academy.de

Documents

JSF goes Mobile - entwicklertag.de · Title: Microsoft PowerPoint - jsf-mobile-andy-bosch.pptx Author: Bosch Created Date: 6/4/2013 7:57:39 PM