Sunday, March 31, 2013

Handling the Device Back button in ADF Mobile Application

While developing an ADF Mobile application for Android/IOS, you may require to capture the device back button on user click. Here we will add little logic to exit the application once the user clicks on device back button.

We can directly use the phone gap backbutton api to override the default back button behaviour, you can register an event listener for the 'backbutton' event. It is no longer necessary to call any other method to over ride the back button behaviour. Now, you only need to register an event listener for 'backbutton'.

Application screen looks like below when it is deployed and run on the Android Device/Emulator. Click on the device back button will launch the confirm dialog, user can click OK to exit the application.


You can download the sample workspace from here. I have checked in Android Device/Emulator and it's working fine, not sure in IOS device.

Implementation Steps

Create an ADF Mobile Application, the application consists of two projects. Application Controller project of Application LifeCycle, Listeners, Device Features DataControl and ViewController project contains mobile features content like AMX Files, Task Flows and DataControl.

Right click on the ViewController project and in New Gallery window, select Web Tier-> HTML -> JavaScript File and name as "index.js". Next locate and expand the Application Sources folder, then expand the META-INF folder. You will see the adfmf-feature.xml file, click on the adfmf-feature.xml file to launch the Feature editor. Add a new feature by clicking the green plus sign on the Features table near top of the editor this will launch the new Create ADF Mobile Feature dialog, leave the default values and click ok.

In the Features table, select the newly created feature "feature1". Under the Features table, click the Content tab, and locate the Content table. Notice that the content item feature1.1 is created by default. Next add a new file by clicking the green plus sign and select ADF Mobile AMX Page, this will launch the new Create ADF Mobile AMX Page dialog, modify the File Name as index.amx.

Next in Includes section, click the green plus sign and Insert Include the javascript file as shown below.

Open the index.js file and below code catches the event that fires when the user presses the device back button.
//This is an event that fires when the user presses the device back button
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    document.addEventListener("backbutton", backKeyDown, true);
}

function backKeyDown() {
    var cFirm = confirm("Are you sure you want to exit the application?");
    if (cFirm == true) {
        //Code to exit the application
        navigator.app.exitApp();
    }
}

18 comments:

  1. Thank you for the post, it was very helpful. Unfortunately, that doesn't seem to work when the feature is pointing to a taskflow, not to an amx page. Any ideas? Thanks!

    ReplyDelete
    Replies
    1. Hi,

      This work fine when the feature is pointing to a taskflow also. Please see the http://deepakcs.blogspot.in/2013/04/sync-device-back-button-with-adf-mobile.html article, I have explained back button with taskflow scenario.

      -Deepak

      Delete
  2. Thank you for the post, its very informative. I like it.

    ReplyDelete
  3. Loved this post. Thanks for sharing your day!

    ReplyDelete
  4. Hi,
    How can I only assign a JS file to only one amx page? but my amx page is in a taskflow but I dont want to apply this behavior to all pages in a taskflow?

    ReplyDelete
    Replies
    1. Hi Diego,

      //Check the device back button action happened in particular amx page
      //Here "Id" is the amx:panelPage Id
      if ($('#Id').length) {
      //To do code
      }

      You can check this article - http://deepakcs.blogspot.sg/2013/04/sync-device-back-button-with-adf-mobile.html

      - Deepak

      Delete
  5. Thanks for sharing such types of informative blog. can you detailed summarized about Mobile Applications in next your blog publish.


    ReplyDelete
  6. Thanks for the post but If i want the application to be removed from the memory and closed if i've pressed the Home button.
    like banking application i want it to be removed from the momory

    ReplyDelete
  7. I appreciate from this post thanks for sharing with us. Its seems looking so good.

    ReplyDelete
  8. I am awed by the nature of data on Marketing Your Mobile App. There are a ton of great assets here. I am certain I will visit this online journal again soon.windows mobile app // iPhone app maker // mobile app developers

    ReplyDelete
  9. Hi again!
    How can I invoke a java method from that javascript method?
    I have a commandbutton which goes back to the previous page, but I would like to do that using the nativa back button also.
    Thank you!

    ReplyDelete
  10. Diego,

    You can call the java method in javascript like below:

    adf.mf.api.invokeMethod("mobile.TestBean", "sayHello", onSuccess, onFail);

    mobile - PackageName
    TestBean - Managed Bean
    sayHello - Method in the managed bean
    onSuccess, onFail - Javascript callback functions

    ReplyDelete
    Replies
    1. Deepak,

      I did that and it called the java method, BUT now I need that button to go back to the previous page I tried returning "__back" but it didn't work any ideas on how to use the device native back button to do that?

      Delete
    2. I soon as I posted this: I found the solution here: http://goo.gl/loUA1U
      Using: adf.mf.api.amx.doNavigation(“__back”);
      Thanks Deepak!
      I added you to my google circles hope you don't mind

      Delete
    3. Cool.. Thanks for adding to google circles.

      Delete
  11. You have posted the blogs are really fantastic and informative.
    Mobile App Button

    ReplyDelete
  12. If you are searching for cost effective as well as solid Mobile Application Development Services and Web Development in India provider then without thinking much you can choose to hire the services offered by Acetech. We are one of the leading companies offering affordable, timely and quality mobile apps services.

    ReplyDelete