5 Replies Latest reply on Jan 23, 2012 2:19 AM by Vitaliy Pavlov

    How to create a dynamic Accordion in Richfaces?

    Ashish Agarwal Newbie

                     I want to create a dynamic accordion in richface. I want to connect it with beans so can create a list or array in beans or any other datasturcture to achive the above mentioned feature.

       

      My use case is like, I want to add a accordion Item on a click on a button

      Please help me

        • 1. Re: How to create a dynamic Accordion in Richfaces?
          Vitaliy Pavlov Novice

          Hi, Ashish

           

          That example be helpful for You:

           

          //--------------------------------------------------

          import java.io.Serializable;

          import java.util.List;

           

          public class Model implements Serializable{

           

              private String value1;

              private String value2;

           

              private List<Model> list;

           

              public Model(String value1, String value2) {

                  this.value1 = value1;

                  this.value2 = value2;

              }

           

              public String getValue1() {

                  return value1;

              }

           

              public void setValue1(String value1) {

                  this.value1 = value1;

              }

           

              public String getValue2() {

                  return value2;

              }

           

              public void setValue2(String value2) {

                  this.value2 = value2;

              }

           

              public List<Model> getList() {

                  return list;

              }

           

              public void setList(List<Model> list) {

                  this.list = list;

              }

          }

           

          //--------------------------------------------------

          import javax.faces.bean.ManagedBean;

          import javax.faces.bean.SessionScoped;

          import java.util.ArrayList;

          import java.util.List;

           

          @ManagedBean

          @SessionScoped

          public class MyBeen {

           

              private List<Model> list;

           

           

              public MyBeen() {

                  this.list = new ArrayList<Model>();

           

                  for (int i = 0; i < 5; i++) {

                      Model m = new Model(String.valueOf(i), String.valueOf(i));

                      this.list.add(m);

                  }

              }

           

              public List<Model> getList() {

                  return list;

              }

           

              public void setList(List<Model> list) {

                  this.list = list;

              }

          }

          //--------------------------------------------------

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml"

                xmlns:h="http://java.sun.com/jsf/html"

                xmlns:rich="http://richfaces.org/rich"

                xmlns:c="http://java.sun.com/jsp/jstl/core">

          <h:head>

           

          </h:head>

          <h:body>

           

              <h:form>

                  <rich:accordion switchType="ajax">

                      <c:forEach items="#{myBeen.list}" var="list">

                          <rich:accordionItem header="#{list.value1}">

                              #{list.value2}

                          </rich:accordionItem>

                      </c:forEach>

                  </rich:accordion>

              </h:form>

           

          </h:body>

          </html>

           

          Regards, Vitaliy

          • 2. Re: How to create a dynamic Accordion in Richfaces?
            Ashish Agarwal Newbie

            Dear Vitaliy,

            Thanks for the great help, the above code helped me a lot, I was able to take the code to next version, like On a click on a button was able to ADD a Accordion Item, but now my requirement has increased a bit, as at Every Accordion Item I want to show a Delete button which will delete the Accordion Item on click.

             

            Can you please help me.

            • 3. Re: How to create a dynamic Accordion in Richfaces?
              Vitaliy Pavlov Novice

              Hi, Ashish

               

              Add into file MyBeen next code:

               

                 public void deleteAction(ActionEvent event){

                     String index = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("index");

                     if (index!=null && index.length()>0){

                        list.remove(Integer.parseInt(index));

                     }

                  }

               

                  public void addAction(ActionEvent event) {

                     list.add(new Model(String.valueOf(list.size()), String.valueOf(list.size())));

                  }

               

               

              and change facelet:

               

              <h:form id="main">

                      <rich:accordion switchType="ajax" id="accord">

                          <c:forEach items="#{myBeen.list}" var="list" varStatus="stat">

                              <rich:accordionItem header="#{list.value1}">

                                  <a4j:commandButton value="delete" actionListener="#{myBeen.deleteAction}" render="accord" oncomplete="location.reload()">

                                      <a4j:param name="index" value="#{stat.index}"/>

                                  </a4j:commandButton>

                              </rich:accordionItem>

                          </c:forEach>

                      </rich:accordion>

                  </h:form>

               

                  <h:form>

                      <a4j:commandButton value="add" actionListener="#{myBeen.addAction}" render="accord" />

                  </h:form>

               

              I hope that could help.

               

              Regards, Vitaliy

              • 4. Re: How to create a dynamic Accordion in Richfaces?
                Ashish Agarwal Newbie

                Dear Vitaliy,

                 

                Thanks for the great help, it worked for me and helped me a lot.

                One Iusse that am not able to slove is I am getting one NULL POINTER ERROR.

                Steps of reproduction:- Delete all the Accordion Item, so while deleting the Last Accordion I am getting this error.

                One more way thorugh which am able to reproduce this error when am removing this for loop assuming that no accodion Item will exist at starting.

                 

                public MyBeen() {

                        this.list = new ArrayList<Model>();

                 

                        for (int i = 0; i < 5; i++) {

                            Model m = new Model(String.valueOf(i), String.valueOf(i));

                            this.list.add(m);

                        }

                    }

                Kindly help me, it will b e a big big help for me. Please HELP ME

                • 5. Re: How to create a dynamic Accordion in Richfaces?
                  Vitaliy Pavlov Novice

                  Hi, Ashish

                   

                  You may add the condition in rich:accordion:

                   

                  <rich:accordion switchType="ajax" id="accord" rendered="#{not empty myBeen.list}">

                   

                  Regards, Vitaliy