Search on (Filtering) child nodes of af:treeTable using viewCriteria in Oracle ADF (11g,12c)

Hello all
this post is about filtering treeTable on basis of child nodes in Oracle ADF
in this tutorial i have used Departments and Employees table of HR schema to create treeTable
see how to create treeTable-
http://www.awasthiashish.com/2012/11/tree-table-component-in-oracle.html
http://www.awasthiashish.com/2013/08/tree-table-component-with-declarative.html

treeTable look like this-

now next is to search on Employee Names

• i have dropped a input text for search string and a button to search on page , here i am searching on first name of employees 





• now created a view Criteria in Employee viewObject to search on first name





• This viewCriteria doesn't work directly on Employee viewObject, to search in treeTable we have to override createViewLinkAccessorRS method in Departments (master vo) VOImpl class, and in this method we have to call Employees ViewCriteria explicitly , this will filter Employee Vo Rowset as per bind-variable value when a node is disclosed at runtime



    /**
     * @param associationDefImpl
     * @param viewObjectImpl
     * @param row
     * @param object
     * @return
     */
    protected ViewRowSetImpl createViewLinkAccessorRS(AssociationDefImpl associationDefImpl,
                                                      ViewObjectImpl viewObjectImpl, Row row, Object[] object) {


        ViewRowSetImpl viewRowSetImpl = super.createViewLinkAccessorRS(associationDefImpl, viewObjectImpl, row, object);

        String firstName = getFirstNm();
        ViewCriteriaManager vcm = viewObjectImpl.getViewCriteriaManager();
        ViewCriteria vc = vcm.getViewCriteria("EmployeesVOCriteria");
        VariableValueManager vvm = vc.ensureVariableManager();
        vvm.setVariableValue("BindFirstNm", firstName);
        viewObjectImpl.applyViewCriteria(vc);
        return viewRowSetImpl;


        // return super.createViewLinkAccessorRS(associationDefImpl, viewObjectImpl, row, object);
    }



• to pass bind-variable value i have created a variable and it's accessors in VoImpl and exposed set method to client that is further used by managed bean



    private String firstNm;
    public void setFirstNm(String firstNm) {
        this.firstNm = firstNm;
    }

    public String getFirstNm() {
        return firstNm;
    }



• now this setter method is called in managed bean search button action to set bind variable value



    /**Method to search in treeTable childs
     * @param actionEvent
     */
    public void searchAction(ActionEvent actionEvent) {
        if (firstNmBind.getValue() != null) {
            OperationBinding ob = executeOperation("setFirstNm");
            // firstNmBind is binding of inputText
            ob.getParamsMap().put("firstNm", firstNmBind.getValue().toString());
            ob.execute();
            /* Method Expand treeTable after Search see- 
             http://www.awasthiashish.com/2013/10/expand-and-collapse-aftreetable.html*/
            expandTreeTable();
            AdfFacesContext.getCurrentInstance().addPartialTarget(treeTabBind);

        }
    }



• Run your application and see-
  
  Cheers- Happy Learning
  Download Sample ADF Application

Populate af:treeTable programatically using POJO in Oracle ADF (11g & 12c)

Hello All
This post is about creating & populating af:treeTable programmatically in ADF 11g and 12c
treeTable is basically a hierarchical representation of data, using ADF model layer we can create treeTable very easily by defining master-detail relation between viewObjects
see my previous posts on treeTable-
Tree Table Component in Oracle ADF(Hierarchical Representation)
Tree Table Component with declarative presentation in ADF, Access childs without custom selection listener
Expand and Collapse an af:treeTable programmatically in ADF Faces (Oracle ADF)
Refreshing Child Nodes of an af:treeTable / af:tree in Oracle ADF



to populate treeTable programmatically we need to configure data set that fits to tree hierarchy
thanks to Chris Muir's post about programmatic creation of treeTable
http://one-size-doesnt-fit-all.blogspot.in/2007/05/back-to-programming-programmatic-adf.html

