Creator Tip: Adding a button panel to the table component header

Sun Java Studio Creator Table component has more capabilities than being exposed by the Table Layout dialog. One of the features is the ability to add a button panel to the  header or the footer of the table component. This tip shows how to achieve this simple task. I have created a sample project, which extends the Multi row selectable Table Component tip project and adds button panels to the header and footer of the table component. User can select one or more rows from the table and then click the delete button in the header or footer to delete the rows. This sample project can be downloaded from here.

Also, I have included Java Script to the Table Component to pop up a confirmation dialog asking if the rows should be deleted. Also the dialog would warn that the action can not be undone. Also the Java Script would dynamically enable or disable the buttons based on the selection of the rows.

Steps:

• First you should follow the steps in the Single or Multi selectable row Table component tip blogs.  
• Drag and drop two buttons on to the web form designer and set the property disabled=true on both the buttons.
• Go to the JSP page and manually edit the table tag and add two facets with names "actionsTop" and "actionsBottom" just above the end element (</table>) of the table tag. Note the names of the facet should exactly match.
• Move the code related to the buttons inside the facets. Remove the positioning information from the buttons style property. The code would look like the following.

<!-- Actions (Top) --><f:facet name="actionsTop">
   <ui:button action="#{Page1.button1_action}" 
      binding="#{Page1.button1}" disabled="true" id="button1"
      onClick="if (confirmDeleteSelectedRows() == false) return false" 
      text="Delete"/>
</f:facet>
<!-- Actions (Bottom) -->
<f:facet name="actionsBottom">
   <ui:button action="#{Page1.button2_action}" 
      binding="#{Page1.button2}" disabled="true" id="button2"
      onClick="if (confirmDeleteSelectedRows() == false) return false" 
      text="Delete"/>
</f:facet>

• Add the confirmDeleteSelectedRows() and disableActions() functionas to the existing Table Java Script

function confirmDeleteSelectedRows() {
   var table = document.getElementById("form1:table1");
   return table.confirmDeleteSelectedRows();
}

function disableActions() {
   // Disable table actions by default.
   var table = document.getElementById("form1:table1");
   var selections = table.getAllSelectedRowsCount();  
   var disabled = (selections > 0) ? false : true;
   // Set disabled state for top actions.
   document.getElementById("form1:table1:button1").setDisabled(disabled);
   // Set disabled state for bottom actions.
   document.getElementById("form1:table1:button2").setDisabled(disabled);
}

• Double click the buttons and add the code to delete the table rows.

public String button1_action() {
   int selectedRows = getTableRowGroup1().getSelectedRowsCount();
   RowKey[] selectedRowKeys = getTableRowGroup1().getSelectedRowKeys();
   for(int i=0; i< selectedRowKeys.length; i++){
       if (tripDataProvider.canRemoveRow(selectedRowKeys[i])){
           tripDataProvider.removeRow(selectedRowKeys[i]);
           info("Row " + selectedRowKeys[i].getRowId() + " Removed");
       }else{
           info("Can not remove row " + selectedRowKeys[i].getRowId());
       }
   }
   tripDataProvider.commitChanges();
   if(selectedRowKeys.length < 1){
       info("No rows selected for deletion");
   }
   return null;
}
 

That is it. We are done. Deploy the application. Initially the buttons will be disabled. Select a row and the buttons will be enabled. Click on the button and the confirmation dialog (shown below) should popup.

Posted at 09:18PM Sep 10, 2006  |  Permanent link to this entry