javascript-components in jsf anwendungen
DESCRIPTION
Speaker: Stephan Müller 7. November 2013 | W-JAX München Modularisierung und Wiederverwendbarkeit sollten bei Webanwendungen die View nicht aussparen. Mit HTML5-Features, JavaScript-Bibliotheken wie jQuery und dem Behavior-API lassen sich aus Composite Components mächtige Erweiterungen für die eigene Anwendung schaffen. Der Vortrag zeigt, wie man aus JSF-Core-Komponenten dynamische und wiederverwendbare Bausteine für die eigene Anwendung realisieren kann.TRANSCRIPT
JavaScript-Components in JSF Anwendungen
Stephan Müller, open knowledge GmbH
JavaScript-Components in JSF Anwendungen
Agenda
JavaScript-Components in JSF Anwendungen
JavaScript
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
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, ...
JavaScript Components
JavaScript-Components in JSF Anwendungen
JavaScript Components
Das Ziel
> client-seitige Verarbeitung
> konsistente User Experience
> Usability
> Flexibilität
> Einflußmöglichkeit
JavaScript-Components in JSF Anwendungen
Agenda
JavaScript-Components in JSF Anwendungen
JavaServer™ Faces
JSF1.x
JavaScript-Components in JSF Anwendungen
JavaScript Unterstützung in JSF1.x
> keine native Unterstützung
> JavaScript/Ajax Komponenten in 3rd Party Bibliotheken
> Classic Component
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
JavaScript-Components in JSF Anwendungen
Komponentenentwicklung in JSF 1.x
Classic Components
sind schon recht komplex,
oder?
JSF2.x
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
JavaScript-Components in JSF Anwendungen
JavaScript Unterstützung in JSF2.x
> native Unterstützung> Ajax Request Lifecycle
> Ajax Script API inkl. <f:ajax ...> Tag
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
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
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
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 ...
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
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
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
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>
JavaScript-Components in JSF Anwendungen
Composite Components
It‘s soooo easy!
JavaScript-Components in JSF Anwendungen
Agenda
Wo liegt das Problem?
JavaScript-Components in JSF Anwendungen
Probleme
> ... mit Komponentenbibliotheken> Laufzeit
> Performanz
> Kompatibilität mit anderen Komponentenbibliotheken
> ... mit dem Rendering vieler Komponenten
Aha, und was mach ich jetzt?
JavaScript-Components in JSF Anwendungen
Lösung
> Komponenten mit JavaScript anreichern
> HTML
> JSF Core Komponenten
> Composite Components
> Behavior API
> JavaScript (z.B. jQuery)
JavaScript-Components in JSF Anwendungen
Was haben wir gewonnen?
JavaScript-Components in JSF Anwendungen
Agenda
JavaScript-Components in JSF Anwendungen
- JSF Anwendung
- JSF Core
Komponenten
- Composite
Components
- Behavior API
- HTML
- JavaScript
Bibliothek
(z.B. jQuery)
- Testdaten
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
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>
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; };
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();} );
JavaScript-Components in JSF Anwendungen
Rezept: Behavior Button
- Command Button- Behavior API
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>
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 ...}
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>
JavaScript-Components in JSF Anwendungen
- Tabelle / HTML- jQuery- Composite
Component- JAX-RS- ausreichend
Testdaten
Rezept: Tabelle mit Lazy Loading, Filter & Sortierung
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>
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>
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});}
Gibt es noch Fragen?
Dann los ...
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