?? rowaction.jsp
字號:
<TD align="right" class="td75"><h:outputText id="text16" value="#{pc_RowAction.temperatureDetails.SEPTEMBER}" styleClass="outputText">
<f:convertNumber />
</h:outputText></TD>
</TR>
<TR>
<TD align="left" class="tdColor25">October</TD>
<TD align="right" class="td75"><h:outputText id="text17" value="#{pc_RowAction.temperatureDetails.OCTOBER}" styleClass="outputText">
<f:convertNumber />
</h:outputText></TD>
</TR>
<TR>
<TD align="left" class="tdColor25">November</TD>
<TD align="right" class="td75"><h:outputText id="text18" value="#{pc_RowAction.temperatureDetails.NOVEMBER}" styleClass="outputText">
<f:convertNumber />
</h:outputText></TD>
</TR>
<TR>
<TD align="left" class="tdColor25">December</TD>
<TD align="right" class="td75"><h:outputText id="text19" value="#{pc_RowAction.temperatureDetails.DECEMBER}" styleClass="outputText">
<f:convertNumber />
</h:outputText></TD>
</TR>
</TBODY>
</TABLE>
</hx:jspPanel><h:commandLink styleClass="commandLink" id="link1" action="#{pc_RowAction.doLink1Action}" rendered="false">
<h:outputText id="text7" styleClass="outputText" value="Close"></h:outputText>
</h:commandLink></TD>
</TR>
</TBODY>
</TABLE>
<H4>How It works:</H4>When a row is clicked it fires an action event and stores the index of the selected row. In the action method, the selected row index is used to determine the name of the city selected and place that value into a Request Scope variable which is then used by the details table to display its data.<BR>
<BR>
Initially the JSP Panel containing the Details table has its "render" attribute set to false. When a row action event takes place the "render" attribute is set to true in the action method and the table is displayed. The "render" attribute can be located by clicking on the "All Attributes" icon in the top-right corner of Properties View of the JSP Panel.<BR>
<BR>To add Row Action to your table click on the "Add an action that's performed when the row is clicked" in the row actions tab of the data table Properties View.
<BR><HR>
<H3>Exercise 2 - Adding Command-Links to each row to perform an action.</H3>
In this exercise two command-hyperlinks have been added to each row of a Data Table.<BR>
<BR><CENTER>
<TABLE width="75%" class="noBorder">
<TBODY>
<TR>
<TD width="55%" class="noBorder" valign="top"><h:dataTable id="table2" value="#{pc_RowAction.customers}" var="varcustomers" styleClass="dataTable" headerClass="headerClass" footerClass="footerClass" rowClasses="rowClass1, rowClass2" border="0" cellpadding="2" cellspacing="0" columnClasses="colClass1">
<h:column id="column4">
<f:facet name="header">
<h:outputText styleClass="outputText" value="Customer ID" id="text23"></h:outputText>
</f:facet>
<h:outputText id="text24" value="#{varcustomers.ID}" styleClass="outputText">
<f:convertNumber />
</h:outputText>
</h:column>
<h:column id="column5">
<f:facet name="header">
<h:outputText styleClass="outputText" value="Customer Name" id="text25"></h:outputText>
</f:facet>
<h:outputText id="text26" value="#{varcustomers.NAME}" styleClass="outputText">
</h:outputText>
</h:column>
<h:column id="column9">
<f:facet name="header">
<h:outputText styleClass="outputText" id="text33" value="Show Details"></h:outputText>
</f:facet>
<h:commandLink styleClass="commandLink" id="detailsLink" action="#{pc_RowAction.doDetailsLinkAction}">
<h:outputText id="text27" styleClass="outputText" value="Show Details"></h:outputText>
<f:param name="ID" value="#{varcustomers.ID}"></f:param>
</h:commandLink>
</h:column>
<h:column id="column10">
<f:facet name="header">
<h:outputText styleClass="outputText" id="text39" value="Delete"></h:outputText>
</f:facet>
<h:commandLink styleClass="commandLink" id="deleteLink" action="#{pc_RowAction.doDeleteLinkAction}">
<h:outputText id="text40" styleClass="outputText" value="Delete"></h:outputText>
<f:param name="ID" value="#{varcustomers.ID}"></f:param>
</h:commandLink>
</h:column>
</h:dataTable></TD>
<TD class="noBorder" valign="top" width="45%"><hx:jspPanel id="detailsPanel" rendered="false">
<B>Customer Record:</B><BR>
<TABLE>
<TBODY>
<TR>
<TD align="left" class="tdColor25"><B>Id:</B></TD>
<TD class="td75"><h:outputText id="text34" value="#{pc_RowAction.updateCustomers2.ID}" styleClass="outputText">
<f:convertNumber />
</h:outputText></TD>
</TR>
<TR>
<TD align="left" class="tdColor25"><B>Name:</B></TD>
<TD class="td75"><h:outputText id="text35" value="#{pc_RowAction.updateCustomers2.NAME}" styleClass="outputText">
</h:outputText></TD>
</TR>
<TR>
<TD align="left" class="tdColor25"><B>Address:</B></TD>
<TD class="td75"><h:outputText id="text36" value="#{pc_RowAction.updateCustomers2.ADDRESS}" styleClass="outputText">
</h:outputText></TD>
</TR>
<TR>
<TD align="left" class="tdColor25"><B>City:</B></TD>
<TD class="td75"><h:outputText id="text37" value="#{pc_RowAction.updateCustomers2.CITY}" styleClass="outputText">
</h:outputText></TD>
</TR>
<TR>
<TD align="left" class="tdColor25"><B>State:</B></TD>
<TD class="td75"><h:outputText id="text38" value="#{pc_RowAction.updateCustomers2.STATE}" styleClass="outputText">
</h:outputText></TD>
</TR>
</TBODY>
</TABLE>
<BR></hx:jspPanel></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
<H4>How it works:</H4>
When a command-hyperlink is selected an action event takes place. The action method corresponding with the link can be written to perform different types of actions on the row, such as deleting it. The "Show Details" action method in this example displays a second table and places a parameter into a request scope variable which is used by that second table to display additional details on the row. The "Delete" link passes a parameter to the "Delete" action method which is used to delete that specific record from the database.<BR>
<BR>
To add command-hyperlinks to the data table:<BR> 1. Create a column in the data table to place them in. Select the data table in the Page Designer and go to its Properties View. <BR>2. Select the "Add" button next to the column table. <BR>3. Drag a command-hyperlink component from the JSF Palette into the column. <BR>4. To assign parameters to the link select it in the Page Designer and go to its Properties view.<BR>5. From its Parameter Tab selected the "Add Parameter" button. <BR>
<BR>Event code can be added by going to the link's Quick Edit view. Open the Quick Edit view for the Delete link, to view the code that performs the delete action.<BLOCKQUOTE>Example:<BR><h:column id="column10"><BR> <f:facet name="header"><BR> <h:outputText styleClass="outputText" id="text39" value="Delete"></h:outputText></f:facet><BR> <h:commandLink styleClass="commandLink" id="deleteLink" action="#{pc_RowAction.doDeleteLinkAction}"><BR> <h:outputText id="text40" styleClass="outputText" value="Delete"></h:outputText><BR> <f:param name="ID" value="#{varcustomers.ID}"></f:param><BR> </h:commandLink><BR> </h:column></BLOCKQUOTE>
<H4>Files of Interest:</H4>
<UL>
<LI><B>WebContent/rowActions/rowAction.jsp </B>- (This Page) Where the JSF source code to create these tables is located.</LI>
<LI><B>src/pagecode.rowActions.rowAction.java</B> - Where the
row action logic and command-hyperlink methods are performed.(This can
also be viewed from the Quick Edit View.)</LI>
<LI><B>temperatureDetails Service Data Object</B> - Contains the parameter which filters the database and returns the record for the selected city. This is located in the Page Data View.</LI>
</UL>
</h:form>
</hx:scriptCollector>
<%-- /tpl:put --%>
<TABLE class="title" cellpadding="0">
<TBODY>
<TR>
<TD class="noBorder" align="RIGHT"><A href="/JSFandSDO">Return to Main Menu</A></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</f:view>
</HTML><%-- /tpl:insert --%>
<%-- jsf:pagecode language="java" location="/src/pagecode/rowActions/RowAction.java" --%><%-- /jsf:pagecode --%>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -