problems regarding a4j:support
amoun Nov 20, 2007 7:23 AMhello,
I'm currently trying to establish a simple mouse-over menu to my project. So far it works except three things:
1. the param "id" isn't updated in the url if the onclick event occurs.
2. the mouse-over effect reacts much to slowly.
3. the image should change after the onclick event occurs but it changes not till then a couple of onclick events occur.
Here you can watch the above mentioned problems: http://www2.jarisch.net
menu code of the jsf page:
<table cellpadding="0" cellspacing="0" border="0" class="menu_table"> <tr> <td> <a4j:commandLink> <h:graphicImage id="home" url="#{Menu.home}" styleClass="menu_items"> <a4j:support event="onclick" actionListener="#{Menu.changeMenuItemUrl}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseover" actionListener="#{Menu.onMouseOver}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseout" actionListener="#{Menu.onMouseOut}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> </h:graphicImage> <f:param name="id" value="home" /> </a4j:commandLink> </td> <td> <a4j:commandLink> <h:graphicImage id="personal" url="#{Menu.personal}" styleClass="menu_items"> <a4j:support event="onclick" actionListener="#{Menu.changeMenuItemUrl}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseover" actionListener="#{Menu.onMouseOver}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseout" actionListener="#{Menu.onMouseOut}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> </h:graphicImage> <f:param name="id" value="personal" /> </a4j:commandLink> </td> <td> <a4j:commandLink> <h:graphicImage id="basketball" url="#{Menu.basketball}" styleClass="menu_items"> <a4j:support event="onclick" actionListener="#{Menu.changeMenuItemUrl}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseover" actionListener="#{Menu.onMouseOver}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseout" actionListener="#{Menu.onMouseOut}" reRender="home, personal, basketball, development, contact, magic, menuItemName, menuItemName" requestDelay="100" /> </h:graphicImage> <f:param name="id" value="basketball" /> </a4j:commandLink> </td> <td> <a4j:commandLink> <h:graphicImage id="development" url="#{Menu.development}" styleClass="menu_items"> <a4j:support event="onclick" actionListener="#{Menu.changeMenuItemUrl}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseover" actionListener="#{Menu.onMouseOver}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseout" actionListener="#{Menu.onMouseOut}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> </h:graphicImage> <f:param name="id" value="development" /> </a4j:commandLink> </td> <td> <a4j:commandLink> <h:graphicImage id="contact" url="#{Menu.contact}" styleClass="menu_items"> <a4j:support event="onclick" actionListener="#{Menu.changeMenuItemUrl}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseover" actionListener="#{Menu.onMouseOver}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseout" actionListener="#{Menu.onMouseOut}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> </h:graphicImage> <f:param name="id" value="contact" /> </a4j:commandLink> </td> <td> <a4j:commandLink> <h:graphicImage id="magic" url="#{Menu.magic}" styleClass="menu_items"> <a4j:support event="onclick" actionListener="#{Menu.toggleMainColor}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseover" actionListener="#{Menu.onMouseOver}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> <a4j:support event="onmouseout" actionListener="#{Menu.onMouseOut}" reRender="home, personal, basketball, development, contact, magic, menuItemName" requestDelay="100" /> </h:graphicImage> </a4j:commandLink> </td> </tr> </table>
code of the MenuBean:
public class MenuBean { private final String HOME = "../images/menu/Menu_Home"; private final String PERSONAL = "../images/menu/Menu_Personal"; private final String BASKETBALL = "../images/menu/Menu_Basketball"; private final String DEVELOPMENT = "../images/menu/Menu_Development"; private final String CONTACT = "../images/menu/Menu_Contact"; private final String MAGIC = "../images/menu/Menu_Colorchange"; private Hashtable<String, MenuItem> menuItems = new Hashtable<String, MenuItem>(); private MenuItem home = new MenuItem("home", HOME, BLACK); private MenuItem personal = new MenuItem("personal", PERSONAL, BLACK); private MenuItem basketball = new MenuItem("basketball", BASKETBALL, BLACK); private MenuItem development = new MenuItem("development", DEVELOPMENT, BLACK); private MenuItem contact = new MenuItem("contact", CONTACT, BLACK); private MenuItem magic = new MenuItem("magic", MAGIC, BLACK); private MenuItem selectedMenuItem = home; private MenuItem onMouseOverMenuItem; public MenuBean() { home.setSelected(true); menuItems.put("home", home); menuItems.put("personal", personal); menuItems.put("basketball", basketball); menuItems.put("development", development); menuItems.put("contact", contact); menuItems.put("magic", magic); } public String getHome() { return home.getUrl(); } public String getPersonal() { return personal.getUrl(); } public String getBasketball() { return basketball.getUrl(); } public String getDevelopment() { return development.getUrl(); } public String getContact() { return contact.getUrl(); } public String getMagic() { return magic.getUrl(); } public String getMenuItemName() { if(onMouseOverMenuItem != null) return onMouseOverMenuItem.getName(); else return selectedMenuItem.getName(); } public void changeMenuItemUrl(ActionEvent event) { String id = event.getComponent().getParent().getId(); selectedMenuItem.setSelected(false); MenuItem item = menuItems.get(id); if(item != null) { item.setSelected(true); selectedMenuItem = item; } } public void onMouseOver(ActionEvent event) { String id = event.getComponent().getParent().getId(); if(onMouseOverMenuItem != null) onMouseOverMenuItem.setOnMouseOver(false); MenuItem item = menuItems.get(id); if(item != null) { item.setOnMouseOver(true); onMouseOverMenuItem = item; } } public void toggleMainColor(ActionEvent event) { home.invertColor(); personal.invertColor(); basketball.invertColor(); development.invertColor(); contact.invertColor(); magic.invertColor(); } public void onMouseOut(ActionEvent event) { onMouseOverMenuItem.setOnMouseOver(false); onMouseOverMenuItem = null; } }
thanks for any help.
- Gregor