How to access device camera and save a photo in MAF -Part 2

INTRODUCTION

In part 1 of this blog, we learnt how to create a simple Oracle MAF application to access device features. We learnt how to access the device camera and capture a photo. We also learnt how to access a pre-existing photo from the device photo gallery to display on a MAF page. We will now see how to save the captured image to the local device database. The application will now be able to display the newly captured image across application session.
To do this, 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. To verify that the newly selected image is indeed saved to the database, we will use a second page “view2” to display the contents of our local database.
 
Steps:

  1. Connect to the local DB store
  2. Create a local database file on application startup, if it does not exist
  3. Initialize the database with data that you might need for the application
  4. When “view1” is opened, display an existing image from the database if it exists
  5. Save the selected image from gallery or a new photo from camera if the user takes a new photo to the database.

STEP 1

Create a new java class called FADBConnectionFactory. This class will maintain the database connection and check if the database file exists.
Add the method dbExists() to the class. This checks the application’s path for the existence of the application database file and returns the appropriate boolean value.

The next method getConnection() checks if the connection variable is valid and if not, loads the SQLite jdbc drive and establishes a connection. The autocommit option is turned off to help us manage the transaction.

STEP 2

We will leverage the MAF LifeCycleListener to initialize the application database and establish a connection. When the application is installed for the first time, the local db may not exist. We test whether the database file exists in the applications storage directory. We create the database file and create the required tables, initialize any lookup data if the file does not exist. If it does, we simply establish a connection and return.
Open the ApplicationController’s LifeCycleListenerImpl and update it with the code below:

The code above first checks if the application database exists and returns if it does. Next we confirm that the database does not exist by firing a sql. We could avoid this call as we have already tested the database file existence. The important call here is “InitDB()” which sets up our database.

STEP 3

We package the SQL script that seeds the local database with the application code. The SQL file should be placed in the /.adf/META-INF directory. Go ahead and create a file called fa.db in this folder and paste the following script:

The InitDB() method reads the SQL script and executes each command to seed the database. Here, we will create one table (“FABLOG”) and insert a dummy record to ensure the database is ready to accept our use captured photo. Place the following method in the LifeCycleListener class.

STEP 4

We want to display a photo from the local database if the user had selected/captured one in their previous session. To recap, this was the UI code on our “view1” page:

The “photo” binding should be pre-populated with the image from our local device database. If this is the first time the user is opening the app, the binding will point to an included placeholder image.
Lets update the getPhoto() method in the PhotoUtility to load an existing image from the database.

Very simply, if the photo variable is null, this method calls the getFromDB() method to look in in the local database and check if an image exists.

The above method queries the local database for a property called “PHOTO”. If a record is found, it sets the local class variable with its value. Very Simple!

STEP 5

The last, but most important step is to save the captured image to the local db. We will enhance our PhotoUtility methods “getPhotoFromCamera” and “getPhotoFromLibrary” to save the image file as soon as it’s available. Add the following method called “addUpdate()” to the PhotoUtility class:

And update both “getPhotoFromCamera” and “getPhotoFromLibrary” by adding the following like after setPhoto(photo1). The method should look like:

Thats it! We’re done with our coding. Now, we can verify if the photo was updated to the database by displaying the database contents on “view2” in our taskflow. I’ll document the updates here, but it should be fairly easy to understand.
Create a java class called FABlog. Add two properties and generate their accessors:

Create a java class called FABlogDC and add the following method:

The method reads in all records from the FABlog table and and returns an array of FABlog objects. Convert the FABlogDC class to a datacontrol and drop this method as a list on the view2 page. Remember to update the binding generated to include both the prop and value properties in the Display Attributes. When a photo has been added, you should see something like this on your screen:

 
Screenshot_20170628-114700.png
 
Screenshot_20170628-114706.png
 

 
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