Learning XPages Part 29 : Giving The Tables Some Feedback
Tags : Lotus Domino XPages Table CSS DoJo
Bookmark :
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.
Bookmark :
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.
Comments