Schon vor knapp zwei Jahren habe ich über die Yahoo! Design Pattern und User Interface Library (YUI Library) berichtet, weil sie meiner Meinung nach eine absolute Bereicherung für die Web Entwicklung sind.

Nun ist es so, dass diese YUI Lib eine JavaScript Bibliothek ist und somit eigentlich mit jedem beliebigem Web-Framework verwendet werden könnte. Aber eine passgerechte Unterstützung eines Frameworks ist natürlich sehr von Vorteil. Gerade für die JSF Welt mit Komponenten ist eine solche Unterstützung sehr angenehm, vor allem wenn man sich bei dem Erstellen einer Seite nicht mehr notwendigerweise mit JavaScript beschäftigen muss. Die JBoss RichFaces haben ein solches Vorgehen schon eindrucksvoll bewiesen und nun ist eine solche Unterstützung auch für die Yahoo! User Interface Library zu haben: YUI4JSF.

Der große Vorteil einer solchen JavaScript Bibliotheksunterstützung in JSF ist die einfache Benutzung von Komponenten anstatt der manuellen Einbindung von JavaScript in JSF Seiten mit allen möglichen Seiteneffekten. Diese Einfachheit soll kurz an dem Beispiel des YUI Color Picker Control gezeigt werden.
Natürlich muss die YUI4JSF Lib JSF erst einmal bekannt gemacht werden, aber dies ist mit ein paar wenigen Zeilen Konfiguration erledigt wie im Getting Started zu lesen ist.

Anschließend reicht folgender JSF Source Code um die Color Picker Komponente einzubinden:

<yui:chooseColor value="#{chooseColorBean.color}">
  <f:converter converterId="net.sf.yui4jsf.converter.ColorConverter"/>
</yui:chooseColor>
<h:commandButton value="Submit" />
<br/>

<h:outputText value="Selected Color in (R, G, B) format : " />
<h:outputText value="#{chooseColorBean.color}">
  <f:converter converterId="net.sf.yui4jsf.converter.ColorConverter"/>
</h:outputText>

Als Ergebnis der 9 Zeilen kommt folgendes heraus:

Sobald der Button Submit gedrückt und somit das Formular submittet ist, wird in der chooseColorBean im Attribut color die in der Color Picker selektierte Farbe gehalten. Der entsprechende Converter wird auch gleich mitgeliefert um die Ein- bzw. Ausgabe des selektierten Wertes zu vereinfachen.

Das Color Picker Beispiel sowie viele andere Beispiele kann sich auch live auf der Demoseite angesehen werden.

Das Projekt ist auf SourceForge gehostet und kann auch darüber heruntergeladen werden.
Ein wirklich interessantes und vielversprechendes Projekt und ich bin gespannt ob man diese Bibliothek mal irgendwo auf einer Seite in Verwendung sieht.

Dieses Beispiel, und natürlich auch die anderen, zeigt schön auf wie sehr man mit JSF die Einfachheit in der Entwicklung durch Komponenten erreichen kann. Man kommt mittlerweile sogar in großen Maße ohne das direkte Anfassen von JavaScript aus. Diese Vorgehensweise wird noch viel mehr durch die JSF Bibliothek und Framework JBoss RichFaces, vormals Ajax4Jsf, hervorgehoben. Mit dieser ist es sogar möglich herkömmliche JSF Komponenten zu “Ajaxifizieren” ohne auch nur eine Zeile JavaScript zu schreiben. Auch JavaScript Funktionen können durch JSF Komponenten dynamisch erstellt werden, aber dazu ein andermal mehr. =)