Switche the componenets between list of components in ADF

Switcher component is used to switch the components between the list of two or more components.

For example i have 2 Graphs(Bar Graph and Pie Chart) and i want to switch between the two graphs.

I have drop down with the with two options 1) Bar Graph 2) Pie Chart

By default Bar graph is shown, and when the user selects Pie chart, the corresponding chart will be shown.

First create drop down with the with two options, Bar Graph and Pie Chart

 <af:selectOneChoice label="Choose Graph" id="soc1"
                        binding="#{HeadersTableTaskFlowBean.chooseChart}"
                        autoSubmit="true">
      <af:selectItem label="Bar Graph" value="BarGraph"
                     id="si2"/>
      <af:selectItem label="Pie Chart" value="PieChart" id="si1"/>
    </af:selectOneChoice>


1) Add one Switcher component into the fragment, and insert two facet(f : facet) inside the Switcher, name each with the proper names.

2) Insert panelBox into the each facet. drag and drop the VO from the data control and create bar graph into the 1st panel box, and drag and drop the VO, create the pie chart into another panelBox.
    The Structure of the fragment looks like below image.

3) Go to the property inspector and select the DefaultFacet from the Drop down as shown in the below image.

4) Add Bindings to the Switcher components , it will create setter and getter methods in the managed bean, so that we can change the default Facet dynamically.

the below code gets create in the managed bean

  private UIXSwitcher graphSwitcher;

    public void setGraphSwitcher(UIXSwitcher graphSwitcher) {
        this.graphSwitcher = graphSwitcher;
    }

    public UIXSwitcher getGraphSwitcher() {
        return graphSwitcher;
    }

 

4) Add valueChangeListener to the selectOneChoice, in the same managed bean.

 <af:selectOneChoice label="Choose Graph" id="soc1"
                        binding="#{HeadersTableTaskFlowBean.chooseChart}"
                        autoSubmit="true"
                        valueChangeListener="#{HeadersTableTaskFlowBean.changeGraphs}">

 changeGraphs is the method created in the managed bean.  In the valueChangeListener method get the new value from the drop down, set the defaultfacet and Facetname, and add the partial triggers.
 
 Below is the code 

 public void changeGraphs(ValueChangeEvent graph) {
        // Add event code here...
        String str = (String)graph.getNewValue();
        this.graphSwitcher.setDefaultFacet(str);
        this.graphSwitcher.setFacetName(str);
        AdfFacesContext ctx = AdfFacesContext.getCurrentInstance();
        ctx.addPartialTarget(graphSwitcher);      
    }

By default it will show the bar graph, as we have choosen the defaultFacet as BarGraph

And when we select the pie Chart from the drop down, it will show the pie chart.