This one _should_ be easy

[seb petterson]

How do I create a panelGrid such that arbitrary table cells are with a certain background color.

Fore example: a 3x3 table where only the center cell is white and the others are black.

Another one: Can I use iframes with JSF? The JSP I am converting to jsf uses html tables to layout the position of iframes. Is there a way to convert this to pure jsf or will i have to use standard html for this?

Thanks.

Seb
[ August 18, 2005: Message edited by: seb petterson ]

[seb petterson]

I refuse to believe that noone knows the answer to this, but if its the case it will be a big minus for jsf.

[Rick Beaver]

I believe the panelGrid has two attributes - rowClasses and columnClasses which you can use to specify the syle of your individual cells.

Also, you can use iFrames fine with JSF - just watch out for h:form boundaries - if your iFrame is contained within an enclosing h:form it can screw up the functionality of your enclosing form.

[seb petterson]

Originally posted by Rick Beaver:
I believe the panelGrid has two attributes - rowClasses and columnClasses which you can use to specify the syle of your individual cells.

How? If you define a style for row x, it will be applied for all cells in row x, if you apply a style for column y it will be applied to all cells in column y. But how do apply a style for cell (x,y)?
[ August 23, 2005: Message edited by: seb petterson ]

[Rick Beaver]

Check out the docs - these are a comma seperated list of classes.

Say you have the following in your CSS:

.blue {
    background-colour: #0000FF;
}
 
.red {
    background-colour: #FF0000;
}
 
.green {
    background-color: #00FF00;
}

You can do something like:

<h :-P	 anelGrid columns="5" columnClasses="red,blue,blue,green,red">

Which would mean that your table would have five columns the first one red, second and third blue, fourth green and fifth red.

You can do the same with the rows.

If you need random colours based on cell content then you should encapsulate the style in the component placed in the cell.

[seb petterson]

Originally posted by Rick Beaver:

... Which would mean that your table would have five columns the first one red, second and third blue, fourth green and fifth red.
.

Thanks. But my question was not how to make a column a certain color, but a cell.

Originally posted by Rick Beaver:

If you need random colours based on cell content then you should encapsulate the style in the component placed in the cell.

Yes this would be nice, unfortunately components like h:outPutText does not respond to background styles (it's a text).
[ August 23, 2005: Message edited by: seb petterson ]

[Mike Minner]

Will this work for you?

 <h:form>
<h:panelGrid columns="3" bgcolor="#000000;">
<h:outputText value="1" style="color: #ffffff;" />
<h:outputText value="2" style="color: #ffffff;" />
<h:outputText value="3" style="color: #ffffff;" />
<h:outputText value="4" style="color: #ffffff;" />
<h:panelGroup style="background-color: #ffffff;">
<h:outputText value="5" style="color: #000000;" />
</h:panelGroup>
<h:outputText value="6" style="color: #ffffff;" />
<h:outputText value="7" style="color: #ffffff;" />
<h:outputText value="8" style="color: #ffffff;" />
<h:outputText value="9" style="color: #ffffff;" />
</h:panelGrid>
</h:form> 

You'd probably want to put the colors into css styles. I added them like this to emphasize the colors.

[ August 23, 2005: Message edited by: Mike Minner ]

Why is it that when you edit a post, it unchecks the 'Disable Smilies' box?!?!?!

[ August 23, 2005: Message edited by: Mike Minner ]

AAAAARRRRRGGGGHHHHH!!! Smilies!!!
[ August 23, 2005: Message edited by: Mike Minner ]

[seb petterson]

Originally posted by Mike Minner:
Will this work for you?

It most certainly will, thank you so much!

(I know what you mean about the smileys.)

[Kevin Galligan]

I was thinking about this problem this morning. I don't really agree that it would be a big minus for jsf, but I came up with a few, fairly hacky, ways to do it.

*** Option 1 ***

To highlight the cell at (2,2)

<h anelGrid columns="5" columnClasses="default, col-highlight, default" rowClasses="default, row-highlight, default">

I'm not sure what the css would look like. It would depend on how the styles are printed out. If the 'rowClasses' are placed on the rows and 'colClasses' on the cells, you would do...

.row-highlight td.col-highlight
{
backgroun-color: red;
}

A different variation if they were printed differently.

*** Option 2 ***

Assign the css class in javascript after the table:

document.getElementById("myForm:myTable").className = "something";

Some type of taglib should probably be built to get the id from the jsf system.

*** Option 3 ***

Output a span with verbatim (or something similar) with an id. Get the span id and get the parent cell from that...

function assignClassToParentCell(targetId, cssClass)
{
var targetObj = document.getElementById(targetId);
while(targetObj != null && targetObj.nodeName != "td")
{
targetObj = targetObj.parentNode;
}
if(targetObj != null)
targetObj.className = cssClass;
}

(Note: I have never run the above, so it would need to be tested. Specifically the loop condition 'targetObj != null')

[Kevin Galligan]

Sorry. Option 2 would look like...

document.getElementById("myForm:myTable").rows.item(1).cells.item(1).className = "something";

Love that javascript.

[Paul Smiley]

Originally posted by seb petterson:


It most certainly will, thank you so much!

(I know what you mean about the smileys.)

People are always talking about the Smiley's...