Winston Prakash’s Weblog : weblog

Creator Tip: Setting table column or row style

During a meeting with Dick Wall of New Energy at Sun Executive Briefing Center, a question came up. How do I flag (set the colors of the text) of a particular cell in the Table Component based on some predefined condition. Here is a tip on how to do this.

Let’s start with a Creator project with single Page and a table component. Drag and drop the person table on to table component. Assume we should color the text of the names column with a light blue background, if the name matches “Black" or “Chen" and the job title with light red background if it matches “VP".

Here is how to do this.

Add two methods “getNameStyleClass" and “GetJobStyleClass"

public String getNameStyleClass() {
String name = (String) getValue(“#{currentRow.value[‘PERSON.NAME’]}");
if ((name != null) && (name.startsWith(“Black") || name.startsWith(“Chen"))){
return “nameStyleClass";
}else{
return “noStyleClass";
}
}

public String getJobStyleClass() {
String name = (String) getValue(“#{currentRow.value[‘PERSON.JOBTITLE’]}");
if ((name != null) && (name.startsWith(“VP") )){
return “jobStyleClass";
}else{
return “noStyleClass";
}
}

Tip: “#{currentRow.value[‘PERSON.JOBTITLE’]}" is same as what is set to the text property of the StaticText in the Column of the Table Component in the JSP page. You could simple copy and paste it here.

Add three CSS style classes to the resources/stylesheet.css

.noStyleClass{
}

.nameStyleClass {
background-color: #ccccff;
border-color: #0000ff;
border-style: solid;
border-width: 1px
}

.jobStyleClass {
background-color: #ffcccc;
border-color: #0000ff;
border-style: solid;
border-width: 1px
}

Select the StaticText component corresponding to the “Name" TableColumn in the Outline View. Click the Custom Property Editor ([…] button) of the styleclass. From the “Use binding" panel select the getNameStyleClass. Similarly bind getJobStyleClass to styleclass property of StaticText component of “Job Title" Table Column.

After executing the project the table component should display like
Table with Column Styles

Another trick is to make the table to display odd and even rows with different styles. Add the following method to your Page1.java

public String getColumnStyle(){
TableRowDataProvider trdp = (TableRowDataProvider) getBean(“currentRow");
RowKey rowKey = trdp.getTableRow();
if ((Integer.parseInt(rowKey.getRowId()) % 2) == 0){
return " “;
}else{
return “background-color: #eeeeee";
}
}

Now select each table column in the outline and click on the […] of the “style" property in the property sheet. Using the “Use Binding panel -> Bind to Object" dialog, bind the “style" to the Page1.columnStyle property.

The result may not be visible at design time. But at run time you should see something like
Table with Alternate row Styles