In einem aktuellen Projekt musste eine mit Java Server Facelets erstellte Seite, auf Kommando bestimmte Daten an den Server senden. Normalerweise werden diese Daten aus einem Formular bezogen und alles weitere macht der Browser selbst. In diesem Fall mussten die Informationen allerdings aus einem völlig anderem Formular ausgelesen werden. Für eine solche Client-seitige Aufgabe wird normalerweise JavaScript (in diesem Fall mit jQuery) verwendet. Die JavaScript Funktion registriert das Submit-Event des ersten Formulars und lädt beim Aufruf des Events die Daten aus dem zweiten Formular, setzt sie und erlaubt dann die Weiterleitung des Events an den Browser. Für diesen Ablauf ist es notwendig, dass die ID der entsprechenden Formularfelder bekannt ist. Bei durch JSF generiertem Code ist das nicht der Fall, da die Generierung der automatischen IDs nicht spezifiziert ist und man sich darum nicht auf vorhersehbare Werte verlassen darf und kann. Zur Lösung des Problems ist darum ein kleiner Umweg notwendig.

Das folgende Beispiel nimmt an, dass der Wert eines bestimmten Input-Elements in JavaScript ausgelesen werden soll.

<h:inputText id="email"/>

Wie man sehen kann, ist zwar eine ID definiert, diese wird von JSF jedoch umgewandelt und geht Bestenfalls in die neue ID mit ein. Die Problemlösung sieht folgendermaßen aus. Zunächst wird das Input-Element um ein “binding” erweitert.

<h:inputText id="email" binding="#{bean.emailMember}"/>

Damit erreicht man eine Bindung des Elements auf eine Membervariable eines Beans, welches grob folgenden Aufbau haben muss.

@Named(value = "bean")
@RequestScoped
public class MyBean {
    private UIInput emailMember = null;

    public MyBean() {}

    public UIInput getEmailMember() {
        return emailMember;
    }

    public void setEmailMember( UIInput emailMember ) {
        this.emailMember = emailMember;
    }
}

Damit hat man eigentlich auch schon alles was man benötigt. Die richtige ID kann man jetzt folgendermaßen in JavaScript und auch CSS erhalten.

<script type="text/javascript" charset="utf-8">
    var value = $( '[id="#{bean.emailMember.clientId}"]' ).val();
</script>

<style type="text/css">
    ##{bean.emailMember.clientId} {
        color: red;
    }
</style>
Advertisements