Our application is really starting to come
together but there are a couple of areas I’d like to clean up to make the
application more usable by the end users. Currently when the list of names
or locations are rendered to the web browser there is no easy way for the
end user to know that they can click on a name to bring you to the person
details page. It just looks like a plain table.
The quick way to resolve this is to
add some CSS to our custom.css file that looks like this :
#phonebook tr:hover, .phonebook tr:hover
{
background-color:orange;
color:#FFFFFF;
cursor:pointer;
}
This CSS will turn the entire row to
an orange background color, change the text color to white and change the
mouse pointer into a hand, just as if you were pointing at a link. The
user now has a visual clue that they can click on a name in the table and
that something will happen.
If your users are using FireFox, or
Chrome, or Opera or even Internet Explorer 8 as their web browser then
this works perfectly and you can stop reading.
If your users are using Internet Explorer
6 or Internet Explorer 7 then it does not work as those browsers don’t
recognize the CSS Selector of :hover on anything but a link. There is,
however a way around it by using JavaScript and DoJo to replace the table
rows style class as you move the mouse in and out of the row.
Lets start by adding the CSS above to
our custom.css file but change the :hover to .over.
Open your content_location custom control
again and switch to the source view and find your table row that appears
inside the repeat control and click on it. We then need to switch to the
events tab in the section below and lets start with the onMouseOver event.
Make sure you switch to the ‘client’ tab and enter in the following code
:
Lets explain this code. The first part
of dojo.addClass is the dojo function that we are calling, it takes two
parameters, the node ID of the element it is going to change and the CSS
class name that it will add to the class= line for that node, in our case
we are adding the ‘over’ class name to the node as that is what we have
in our CSS.
the other part of the code is an XPages
feature and this is where the power really comes into play. anything wrapped
in the #{} is interperated by the XPages runtime before being sent to the
browser, even, as it is in this case, if it’s inside a bit of javascript
code. the id:trow is converted by XPages into the current element ID. In
this case ‘trow’ is the ID that we assigned to our table row so that we
could attach the onClick event ( and now this event ) to. but if you look
at the source of a rendered XPage you’ll see the name it is using is along
the lines of this :
We don’t know what all that extra prefixes
to the ID are set to until the page is rendered to the web browser but
the #{id:trow} will be replaced during runtime with the correct ID.
For the onMouseOut event we will remove
the ‘over’ class using this code :
Now save and preview your webpage and
as you pass your mouse up and down the table the row background color will
change and the mouse will turn into a pointer.
You can go ahead and apply the exact
same code to the homepage table if you want.
Dec's Dom Blog 