Offline Data Synchronization for ADF Mobile

In Mobile applications very desired feature is able to work offline. For data-driven applications, it means user can store (a subset of) the application data locally, and implement a data synchronization mechanism that keeps your local and server data in sync.

In work offline scenario user need not connect to the internet always, but needs to collect data (offline) for later submission. Another usage can be an offline cache on the client for faster data access and also preserve network bandwidth.

In this article we will create an ADF Mobile application with offline capability, here user can add/modify the data and store it in persistent local database. Every once in a while we push all the added/modified data to the server using SOAP based WebService to sync online data.

Architecture Diagram

Note: - 

• WebServices exposed are based on EJB.
• Current implementation supports unidirectional (client to server) synchronize from Local DB to Server DB. 

Workflow

1. Data Initialization - When the application loads for the first time, required data will be pulled from Local DB to Server DB. In this demo application I'm pulling all departments detail to Local DB, so that sample departments detail can be displayed on application load.
2. Auto Sync - User can add/modify the data and click on save button, here first step is to save data into Local DB then check for the synchronization settings preferences. If Auto Sync is enabled then check for the network connection is available, if yes push the current request data to the Server DB.
3. Manual Sync - Next is to turn it into an app that is able to run offline, without network connection present, user can go to synchronization settings preferences and disable the Auto Sync, so that data will be stored and cached locally for faster access and also preserve network bandwidth. Once in a while push all the added/modified data to Server DB from Local DB.

Application screen looks like below when it is deployed and run on the Android Device/Emulator. As soon application starts it will bring the "Data Initialization Screen", click on "Start Data Initialization" button then required data will be populated from Server DB to Local DB using SOAP services.

Above screen will appear only when application start for the first time, once the data initialization completes it will navigates automatically to Dept List screen.

Click on the menu button, this will launch the Navigation Bar with Preferences, Hide Navigation and Springboard options. Click on Preferences icon.

Synchronization Settings

• If Auto Sync is checked, when ever user perform CRUD operations the data will be first saved to the local db and immediately check the network connection, if connection exists send the current request data to the Server DB.
• If Auto Sync is unchecked, when ever user perform CRUD operations the data will be first saved to the local db and current request data will not be send to Server DB.

From Dept List screen click on add button to add the new record. Enter the details and click on Save button to submit the data, newly added records appears on Dept List screen.

Clicking on any department will take you to the selected Department details page, click on the edit button to  edit the details, modify the details and click on the Save button to submit the data and navigate back to detail screen. Clicking on delete button will delete the current department.

From main screen clicking on the Sync button will first check the network connection, if connection not exists alert notification will be displayed on the screen and synchronization of data will not happen.

So after enabling the connection, click on Sync button to send all the new/modified data to Server DB from Local DB, once the synchronization completes alert notification will be displayed on the screen.

 

You can download the sample workspace from here, sample workspace contains both EJBSyncWebServiceApp and SyncMobileApp applications.

[Runs with Oracle JDeveloper 11.1.2.4.0]

In below section I will not provide all the steps to create the application from scratch, only key ones will be explained. 

EJBSyncWebServiceApp - If you are deploying application to standalone server, modify the application with following steps:

1. Create the DataSource in standalone server and name as "MobiledemoDS".
2. Open the persistence.xml and modify the string "java:/app/jdbc/jdbc/MobiledemoDS" to "jdbc/MobiledemoDS" in jta-data-source and property tag.
3. Right click on the Application navigator and select application properties and go to Deployment->Weblogic, there uncheck "Auto Generate and Synchronize WebLogic JDBC Descriptors During Deployment"option

SyncMobileApp - 

1. Following DataControls are created in application. 
   • DepartmentsDC -  Consists of methods to cache and store the data locally
   • EJBServiceWSDC -  Consists of methods to access remote server data 
   • SynchronizationDC -  Consists of methods to synchronize data from offline to online 
2. In connections.xml provide the path where EJBSyncWebServiceApp Webservices is deployed.
3. Used "navigator.network.connection.type" cordova api to check the active network connection that is being used. This property is a fast way to determine the device's network connection state, and type of connection.