In html/JSF - How to make any component respond to clicks?

Question

Hi,

I've replaced the content of this question since I didn't think the previous one was formulated right.

I would like to know how to make a JSF/RichFaces component handle events like mouse click/hover etc...

The goal is to create nice big buttons that respond to mouse hover and mouse click.

Thank you!!

Answer 1

Ben, You might have seen this already but there's no harm in mentioning it again, just in case.

There is a working demo of most faces components in action at this URL. You can click on Basic Controls, see how different Layouts look and feel before picking the right components to for your application. You will be able to see the source code of the JSF tag, when you click on the View Source button.

Answer 2

All (visual) components have attributes such as onclick, onmouseover, onmouseout, onfocus, etc. that allow you to run Javascript code when a specific event is fired. For example:

<h:inputText ... onclick="alert('Click');"/>

will display a "Click" message when the user clicks in the input field.

Regarding your requirements, you can try something like that:

<h:commandButton ... styleClass="aCssClass" onmouseover="this.className='anotherCssClass'" onmouseout="this.className='aCssClass'"/>

In others words, the button will be displayed regarding the CSS class aCssClass, and when the cursor is entering the button, it will use the anotherCssClass class. Of course, you can also define a CSS class for the onclick event...

Just for information: If you want to execute an Ajax call to your server regarding a specific event, which may not be what you are looking for exactly, you can use the <a4j:support/> tag:

<h:inputText ...>
    <a4j:support event="onclick" actionListener="#{myBean.doSomething}"/>
</h:inputText>