SlideShare ist ein Scribd-Unternehmen logo
1 von 53
Downloaden Sie, um offline zu lesen
Andy Bosch | www.jsf-academy.com
JSF und JavaScript
Ein paar Worte zu mir
• Name: Andy Bosch
• Freiberuflicher Architekt, Trainer,
Entwickler, …
• Eigenes Trainingsprogramm zu JSF und
Portlets
• JSF-Projekte seit 2004
Was habe ich heute vor?
• Relativ wenig JSF-Buzz
(ok, ein bisschen schon)
• Vielmehr Fokus auf
Architekturfragen und
Software-Design, die
sich mit JSF und
JavaScript ergeben
JavaScript
• „The new kid on the block“
• Html5 Hype: Html, CSS, JavaScript
• Aber ganz ehrlich: Die Lösungen sind
durchaus sehr abgefahren und fancy
Meine Meinung
• JavaScript hat seine Vorteile
• JSF hat seine Vorteile
Durch eine gute Architektur und ein
passendes Software-Design wird das
Ganze aber auch erst richtig gut !!!
Schlechte Architektur
Grundsätzliches zu JSF
• Serverseitiges Framework !!!
• UI wird serverseitig generiert und Html
an den Client ausgeliefert
• Klassisches Request/Response
Paradigma
Grundsätzliches zu JavaScript
• Primär clientseitige Technologie
• Serverrequests i.d.R. über Ajax / REST-
Calls
• Stark im Kommen:
SPAs, die relativ „autark“ arbeiten
Und noch so ein Paradigma
• JSF ist hervorragend bei Kapselung:
Html, CSS, JavaScript alles versteckt
<p:calendar/>
Und noch so ein Paradigma
• Mit JavaScript dagegen ist es eher ein
„Back to the roots“.
<div id="target">
Click here
</div>
$( "#target" ).click(function() {
alert( "Uuuuuups" );
});
Komplett gegensätzlich?
• JSF versucht, auch die Clientseite
etwas zu unterstützen
• JSF hat ein wenig JavaScript Features
• JSF wird aber immer ein
serverseitiges Framework bleiben!
Was kann JSF bzgl. JavaScript?
• Ajax-Integration
• Resource Handling
• Composite Components
• JavaScript Eventhandler
• PassThroughElements
• PrependId
JavaScript World
http://www.hanselman.com/blog/TheBigGlossaryOfOpenSourceJavaScriptA
ndWebFrameworksWithCoolNames.aspx
Was zeige ich nun?
• Integrationsszenarien
• Do‘s and Dont‘s
• Aber vor allem eins:
Ein Architekturbild
Der Client wird mächtiger
UI-Layer
Service-Layer
Backend-Layer
JSF
CDI
JPA Hibernate
CDI
Browser
Server
jQuery BootstrapPresentation-Layer
Ich will Sourcecode sehen
• Ein erstes Beispiel mit JQuery
Szenario:
Feld auf enabled und disabled
Lessons Learned (1)
• Keinen State von Komponenten via JS
ändern, ohne dass es JSF
(Komponentenbaum) mitbekommt
• Der State in JSF ist ein enormer Vorteil,
auch wenn es sich manchmal anders
anfühlt ☺
Das Beispiel etwas genauer
• Einbindung von Resourcen
• Resource Relocation
<h:outputScript library="jquery"
name="jquery.js"/>
<h:outputScript library="jquery"
name="jquery.js“
target="head“ />
Resource Relocation
unter der Lupe (1/2)
<h:head>
</h:head>
<h:body>
<pf:calendar />
<anotherCoolOne:greatSlider />
<stillMore:superCoolListbox />
</h:body>
Resource Relocation
unter der Lupe (2/2)
<composite:implementation>
<h3>Some headline</h3>
<div>further html stuff … </div>
<h:outputScript library="jquery"
name="jquery-min.js"
target="head“ />
</composite:implementation>
jQuery Selectors
• Über NamingContainer
• Escaping in jQuery
• Oder mittels prependId
$( "#myform:myBtn" )
$( "#myform:myBtn" )
<h:form prependId="false" …>
$( "#myBtn" )
Tricky: Listboxen
• Ergänzung von Listboxen
Lessons Learned (2)
• Siehe Regel 1, betrifft im weitesten
Sinne auch den Komponentenstate
• Achtung: Das soll keine Schikane sein,
das ist Security (ok, der Übergang ist
fliessend)
Weiterer Stolperstein:
Form Submit
• Form Submit via JavaScript
Lessons Learned (3)
• Ein Form-Submit löst noch keinen
Button-Klick aus
• Allerdings wird bei einem Form-Submit
das Modell aktualisiert
• Lösung ggf. mit Button-Klick via
JavaScript oder eigener Komponente
Und noch einer:
Client- versus Server-Side
<h:inputText value="#{personBean.firstname}" />
...
$( "#myBtn" ).click(function() {
alert( "Du heisst: " +
"#{personBean.firstname}" +
" !" );
});
...
Einsatz von JS Frameworks
• Ok, die grundsätzlichen Dinge sind jetzt
klar.
• Aber wie kombiniere ich JSF mit JS?
Wie binde ich überhaupt JS ein?
JS Frameworks
• Heutzutage eigentlich kaum noch
„manuelles JavaScript“
• Viele große, noch mehr kleine JS-
Frameworks
• anguarJS, bootstrap, jQuery, uvm.
Bootstrap
• Im Fokus: Responsiveness
• Mobile First
• Ziel: Gestaltung / Design
• Html + Css Vorlagen, Grid-System
ShowCase
• Responsive Design am Beispiel
Bootstrap: CSS Design
<div class="container">
<div class="row">
<div class="col-md-12">
Hier ist ein Spaltenelement
<a href=„nextPage.html“>Weiter</a>
</div>
</div>
</div>
...
Bootstrap: CSS Design
<div class="container">
<div class="row">
<div class="col-md-12">
<a jsf:action="bootstrap-navi"
class="btn btn-primary"
id="myToolButton" href="#"
data-toggle="myTooltip"
title="this is text">
Back Button
</a>
</div>
...
PassThroughElemente
Bootstrap Komponenten
Beispiel Bootstrap: Html
<ul class="nav nav-pills">
<li class="active">
<a href="#">Männlich</a>
</li>
<li>
<a href="#">Weiblich</a>
</li>
</ul>
Bootstrap mit Composites 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>
Bootstrap mit Composites 2/3
<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>
</ul>
Bootstrap mit Composites 3/3
<h:body>
Geschlecht:
<myc:gender gender="#{personBean.gender}"/>
</h:body>
Bootstrap: Zwischenfazit
• CSS Design / Grids ergänzen JSF
optimal
• Eine Kapselung von Elementen mittels
JSF Composites macht durchaus Sinn
• Meine Idee? Nein! Siehe BootsFaces!
Kapselung: BootsFaces
<b:container>
<b:row>
<b:column>
<h1>Hello, world!</h1>
<b:alert severity="success">
<strong>Well done!</strong>
Great stuff
</b:alert>
</b:column>
</b:row>
</b:container>
...
angularJS
• Ziel: SPAs (Single Page Apps)
• MVVM (Model-View-Viewmodel)
• Google
Two-Way Data Binding
<form ng-app="myApp">
Vorname:
<input id="myFirst" type="text" ng-model="first" />
Nachname:
<input id="myLast" type="text" ng-model="last" />
Somit heisst du: {{ first + ' ' + last }}
</form>
Geht auch mit JSF nativ
<h:form>
Vorname:
<h:inputText id="myFirst" value="#{personBean.firstname}">
<f:ajax render="out" event="keyup"/>
</h:inputText>
Nachname:
<h:inputText id="myLast" value="#{personBean.lastname}">
<f:ajax render="out" event="keyup"/>
</h:inputText>
Somit heisst du:
<h:outputText id="out" value="#{personBean.firstname}
#{personBean.lastname}" />
</h:form>
JSF + angularJS
• SPAs mit einem mächtigen „UI-
Backend“
• JSF Calls statt REST Calls
• Achtung Paradigma: Angular betreibt
Manipulationen im DOM Tree, JSF
(Server State) kommt damit nicht klar!
JSF + angularJS
• The one thing I like about JSF is it
simple, declarative approach. But once
you start to write an AJAX client,
simplicity soon gets lost. The more
Javascript code you add, the more you
move away from the declarative
approach to a more imperative
approach. (Zitat aus BeyondJava.net)
Same procedure:
AngularFaces
<pui:datatable value="carTableBean.carTable" var="row">
<pui:column header="Brand" sortable="true"
closable="true">{{row.brand}}</pui:column>
<pui:column header="Type">
{{row.type}}
</pui:column>
<pui:column header="Year" sortBy="toNumber(year)">
{{row.year}}
</pui:column>
<pui:column header="Color" sortable="true"
closable="true">{{row.color}}</pui:column>
</pui:datatable>
JSF I18N
<html xmlns="http://www.w3.org/1999/xhtml"
ng-app="chatApplication"
dir="#{facesContext.viewRoot.locale.language
eq 'ar' ? 'rtl' : 'ltr' }">
...
<label class="chat-label">
#{i18n.welcomeMessage} {{user}}
</label>
Entnommen aus einem Blogpost von Ed Burns
Einschätzung
• Ist das jetzt genial?
Oder doch etwas
spooky?
UI Architektur Ansätze
• JavaScript + REST (ROCA-Style)
• JSF pure (full server centric)
• JSF + JavaScript (client-centric mit
server-side State)
Layer-Modell
UI-Layer
Service-Layer
Backend-Layer
JSF
CDI
JPA Hibernate
CDI
Browser
Server
jQuery BootstrapPresentation-Layer
SSE? Server Push? WebSocket?
• Gehört irgendwie mit dazu zu dieser
Fragestellung
• Ist eher eine zusätzliche Option als eine
weitere Architekturvariante
• Integriert sich hervorragend: Session
State + aktuelle Push-Infos
Fazit (1/2)
• JSF und JavaScript schließen sich nicht
gegenseitig aus, sondern ergänzen
sich!
• Es gibt ein paar Stolpersteine, die
jedoch nicht allzu schwerwiegend sind.
Fazit (2/2)
• Den goldenen Schlüssel
für ein Projekt-Setup gibt
es nicht, daher braucht
man ja auch
(UI-) Architekten
Fragen?
Gerne E-Mail an mich:
andy.bosch@jsf-academy.com
Twitter
@andybosch
Web
www.jsf-academy.com

