Explaining the af:scrollComponentIntoViewBehaviour

So, this af:scrollComponentIntoViewBehaviour is a new component which I have came across recently. These days, we are seeing many basic websites which have all the content in one page like Home, About Us, Contact Us... etc and when you click on the links to them, they just scroll to that section.

Even if you open a blogger site, all the content is there in one page, and when you click on post titles, it scrolls to that post and opens it.

We can implement this using ADF too.

In this post, I will explain how to achieve this.

1. Here I prepared 3-4 posts which has very lengthy content so that, we need to scroll to see the other post.
And I have 4 buttons, just to take to these posts.

Do not worry about the component, that is some junk.

2. Now the expectation is when I click on Post 2, it should scroll to Post 2, and when I click on Post 3 button it should scroll to Post 3 just like below.

3. This doesn't require any code, we just need to use af:scrollComponentIntoViewBehaviour on all the buttons.

4. The properties for the component are also pretty simple.

The properties for af:scrollComponentIntoViewBehaviour under Post 2 button would look like below:

Yes, you have seen it right. Just the component Id of the second post. In this case, Id of the panel box 2, pb2.

That's it!! :)

Implementing drag and drop in an ADF tree

When you work on trees and need some fancy stuff on the UI, drag and drop feature in ADF is really cool. If you have the kind of requirements like add from one table/tree to other, copy from one table/tree to other, you can go for this.

In this post, I ll explain a basic example of implementing drag and drop in trees. The usecase is simple, where in the user wants to move an employee from one department to another department.

1. Have two EO's for Employees and Departments, create VO's based on them. Construct two trees on the UI side by side based on the VO's.

Let's consider the left tree as Source and the right one as Destination.

2. So, here to implement drag and drop, We need af:dragSource and af:collectionDropTarget.

Add af:dragSource to the left af:tree and af:collectionDrop target to the right af:tree like below.

3. The properties of af:dragSource are like below

Action is MOVE here because, we are moving from one department to another.
We can used COPY when there is some requirement like, adding employees to favourites section etc, where you don't delete from the source. Use of Discriminant property will be shown in the next step.

4. The properties of af:collectionDropTarget are like below

The Discriminant in the dragSource and ModelName in the collectionDropTarget should be same.
We need a dropListener to write the logic to update the department id of the dragged employee.

5. Going into implementation, we can add some validations like below:

• Department should not be dragged.
• Should not be dropped on Employee
• Employee should not be dropped on to the same department.

