JavaScript-Components in JSF Anwendungen

JavaScript-Components in JSF Anwendungen

Stephan Müller, open knowledge GmbH


Agenda


JavaScript


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

Das Ziel

> client-seitige Verarbeitung

> konsistente User Experience

> Usability

> Flexibilität

> Einflußmöglichkeit


Agenda


JavaServer™ Faces

JSF1.x


JavaScript Unterstützung in JSF1.x

> keine native Unterstützung

> JavaScript/Ajax Komponenten in 3rd Party Bibliotheken

> Classic Component


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


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




> native Unterstützung> Ajax Request Lifecycle

> Ajax Script API inkl. <f:ajax ...> Tag



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



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


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


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


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


Composite Components

Keep simple things simple:

> Composite Components setzen sich aus XHTML Fragmenten zusammen

> XHTML Fragmente besitzen zwei Bereiche XHTML Interface XHTML Implementierung



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



<html xmlns=“http://www.w3.org/1999/xhtml“ xmlns:cc=“http://xmlns.jcp.org/jsf/composite“>  <cc:interface> ...</cc:interface>

 <cc:implementation> ...</cc:implementation>

</html>



It‘s soooo easy!


Agenda

Wo liegt das Problem?


Probleme

> ... mit Komponentenbibliotheken> Laufzeit

> Performanz

> Kompatibilität mit anderen Komponentenbibliotheken

> ... mit dem Rendering vieler Komponenten

Aha, und was mach ich jetzt?


Lösung

> Komponenten mit JavaScript anreichern

> HTML

> JSF Core Komponenten

> Composite Components

> Behavior API

> JavaScript (z.B. jQuery)


Was haben wir gewonnen?


Agenda


- JSF Anwendung

- JSF Core

Komponenten

- Composite

Components

- Behavior API

- HTML

- JavaScript

Bibliothek

(z.B. jQuery)

- Testdaten


Rezept: Inputfilter

- Tabelle z.B. <h:dataTable>

- jQuery zur DOM-Manipulation

- Composite Component *

auch möglich ...

- Tabelle durch Liste ersetzen

*optional


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>


Rezept: Inputfilter

// case insensitive jQuery SelectorjQuery.expr[':'].containsIC = function(a, i, m) { return jQuery(a)

.text().toUpperCase()

.indexOf(m[3].toUpperCase()) >= 0; };


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();} );


Rezept: Behavior Button

- Command Button- Behavior API



<html xmlns=“http://www.w3.org/1999/xhtml“ xmlns:b="http://openknowledge.de/jsf/behaviors">

<input type="submit“

jsf:id="deleteBtn“ value="#{res.com_btn_delete}" jsf:action="#{...)}“

class="submit"> <b:confirm event="click" confirmText="Sind sie sicher?" /> </input>



@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 ...}



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


- Tabelle / HTML- jQuery- Composite

Component- JAX-RS- ausreichend

Testdaten

Rezept: Tabelle mit Lazy Loading, Filter & Sortierung



<html xmlns=“http://www.w3.org/1999/xhtml“ ...><cc:implementation>  <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>



<html xmlns=“http://www.w3.org/1999/xhtml“ ...><cc:implementation> ...  <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>



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


Ü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

Technology

JavaScript-Components in JSF Anwendungen