Weitere ähnliche Inhalte

Was ist angesagt?

Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from ScratchStefan Fröhlich
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEARCH ONE
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestBastian Feder
 
Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015Bastian Grimm
 
Schematron in der Qualitätssicherung
Schematron in der QualitätssicherungSchematron in der Qualitätssicherung
Schematron in der QualitätssicherungStefan Krause
 
"SEO Texte": So schreibst du Texte für User, die auch gefunden werden.
"SEO Texte": So schreibst du Texte für User, die auch gefunden werden. "SEO Texte": So schreibst du Texte für User, die auch gefunden werden.
"SEO Texte": So schreibst du Texte für User, die auch gefunden werden. Daniel Marx
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFChristian Kaltepoth
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web designHenning Schmidt
 

Was ist angesagt? (8)

Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015Crawl-Budget Optimierung - SEOday 2015
Crawl-Budget Optimierung - SEOday 2015
 
Schematron in der Qualitätssicherung
Schematron in der QualitätssicherungSchematron in der Qualitätssicherung
Schematron in der Qualitätssicherung
 
"SEO Texte": So schreibst du Texte für User, die auch gefunden werden.
"SEO Texte": So schreibst du Texte für User, die auch gefunden werden. "SEO Texte": So schreibst du Texte für User, die auch gefunden werden.
"SEO Texte": So schreibst du Texte für User, die auch gefunden werden.
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSF
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 

