CODEWITHSUNDEEP
javascriptcssjsf-2
Marco Aviles
Marco Aviles

Reputation: 5596

JSF 2.0 Javascript and CSS table

I'm new to JSF 2.0 and I'm having troubles with js/css events. Basically I have this html code:

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.hovertable tr {
    background-color:#d4e3e5;
}
table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
</style>

<!-- Table goes in the document BODY -->

<table class="hovertable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td id="here">Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>

It renders a simple table that change its color on 'mouseover'. I want to "convert" it to JSF 2.0 code like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css"  />

    </h:head>

    <h:body>

        <h1>JSF 2.0 + Spring + Hibernate :)</h1>

        <h:dataTable value="#{cBean.getcBeanList()}" var="c"
                 styleClass="hovertable"
                 >
            <h:column>
                <f:facet name="header" id="h1">Info Header 1</f:facet>#{c.cBeanId}
            </h:column>

            <h:column>
                <f:facet name="header">Info Header 2</f:facet>#{c.name}
            </h:column>

            <h:column>
                <f:facet name="header">Info Header 3</f:facet>#{c.address}
            </h:column>

        </h:dataTable>

    </h:body>
</html>

but including onmouseover event.

In addition, cBean.getcBeanList() returns a List<Object>

Well, I think that's all, I hope you can help me.
Thanks in advance.

Upvotes: 1

Views: 2923

Answers (2)

BalusC
BalusC

Reputation: 1108782

If you don't care about IE6 users, just use :hover pseudoselector. Add the following to your CSS.

table.hovertable tbody tr:hover {
    background: #ffff66;
}

If you do care about them for some unobvious reasons, use JavaScript.

var trs = document.getElementById('dataTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
    trs[i].onmouseover = new Function("this.bgColor = '#ffff66'");
    trs[i].onmouseout = new Function("this.bgColor = '#d4e3e5'");
}

Call it during onload of the window or at end of the body. Note that the element ID dataTable in the Javascript has to be exactly the same as the generated HTML <table> ID of the <h:dataTable>.

<h:dataTable id="dataTable">

This is fancier possible with jQuery.hover() function, for the case you use jQuery.

$('.hovertable tbody tr').hover(
    function() { this.bgColor = '#ffff66'; },
    function() { this.bgColor = '#d4e3e5'; }
);

Upvotes: 3

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

The most easy way to get the functionality is to use RichFaces. The dataTable in RichFaces provide you with onRowMouseOver and other options. You can use it as:

<rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">

Otherwise you will have to cookup some javascript. Have a look at this forum thread: http://www.coderanch.com/t/212203/JSF/java/highlight-row-datatable-when-mouse (Refer to the response of Munish K Singh - 4th reply)

Upvotes: 0

Related Questions