Solution to Inline af:message inside a table/iterator in Jdev11g not working

Recently I had an issue while using the af:message component for the inline faces messages on the UI instead of the default message popup.

The normal use of this af:message component is to drop it next to the inputtext or any input component for which you need the inline faces message and set the for property to input component id.

For me this input text was inside an iterator and it's not working in the conventional way.

Let me take up an example and show you.

Usual way : 

1. The structure of the jspx page is like below.

2. I am expecting 4 inputtext components on UI as the iterator has 3 rows.

3. The properties for the 1st af:message component is as below.

4. The properties for the 2nd af:message component is similar to first.

I was expecting all to work properly as there was nothing seemed wrong on the first look.

Let's c what happened.

Oh no ! Only the input text outside the iterator seems to be giving the desired result.

Fix: 

1. Instead of it2 as the for property in the second af:message, we need to give it as #{vs.index}:it2 where vs is the varstatus property of the af:iterator.



Ignore the jdeveloper error on the for property.

Now, let's c how it works.

BAM! All inputtext's work as expected.

Why this works this way: 

When a component is inside an iterator or a table, the html ids are like 0:it2, 1:it2 ... etc as all of them need to be unique. So, by appending #{vs.index} we are able to append that 0 or 1 to the actual id of the component.

As u can see the ids are i1:0:it2, i1:1:it2 and i1:2:it2, i1 is directly appended by adf as iterator is the parent component and i1 is the id of the iterator.

PS: This issue is no more there in Jdeveloper 12c. So, the usual way works fine and there is no need of this work around.


Cheers ! Keep Learning ! :)

Swipe to Reveal in Oracle MAF (accessoryLayout)

In this post, we will learn how to implement Swipe to Reveal feature in Oracle MAF. This is also a feature available in Oracle MAF 2.2 just like the Chart drill feature explained in the previous post. A fancy and useful feature for the mobile app. The component which enables us to do this functionality is amx:accessoryLayout.

We will be accomplishing the below by the end of this post.

Swipe Left

Swipe Right

The images show a list of employees and swiping left will open the message window to send an SMS and swipe right to send an email.

Now, Lets go to the implementation steps below: (will be using dummy data as usual for the blog post)

1. Created a POJO class (Employee.java) for employee details such as name, email and phone number.

2. And a java class with a variable to store List<Employee>, generated a datacontrol from this java class.

3. Drag and Drop empData (which is a List<Employee>) as ListView on the amx page with name as the major display attribute.

4. I have initiated the empData with some values in the constructors itself for simplicity.

5. Now, Surround the outputtext having name with amx:accessoryLayout. We will be using two facets of this component "Start" and "End". Start will show the swipe left options and End will show the swipe right options. 

I have two icons in place in each facet, one for SMS and one for EMAIL.

We also have two options here for the Style, one is full-trigger for which u need to swipe completely for the action to get called (like SMS in our example). Second is adfmf-accessoryLayout-hideWhenFull which opens up when you swipe and you need to click on the icon to get the action executed (like EMAIL in our example)

6. Here, I am using Device Features datacontrol (Comes default for an MAF application) methods.
One is sendSMS and sendEmail.

The parameters for these methods are purely optional. If you don't specify the parameters, it just opens the respective window and wait for your inputs. If you have given the parameters, it will pre-populate the fields and you just need to click send (unless you want to modify or add some text)

7. SMS example is as below.

Here you can see, the window is populated with phone number and some text as per the given parameter in the pagedef.

8. Finally, an important thing you might miss is you need to enable SMS and EMAIL plugins in the maf-application.xml. Without that, you cannot talk to the SMS and MAIL apps.

So, now we have implemented a cool and trendy feature of Swipe to Reveal for a mobile app using Oracle MAF.

Drill down Bar/Pie Chart in Oracle MAF

This month I will be focusing on Oracle MAF. (Mobile Application Framework). I am using the latest version of MAF as of November 21, 2015. (MAF 2.2)

In this post, I will explain how to implement drill down in dvt charts in Oracle MAF, below is what we will be looking to accomplish by the end of the post.

First image is the initial page, and when you tap on the "Female" slice, 2nd image opens and if you tap on "Male" slice, 3rd image opens. Drill back will take you to the first image.

MAF provides drilling capability charts from 2.2. We need not use multiple pie charts or multiple amx pages, this is a single amx page and single dvt pie chart component.

Lets see how to implement in steps below : (will be working on some dummy data for the blog)

1. Create a simple POJO class (calling it Chart) containing two attributes name label and value. (If it is bar, you would want to go with group, series and value).

2. Point the value of the pie chart to a list of Chart objects.

3. Populating the list to show some data initially. This will be the default activity in the task flow.

4. Now, lets move on the UI. We have properties such as "drilling" and "drill Listener".

Drilling attribute should be set to "on" for drilling to be enabled. I have an EL there instead of "on" is because we need drill down only for 1 level and 2nd level should not be drillable.

5. drillListener in the bean will have a parameter of DrillEvent (just like actionEvent for actionListener).

6. We can get the name/label of the slice from drillEvent.getSeries().
Couple of SOP's above will print as

D/JVM     ( 1768): Drill Series : Female

D/JVM     ( 1768): Drill Group : Group 1


We can write any logic here based on what we need to do and here I am doing dummy operations for the next graph to come up.

7. The last chart data is stored in another variable backupChart before proceeding to the drill operation. So, that when I drill back, I can show the same data.

8. Code for drill back is as below:

I am disabling the drill back button based on the value on drillBackVisible.

So, our goal is accomplished here and we can do drill downs on these charts in MAF easily as above..

Working with ADF Tree/TreeTable : javax.faces.model.NoRowAvailableException / How to expand all the nodes in ADF Tree/TreeTable without iterating

U got this issue while working with trees in ADF? Then, you are at the right place.

You get this issue if your tree model has changed and you try to refresh the tree/tree table.
It is because, the tree has lost its state. (u might have expanded some rows/collapsed some rows)

So, when u search again and change the tree model, it is trying to disclose the earlier rows which aren't there anymore.

When u have searched for this, many of the bloggers would have suggested to do this::

<treebinding>.getDisclosedRowKeys().clear();

This will work if you are OK with seeing all the rows collapsed.

I wanted something different, where in I wanted all the rows to be expanded (init expand) on refresh of the tree model.

Solution : 

                RowKeySet rks = new RowKeySetTreeImpl(true);
                rks.setCollectionModel(<treemodel/childpropertytreemodel>); [Something which is there in the value property of the tree]
                <treebinding>.setDisclosedRowKeys(rks);


So, after this I also found out that this solution will work for another question too.
How to expand all the nodes in an af:tree/af:treeTable?

Instead of iterating through nodes, forming keys and setting the disclosedRowKeys, this same solution would work for this as well like a charm.

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 :)