Ähnlich wie Andy bosch-jsf-javascript

Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014emrox
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaStephan Hochdörfer
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Stephan Hochdörfer
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungenmolily
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5Torsten Landsiedel
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notesdominion
 
JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)Michael Kurz
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platformChristian Heilmann
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Stephan Hochdörfer
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenJonathan Weiß
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptOPEN KNOWLEDGE GmbH
 

Ähnlich wie Andy bosch-jsf-javascript (20)

Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Moderner Webentwicklungs-Workflow
Moderner Webentwicklungs-WorkflowModerner Webentwicklungs-Workflow
Moderner Webentwicklungs-Workflow
 
JsUnconf 2014
JsUnconf 2014JsUnconf 2014
JsUnconf 2014
 
Offline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmkaOffline-Strategien für HTML5 Web Applikationen - wmka
Offline-Strategien für HTML5 Web Applikationen - wmka
 
Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13Offline-Strategien für HTML5 Web Applikationen - bedcon13
Offline-Strategien für HTML5 Web Applikationen - bedcon13
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen AnwendungenJavaScript: Von einfachen Scripten zu komplexen Anwendungen
JavaScript: Von einfachen Scripten zu komplexen Anwendungen
 
HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5HTML/CSS-Validierung in Zeiten von HTML5
HTML/CSS-Validierung in Zeiten von HTML5
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
 
JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)
 
Node.js für Webapplikationen
Node.js für WebapplikationenNode.js für Webapplikationen
Node.js für Webapplikationen
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
Node.js
Node.jsNode.js
Node.js
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Testing tools
Testing toolsTesting tools
Testing tools
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
 
JavaScript Performance
JavaScript PerformanceJavaScript Performance
JavaScript Performance
 

Andy bosch-jsf-javascript

  • 1. Andy Bosch | www.jsf-academy.com JSF und JavaScript
  • 2. Ein paar Worte zu mir • Name: Andy Bosch • Freiberuflicher Architekt, Trainer, Entwickler, … • Eigenes Trainingsprogramm zu JSF und Portlets • JSF-Projekte seit 2004
  • 3. Was habe ich heute vor? • Relativ wenig JSF-Buzz (ok, ein bisschen schon) • Vielmehr Fokus auf Architekturfragen und Software-Design, die sich mit JSF und JavaScript ergeben
  • 4. JavaScript • „The new kid on the block“ • Html5 Hype: Html, CSS, JavaScript • Aber ganz ehrlich: Die Lösungen sind durchaus sehr abgefahren und fancy
  • 5. Meine Meinung • JavaScript hat seine Vorteile • JSF hat seine Vorteile Durch eine gute Architektur und ein passendes Software-Design wird das Ganze aber auch erst richtig gut !!!
  • 7. Grundsätzliches zu JSF • Serverseitiges Framework !!! • UI wird serverseitig generiert und Html an den Client ausgeliefert • Klassisches Request/Response Paradigma
  • 8. Grundsätzliches zu JavaScript • Primär clientseitige Technologie • Serverrequests i.d.R. über Ajax / REST- Calls • Stark im Kommen: SPAs, die relativ „autark“ arbeiten
  • 9. Und noch so ein Paradigma • JSF ist hervorragend bei Kapselung: Html, CSS, JavaScript alles versteckt <p:calendar/>
  • 10. Und noch so ein Paradigma • Mit JavaScript dagegen ist es eher ein „Back to the roots“. <div id="target"> Click here </div> $( "#target" ).click(function() { alert( "Uuuuuups" ); });
  • 11. Komplett gegensätzlich? • JSF versucht, auch die Clientseite etwas zu unterstützen • JSF hat ein wenig JavaScript Features • JSF wird aber immer ein serverseitiges Framework bleiben!
  • 12. Was kann JSF bzgl. JavaScript? • Ajax-Integration • Resource Handling • Composite Components • JavaScript Eventhandler • PassThroughElements • PrependId
  • 14. Was zeige ich nun? • Integrationsszenarien • Do‘s and Dont‘s • Aber vor allem eins: Ein Architekturbild
  • 15. Der Client wird mächtiger UI-Layer Service-Layer Backend-Layer JSF CDI JPA Hibernate CDI Browser Server jQuery BootstrapPresentation-Layer
  • 16. Ich will Sourcecode sehen • Ein erstes Beispiel mit JQuery Szenario: Feld auf enabled und disabled
  • 17. Lessons Learned (1) • Keinen State von Komponenten via JS ändern, ohne dass es JSF (Komponentenbaum) mitbekommt • Der State in JSF ist ein enormer Vorteil, auch wenn es sich manchmal anders anfühlt ☺
  • 18. Das Beispiel etwas genauer • Einbindung von Resourcen • Resource Relocation <h:outputScript library="jquery" name="jquery.js"/> <h:outputScript library="jquery" name="jquery.js“ target="head“ />
  • 19. Resource Relocation unter der Lupe (1/2) <h:head> </h:head> <h:body> <pf:calendar /> <anotherCoolOne:greatSlider /> <stillMore:superCoolListbox /> </h:body>
  • 20. Resource Relocation unter der Lupe (2/2) <composite:implementation> <h3>Some headline</h3> <div>further html stuff … </div> <h:outputScript library="jquery" name="jquery-min.js" target="head“ /> </composite:implementation>
  • 21. jQuery Selectors • Über NamingContainer • Escaping in jQuery • Oder mittels prependId $( "#myform:myBtn" ) $( "#myform:myBtn" ) <h:form prependId="false" …> $( "#myBtn" )
  • 23. Lessons Learned (2) • Siehe Regel 1, betrifft im weitesten Sinne auch den Komponentenstate • Achtung: Das soll keine Schikane sein, das ist Security (ok, der Übergang ist fliessend)
  • 24. Weiterer Stolperstein: Form Submit • Form Submit via JavaScript
  • 25. Lessons Learned (3) • Ein Form-Submit löst noch keinen Button-Klick aus • Allerdings wird bei einem Form-Submit das Modell aktualisiert • Lösung ggf. mit Button-Klick via JavaScript oder eigener Komponente
  • 26. Und noch einer: Client- versus Server-Side <h:inputText value="#{personBean.firstname}" /> ... $( "#myBtn" ).click(function() { alert( "Du heisst: " + "#{personBean.firstname}" + " !" ); }); ...
  • 27. Einsatz von JS Frameworks • Ok, die grundsätzlichen Dinge sind jetzt klar. • Aber wie kombiniere ich JSF mit JS?
  • 28. Wie binde ich überhaupt JS ein? JS Frameworks • Heutzutage eigentlich kaum noch „manuelles JavaScript“ • Viele große, noch mehr kleine JS- Frameworks • anguarJS, bootstrap, jQuery, uvm.
  • 29. Bootstrap • Im Fokus: Responsiveness • Mobile First • Ziel: Gestaltung / Design • Html + Css Vorlagen, Grid-System
  • 31. Bootstrap: CSS Design <div class="container"> <div class="row"> <div class="col-md-12"> Hier ist ein Spaltenelement <a href=„nextPage.html“>Weiter</a> </div> </div> </div> ...
  • 32. Bootstrap: CSS Design <div class="container"> <div class="row"> <div class="col-md-12"> <a jsf:action="bootstrap-navi" class="btn btn-primary" id="myToolButton" href="#" data-toggle="myTooltip" title="this is text"> Back Button </a> </div> ... PassThroughElemente
  • 34. Beispiel Bootstrap: Html <ul class="nav nav-pills"> <li class="active"> <a href="#">Männlich</a> </li> <li> <a href="#">Weiblich</a> </li> </ul>
  • 35. Bootstrap mit Composites 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>
  • 36. Bootstrap mit Composites 2/3 <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> </ul>
  • 37. Bootstrap mit Composites 3/3 <h:body> Geschlecht: <myc:gender gender="#{personBean.gender}"/> </h:body>
  • 38. Bootstrap: Zwischenfazit • CSS Design / Grids ergänzen JSF optimal • Eine Kapselung von Elementen mittels JSF Composites macht durchaus Sinn • Meine Idee? Nein! Siehe BootsFaces!
  • 39. Kapselung: BootsFaces <b:container> <b:row> <b:column> <h1>Hello, world!</h1> <b:alert severity="success"> <strong>Well done!</strong> Great stuff </b:alert> </b:column> </b:row> </b:container> ...
  • 40. angularJS • Ziel: SPAs (Single Page Apps) • MVVM (Model-View-Viewmodel) • Google
  • 41. Two-Way Data Binding <form ng-app="myApp"> Vorname: <input id="myFirst" type="text" ng-model="first" /> Nachname: <input id="myLast" type="text" ng-model="last" /> Somit heisst du: {{ first + ' ' + last }} </form>
  • 42. Geht auch mit JSF nativ <h:form> Vorname: <h:inputText id="myFirst" value="#{personBean.firstname}"> <f:ajax render="out" event="keyup"/> </h:inputText> Nachname: <h:inputText id="myLast" value="#{personBean.lastname}"> <f:ajax render="out" event="keyup"/> </h:inputText> Somit heisst du: <h:outputText id="out" value="#{personBean.firstname} #{personBean.lastname}" /> </h:form>
  • 43. JSF + angularJS • SPAs mit einem mächtigen „UI- Backend“ • JSF Calls statt REST Calls • Achtung Paradigma: Angular betreibt Manipulationen im DOM Tree, JSF (Server State) kommt damit nicht klar!
  • 44. JSF + angularJS • The one thing I like about JSF is it simple, declarative approach. But once you start to write an AJAX client, simplicity soon gets lost. The more Javascript code you add, the more you move away from the declarative approach to a more imperative approach. (Zitat aus BeyondJava.net)
  • 45. Same procedure: AngularFaces <pui:datatable value="carTableBean.carTable" var="row"> <pui:column header="Brand" sortable="true" closable="true">{{row.brand}}</pui:column> <pui:column header="Type"> {{row.type}} </pui:column> <pui:column header="Year" sortBy="toNumber(year)"> {{row.year}} </pui:column> <pui:column header="Color" sortable="true" closable="true">{{row.color}}</pui:column> </pui:datatable>
  • 46. JSF I18N <html xmlns="http://www.w3.org/1999/xhtml" ng-app="chatApplication" dir="#{facesContext.viewRoot.locale.language eq 'ar' ? 'rtl' : 'ltr' }"> ... <label class="chat-label"> #{i18n.welcomeMessage} {{user}} </label> Entnommen aus einem Blogpost von Ed Burns
  • 47. Einschätzung • Ist das jetzt genial? Oder doch etwas spooky?
  • 48. UI Architektur Ansätze • JavaScript + REST (ROCA-Style) • JSF pure (full server centric) • JSF + JavaScript (client-centric mit server-side State)
  • 50. SSE? Server Push? WebSocket? • Gehört irgendwie mit dazu zu dieser Fragestellung • Ist eher eine zusätzliche Option als eine weitere Architekturvariante • Integriert sich hervorragend: Session State + aktuelle Push-Infos
  • 51. Fazit (1/2) • JSF und JavaScript schließen sich nicht gegenseitig aus, sondern ergänzen sich! • Es gibt ein paar Stolpersteine, die jedoch nicht allzu schwerwiegend sind.
  • 52. Fazit (2/2) • Den goldenen Schlüssel für ein Projekt-Setup gibt es nicht, daher braucht man ja auch (UI-) Architekten
  • 53. Fragen? Gerne E-Mail an mich: andy.bosch@jsf-academy.com Twitter @andybosch Web www.jsf-academy.com