Code for the dropListener looks like below.

    public DnDAction dragDropListener(DropEvent dropEvent) {

        RichTree dragTree = (RichTree)dropEvent.getDragComponent();

        RichTree dropTree = (RichTree)dropEvent.getDropComponent();

        String dragNodeVO = null;

        Transferable t = dropEvent.getTransferable();

        DataFlavor<RowKeySet> df =

            DataFlavor.getDataFlavor(RowKeySet.class, "rowMove");

        RowKeySet rks = t.getData(df);

        Iterator iter = rks.iterator();

        Object dragCurrentRowKey = dragTree.getRowKey();

        Row dragRow = null;

        if (iter.hasNext()) {

            List key = (List)iter.next();

            dragTree.setRowKey(key);

            JUCtrlHierNodeBinding rowBinding =

                (JUCtrlHierNodeBinding)dragTree.getRowData();

            dragRow = rowBinding.getRow();

            dragNodeVO = dragRow.getStructureDef().getDefName();

            if (!("EmployeesView".equalsIgnoreCase(dragNodeVO))) {

                FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, null, "Drag and Drop an employee to move from department to department.");

                FacesContext.getCurrentInstance().addMessage(null, msg);

                return DnDAction.NONE;

            }

        }

        Object currentRowKey = dropTree.getRowKey();

        List dropRowKey = (List)dropEvent.getDropSite();

        if (dropRowKey == null) {

            return DnDAction.NONE;

        }

        dropTree.setRowKey(dropRowKey);

        JUCtrlHierNodeBinding dropNode =

            (JUCtrlHierNodeBinding)dropTree.getRowData();

        Row dropRow = dropNode.getRow();

        String dropNodeVO = dropRow.getStructureDef().getDefName();

        if ("DepartmentsView".equalsIgnoreCase(dropNodeVO)) {

            Long deptId = (Long)dropRow.getAttribute("DepartmentId");

            Long oldDeptId = (Long)dragRow.getAttribute("DepartmentId");

            if (oldDeptId != deptId) {

                dragRow.setAttribute("DepartmentId", deptId);

                executeOperation("Commit");

            } else {

                FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_ERROR, null, "Drop an employee on to a different department, he is already from this department.");

                FacesContext.getCurrentInstance().addMessage(null, msg);

                return DnDAction.NONE;

            }

        } else {

            FacesMessage msg =

                new FacesMessage(FacesMessage.SEVERITY_ERROR, null, "Drop an employee on to a department to move from department to department.");

            FacesContext.getCurrentInstance().addMessage(null, msg);

            return DnDAction.NONE;

        }

        dropTree.setRowKey(currentRowKey);

        dragTree.setRowKey(dragCurrentRowKey);

        AdfFacesContext.getCurrentInstance().addPartialTarget(dragTree);

        AdfFacesContext.getCurrentInstance().addPartialTarget(dropTree);

        return DnDAction.MOVE;

    }

Here the important points to understand is, we need to get the dragComponent binding and the dropComponent binding (in this case RichTree) from the dropEvent.

DataFlavour is RowKeySet, as we are working with rows, in af:collectionDropTarget, RowKeySet DataFlavour is assumed by default. But, If u you use af:dropTarget, it specifcally asks for the DataFlavour.

Common errors, you would get are like tree might not be refreshing, after the drag and drop tree is not in stable state etc. That would be because, drag and drop disturbs the state of the tree. So, as shown in the above code, before starting with the logic, get the row keys of both the drag and drop trees and set them back at the end of the code.

This way, you can give your customer/ end user good fancy features in the ADF application.

Implementing Search in an ADF tree

When you are working on trees in ADF, sometimes we get some requirement like performing a search in the tree.

In this post, I will explain the search implementation in the tree constructed on Departments and Employees.
Here, I implemented the search on employee first name.

As you can see in the above screenshot, The user searched for Employee name containing "n". In the below panel, Only the departments which have employees containing "n" are disclosed. And the matching results are highlighted in green and bold for easy identification.

Implementing search in a tree is not as easy as implementing in a table. This post explains the steps briefly.

1. Constructing a tree is direct simple way. Have a DepartmentVO and an EmployeeVO and a view link for the relationship between them. Drop the DepartmentVO as an ADF tree in the UI. In the tree level rules, add the EmployeeVO and click Ok.

2. On search, add an actionListener. The code shown below:

Here, we call a method recursiveSearch() which return matching rowKeySet. Implementation will follow up next. And we are maintaining the employees list to show the green coloring in UI. Process will be shown later in the post. And a method buildDisclosedRowSet(:p,:p) and then set the disclosedRowKeys to open the department tree nodes having the matching results. And then refresh the tree.

3. recursiveSearch() method

We are iterating through the tree starting from the root node. (which will have all departments, every tree will have this by default) and if it is an employee row, we are checking for the matching results and return the complete list.

4. buildDisclosedRowSet() method

Here we are preparing the disclosedRowSet to setDisclosedRowKeys for the tree. This is done by constructing the path (by getting parents till root) as shown above.

5. Green color in the UI.

Bind the inline style property of the outputText in UI to bean as shown below.

In the getter of this String inlineStyleForNode, write the below code.

The employees list prepared in the action event is used here to compare with the outputText value.

If it matches, we color in green.

Hope this helps :)