there is 4-5 simple steps to do-

• Create a fusion web application and drop a af:treeTable on page , in treeTable creation wizard select "bind later" 





• now create managed bean to populate data in treeTable, create a simple List in managed bean of type POJO class (a java class that contains attributes and their accessor  )
• so in this app i am going to Tv Serial and respective character names in treeTable, for that i have created a class that contains POJO for treeTable



import java.util.ArrayList;
import java.util.List;


public class Seasons {
    public Seasons(String name) {
        this.name = name; // To Store Header Values (Storing Seasons Name :))
        characters = new ArrayList<Seasons>(); // To Store Detail Values (Storing Season's Charatcers)
    }

    public void setCharacters(List<Seasons> empDet) {
        this.characters = empDet;
    }

    public List<Seasons> getCharacters() {
        return characters;
    }
    private String name;
    private List<Seasons> characters;


    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }
// This methods directly add characters value in list
    public void addEmp(Seasons employee) {
        characters.add(employee);
    }

}



• In this class the characters list behaves as child of seasons, so in managed bean define a top-level list (that contains both master and detail) and add values

See managed Bean Code-


import java.util.ArrayList;
import java.util.List;

import org.apache.myfaces.trinidad.model.ChildPropertyTreeModel;

public class ProgrammaticTreeTabBean {
    List<Seasons> seasonList = new ArrayList<Seasons>();

    ChildPropertyTreeModel charatcerVal;

    public ProgrammaticTreeTabBean() {
        super();
        // Creating tree for Seasons and Characters details
        // Adding Master Values (seasons)
        Seasons season1 = new Seasons("Game of Thrones");
       // Adding Detail Values (Child Node-Characters)
        Seasons character = new Seasons("Tywin Lannister");
        season1.addCharaters(character);
        character = new Seasons("Tyrion Lannister");
        season1.addCharaters(character);
        character = new Seasons("Jaime Lannister");
        season1.addCharaters(character);
        character = new Seasons("Cersie Lannister");
        season1.addCharaters(character);
        character = new Seasons("Ned Stark");
        season1.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season2 = new Seasons("Arrow");
        // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Oliver Queen");
        season2.addCharaters(character);
        character = new Seasons("Moira Queen");
        season2.addCharaters(character);
        character = new Seasons("Laurel Lance");
        season2.addCharaters(character);
        character = new Seasons("Sara Lance");
        season2.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season3 = new Seasons("Vikings");
      // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Ragnar Lothrak");
        season3.addCharaters(character);

        // Adding all list to topList
        seasonList.add(season1);
        seasonList.add(season2);
        seasonList.add(season3);
        // Filtering Child Data, ChildPropertyTreeModel creates a TreeModel from a List of beans, see
        // https://myfaces.apache.org/trinidad/trinidad-api/apidocs/org/apache/myfaces/trinidad/model/ChildPropertyTreeModel.html
        charatcerVal = new ChildPropertyTreeModel(seasonList, "characters");
    }

    public ChildPropertyTreeModel getCharatcerVal() {
        return charatcerVal;
    }
}



• Now code part is complete, now configure your treeTable to show data, see XML source of af:treeTable



<af:treeTable rowBandingInterval="0" id="tt1"
                              value="#{pageFlowScope.ProgrammaticTreeTabBean.charatcerVal}" var="node"
                              rowSelection="single" initiallyExpanded="true">
                    <f:facet name="nodeStamp">
                        <af:column headerText="Node Stamp" id="c1" width="250">
                            <af:outputText value="#{node.name}" id="ot1" inlineStyle="font-weight:bold;"/>
                        </af:column>
                    </f:facet>
                </af:treeTable>



• Now run your application and check , what you have done ;)

Happy Learning :) Sample ADF Application (12.1.3)

Using af:deck component to animate content in ADF 12c(12.1.3)

