Andy Bosch | www.jsf-academy.com
JSF und JavaScript
Ein paar Worte zu mir
• Name: Andy Bosch
• Freiberuflicher Architekt, Trainer,
Entwickler, …
• Eigenes Trainingsprogramm z...
Was habe ich heute vor?
• Relativ wenig JSF-Buzz
(ok, ein bisschen schon)
• Vielmehr Fokus auf
Architekturfragen und
Softw...
JavaScript
• „The new kid on the block“
• Html5 Hype: Html, CSS, JavaScript
• Aber ganz ehrlich: Die Lösungen sind
durchau...
Meine Meinung
• JavaScript hat seine Vorteile
• JSF hat seine Vorteile
Durch eine gute Architektur und ein
passendes Softw...
Schlechte Architektur
Grundsätzliches zu JSF
• Serverseitiges Framework !!!
• UI wird serverseitig generiert und Html
an den Client ausgeliefert...
Grundsätzliches zu JavaScript
• Primär clientseitige Technologie
• Serverrequests i.d.R. über Ajax / REST-
Calls
• Stark i...
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...
Komplett gegensätzlich?
• JSF versucht, auch die Clientseite
etwas zu unterstützen
• JSF hat ein wenig JavaScript Features...
Was kann JSF bzgl. JavaScript?
• Ajax-Integration
• Resource Handling
• Composite Components
• JavaScript Eventhandler
• P...
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 BootstrapPr...
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 Stat...
Das Beispiel etwas genauer
• Einbindung von Resourcen
• Resource Relocation
<h:outputScript library="jquery"
name="jquery....
Resource Relocation
unter der Lupe (1/2)
<h:head>
</h:head>
<h:body>
<pf:calendar />
<anotherCoolOne:greatSlider />
<still...
Resource Relocation
unter der Lupe (2/2)
<composite:implementation>
<h3>Some headline</h3>
<div>further html stuff … </div...
jQuery Selectors
• Über NamingContainer
• Escaping in jQuery
• Oder mittels prependId
$( "#myform:myBtn" )
$( "#myform:myB...
Tricky: Listboxen
• Ergänzung von Listboxen
Lessons Learned (2)
• Siehe Regel 1, betrifft im weitesten
Sinne auch den Komponentenstate
• Achtung: Das soll keine Schik...
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...
Und noch einer:
Client- versus Server-Side
<h:inputText value="#{personBean.firstname}" />
...
$( "#myBtn" ).click(functio...
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...
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 hre...
Bootstrap: CSS Design
<div class="container">
<div class="row">
<div class="col-md-12">
<a jsf:action="bootstrap-navi"
cla...
Bootstrap Komponenten
Beispiel Bootstrap: Html
<ul class="nav nav-pills">
<li class="active">
<a href="#">Männlich</a>
</li>
<li>
<a href="#">We...
Bootstrap mit Composites 1/3
<composite:implementation>
<h:outputScript library="bootstrap"
name="jquery-1.8.2.js" target=...
Bootstrap mit Composites 2/3
<ul class="nav nav-pills">
<li class="#{cc.attrs.gender=='m' ? 'active' : ''}">
<h:commandLin...
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 m...
Kapselung: BootsFaces
<b:container>
<b:row>
<b:column>
<h1>Hello, world!</h1>
<b:alert severity="success">
<strong>Well do...
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 i...
Geht auch mit JSF nativ
<h:form>
Vorname:
<h:inputText id="myFirst" value="#{personBean.firstname}">
<f:ajax render="out" ...
JSF + angularJS
• SPAs mit einem mächtigen „UI-
Backend“
• JSF Calls statt REST Calls
• Achtung Paradigma: Angular betreib...
JSF + angularJS
• The one thing I like about JSF is it
simple, declarative approach. But once
you start to write an AJAX c...
Same procedure:
AngularFaces
<pui:datatable value="carTableBean.carTable" var="row">
<pui:column header="Brand" sortable="...
JSF I18N
<html xmlns="http://www.w3.org/1999/xhtml"
ng-app="chatApplication"
dir="#{facesContext.viewRoot.locale.language
...
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-centri...
Layer-Modell
UI-Layer
Service-Layer
Backend-Layer
JSF
CDI
JPA Hibernate
CDI
Browser
Server
jQuery BootstrapPresentation-La...
SSE? Server Push? WebSocket?
• Gehört irgendwie mit dazu zu dieser
Fragestellung
• Ist eher eine zusätzliche Option als ei...
Fazit (1/2)
• JSF und JavaScript schließen sich nicht
gegenseitig aus, sondern ergänzen
sich!
• Es gibt ein paar Stolperst...
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
Upcoming SlideShare
Loading in …5
×

Andy bosch-jsf-javascript

1,016 views

Published on

Presentation about the integration of JSF and JavaScript (German)

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,016
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Andy bosch-jsf-javascript

  1. 1. Andy Bosch | www.jsf-academy.com JSF und JavaScript
  2. 2. Ein paar Worte zu mir • Name: Andy Bosch • Freiberuflicher Architekt, Trainer, Entwickler, … • Eigenes Trainingsprogramm zu JSF und Portlets • JSF-Projekte seit 2004
  3. 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. 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. 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 !!!
  6. 6. Schlechte Architektur
  7. 7. Grundsätzliches zu JSF • Serverseitiges Framework !!! • UI wird serverseitig generiert und Html an den Client ausgeliefert • Klassisches Request/Response Paradigma
  8. 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. 9. Und noch so ein Paradigma • JSF ist hervorragend bei Kapselung: Html, CSS, JavaScript alles versteckt <p:calendar/>
  10. 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. 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. 12. Was kann JSF bzgl. JavaScript? • Ajax-Integration • Resource Handling • Composite Components • JavaScript Eventhandler • PassThroughElements • PrependId
  13. 13. JavaScript World http://www.hanselman.com/blog/TheBigGlossaryOfOpenSourceJavaScriptA ndWebFrameworksWithCoolNames.aspx
  14. 14. Was zeige ich nun? • Integrationsszenarien • Do‘s and Dont‘s • Aber vor allem eins: Ein Architekturbild
  15. 15. Der Client wird mächtiger UI-Layer Service-Layer Backend-Layer JSF CDI JPA Hibernate CDI Browser Server jQuery BootstrapPresentation-Layer
  16. 16. Ich will Sourcecode sehen • Ein erstes Beispiel mit JQuery Szenario: Feld auf enabled und disabled
  17. 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. 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. 19. Resource Relocation unter der Lupe (1/2) <h:head> </h:head> <h:body> <pf:calendar /> <anotherCoolOne:greatSlider /> <stillMore:superCoolListbox /> </h:body>
  20. 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. 21. jQuery Selectors • Über NamingContainer • Escaping in jQuery • Oder mittels prependId $( "#myform:myBtn" ) $( "#myform:myBtn" ) <h:form prependId="false" …> $( "#myBtn" )
  22. 22. Tricky: Listboxen • Ergänzung von Listboxen
  23. 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. 24. Weiterer Stolperstein: Form Submit • Form Submit via JavaScript
  25. 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. 26. Und noch einer: Client- versus Server-Side <h:inputText value="#{personBean.firstname}" /> ... $( "#myBtn" ).click(function() { alert( "Du heisst: " + "#{personBean.firstname}" + " !" ); }); ...
  27. 27. Einsatz von JS Frameworks • Ok, die grundsätzlichen Dinge sind jetzt klar. • Aber wie kombiniere ich JSF mit JS?
  28. 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. 29. Bootstrap • Im Fokus: Responsiveness • Mobile First • Ziel: Gestaltung / Design • Html + Css Vorlagen, Grid-System
  30. 30. ShowCase • Responsive Design am Beispiel
  31. 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. 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
  33. 33. Bootstrap Komponenten
  34. 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. 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. 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. 37. Bootstrap mit Composites 3/3 <h:body> Geschlecht: <myc:gender gender="#{personBean.gender}"/> </h:body>
  38. 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. 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. 40. angularJS • Ziel: SPAs (Single Page Apps) • MVVM (Model-View-Viewmodel) • Google
  41. 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. 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. 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. 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. 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. 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. 47. Einschätzung • Ist das jetzt genial? Oder doch etwas spooky?
  48. 48. UI Architektur Ansätze • JavaScript + REST (ROCA-Style) • JSF pure (full server centric) • JSF + JavaScript (client-centric mit server-side State)
  49. 49. Layer-Modell UI-Layer Service-Layer Backend-Layer JSF CDI JPA Hibernate CDI Browser Server jQuery BootstrapPresentation-Layer
  50. 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. 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. 52. Fazit (2/2) • Den goldenen Schlüssel für ein Projekt-Setup gibt es nicht, daher braucht man ja auch (UI-) Architekten
  53. 53. Fragen? Gerne E-Mail an mich: andy.bosch@jsf-academy.com Twitter @andybosch Web www.jsf-academy.com

×