Tip #3: Implementing the Back button behavior for Android and Windows Phone 8 Apps

If you use Apache Cordova for developing your Android and Windows Phone 8 mobile apps, you may need to exit the app when the user clicks on the back button on the app’s home page, and to navigate back when the user clicks the back button and the current page is not the home page.

Note that back button usually exists in Android and Windows Phone 8 devices.

In order to do implement this behavior, you can implement the “backbutton” event handler after the “deviceready” event is triggered. This is an example to implement this in jQuery mobile.

    var homePage = "appHome";
   
    //Handle back buttons decently for Android and Windows Phone 8 ...
    function onDeviceReady() {
        document.addEventListener("backbutton", function(e){
            if ($.mobile.activePage.is('#' + homePage)){
                e.preventDefault();
                navigator.app.exitApp();
            } else {
                history.back();
            }
        }, false);
    }

    $(document).ready(function() {
        document.addEventListener("deviceready", onDeviceReady, false); 
    });

Using navigator.app.exitApp(), you can exit your mobile app when the app user is in the home page. And using history.back(), you can navigate back to the previous page when the app user is in other pages.

Reference:

“JavaScript Mobile Application Development” Book:

“JavaScript Mobile Application Development” book is published

I’m pleased to announce the release of my new Book “JavaScript Mobile Application Development” using Apache Cordova:
http://www.amazon.com/JavaScript-Native-Mobile-Apps-Development/dp/1783554177

Book Cover

What this book is about

Mobile development is one of the hottest trends and a staple in today’s software industry. Almost every popular website today has its own equivalent mobile application version to allow its current users to access its functions from a mobile device. However, developing mobile applications requires a lot of effort and a wide skill set from mobile developers. Whether you are developing a mobile app for an iPad or on a Windows Phone, there is a requirement to learn the specific languages and technologies for that device. This is where the glory of Apache Cordova shines. As a set of device APIs for building cross-platform mobile applications using HTML, CSS, and JavaScript, the apps developed using JavaScript APIs are easily portable to other device platforms, as well as being consistent across devices and built on web standards. As a result of this, you will find that your development costs and efforts are sharply reduced, whilst increasing the readability and maintainability of your code, as you make use of only one popular programming language: JavaScript.

This is the learning resource to use when you want to efficiently develop your own native mobile applications using Apache Cordorva as the platform that uses HTML, CSS, and JavaScript. In order to develop neat-looking mobile applications, this book also utilizes jQuery mobile. jQuery mobile is one of the best mobile web application frameworks that allows web developers to develop web applications that are mobile friendly.

We start by developing a simple sound recorder mobile app. We then configure this app to work on Android, Windows, and iOS. Then you will learn how to use the different APIs provided by Apache Cordova and how to develop your Apache Cordova custom plugins.

You will then learn how to develop, run, and automate tests using Jasmine. At the end, you develop a “Mega App” where you will learn in details how to design, develop, and deploy a real cross-platform Apache Cordova application that works in Android, iOS, and Windows Phone 8.

After finishing this book, you should be able to develop your mobile application on the different mobile platforms, using only JavaScript, without having to learn the native programming languages of every mobile platform.

What this book covers

Chapter 1, An Introduction to Apache Cordova, teaches what Apache Cordova is and the differences between mobile web, mobile hybrid, and mobile native applications. You will also know why we should use Apache Cordova, along with the current Apache Cordova architecture, and finally, the chapter offers an overview of Apache Cordova APIs.

Chapter 2, Developing Your First Cordova Application, explains how to develop, build, and deploy your first Sound Recorder mobile application on the Android platform.

Chapter 3, Apache Cordova Development Tools, explains how to configure your Android, iOS, and Windows Phone development environments. You will also learn how to support and run your Sound Recorder mobile application on both iOS and Windows Phone 8 platforms.

