JSF 2.2 と PrimeFaces 3.5 で書かれた単純な CRUD アプリケーションがあります。データベースは、Clients と Orders の 2 つのテーブルで構成されています。すべてのクライアントがリストされ、最後の列に3つのボタンがあるデータテーブルのビューがあります.eidt、delete、および各クライアントの注文を表示します。編集ボタンをクリックすると、選択したクライアントのデータがモーダル ダイアログ フォームに読み込まれますが、ダイアログでどのボタンが押されても、クライアントのデータは常に最初の行に読み込まれます。削除ボタンも同様。
ビューのコードは次のとおりです。
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:commandButton id="addNewClientButton" type="button"
onclick="add.show();" value="Add new client"
action="clientBeans.newClient" />
<br />
<p:dataTable var="client" value="#{clientBeans.getAllClients()}"
border="true">
<p:column headerText="Client Id">
<h:outputText value="#{client.clientId}" />
</p:column>
<p:column headerText="Name">
<h:outputText value="#{client.name}" />
</p:column>
<p:column headerText="Address">
<h:outputText value="#{client.address}" />
</p:column>
<p:column headerText="Email">
<h:outputText value="#{client.email}" />
</p:column>
<p:column headerText="Options">
<p:commandButton value="Edit" id="editClientButton"
action="#{clientBeans.editClient}" type="button"
update=":form:editClient" onclick="edit.show();">
<f:setPropertyActionListener
target="#{clientBeans.client}"
value="#{client}" />
</p:commandButton>
<p:commandButton action="#{clientBeans.deleteClient}"
value="Delete"
id="deleteClientButton" type="button"
onclick="remove.show();"
icon="ui-icon-circle-close">
<f:setPropertyActionListener
target="#{clientBeans.client.clientId}"
value="#{client}" />
</p:commandButton>
<p:commandButton
action="#orderBeans.getSpecificOrders(client.clientId)}"
value="Orders">
<f:setPropertyActionListener
target="#{clientBeans.client.clientId}"
value="#{client.clientId}" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
<h:form>
<p:dialog id="addNewClient" header="Add new client" widgetVar="add"
modal="true" resizable="false">
<p:panelGrid columns="2" border="false">
<h:outputLabel for="name" value="Name: " />
<p:inputText id="name" value="#{clientBeans.client.name}"
label="name" required="true" />
<h:outputLabel for="address" value="Address: " />
<p:inputText id="address"
value="#{clientBeans.client.address}"
label="address" required="true" />
<h:outputLabel for="email" value="Email: " />
<p:inputText id="email" value="#{clientBeans.client.email}"
label="email" required="true" />
<f:facet name="footer">
<p:commandButton
action="#{clientBeans.createClient}" value="Save"
icon="ui-icon-check" style="margin:0">
</p:commandButton>
</f:facet>
</p:panelGrid>
</p:dialog>
</h:form>
<h:form>
<p:dialog id="editClient" header="Edit client" widgetVar="edit"
modal="true" resizable="false">
<h:panelGrid columns="2" id="displayClient">
<h:outputLabel for="id" value="Id: " />
<h:outputText id="id" value="#{client.clientId}" label="id" />
<h:outputLabel for="name" value="Name: " />
<p:inputText id="name" value="#{client.name}" label="name"
required="true" />
<h:outputLabel for="address" value="Address: " />
<p:inputText id="address" value="#{client.address}" label="address"
required="true" />
<h:outputLabel for="email" value="Email: " />
<p:inputText id="email" value="#{client.email}" label="email"
required="true" />
<f:facet name="footer">
<p:commandButton
action="#{clientBeans.updateClient}" value="Save"
icon="ui-icon-check" style="margin:0">
</p:commandButton>
</f:facet>
</h:panelGrid>
</p:dialog>
</h:form>
<h:form>
<p:dialog id="deleteClient"
header="Are you sure you want to delete this client?"
widgetVar="remove" modal="true" resizable="false">
<p:panelGrid columns="2">
<h:outputLabel for="id" value="Id: " />
<h:outputText id="id" value="#{client.clientId}" label="id" />
<h:outputLabel for="name" value="Name: " />
<h:outputText id="name" value="#{client.name}" label="name" />
<h:outputLabel for="address" value="Address: " />
<h:outputText id="address" value="#{client.address}" label="address" />
<h:outputLabel for="email" value="Email: " />
<h:outputText id="email" value="#{client.email}" label="email" />
<f:facet name="footer">
<p:commandButton action="#{clientBeans.confirmDeleteClient}"
value="Delete" icon="ui-icon-circle-close" />
</f:facet>
</p:panelGrid>
</p:dialog>
</h:form>