Download - JavaScript-Components in JSF Anwendungen
![Page 1: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/1.jpg)
JavaScript-Components in JSF Anwendungen
Stephan Müller, open knowledge GmbH
![Page 2: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/2.jpg)
JavaScript-Components in JSF Anwendungen
Agenda
![Page 3: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/3.jpg)
JavaScript-Components in JSF Anwendungen
JavaScript
![Page 4: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/4.jpg)
JavaScript-Components in JSF Anwendungen
JavaScript Historie
> 1996 JavaScript v1.0
> 1998 XMLHTTP (Microsoft Outlook Web Acces)
> 2000 JavaScript v1.5 (Basis für IE 5.5 – 8)
> 2004 Gmail
> 2005 Google Maps
> 2005 Ajax: A New Approach to Web Applications
![Page 5: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/5.jpg)
JavaScript-Components in JSF Anwendungen
JavaScript Bibliotheken/Frameworks
> DOM Manipulation > Dojo Toolkit, jQuery,
Prototype, YUI, ...
> Widget> Dojo Widgets, jQuery UI,
Script.aculo.us, ...
> MVC> AngularJS, Backbone.js, ...
![Page 6: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/6.jpg)
JavaScript Components
![Page 7: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/7.jpg)
JavaScript-Components in JSF Anwendungen
JavaScript Components
Das Ziel
> client-seitige Verarbeitung
> konsistente User Experience
> Usability
> Flexibilität
> Einflußmöglichkeit
![Page 8: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/8.jpg)
JavaScript-Components in JSF Anwendungen
Agenda
![Page 9: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/9.jpg)
JavaScript-Components in JSF Anwendungen
JavaServer™ Faces
![Page 10: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/10.jpg)
JSF1.x
![Page 11: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/11.jpg)
JavaScript-Components in JSF Anwendungen
JavaScript Unterstützung in JSF1.x
> keine native Unterstützung
> JavaScript/Ajax Komponenten in 3rd Party Bibliotheken
> Classic Component
![Page 12: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/12.jpg)
JavaScript-Components in JSF Anwendungen
Komponentenentwicklung in JSF 1.x
Classic Component Developers “Walk of Pain“:
> Komponentenfamilie, -typ und Rendertyp
> Komponentenklasse implementieren
> Rendererklasse implementieren
> Komponenten- und Renderklasse registrieren
> Tag-Definition schreiben & in Library aufnehmen
> Tag-Handler Klasse implementieren
> Library in View einbinden
![Page 13: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/13.jpg)
JavaScript-Components in JSF Anwendungen
Komponentenentwicklung in JSF 1.x
Classic Components
sind schon recht komplex,
oder?
![Page 14: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/14.jpg)
JSF2.x
![Page 15: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/15.jpg)
JSF 1.0/ JSF 1.1 (JSR 127):März/Mai 2004 Initial release
JSF 1.2 (JSR 252):Mai 2006 JEE 5 Integration Unified-EL State Management
04 / 05 06 / 07 08 / 09 10 / 11 12 / 13
JBoss SeamMai 2006
FaceletsAugust 2005
JSF 2.0 (JSR 314):Juli 2009 Annotations Facelets Composite Components Ajax
JSF 2.2 (JSR 316):Mai 2013 HTML5 Support Resource Library Contacts Faces Flow Stateless Views
PrettyFacesAugust 2009
JavaServer™ Faces Historie
JavaScript-Components in JSF Anwendungen
![Page 16: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/16.jpg)
JavaScript-Components in JSF Anwendungen
JavaScript Unterstützung in JSF2.x
> native Unterstützung> Ajax Request Lifecycle
> Ajax Script API inkl. <f:ajax ...> Tag
![Page 17: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/17.jpg)
JavaScript-Components in JSF Anwendungen
JavaScript Unterstützung in JSF2.x
Idee
> beliebige Komponenten im AJAX Features erweitern statt eigene AJAX Komponenten zu bauen
Mittel
> eigene JSF 2 AJAX Script API inkl. zugehörigem <f:ajax ... > Tag
![Page 18: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/18.jpg)
JavaScript-Components in JSF Anwendungen
JavaScript Unterstützung in JSF2.x
Umsetzung
> Processing auf Komponente(n) einschränken
> Rendering auf Komponent(n) einschränken
> sowohl für einzelne Komponenten als auch für Gruppen von Komponenten möglich
![Page 19: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/19.jpg)
JavaScript-Components in JSF Anwendungen
Client Behavior
Wozu benötigt man Client Behavior?
> Komponente um clientseitige Funktionalität erweitern, die vom Autor ursprünglich nicht vorgesehen war
Und wie nutzt man sie?
> JSF Behavior API zur Erweiterung „beliebiger“ Komponenten um client-side Scripting
![Page 20: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/20.jpg)
JavaScript-Components in JSF Anwendungen
Client Behavior
Was sind die Anwendungsgebiete?
> client-side Validation
> client-side Logging
> DOM & Style Manipulation
> Animation & visuelle Effekte
> Alerts & Confirmation Dialoge
> Lazy Data Fetching
> Integration mit 3rd Party Libraries ...
![Page 21: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/21.jpg)
JavaScript-Components in JSF Anwendungen
Client Behavior
Main Player
> ClientBehavior a.k.a. Script Generator zur Generierung des passenden Skripts
> ClientBehaviorHolder a.k.a. Vermittler zum Wiring zwischen Komponente, Event und ClientBehavior
![Page 22: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/22.jpg)
JavaScript-Components in JSF Anwendungen
Composite Components
Keep simple things simple:
> Composite Components setzen sich aus XHTML Fragmenten zusammen
> XHTML Fragmente besitzen zwei Bereiche XHTML Interface XHTML Implementierung
![Page 23: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/23.jpg)
JavaScript-Components in JSF Anwendungen
Composite Components
Convention over Code & Konfiguration:
> Kein Java Code notwendig - aber möglich
> Zugriff auf Ressourcen via Namenskonvention
> Zugriff auf andere Components via Tags
> Konvention für den Namen
> Konvention für die Library
> Konvention für Namespace und Zugriff
![Page 24: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/24.jpg)
JavaScript-Components in JSF Anwendungen
Composite Components
<html xmlns=“http://www.w3.org/1999/xhtml“ xmlns:cc=“http://xmlns.jcp.org/jsf/composite“> <!--INTERFACE --> <cc:interface> ...</cc:interface>
<!--IMPLEMENTATION --> <cc:implementation> ...</cc:implementation>
</html>
![Page 25: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/25.jpg)
JavaScript-Components in JSF Anwendungen
Composite Components
It‘s soooo easy!
![Page 26: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/26.jpg)
JavaScript-Components in JSF Anwendungen
Agenda
![Page 27: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/27.jpg)
Wo liegt das Problem?
![Page 28: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/28.jpg)
JavaScript-Components in JSF Anwendungen
Probleme
> ... mit Komponentenbibliotheken> Laufzeit
> Performanz
> Kompatibilität mit anderen Komponentenbibliotheken
> ... mit dem Rendering vieler Komponenten
![Page 29: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/29.jpg)
Aha, und was mach ich jetzt?
![Page 30: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/30.jpg)
JavaScript-Components in JSF Anwendungen
Lösung
> Komponenten mit JavaScript anreichern
> HTML
> JSF Core Komponenten
> Composite Components
> Behavior API
> JavaScript (z.B. jQuery)
![Page 31: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/31.jpg)
JavaScript-Components in JSF Anwendungen
Was haben wir gewonnen?
![Page 32: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/32.jpg)
JavaScript-Components in JSF Anwendungen
Agenda
![Page 33: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/33.jpg)
JavaScript-Components in JSF Anwendungen
- JSF Anwendung
- JSF Core
Komponenten
- Composite
Components
- Behavior API
- HTML
- JavaScript
Bibliothek
(z.B. jQuery)
- Testdaten
![Page 34: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/34.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Inputfilter
- Tabelle z.B. <h:dataTable>
- jQuery zur DOM-Manipulation
- Composite Component *
auch möglich ...
- Tabelle durch Liste ersetzen
*optional
![Page 35: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/35.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Inputfilter
<html xmlns=“http://www.w3.org/1999/xhtml“ ...>
<h:dataTable id="customerTable“ ...> <f:facet name="header"> <h:outputText value="Kundendaten"/> <input id="filter" type="text“
placeholder="Filter" autofocus="autofocus" />
</f:facet></h:dataTable>
![Page 36: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/36.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Inputfilter
// case insensitive jQuery SelectorjQuery.expr[':'].containsIC = function(a, i, m) { return jQuery(a)
.text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0; };
![Page 37: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/37.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Inputfilter
$("#filter").change( function() { var table = $("#customerTable tbody>tr"); var filter = $(this).val(); if (filter) { // hide all non-matching rows $(table).hide(); $(table).find(":containsIC('"+filter+"')")
.parent("tr").show(); } else { // show complete table if filter is empty $(table).find("*").parent("tr").show(); }} ).keyup( function () { $(this).change();} );
![Page 38: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/38.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Behavior Button
- Command Button- Behavior API
![Page 39: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/39.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Behavior Button
<html xmlns=“http://www.w3.org/1999/xhtml“ xmlns:b="http://openknowledge.de/jsf/behaviors">
<!-- BEHAVIOR in action --><input type="submit“
jsf:id="deleteBtn“ value="#{res.com_btn_delete}" jsf:action="#{...)}“
class="submit"> <b:confirm event="click" confirmText="Sind sie sicher?" /> </input>
![Page 40: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/40.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Behavior Button
@FacesBehavior("de.openknowledge.ConfirmBehavior")public class ConfirmBehavior extends ClientBehaviorBase {
private String confirmText = "Sind sie sicher?";
@Override public String getScript(ClientBehaviorContext ctx) { return "return confirm('" + confirmText + "')"; }
... getConfirmText/setConfirmText ...}
![Page 41: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/41.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Behavior Button
<?xml version='1.0' encoding='UTF-8'?><facelet-taglib version="2.2" ...> <namespace> http://openknowledge.de/jsf/behaviors </namespace> <tag> <tag-name>confirm</tag-name> <behavior> <behavior-id> de.openknowledge.ConfirmBehavior </behavior-id> </behavior> </tag></facelet-taglib>
![Page 42: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/42.jpg)
JavaScript-Components in JSF Anwendungen
- Tabelle / HTML- jQuery- Composite
Component- JAX-RS- ausreichend
Testdaten
Rezept: Tabelle mit Lazy Loading, Filter & Sortierung
![Page 43: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/43.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Tabelle mit Lazy Loading, Filter & Sortierung
<html xmlns=“http://www.w3.org/1999/xhtml“ ...><cc:implementation> <!-- FILTER --> <div id="#{cc.clientId}_tableFilters"> <ui:repeat value="#{...}" var="columnDefinition"> <div class="tableFilter"> <button>...</button>
<div class="filterMenu">...</div></div>
</ui:repeat> </div> ...</cc:implementation></html>
![Page 44: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/44.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Tabelle mit Lazy Loading, Filter & Sortierung
<html xmlns=“http://www.w3.org/1999/xhtml“ ...><cc:implementation> ... <!-- DATA TABLE HEADER --> <table id="#{cc.clientId}_reportTableElement"> <thead><tr>
<ui:repeat value="#{cc.attrs.value.columns}" var="col"> <th data-column="#{col.propertyName}"> ... </th></ui:repeat
</table></cc:implementation></html>
![Page 45: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/45.jpg)
JavaScript-Components in JSF Anwendungen
Rezept: Tabelle mit Lazy Loading, Filter & Sortierung
this.addLazyScrollFeature = function(cs, ll, cov, p) { $(tableSelector).parent()
.on("scroll", null, function () { ... jsf.ajax.request( chunkStartInput.get(0), null, {execute: cs + " ” + ll + " " + cov, render: p});}
![Page 46: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/46.jpg)
Gibt es noch Fragen?
Dann los ...
![Page 47: JavaScript-Components in JSF Anwendungen](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc88bb4a79591e3e8b4581/html5/thumbnails/47.jpg)
JavaScript-Components in JSF Anwendungen
Über open knowledge und den Speaker
> unabhängiges, inhabergeführtes Softwareentwicklungs- und Beratungsunternehmen aus Oldenburg
> Kernkompetenzen im Enterprise- und Mobile-Computing
> Stephan Müller
> Enterprise Architect
facebook.com/openknowledge
twitter.com/_openknowledge twitter.com/muellerst