Hello all,
af:deck is new component introduced in ADF 12.1.3, see more detail on Oracle Docs
af:deck-Tag Referance
http://docs.oracle.com/middleware/1213/adf/tag-reference-faces/tagdoc/af_deck.html
ADF Faces Demo Server (deck demo)

As per oracle docs-
The deck component is a container that shows one child component at a time. When changing which child is displayed, the transition can be animated.
This component does not provide any built-in controls for choosing which child is displayed. Instead, you use some other component to control it. For example, you might use an external navigationPane tab bar or perhaps some external commandImageLinks to represent page progress dots. You are not limited to external controls, your deck might be displaying a series of images and you may want to put a link around each image to trigger advancing to the next image. In all of these cases, you will need to use an event handler function to change the displayed child.

So in this post i am going to show - how to use af:deck component with some animation effect?
in this post i am using 6 images to display on 6 different links

• so designed page like this, inside deck there is 6 images, and there are 6 image links outside deck , each link is associated with managed bean actionListener 



<af:panelGroupLayout id="pgl4" layout="horizontal" halign="center">
          <af:link id="l1" icon="#{resource['images:circle-lblue.png']}"
                   actionListener="#{viewScope.DynamicDeckBean.link1Action}" partialSubmit="true"/>
          <af:link id="l2" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link2Action}"/>
          <af:link id="l3" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link3Action}"/>
          <af:link id="l4" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link4Action}"/>
          <af:link id="l5" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link5Action}"/>
          <af:link id="l6" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link6Action}"/>
        </af:panelGroupLayout>

• created binding for deck in managed bean , and added af:transition for back and forward animation for images



<af:deck id="d1" displayedChild="i1" binding="#{viewScope.DynamicDeckBean.deckBind}">
          <af:transition triggerType="forwardNavigate" transition="flipLeft"/>
          <af:transition transition="flipRight" triggerType="backNavigate"/>
          <af:image source="#{resource['images:1.jpg']}" shortDesc="Wild Life 1" id="i1"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:2.jpg']}" shortDesc="Wild Life2" id="i2"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:3.jpg']}" shortDesc="Wild Life3" id="i3"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:4.jpg']}" shortDesc="Wild Life4" id="i4"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:5.jpg']}" shortDesc="Wild Life5" id="i5"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:6.jpg']}" shortDesc="Wild Life6" id="i6"
                    inlineStyle="height:300px;width:500px;"/>
        </af:deck>



• Now page looks like this





• Refer the above links- there is a method to animate deck's child , i have used same method

See managed bean code for links and to animate deck child


    // Animate the display of a deck child.
    private void _animateDeckDisplayedChild(UIComponent eventComponent, int newDisplayedChildIndex) {
        // Find the nearest deck ancestor:
        RichDeck deck = null;
        String eventComponentId = eventComponent.getId();
        while (deck == null) {
            if (eventComponent == null) {
                System.err.println("Unable to locate a deck ancestor from id " + eventComponentId);
                return;
            } else if (eventComponent instanceof RichDeck) {
                deck = (RichDeck) eventComponent;
                break;
            }
            eventComponent = eventComponent.getParent();
        }
        System.out.println("Child is-" + eventComponent.getId());
        String newDisplayedChild = deck.getChildren().get(newDisplayedChildIndex).getId();

        // Update the displayedChild:
        System.out.println("Display Child-" + newDisplayedChild);
        deck.setDisplayedChild(newDisplayedChild);

        // Add this component as a partial target:
        RequestContext.getCurrentInstance().addPartialTarget(deck);
    }


Code to change image and calling method to animate, here 0,1,2 are index no. of deck's children



/**Methods to be called on different links to show different images*/
    public void link1Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 0);// 0 for first child of deck
    }
    public void link2Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 1);// 1 for second child of deck
    }
    public void link3Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 2);
    }
    public void link4Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 3);
    }
    public void link5Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 4);
    }
    public void link6Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 5);
    }



• Now run application and click on links :) see how deck works

See live -how af:deck works

So Happy Learning Sample ADF Application