Creator Tip: Making the table component look different

Some time you must be wondering, why should I use the same looking Table Component as others. Why can't I have different look. The ideal solution would have been, Sun Java Creator IDE providing a Theme Editor. However, ideal solution seldom exists in the real world. In such situation, it is better to look at other alternatives.

One of the solution is to override the properties of the implicit CSS classes used by the Table Component. But how to find these CSS class names. There are two ways to get hold of these names.

I wanted my table to have a different look than the default theme. I have overriden the following CSS styles in the resources/stylesheet.css. The result was a different looking tabe.

table.Tbl {
   background-color: #ffcc66;
}
caption.TblTtlTxt {
   background-color: #990000;
   background-image: none!important;
   color: #ffffb4;
   font-style: oblique;
   font-weight: bolder
}

.TblHdrTxt {
   background-image: none!important;
}

table.TblLt .TblHdrTxt {
   background-image: none!important;
}

table.Tbl .TblHdrTxt {
   background-image: none!important;
   font-weight: lighter
}

table.Tbl td, table.Tbl th {
   border-color: #ffcc66;
}

table.Tbl th.TblColHdr {
   background-color: #ffcc66;
   border-color: #f2b741
}


table.Tbl a.TblHdrLnk:link, table.Tbl a.TblHdrLnk:visited {
   background-color: #ffcc66;
   background-image: none!important;
   color: #663389;
   font-weight: bold;
}

table.Tbl a.TblHdrImgLnk:link, table.Tbl a.TblHdrImgLnk:visited {
   background-color: #ffcc66;
   background-image: none!important;
   border-color: #f2b741;
} 

Comments:

[Trackback] After all these months, I am finally making progress on the tutorial for the Table component. It might be a long time before I document all the steps and get the tutorial through quality assurance, editorial, and production processes. So, f...

Posted by Insider Scoop From the Tutorial Divas on June 29, 2006 at 06:33 AM PDT #

Sir, I have created a table in Creator that looks at the file system and displays all the files in a directory. In the first column, I display the name of the file as a hyperlink. I then have an action associated with that hyperlink as such: hyperlink1_action. The event handler for the hyperlink gets called fine, until I had to move my source code into a different location due to a project rename. Now, the hyperlink and button actions within the table only do not work. What is going on? What do I need to do to fix this? If I delete the entire table and make it again from scratch, it seems to know how to find the event handler. I don't want to do that with every table I have. Do you have any ideas? Thanks.

Posted by William on July 17, 2006 at 05:50 AM PDT #

Hi, I created a table with 3 rows and cols.I need to have table where i can move the rows and columns.I want to highlight the row which i choose.Please provide sample program where i can get this features. I will appropriate you if you provide this info. I am looking forward your reply regards, suganthan

Posted by suganthan on October 04, 2006 at 05:38 PM PDT #

I used the above mentioned CSS table selectors to give a table a different look. However, my table's got a pagination section which I colorwise would like to comply with the rest of the table. I have no idea which selector I have to use to set the background-color of the pagination section. I tried some of the selectors in: http://developers.sun.com/prodtech/javatools/jscreator/reference/docs/help/2update1/components/theme_structure.html but the background remains gray. Which selector will dot the trick? Kind Regards, Annet

Posted by Annet Vermeer on October 22, 2006 at 12:41 AM PDT #

Hi William, I don't know what is happening in your project. My idea would be look at the rendered HTML source in the browser and see what URL the <a> tag has.

Posted by Winston Prakash on October 22, 2006 at 10:44 AM PDT #

Hi Suganthan, are you asking about drag and move the rows and columns in the browser?, if so that is not supported. For highlighting the selected rows, you could use the tip I explained in http://blogs.sun.com/winston/entry/single_selectable_row_table_component

Posted by Winston Prakash on October 22, 2006 at 10:46 AM PDT #

