4 Replies Latest reply on Jun 8, 2007 9:43 AM by Tuncay Altun

    How do I make this simple example using a4j ?

    Tuncay Altun Newbie

      Hi,

      I hope some nice people can help a newbie like me on my first try to using a4j.

      I've read some resources about a4j without luck to make the below example to work.

      I hava following components that are candidates for ajax besides some other components. Please, give a full example with <a4j:region... etc. I'm first time user and don't understand <a4j:region etc. even I have read it.

      1. selectBooleanCheckbox
      Checking/Unchecking this selectbox should hide/show the below mentioned selectManyCheckbox component incl. it's outputlabel component.

      2. selectOneRadio
      Only if above selectBooleanCheckbox is unchecked(false) that means selectManyCheckbox component is shown. Depend on selection of a radiobutton ajax should load a new selectItems from backend to be rendered into below selectManyCheckbox component.

      3. selectManyCheckbox
      4.1 This should be hided/show depend on above selectBooleanCheckbox.
      4.2 Depend on this component(with it's outputLable component) is shown visually the above selectOneRadio should change the selectItem values on this component

      I will be very happy for the full example.


      //tua

        • 1. Re: How do I make this simple example using a4j ?
          Hannes Schulz Newbie

          maybe not what you wanted but if you take a look at the demos and the reference you should find what your looking for. you just have to adapt the code.

          demo:http://labs.jboss.com/jbossajax4jsf/demo/index.html
          reference: http://labs.jboss.com/file-access/default/members/jbossajax4jsf/freezone/docs/devguide/index.html

          regards

          • 2. Re: How do I make this simple example using a4j ?
            Tuncay Altun Newbie

            Hi, thanks for your suggestion, but I can't see any examples that match my requirements about hidding/show components etc.

            As I mentioned earlier, I need some newbie examples matching exactly my requirements before I get clever and get an idea about how a4j works.

            If possible, please, provide a code example of my requirements. I will be very :-))))

            Thanks

            //tua

            • 3. Re: How do I make this simple example using a4j ?
              Julien Martin Expert

              Hello Tuncay,

              Here is what I came up with FOR YOU:

              <%@page contentType="text/html"%>
              <%@page pageEncoding="UTF-8"%>
              
              <%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
              <%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
              <%@taglib prefix="a4j" uri="https://ajax4jsf.dev.java.net/ajax"%>
              
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
              
              <html>
               <head>
               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
               <title>Tests Tuncay</title>
               </head>
              
               <body>
               <f:view>
               <h:form>
              
               <h:selectBooleanCheckbox id="compOne" valueChangeListener="#{TuncayBean.compOneListener}" immediate="true">
               <a4j:support event="onchange" immediate="true" reRender="debug,inner,outer"/>
               </h:selectBooleanCheckbox>
              
               <h:outputText id="debug" value="#{TuncayBean.compThreeRendered}"/>
              
               <a4j:outputPanel id="outer">
               <a4j:outputPanel layout="none">
               <a4j:outputPanel id="inner" rendered="#{TuncayBean.compThreeRendered}">
               <h:selectManyCheckbox>
               <f:selectItem itemLabel="one" itemValue="one"/>
               <f:selectItem itemLabel="two" itemValue="two"/>
               <f:selectItem itemLabel="three" itemValue="three"/>
               </h:selectManyCheckbox>
               </a4j:outputPanel>
               </a4j:outputPanel>
               </a4j:outputPanel>
              
               </h:form>
               </f:view>
               </body>
              </html>
              
              


              
              /*
               * TuncayBean.java
               *
               * Created on June 8, 2007, 12:46 PM
               *
               * To change this template, choose Tools | Template Manager
               * and open the template in the editor.
               */
              
              package pack;
              
              import javax.faces.component.html.HtmlSelectBooleanCheckbox;
              import javax.faces.event.ValueChangeEvent;
              
              /**
               *
               * @author jumartin
               */
              public class TuncayBean {
              
               private boolean compThreeRendered;
              
               public void compOneListener(ValueChangeEvent evt){
               HtmlSelectBooleanCheckbox comp = (HtmlSelectBooleanCheckbox) evt.getSource();
               Boolean isChecked = (Boolean) comp.getValue();
               System.out.println(isChecked);
               if(isChecked){
               compThreeRendered = true;
               }else{
               compThreeRendered = false;
               }
               }
              
               public boolean isCompThreeRendered() {
               return compThreeRendered;
               }
              
               public void setCompThreeRendered(boolean compThreeRendered) {
               this.compThreeRendered = compThreeRendered;
               }
              
              
              
              }
              
              


              Try it. It works. Please let me know once you have got it working.

              Julien.

              • 4. Re: How do I make this simple example using a4j ?
                Tuncay Altun Newbie

                Hi Julien,

                PERFECT - PERFECT!!!

                Thank you very much for the example and for your spent time. A big gift for a newbie like me :-). It gave me a lot inspiration about ajax, just wondering how it works without a <a4j:region... tag , hmmm ?

                The example it self worked.

                1. After I extended the code by adding one more component "radioButton" and depend on radio button selection it should render/show different checkboxes loaded when selecting a radiobutton when checkboxes are visible. I can't get this work , see the code below?

                2. How can I send action parameters to the listeners ?

                My adapted code:
                -----------------------


                
                <h:selectOneRadio id="compTwo" value="#{priceForm.selectedProviderId}" valueChangeListener="#{priceForm.compTwoListener}" immediate="true">
                 <f:selectItems value="#{priceForm.selectProviders}"/>
                 <a4j:support event="onclick" immediate="true" reRender="checkboxes,debug2"/>
                 </h:selectOneRadio>
                
                 <h:selectBooleanCheckbox id="compOne" valueChangeListener="#{priceForm.compOneListener}" immediate="true">
                 <a4j:support event="onchange" immediate="true" reRender="debug,inner,outer,debug2"/>
                 </h:selectBooleanCheckbox>
                
                 <h:outputText id="debug" value="#{priceForm.compThreeRendered}"/>
                
                 <h:outputText id="debug2" value="#{priceForm.selectServices}"/>
                
                 <a4j:outputPanel id="outer">
                 <a4j:outputPanel layout="none">
                 <a4j:outputPanel id="inner" rendered="#{priceForm.compThreeRendered}">
                 <h:selectManyCheckbox id="checkboxes" value="#{priceForm.selectedServices}">
                 <f:selectItems value="#{priceForm.selectServices}" />
                 </h:selectManyCheckbox>
                 </a4j:outputPanel>
                 </a4j:outputPanel>
                 </a4j:outputPanel>