Dr. Winston Prakash Ph.D. 

Personal Website

Creating 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>