Creator Tip: Table component with a custom title bar

Another feature of the Sun Java Studio Creator 2U1 Table Component, that may be of interest is to have a custom title bar. This is also done very similar to the technique I explained in my blog on How to add the button panel to the table header.

Here is an example. Suppose you are running some process and periodically post the information about the process to a web page, where user can view output information of the process in a table. Suppose, if part of the process failed, you may want to display some message in the table title bar stating the process failed along with some error icon, which looks something similar to the below image.

Table with Custom Title Bar

Here are the steps to do this:

  • First drag and drop a Group Panel component on to the designer.
  • Drag and drop a image component and a static text on to the Group Panel component.
  • Add a facet with name "title" to the table component as shown below.
  • Go to the JSP page and manually move the tag related to Group Panel Component (and its children)
    inside the "title" facet. Remove the style information related to the position of the Group Panel  using Style Builder.
  • Set the image for the Image Component and desired text for the table title to the StaticText component.
  • Modify the style of the StaticText as desired (I've set some style related to padding also) 

Here is the "title" facet code I used to make the above table title bar with red error icon and red colored text.

<f:facet name="title">
    <ui:panelGroup binding="#{Page1.groupPanel1}" id="groupPanel1" style="text-align: left">
       <ui:image align="middle" binding="#{Page1.image1}" icon="ALERT_FAILED_LARGE" id="image1"/>
       <ui:staticText binding="#{Page1.staticText1}" id="staticText1"
           style="color: #da3333; padding-left: 5px; padding-top: 10px; vertical-align: middle"
           text="Process failed"/>
    </ui:panelGroup>
</f:facet>

Also, it is possible to add a DropDown Component to the Table Component title bar as shown below.

Table with drop down in the Title Bar

Here is the "title" facet code I used to put the DropDown Component in the title bar.

<f:facet name="title">
    <ui:panelLayout binding="#{Page1.layoutPanel1}" id="layoutPanel1" 
        panelLayout="flow" style="text-align: right">
          <ui:dropDown binding="#{Page1.dropDown2}" id="dropDown2" 
            items="#{Page1.dropDown2DefaultOptions.options}" 
            style="text-align: right; width: 150px"/>
    </ui:panelLayout> 
</f:facet>
Comments:

I applied all of your tips to my project table, but my table is not the only component in the page, so I have to use Virtual forms. My table has 2 row groups: the first is to display 4 columns of a ObjectListDataProvider, plus a checkBox to select and delete with a button un the upper facet. The second row group has input components which work with a addRow button. The problem is when I try to delete rows, selectedRowKeys==null and when adding rows, the text of the fields are empty no matter what is in them. I suspect a virtual forms trick with the table, but I don't know how. Tnx

Posted by cavaliernino on September 26, 2006 at 10:36 AM PDT #

Hi, I'd like to i18n the pagination controls of a table. Where can I get/set it; i.e. Page: or GO in the button. Thanks in advance

Posted by Thomas on October 02, 2006 at 10:49 PM PDT #

thnks for u r support for studio creator ,, can u tell me can we have a dynamic popup menu on a table component and can we have scroller panel in grid or in table component,,, pls reply me i need u r valuable suggestion..

Posted by Amit shastri on October 11, 2006 at 04:14 PM PDT #

thanks for this :)

Posted by Jordan on March 17, 2007 at 07:09 AM PDT #

?

Posted by guest on December 19, 2007 at 06:54 PM PST #

Thanks this table and its pagination is useful.

Posted by Colon Cleanse on May 16, 2009 at 07:10 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