Winston Prakash's Weblog : weblog

« Sun Java Studio... | Main | My second acrylic... »

Thursday Jun 29, 2006

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.

Use the hidden DOM inspector
Use the Table Selectors as expalined in the document Structure of a Theme File

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;
}

Posted at 12:59AM Jun 29, 2006 | Permanent link to this entry

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 01:33 PM 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 12:50 PM 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 05, 2006 at 12:38 AM 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 07: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 05:44 PM 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 05:46 PM 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 05:50 PM 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 November 01, 2006 at 02:17 AM 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 07, 2006 at 05:42 AM 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 09: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 21, 2006 at 12:31 AM 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 05:23 PM 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 08, 2006 at 01:28 AM 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 06, 2007 at 02:05 AM 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 09: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 09: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 09: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 11:31 AM PDT #

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

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

Posted by 203.135.8.96 on July 29, 2007 at 11: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 11:52 PM PDT #

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 202.147.179.241 on August 20, 2007 at 01:40 AM 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 25, 2007 at 02:58 AM PDT #

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

Posted by aayohanes on November 02, 2007 at 10: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 02:18 PM PDT #

http://www.batteryfast.co.uk/toshiba/pa2458ur.htm toshiba pa2458ur battery,
http://www.batteryfast.co.uk/toshiba/3020.htm toshiba 3020 battery,
http://www.batteryfast.co.uk/toshiba/3000ct.htm toshiba 3000ct battery,

Posted by laptop battery on October 23, 2008 at 11:44 PM 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 11:59 PM PST #

Calendar

« November 2009
Sun	Mon	Tue	Wed	Thu	Fri	Sat
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

Search

Rss Feeds

Today's Hits - 321