Ionic Framework for Android return key processing

Source: Internet
Author: User
Tags unique id

In the Hybridapp Mobile cross-platform development, the Android platform will encounter some special and difficult to solve problems, these problems in the native application development is very easy, Android's return key processing is one of the problems, If we're going to implement a feature in many apps that prompts the user to exit the app on the home page by pressing the Back button pop-up dialog box, it's easy to do this in native app development, as long as the onkeyup event handles the return key event. The Java code to exit the app by pressing the 2-time return key is as follows:

Private long exittime = 0; @Overridepublic boolean onKeyDown (int keycode, keyevent event) {    if (keycode = = KEYEVENT.KEYC Ode_back && event.getaction () = = Keyevent.action_down) {           if (System.currenttimemillis ()-exittime) > () {              toast.maketext (Getapplicationcontext (), "Press again to exit the program", Toast.length_short). Show ();                                            Exittime = System.currenttimemillis ();           } else {            finish ();            System.exit (0);        }        return true;       }    Return Super.onkeydown (KeyCode, event);}

But in the HTML5 application that uses Cordova, things are not so simple, first webview takes over the event of the return key, you can't handle the return key in the Java layer or it's not that easy, unless you change the code of the Cordova framework, but it's obviously inappropriate. will lead to maintenance problems and do not conform to general development specifications. Even if we can modify the Cordova source code, at the same time processing good press the return key WebView back to the previous page and on the homepage when the popup processing hints, is also very difficult.

In-depth analysis of the Ionic framework source code, in the Ionic Forum with foreign developers exchange, finally found a comparison of the solution. Ionic as a more active foreign Hybridapp mobile development Framework, the processing of the return key of the Android platform is a reasonable solution. Ionic Framework for Android return key processing source code is as follows:

Returns the key priority definition, the primary purpose of which is the priority definition of the return key behavior, for example, when there is a popup (priority 400), press the back key to cancel the popup box, do not fallback page (priority 100)

var Platform_back_button_priority_view = 100;var Platform_back_button_priority_side_menu = 150;var PLATFORM_BACK_ Button_priority_modal = 200;var Platform_back_button_priority_action_sheet = 300;var PLATFORM_BACK_BUTTON_PRIORITY_ POPUP = 400;var platform_back_button_priority_loading = 500;

Register the Return key processing action, our own processing of the return key needs to be implemented here, note that the return is a function, call this function will cancel the event registration.

        /** * @ngdoc method * @name $ionicPlatform #registerbackbuttonaction * @description * Register A hardware Back button action. Only one action would execute * when the back button was clicked, so this method decides which of * the Regi         Stered Back button actions have the highest priority. * For example, if a actionsheet is showing, the back button should * close the actionsheet, but it shou         LD not also go back a page view * or close a modal which could be open. * * @param {function} callback called when the Back button is pressed, * if this listener is the highest p         Riority.         * @param {Number} Priority only is the highest priority would execute. * @param {*=} ActionId the ID to assign this action.         DEFAULT:A * Random Unique ID.         * @returns {function} A function that, when called, would deregister * this backbuttonaction. */$backButtonActions: {}, Registerbackbuttonaction:function (FN, priority, ActionId) {if (!self._hasbackbuttonhandler)            {//Add a Back button listener if one hasn ' t been setup yet self. $backButtonActions = {};            Self.onhardwarebackbutton (Self.hardwarebackbuttonclick);          Self._hasbackbuttonhandler = true; } var action = {ID: (ActionId? actionid:ionic.          Utils.nextuid ()), Priority: (priority priority:0), FN:FN};          Self. $backButtonActions [] = action; Return a function to de-register the This Back button action return function () {delete self. $backButto          Nactions[];        }; },

Back to the question we just started, on the homepage add press the Back button to exit the application, on the other page normal return to the previous page, as long as the registration of a processing event can be, the code is as follows:

. Run (['$rootScope','$ionicLoading','$httpBackend','$ionicLoading','Wxconfigservice','Currentuserservice','$ionicPlatform','$ionicPopup','$location','$ionicHistory', function ($rootScope, $ionicLoading, $httpBackend, $ionicLoading, Wxconfigservice, Currentuserservice, $ Ionicplatform, $ionicPopup, $location, $ionicHistory) {//Main Page display exit prompt box$ionicPlatform. Registerbackbuttonaction (function (e) {e.preventdefault (); function showconfirm () {varConfirmpopup =$ionicPopup. Confirm ({title:'<strong> exit Application?</strong>', Template:'are you sure you want to exit the app ?', Oktext:'Exit', Canceltext:'Cancel'                }); Confirmpopup.then (function (res) {if(res) {ionic.                    Platform.exitapp (); } Else {                        //Don ' t close                    }                }); }            //is there a page to go?             if($location. Path () = ='/homepage'|| $location. Path () = ='/butlerpage'|| $location. Path () = ='/valueaddedgoods'|| $location. Path () = ='/mypage') {showconfirm (); } Else{$ionicHistory. GoBack (); }            return false; }, 101); }])

As follows:

Ionic Framework's handling of Android return keys

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.