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

    How do I make this simple example using a4j ?

    tuncay
    tuncay Jun 8, 2007 6:25 AM

      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

      • 5739 Views
      • Tags:
        • 1. Re: How do I make this simple example using a4j ?
          hasc
          hasc Jun 8, 2007 7:06 AM (in response to tuncay)

          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

            • Actions
          • 2. Re: How do I make this simple example using a4j ?
            tuncay
            tuncay Jun 8, 2007 8:03 AM (in response to tuncay)

            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

              • Actions
            • 3. Re: How do I make this simple example using a4j ?
              balteo
              balteo Jun 8, 2007 8:11 AM (in response to tuncay)

              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.

                • Actions
              • 4. Re: How do I make this simple example using a4j ?
                tuncay
                tuncay Jun 8, 2007 9:43 AM (in response to tuncay)

                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>


                  • Actions