How to access device camera and save a photo in MAF

INTRODUCTION

Oracle MAF provides a very convenient way to access device features for your android/ios/windows device. You enable device feature access by enabling the correct plugin in the applications maf-application.xml
 
maf-core-plugins.PNG
 
Once the core plugin is enabled, all you have to do is use the MAF api to access device related features. You can find the related api links in the references below.
In this blog, I will demonstrate how to access the device camera to take a picture or select an existing picture from a picture gallery. The new photo taken (or the pre-existing photo) using the camera is then saved to the device’s local sqlite database. We will build a simple profile page where you can upload your photo and save it.

SETUP

Start by creating a Mobile FrameWork Application in Jdeveloper. Add a new feature to your application in the maf-feature.xml and create a new task flow under the Content Tab for the feature.
 
creatingTaskflow.PNG
 

Add two views and create the associated amx pages for each view. Your task flow will look like:
 
feature1_taskflow.PNG
 

ACCESSING THE DEVICE CAMERA

Add a new java class to the application called PhotoUtility. This class will be converted to a data control and used on page “view1” to upload and display a photo. Add a private String variable called “photo” to store the base64 encoded photo image as a string. Generate the accessors for this private variable and ensure that “Notify Listeners when property changes” flag is selected.

Now, we will add two methods that will help to capture a new image from camera and allow you to select an existing image from a photo album on the device. The methods use the DeviceManagerFactory class to access the device camera. It provides the following api to launch the device camera and capture an image:

 

Copy the two methods below to your PhotoUtility class:

 

Note the line:
photo1 = "data:image/jpeg;base64," + photo1;

The MAF getPicture api returns a base 64 encoded string for the image.  You will use the class property photo in an amx image tag that displays the captured photo on the screen. The prefix added above helps the amx image tag decipher the variable contents to be base 64 encoded string.
Convert the PhotoUtility class to a datacontrol by selecting it in the project window, right click on it and select “Create Data Control”. We have enough now to complete the “view1” page.

 
PhotoUtility-datacontrol.PNG
 

From the data controls window, drag the “photo” variable as an outputtext component on the page. Similarly, drag the “getPhotoFromCamera()” and “getPhotoFromLibrary()” methods as buttons on the page. Drop an image tag from the Components window and use the binding created in the previous output text. Your view1 page should look like:

You are now ready to run the application and see this in action. This works well and its all great, but when you restart your application, the selected image is gone! In the next blog, we will make your image selection stay across application sessions. To do that, we will store the image to the local sqlite database. We will enhance the methods “getPhotoFromCamera” and “getPhotoFromLibrary” to persist the image string to the device database.
 
The complete sample application can be downloaded from here:
PhotoApp.zip

REFERENCES

Javadoc for DeviceManager
Javadoc for DeviceDataControl

vivek

vivek

Oracle Fusion Middleware Architect at FUSION Applied
Vivek is an Oracle Certified Fusion Middleware architect. He has over 18 years of experience implementing custom software solutions in the Financial, Health, and Government sectors. He is one of the founders of Fusion Applied.
vivek

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz