problems regarding a4j:support

[amoun]

hello,

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

[tkalactomo]

Why dont you use javascript for your image replacing...

function replaceImages(element,original,replaceWith){
var button=document.getElementById(element);
var path = button.src;
path = path.replace(original,replaceWith);
button.src=path;
}

onmouseover="replaceImages('form:img1','img1small.png','img1big.png');"
onmouseout="replaceImages('form:img1','img1big.png','img1small.png');"

[amoun]

well, i think i kept too much focus on using ajax in my application instead of solving it simply...

So far thanks for the advice, it solves my mouse-over as well as my onclick problem.

Unfortunately, I still can't figure out, how to add a parameter to the url as a get value...

thanks for any suggestions..

- Gregor

[ilya_shaikovsky]

At first - you should not place support to a4j:command* and other action components.

[amoun]

I'm not doing this anymore.

the current version looks like this:

<table cellpadding="0" cellspacing="0" border="0" class="menu_table">
 <tr>
 <td>
 <a4j:commandLink id="lnkHome"
 onmouseover="#{Menu.homeOnMouseOver}"
 onmouseout="#{Menu.homeOnMouseOut}"
 actionListener="#{Menu.changeMenuItemUrl}"
 reRender="lnkHome, lnkPersonal, lnkBasketball, lnkDevelopment, lnkContact, lnkMagic">
 <h:graphicImage id="home" url="#{Menu.home}" styleClass="menu_items" />
 <f:param name="id" value="home" />
 </a4j:commandLink>
 </td>
 <td>
 <a4j:commandLink id="lnkPersonal"
 onmouseover="#{Menu.personalOnMouseOver}"
 onmouseout="#{Menu.personalOnMouseOut}"
 actionListener="#{Menu.changeMenuItemUrl}"
 reRender="lnkHome, lnkPersonal, lnkBasketball, lnkDevelopment, lnkContact, lnkMagic">
 <h:graphicImage id="personal" url="#{Menu.personal}" styleClass="menu_items" />
 <f:param name="id" value="personal" />
 </a4j:commandLink>
 </td>
 <td>
 <a4j:commandLink id="lnkBasketball"
 onmouseover="#{Menu.basketballOnMouseOver}"
 onmouseout="#{Menu.basketballOnMouseOut}"
 actionListener="#{Menu.changeMenuItemUrl}"
 reRender="lnkHome, lnkPersonal, lnkBasketball, lnkDevelopment, lnkContact, lnkMagic">
 <h:graphicImage id="basketball" url="#{Menu.basketball}" styleClass="menu_items" />
 <f:param name="id" value="basketball" />
 </a4j:commandLink>
 </td>
 <td>
 <a4j:commandLink id="lnkDevelopment"
 onmouseover="#{Menu.developmentOnMouseOver}"
 onmouseout="#{Menu.developmentOnMouseOut}"
 actionListener="#{Menu.changeMenuItemUrl}"
 reRender="lnkHome, lnkPersonal, lnkBasketball, lnkDevelopment, lnkContact, lnkMagic">
 <h:graphicImage id="development" url="#{Menu.development}" styleClass="menu_items" />
 <f:param name="id" value="development" />
 </a4j:commandLink>
 </td>
 <td>
 <a4j:commandLink id="lnkContact"
 onmouseover="#{Menu.contactOnMouseOver}"
 onmouseout="#{Menu.contactOnMouseOut}"
 actionListener="#{Menu.changeMenuItemUrl}"
 reRender="lnkHome, lnkPersonal, lnkBasketball, lnkDevelopment, lnkContact, lnkMagic">
 <h:graphicImage id="contact" url="#{Menu.contact}" styleClass="menu_items" />
 <f:param name="id" value="contact" />
 </a4j:commandLink>
 </td>
 <td>
 <a4j:commandLink id="lnkMagic"
 onmouseover="#{Menu.magicOnMouseOver}"
 onmouseout="#{Menu.magicOnMouseOut}"
 actionListener="#{Menu.toggleMainColor}"
 reRender="lnkHome, lnkPersonal, lnkBasketball, lnkDevelopment, lnkContact, lnkMagic">
 <h:graphicImage id="magic" url="#{Menu.magic}" styleClass="menu_items" />
 </a4j:commandLink>
 </td>
 </tr>
</table>

But I have still the same problem. How do i put the param 'id' to the url as a get parameter after the onclick event occurs???

- Gregor