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 &gt; 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.

Table with button panel header
Confirmation dialog
Comments:

Hi Winston, thanks for your blog that is very useful! I have a problem with this application. It can't be downloaded. Bye mickgiu

Posted by mickgiu on September 10, 2006 at 06:33 PM PDT #

Hi Mick, that was my mistake. Now I fixed it and must be able to download the project zip now.

Posted by Winston Prakash on September 10, 2006 at 11:26 PM PDT #

Hi Winston. This blog is very helpful. I'm wondering if it is possible to add more buttons (Add-Button). I tried it with simply adding another button. There you see only the last added button. I tried it with a layout panel, but then the alignment is not one row. Another question: Is there a function to filter the table by existing column values? For example with drop down lists in the header? Another question: If I want to group the table by the column 'JOBTITLE', how I have to set up the table to get groups with 'CEO', 'VP/CXO...' ? Bye Lars

Posted by Lars on September 11, 2006 at 10:07 AM PDT #

To get the buttons in a row is no problem. Set the columns property in the grid panel (containing your buttons) to a value larger than two. But I don't get the grid layout ui component configured to be invisible. You always see a border and a white background ;( greets roman

Posted by guest on September 12, 2006 at 01:59 AM PDT #

Hi winston, if i want to move the button : add style to a button with left position it'd out of the table header. And recurrent question how to add more than one element to a facet Thanks

Posted by Walid on September 14, 2006 at 01:22 AM PDT #

Hi, where exactly do I set the number of columns of the grid panel so I can display more than1 column? I couldnt find it. Thnaks

Posted by tata on September 16, 2006 at 08:52 AM PDT #

Hi, your blog in Creator is my tip vault since I started with JSC2. Recently I created a Table with a Delete button, but I realize that must be added some code into the 'onclick' calling into the checkbox column. The example shows: # selected="checkbox2", where checkbox2 is the ID of the checkbox added # onClick=setTimeout('initAllRows()', 0). must be: # selectId="checkbox2", where checkbox2 is the ID of the checkbox added # onClick=setTimeout('initAllRows(); disableActions()', 0) The onClick mod is only for the delete button enabling works. Hope it'll help

Posted by cavaliernino on September 25, 2006 at 02:01 PM PDT #

Hi winston, I want to do following two things with table. 1) selected row should highlight does not matter whether it is checkbox or text 2) is it possible to move the table as well as column(that means i want drag the column) please help me in this regards. Thanks in Advance, suganthan

Posted by suganthan on October 04, 2006 at 08:39 PM PDT #

Hi Winston, I want to do something as an invoice, you could help me with some small sample, it is possible to do it?. Thanks for your help

Posted by red on October 17, 2006 at 07:47 AM PDT #

Hi Winston. i tried your code but if i have a table with only one row, the bottom delete button doesn't appears. Can you explain me why? Thanks

Posted by Giuspy on November 07, 2006 at 11:13 PM PST #

gh

Posted by guest on January 03, 2007 at 05:04 PM PST #

Hi Winston. It's nice to have some meaningful tutorials on the new table component. I was having some problems getting it to show page1 design time in creator2-1. The problem was that the Select class doesn't get read correctly as a bean because it doesn't implement serializable. Simple fix, just add "implements Serializable" to the class definition, fix the imports, then restart creator2. Then it works fine.

Posted by Erich on January 31, 2007 at 12:38 PM PST #

Qweas Software Search Engine
offers services including software search, downloads, store, directory, and so on.

Posted by freda on March 06, 2007 at 01:51 PM PST #

Hi Winston. thnx for these information for Sun Creator table but i have the following problem :- my table is set to an array data provider and i can by ur information i can select the row but i can't delete from it beacuse there's no dataprovider.commitChanges(); soo how can i remove the row from the table!!! thnx in advance

Posted by Ehab Tarek Fouad on April 30, 2007 at 11:32 PM PDT #

The example is very useful, it works, but when the button1_action() is call the value of selectedRows is always 0. Why? Thanx in advance

Posted by Valeria on May 23, 2007 at 07:32 PM PDT #

I have found this to be the case as well. I have set selectId = checkbox1 in the column containing the checkbox and have set onClick=setTimeout('initAllRows(); disableActions()', 0) in the column too. The value of selectedRows is always 0. I have also attempted to set the same values in the tableRowGroup but selected {#Page1.checkbox} causes a servlet exception on the ui.component.checkbox???

Posted by altairbob on May 23, 2007 at 11:55 PM PDT #

Hi... I'm new to Java web development and I am having a problem similar to the one solved here. Mine is that I am trying to get the 'cells' of the table to display buttons etc (probably contained in a panel of sorts). Is this possible? And if so is this the best approach for this type of thing? note: some cells would have content where there are no buttons but only static text.

Posted by youngDev on May 31, 2007 at 05:47 AM PDT #

Yes you create an empty column and then drag a button component onto it. I have also realised that my problem earlier related to the fact that select code held in the session bean and a select object java file were absent from my project but were present in Winston's example.

Posted by altairbob on May 31, 2007 at 07:40 PM PDT #

What the difference s between firefox and maxthon? have a look at: Qweas

Posted by freda on June 05, 2007 at 01:01 PM PDT #

Dear Sir: We have obtained your name and email from the Internet. We wish to express our desire to enter into business relations with you. Our company was established in 1994. The factory specialized in manufactured store fixture series and interrelated products. We mainly offer: 1.Various kinds of display shelf systems and accessory items 2. Gridwall panel series and accessories. 3. Brackets hooks series etc.Today, hesheng covers an area of 25000m2 and has over 600 employs. The annual revenue has amounted to as much as 8 million us dollars so far. The products majority was shipped to USA, Japan and Back of China. We not only can provide you with the best products but also manufacture according to the drawing or the sample, which you offer. Our company guarantee: Stand quality Low profit high efficiency and won the satisfied with all customers! Your comments on our products or and information on your market demand will be really appreciated. You can land on our website www.hesheng-hardware.com. We can provide good service for you. Looking forward to your further information and detailed enquiries as soon as possible. Thanks Regards Sincerely yours! David Shanghai Hesheng Hardware products Co., Ltd Email: weiwei@hesheng-hardware.com http:// www.hesheng-hardware.com Tel: 86-021-66021117-829 Fax: 86-021-66021128 Address:No.725 Hu Lian Road.Shanghai.China

Posted by David wei on July 19, 2007 at 06:18 PM PDT #

Hi... One question : i made so how you show here - and allmost ok but, if count of rows is one. then this table footer is hided and i can`t click on button.

Posted by Leonid Sidorenko on August 03, 2007 at 01:03 AM PDT #

I think, we should use these button end of the pages. Also thanks your helps..

Posted by tekstil aksesuar on July 28, 2009 at 08:21 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed
Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today