Hi Annet, for changing the style of certain region you need to find the exact CSS rule. Try the built in DOME inspector (http://blogs.sun.com/tor/entry/css_style_sleuthing) to find the exact rule.

Posted by Winston Prakash on October 22, 2006 at 10:50 AM PDT #

Hi Winstone, thanks for these tips! I have one question: is it possible to apply a style to just one column header (or some but not all)? For example if I would like to set one of the column headers to red text color. I know I can do it with the column content, but can I do it with the header? Thanks a lot, Andras.

Posted by Andras Janurik on October 31, 2006 at 06:17 PM PST #

oyeme amigo necesito una pequeña orientacion y disculpa mi ignorancia pero dime como puedo con el editor visual de creator centrar los componenetes para que al mostrarse la pgina se vea todo centrado no doy con el chiste garcias

Posted by jaider fernando rodriguez lozano on November 06, 2006 at 09:42 PM PST #

Hi Winston, I have created a JSF 1.2 table component using NetBeans, I would like to know how to update only three columns of the table for each row at a predifned intreval. Is it possible do it ? Atleast some pointers in this regard would be helpful. Thanks Satish

Posted by satish on November 07, 2006 at 01:58 AM PST #

HI Winston, I need to create a vertical table: instead of having a row for any row in my DB, I need a column, it would be great also having table functionality, like pagination any suggestion?? thanks Giorgio

Posted by giorgio on November 20, 2006 at 04:31 PM PST #

hi, i like to create a simple table... but was wondering if the text inside the table able to have linking? or is there a way to extract few chara from the linking page and place it inside the table as a link? thanks

Posted by @18@ on December 07, 2006 at 09:23 AM PST #

Hi Winston, I have table component which is binded to the Database table. And i have created a new column for inserting a button in it. And i have named it as EDIT. When i press that particular button that tablerowgroup must be populated in text fields in another page as editable mode. Where the new page doesn't have the table component but it is just like an form containing some textfields. So whenever i click the edit button the data to the corresponding row must be populated in their respective fields. Please give me a solution to this.

Posted by Srinivasan1983 on December 07, 2006 at 05:28 PM PST #

Hi Winston, the sample is working in tag <ui>, but in the visual web of netbeans 5.5, it seems does not work. Please help me, and give the new sample. Thanks a lot.

Posted by ArthurHung on February 05, 2007 at 06:05 PM PST #

Hi Winston, the sample seems does not work in tag <webuijsf>. Please help me, and give the new sample. Thanks a lot. I use Netbeans 5.5 + Visual Web + Sun Applicaton Server 9 + J2ee 5

Posted by ArthurHung on February 06, 2007 at 01:28 PM PST #

Hi winston, i am currently using default datatable component. now my requirement is that i need to select a particular row just like in desktop application, but i am not able to find any eventhandlers for the same. also i need to change the background colour of my selected row. i combed through the net byt no luck....any suggestions

Posted by Mrinal Khanvilkar on February 20, 2007 at 01:55 PM PST #

Sorry forgot to mention i am using JSF on netbeans 5.5 visual web pack

Posted by Mrinal Khanvilkar on February 20, 2007 at 01:57 PM PST #

Hi Winston, I have a big problem with displaying my MS Database columns in a table in Sun Java Studio Creator 2 I tried to implement the “Bind to Database Table” tutorials put I could not solve this problem, can you please urgently answer my question since I have a project in my college that need this point.

Posted by hamda on May 05, 2007 at 04:31 AM PDT #

Thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Posted by Fernando on July 25, 2007 at 03:01 AM PDT #

Hi, Winston Prakash! I have created dynamic RadioButtonGroup components and Button (command button)..., kindly guide me how to getId() for these RadioButtonGroup so that getValue() or getSelected(); How to add eventHandler() for Button b = new Button(); Thanks

Posted by guest on July 29, 2007 at 04:30 PM PDT #

Hi, Winston Prakash! I have created dynamic RadioButtonGroup components and Button (command button)..., kindly guide me how to getId() for these RadioButtonGroup so that getValue() or getSelected() is visible for these RadioButtonGroup components;How to add eventHandler() for Button b = new Button(); -------------------------------------------- Sample code : ````````````` //-------------------------------------------- public HtmlPanelGrid getGridPanel1() { for (int i=1; i<6 i++) { RadioButtonGroup rbg=this.createRadioButtonGroup(i); gridPanel1.getChildren().add(rbg); } return gridPanel1; } //-------------------------------------------- public RadioButtonGroup createRadioButtonGroup(int counter) { RadioButtonGroup rbg = new RadioButtonGroup(); Option opt[] = new Option[5]; String rbgID = null; int i=0; int k=0; int rbgValue = 5; for(int j=0; j<5; j++) { opt[i++] = new Option(rbgValue--, choices[k++]); } rbgID = "rbg"; rbg.setId(rbgID+counter); rbg.setColumns(5); rbg.setItems(opt); return rbg; } //-------------------------------------------- Thanks

Posted by Muhammad Waseem Kayani on July 29, 2007 at 04:52 PM PDT #

<html>
<head>
<title>
JSP JSF Code...
</title>
</head>

<body>
<pre>

Sample code :
`````````````
//--------------------------------------------
public HtmlPanelGrid getGridPanel1()
{
for (int i=1; i<6 i++)
{ RadioButtonGroup rbg=this.createRadioButtonGroup(i);
gridPanel1.getChildren().add(rbg);
}
return gridPanel1;
}
//--------------------------------------------

public RadioButtonGroup createRadioButtonGroup(int counter)
{
RadioButtonGroup rbg = new RadioButtonGroup();
Option opt[] = new Option[5];
String rbgID = null;
int i=0;
int k=0;
int rbgValue = 5;

for(int j=0; j<5; j++)
{
opt[i++] = new Option(rbgValue--, choices[k++]);
}

rbgID = "rbg";
rbg.setId(rbgID+counter);
rbg.setColumns(5);
rbg.setItems(opt);
return rbg;
}
//--------------------------------------------

</pre>
</body>

</html>

Posted by guest on August 19, 2007 at 06:40 PM PDT #

Hi Winston, I am using netbeans 5.5 visual web pack. I have a objectListDataProvider Table in JavaServer Faces .In table there are 3 columns- one of the columns contain TextField,static text and Button name update. I want to set TextField Column of a particular row is enabled after clicking on button.I am trying to do, but If there are more than one records , when i click on update Button , All TextFields of same column are set to enable, disable. I want to set only enable textfield of one row only.. Please Help me... Any help will be appreciated

Posted by chintan anand on October 24, 2007 at 07:58 PM PDT #

you'r the man prakash, you'r great...

Posted by aayohanes on November 02, 2007 at 03:57 PM PDT #

hi my name is maryam.
i have problem when i use jsf-webui and netbeans
when swap page to another page and when came back ,then all pictures in my table lost.
page 1------->page2---------->page1 then my table's picture lost!!!!
my code:

table border="3" background="resources/Image/bt.gif">
<tr>
<td>
test table
</td>
<td>
test table
</td> <td>
test table
</td> <td>
test table
</td>
</tr>
</table>

Posted by Maryam on September 19, 2008 at 07:18 AM PDT #

i want to create different look of table in visual web java server faces.i also apply the technique which was u display for different look table but its not work properly

Posted by zalak patel on February 09, 2009 at 03:59 PM PST #

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