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.