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();
    }
}

25 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. I agree with your post. Android software development kit makes the application development process lot simpler and effective. You can create best performing android application with ease. Android Training Institutes in Chennai | Best Android Training institute in Chennai

    ReplyDelete
  13. Excellent post!!! Java is most popular and efficient programming language available in the market today. It helps developers to create stunning desktop/web applications loaded with stunning functionalities. JAVA Training in Chennai | JAVA Training Institutes in Chennai

    ReplyDelete
  14. I known the lot of information and how it works then what are benefits by applying this application through this article.A great thanks for a valuable information.
    Android Training in chennai | Android Training chennai | Android course in chennai | Android course chennai

    ReplyDelete
  15. Deepak,

    Nice post! but how to click device back button using javascript?

    ReplyDelete
  16. Hi, I am Emi lives in Chennai. I am technology freak. I did Android mobile application development course in Chennai at reputed training institutes, this is very usful for me to make a bright carrer in IT industry. So If you looking for best Android Training Institutes in Chennai please visit fita academy. Android Training in Chennai



    ReplyDelete

  17. Thanks for sharing this valuable information to our vision. You have posted a trust worthy blog keep sharing.Nice article i was really impressed by seeing this article, it was very interesting and it is very useful for me.. Android Training in chennai | Android Training chennai | Android course in chennai | Android course chennai

    ReplyDelete

  18. Thanks for sharing your view to our knowledge’s, its helps me plenty keep sharing…
    JAVA Training in Chennai

    ReplyDelete
  19. Thanks for your informative article on ios mobile application development. Your article helped me to explore the future of mobile apps developers. Having sound knowledge on mobile application development will help you to float in mobile application development. iOS Training in Chennai

    ReplyDelete