jQuery + JSF

JSF Seiten mit jQuery dekorieren am Beispiel von h:dataTable

jQuery ist ein besonders einfach zu verwendendes JavaScript-Framework, das sich sich durch seine geringe Größe und gute Performance auszeichnet. Einer der Gründe warum jQuery so populär geworden ist, ist das einfache DOM-Navigaton und Manipulation. Zur Navigation unterstützt es große Teile von XPath und CSS-Selektoren.

Nehmen wir an, wir haben eine JSF Tabelle mit Ländern:

<h:dataTable id="demoTable" value="#{bean.countries}" var="item" styleClass="demo-table">
        <h:column>
              <f:facet name="header">
                   <h:outputText value="ID" />
              </f:facet>
                <h:outputText value="#{item.countryId}"/>
        </h:column>
        <h:column>
              <f:facet name="header">
                   <h:outputText value="Country" />
              </f:facet>
                <h:outputText value="#{item.countryName}"/>
        </h:column>
        <h:column>
              <f:facet name="header">
                   <h:outputText value="EU Country" />
              </f:facet>
                <h:outputText value="#{item.europeanCountry}"/>
        </h:column>
</h:dataTable>

Aus JSF wird folgende HTML Tabelle generiert:

ID Country EU Country
1 Canada false
2 Germany true
3 Mexiko false
4 Brasilia false
5 Italia true
6 Egypt false
7 Irak false
8 England true

Mit JSF können wir den CSS Style für die ganze Tabelle, für einzelne Spalten, Header, Footer usw. festlegen.
Den Style von einzelnen Zeilen oder Zellen kann aber leider nicht definiert werden, so wie es mit reinem HTML möglich wäre. Um das Aussehen von JSF Tabellen trotzdem zu verbessern setzen wir das jQuery Framework ein.

Um jQuery Framework ins JSF Seite zu integrieren, muss einfach eine 19kB große JavaScript Datei in die HTML Seite inkludiert werden.

<script type="text/javascript" src="jquery.js"></script>

Danach können wir schon den ersten jQuery Script schreiben.
Folgender Skript dekoriert unsere Tabelle „demoTable“ mit elegantem grünem Zebra Muster.

$(document).ready(function() {
        $("#demoTable tr:odd").css(“background-color”,”green”);
});
ID Country EU Country
1 Canada false
2 Germany true
3 Mexiko false
4 Brasilia false
5 Italia true
6 Egypt false
7 Irak false
8 England true

Interessanter wäre aber eine bedingte Dekoration abhängig vom Wert eines Feldes.
Das lässt sich auch mit einem kleinen Script erledigen. Wir selektieren dafür einfach alle „TD“ Elemente die „true“ enthalten und für „TR“ Eltern dieser „TD“ Elemente setzen wir CSS Class – „greenColor“:

$(document).ready(function() {
        $("#demoTable td:contains('true')").parent().addClass(“greenColor”);
});
ID Country EU Country
1 Canada false
2 Germany true
3 Mexiko false
4 Brasilia false
5 Italia true
6 Egypt false
7 Irak false
8 England true

Dank jQuery sind weitere Dekorationen möglich, im Extremfall kann man sogar komplett auf CSS verzichten und Seiten nachträglich nur mit jQuery Scripten dekorieren. jQuery kann aber auch selbst den Inhalt von HTML Seiten modifizieren und zahlreiche vordefinierte dynamische Effekte anwenden wie Zoom, FishEye, Transparenz usw.

Offizelle jQuery Seite

Veröffentlicht in Java