Hier wird ein kurzes Beispiel gezeigt, wie man auf einer JSF-Seite unter Verwendung von RichFaces bzw. Ajax4jsf auf einen Doppelklick in einer DataTable mit einer Action reagieren kann.
Die Tabelle listet Personen auf, beim Doppelklick auf eine Zeile soll eine Maske zur Bearbeitung der selektierten Person geöffnet werden. In diesem Fall wurde nicht die „normale“ DataTable verwendet, sondern die ExtendedDataTable. Sie sieht in etwa so aus:
Zuerst der Codeausschnitt der JSF-Seite:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <h:form id="personen"> <rich:extendedDataTable value="#{personListBean.fullPersonList}" var="person" id="persontable" width="886px" height="400px" sortMode="single" selectionMode="single" > <a4j:support event="onRowDblClick" action="#{PersonEditBean.prepareEdit}"> <f:setPropertyActionListener value="#{person}" target="#{PersonEditBean.selectedPerson}" /> </a4j:support> <rich:column sortable="true" sortBy="#{person.nachname}" filterBy="#{person.nachname}" filterEvent="onkeyup" width="170px" label="Nachname"> <f:facet name="header"> <h:outputText value="Nachname"/> </f:facet> <h:outputText value="#{person.nachname}"/> </rich:column> <rich:column sortable="true" sortBy="#{person.vorname}"> <!-- [...] --> <!-- [weitere Columns ...] --> </rich:extendedDataTable> </h:form> |
Der entscheidende Code:
In Zeile 3 wird über var=“person“ die Variable für die verknüpften Instanzen in den Zeilen angelegt.
Die Zeilen 5 bis 8 definieren das AJAX Doppelklick Event. Als Action wird im PersonEditBean die Methode prepareEdit() angegeben. Dort geschieht eigentlich nichts weiter als das Umkopieren der Werte. Damit überhaupt die richtige (also die doppelgeklickte) Person verwendet wird, ist der PropertyActionListener nötig (Zeile 6 und 7).
Bleibt noch zu klären, wie denn nun die Maske zum Editieren der Person zum Zuge kommt. Dies wurde hier einfach mit einer klassischen Navigation geregelt; hier der Ausschnitt aus der faces-config.xml:
1 2 3 4 5 6 7 8 9 | <navigation-rule> <from-view-id>/[...]/personen.jsp</from-view-id> <navigation-case> <from-action>#{PersonEditBean.prepareEdit}</from-action> <from-outcome>prepare_erfolgreich</from-outcome> <to-view-id>/[...]/editperson.jsp</to-view-id> <redirect/> </navigation-case> </navigation-rule> |
Die prepareEdit() Methode liefert als Ergebnis den String „prepare_erfolgreich“ und schon wird weitergeleitet. Immer? Eigentlich schon, lediglich der Internet Explorer will mal wieder nicht. Dagegen hilft aber Zeile 7 („<redirect/>“). Vielen Dank für diesen Hinweis aus Ralph’s Java Blog!
Hallo,
Danke für die Erklärung für Doppelklick auf Tabellezeile. Das hat bei mir funktioniert. Aber in einer Spalte wird das Checkbox in jeder Zeile angezeigt und es soll Checkbox aktiviert und deaktiviert sein. Es gibt einen Konflikt zwischen das Event OnRowClick und Klicken auf Checkbox. Wie kann ich bei der Spalte das Event „onRowClick“ ausschalten?
Danke
Manu
Hallo Manu,
sorry für die späte Antwort. Also eine Möglichkeit zum „Ausschalten“ des Ereignisses kenne ich so spontan nicht. Eine Lösung wäre es vielleicht, statt dem „onRow…“-Ereignis, an jede Spalte außer der Spalte mit der Checkbox ein „onClick“-Ereignis anzuheften. Ist natürlich ein bisschen unschön, da man dann den Code für jede Spalte wiederholen muss. Vielleicht fällt jemand (oder mir, wenn ich mal mehr Zeit habe) noch eine elegantere Lösung ein.
Gruß,
Joachim