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