4 Replies Latest reply on Nov 21, 2007 10:28 AM by Gregor Jarisch

    problems regarding a4j:support

    Gregor Jarisch Newbie

      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

        • 1. Re: problems regarding a4j:support
          Tomislav Tkal?evi? Novice

          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');"
          



          • 2. Re: problems regarding a4j:support
            Gregor Jarisch Newbie

            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

            • 3. Re: problems regarding a4j:support
              Ilya Shaikovsky Master

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

              • 4. How to add a parameter to the url
                Gregor Jarisch Newbie

                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