Oracle ADF Mobile: Add “Back” button support for Android
Congratulations! You have developed an application in ADF Mobile.
You deploy it to an iPhone, and it works great.
Now you run it on Android, where your users are used to Android’s “Back” button and opps – Unhappy users.
What’s the fastest way to add support for the back button in order to preserve the same behavior that Android users are used to?
I found this blog post by Deepak Siddappa very helpful. I used it and made some small modifications.
Here are the steps to add “Back” button support to your application:
1. Right-click on the ViewController project, and in the New Gallery window select Web Tier -> HTML -> JavaScript File and name it as “back.js”
2. Expand ViewController -> Application Sources- > META-INF
3. Click on the adfmf-feature.xml file to launch the Feature editor.
4. Under the Features table, click the Content tab.
5. In the Includes section, click the green plus sign and insert the “back.js” JavaScript file.
6. Open the “back.js” file and paste the below code:
//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() {
//back on all pages, exit on Logon
if ($(‘#logon’).length)
{
var cFirm = confirm(“Are you sure you want to exit the application?”);
if (cFirm == true) {
//Code to exit the application
navigator.app.exitApp();
}
}
else
{
adf.mf.api.amx.doNavigation(“__back”);
}
}
function onInvokeSuccess(param) {
//To do code after success
};
function onFail() {
//To do code after failure
};
7. This code catches the “Back” button event and navigates to “__back.”
8. If the AMX page’s name is “logon,” then it asks for confirmation to exit the application.
9. To set the name for the first AMX page (logon in this case):
- Open the AMX Page
- Click on the Panel View
- Under “Panel Page – Properties Inspector” set Id to your preferred name (in this case logon)
And that’s it! You have now added “Back” button support to your application.
Let us know how it worked for you in our comments section!
