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.
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.
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.
We will be accomplishing the below by the end of this post.
 |
| Swipe Left |
 |
| Swipe Right |
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.
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.
No comments:
Post a Comment