Chapter 4, Cordova API in Action, dives deep into Apache Cordova API, and you will see it in action. You will learn how to work with the Cordova accelerometer, camera, compass, connection, contacts, device, Geolocation, globalization, and InAppBrowser API by exploring the code of the Cordova Exhibition app. The Cordova Exhibition app is designed and developed to show complete usage examples of the Apache Cordova core plugins. The Cordova Exhibition app supports Android, iOS, and Windows Phone 8.

Chapter 5, Diving Deeper into the Cordova API, continues to dive into Apache Cordova API by exploring the remaining main features of the Cordova Exhibition app. You will learn how to work with Cordova media, file, capture, notification, and storage API. You will also learn how to utilize the Apache Cordova events in your Cordova mobile app.

Chapter 6, Developing Custom Cordova Plugins, dives deep into Apache Cordova and lets you create your own custom Apache Cordova plugin on the three most popular mobile platforms: Android, which uses the Java programming language, iOS, which uses the Objective-C programming language, and Windows Phone 8, which uses the C# programming language.

Chapter 7, Unit Testing Cordova Apps Logic, explains how to develop JavaScript unit tests for your Cordova app logic. You will learn the basics of the Jasmine JavaScript unit testing framework and understand how to use Jasmine in order to test both the synchronous and asynchronous JavaScript code. You will learn how to utilize Karma as a powerful JavaScript test runner in order to automate the running of your developed Jasmine tests. You will also learn how to generate the test and code coverage reports from your developed tests. Finally, you will learn how to fully automate your JavaScript tests by integrating your developed tests with Continuous Integration tools.

Chapter 8, Applying it All – the Mega Application, explores how to design and develop a complete app (Mega App) using Apache Cordova and jQuery Mobile API. Mega App is a memo utility that allows users to create, save, and view audible and visual memos on the three most popular mobile platforms (Android, iOS, and Windows Phone 8). In order to create this utility, Mega App uses jQuery Mobile to build the user interface and Apache Cordova to access the device information, camera, audio (microphone and speaker), and filesystem. In this chapter, you will learn how to create a portable app that respects the differences between Android, iOS, and Windows Phone 8.

Where to buy this book

You can buy JavaScript Mobile Application Development Book from:

Back from ApacheCon NA 2014

IMG_6797

I just get back from ApacheCon North America that was held in Denver, CO, USA 07-09 April 2014. The conference organization was fantastic and there were a lot of attendees in the conference sessions.

IMG_6843

IMG_6796

I had the chance to present “Developing Native Mobile Apps using JavaScript” in 07 April, the session had many attendees and I was really amazed by the energy, enthusiasm, and responsiveness of the attendees during the session.
hazem1
hazem2

The session went great and I was glad to give a free copy of my JavaScript Unit Testing book to one of the attendees who answered a JavaScript quiz at the end of my session.
IMG_6801

I uploaded my session below:

Attached below the Sound Recording of my session:

One of the most interesting things that happened with me in ApacheCon is that I had the chance to meet the wonderful Apache Cordova team in ApacheCon:
IMG_6849

[OT] Denver is a wonderful modern city, if you plan to go there then do not miss visiting 16th street Mall, attached below some photos from there.
IMG_6863

IMG_6839

IMG_6868

IMG_6871

IMG_6872

IMG_6865

Overriding Android back button behavior in Apache Cordova

If you are using Apache Cordova for building a native application on mobiles using HTML, CSS, and JavaScript. You may need to override the default behavior of the back button on the Android mobiles to implement your application specific back button behavior.

In order to do this, you can register an event handler on the "backbutton" event on the document object but before you do this, you need to make sure that the device is ready using the "deviceready" event as follows.

// In the initialization ...
document.addEventListener("deviceready", deviceReadyHandler, false);  


function deviceReadyHandler () {
    document.addEventListener("backbutton", backButtonHandler, false);
}


function backButtonHandler(e) {
    //Here implement the back button handler
}