Topic
  • 8 replies
  • Latest Post - ‏2012-12-11T16:38:56Z by SystemAdmin
SystemAdmin
SystemAdmin
2327 Posts

Pinned topic WL.App.overrideBackButton

‏2012-12-04T08:06:01Z |
Hello, Im doing an application, and in the android version i want the backbutton to work.. so Ive researched and found out its this function i have to use but what i couldnt find was how i use this and dojoviews.

This is a part of my Javascript code in Andoird --> JS --> projectname.js

The question is am I placing this code in the right place? am i doing the code wrong? My views are named like Info Graduate About and so on. Now when i press the backbutton it still closes my program. Any help would be appreciated.

function initBackButton() {
WL.logger.debug('AFR.js Android: Back button handler installed');
WL.App.overrideBackButton(backKeyDownFunction);

}
function backKeyDownFunction(){
WL.logger.debug('AFR.js Android: backKey pressed on view:'+ currentView.id);
switch (currentView.id)
{
case "Info"
currentView.performTransistion("MainView01",1,"fade",null);
break;
case "Graduate"
currentView.performTransistion("Info",1,"fade",null);
break;
default:
//All other views returns to the main view
WL.TabBar.setSelectedItem('about');
currentView.performTransition('MainView01',1,"fade",null);
return;
}
}
  • IdanAdar
    IdanAdar
    741 Posts

    Re: WL.App.overrideBackButton

    ‏2012-12-04T08:23:26Z  
    I don't quite follow what you're doing with "initBackButton" as it is not something that you need to initialize, it is already so.
    We do not provide an API to disable or enable it, only to override it.

    For example, if your traverse between "pages" in your app, and you want the back button to return to the previous page instead of quit the app, you use the WL.App.overrideBackButton API to do, as instructed in the documentation: http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/docs/wl_5_0_dev_ref.pdf

    Which device/OS are you testing this on? Android, iOS?
    I see you use transitions. Is this done via jQuery Mobile? Worklight-based Fragments and Pages?

    Idan Adar
    QA Engineer
    IBM Worklight Mobile Platform
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: WL.App.overrideBackButton

    ‏2012-12-04T08:42:04Z  
    • IdanAdar
    • ‏2012-12-04T08:23:26Z
    I don't quite follow what you're doing with "initBackButton" as it is not something that you need to initialize, it is already so.
    We do not provide an API to disable or enable it, only to override it.

    For example, if your traverse between "pages" in your app, and you want the back button to return to the previous page instead of quit the app, you use the WL.App.overrideBackButton API to do, as instructed in the documentation: http://public.dhe.ibm.com/ibmdl/export/pub/software/mobile-solutions/worklight/docs/wl_5_0_dev_ref.pdf

    Which device/OS are you testing this on? Android, iOS?
    I see you use transitions. Is this done via jQuery Mobile? Worklight-based Fragments and Pages?

    Idan Adar
    QA Engineer
    IBM Worklight Mobile Platform
    The initBackButton i found in one of the guides that told me how to do it, so i dont need it?

    Im using dojox mobile 1.7.2. the original page swapping is done through dojo. Ill paste a code snippet from the html file. Im doing this for Android and Iphone but the backbutton i do want for android and im testing it with API 17 and in a HTC Phone (not sure which phone it is)

    More about Cultures

    • x

    • The code above is for the view and the header and also a backbutton that is there for Iphone.
      The code below is a button to move forward in the app

      <button data-dojo-type="dojox.mobile.ToolBarButton"data-dojo-props="transition:'fade',dir:'1',moveTo:'GBS'"class="buttonMed">Global Business Services</button>
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: WL.App.overrideBackButton

    ‏2012-12-04T08:44:23Z  
    The initBackButton i found in one of the guides that told me how to do it, so i dont need it?

    Im using dojox mobile 1.7.2. the original page swapping is done through dojo. Ill paste a code snippet from the html file. Im doing this for Android and Iphone but the backbutton i do want for android and im testing it with API 17 and in a HTC Phone (not sure which phone it is)

    More about Cultures

    • x

    • The code above is for the view and the header and also a backbutton that is there for Iphone.
      The code below is a button to move forward in the app

      <button data-dojo-type="dojox.mobile.ToolBarButton"data-dojo-props="transition:'fade',dir:'1',moveTo:'GBS'"class="buttonMed">Global Business Services</button>
    hmm my code for the view/head and backbutton seem to become something instead of just being code

    div data-dojo-type="dojox.mobile.ScrollableView" id="Morecult"
    data-dojo-props="selected:false,scrollDir:''" style="background-image:url(images/background.jpg); background-size: cover; height:100%; width:100%;">

    More about Cultures

    • x
    • </h1

      Hopefully you can see it now

  • IdanAdar
    IdanAdar
    741 Posts

    Re: WL.App.overrideBackButton

    ‏2012-12-04T09:00:11Z  
    Use "{ code } ... something here ... { code }" (minus the spaces) to paste code.

    I will wait for someone with better Dojo understanding to help you out here.

    Idan Adar
    QA Engineer
    IBM Worklight Mobile Platform
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: WL.App.overrideBackButton

    ‏2012-12-04T09:04:04Z  
    • IdanAdar
    • ‏2012-12-04T09:00:11Z
    Use "{ code } ... something here ... { code }" (minus the spaces) to paste code.

    I will wait for someone with better Dojo understanding to help you out here.

    Idan Adar
    QA Engineer
    IBM Worklight Mobile Platform
    Oh im sorry im new to Dev works.

    
    <div data-dojo-type=
    "dojox.mobile.ScrollableView" id=
    "Morecult" data-dojo-props=
    "selected:false,scrollDir:''"> <h1 data-dojo-type=
    "dojox.mobile.Heading" data-dojo-props=
    "fixed:"top
    ""><img src=
    "logo.png" class=
    "logo"></img><p style=
    "margin-top:-1px; margin-right:70px;"><p style=
    "margin-top:-3px;">More about Cultures </p> <li data-dojo-type=
    "dojox.mobile.TabBarButton" class=
    "buttonBack" data-dojo-props=
    "transition:'fade',dir:'-1',moveTo:'Services'">x</li> </h1>
    


    now there it is!
  • Eric Durocher
    Eric Durocher
    38 Posts

    Re: WL.App.overrideBackButton

    ‏2012-12-04T17:19:29Z  
    Oh im sorry im new to Dev works.

    <pre class="jive-pre"> <div data-dojo-type= "dojox.mobile.ScrollableView" id= "Morecult" data-dojo-props= "selected:false,scrollDir:''"> <h1 data-dojo-type= "dojox.mobile.Heading" data-dojo-props= "fixed:"top ""><img src= "logo.png" class= "logo"></img><p style= "margin-top:-1px; margin-right:70px;"><p style= "margin-top:-3px;">More about Cultures </p> <li data-dojo-type= "dojox.mobile.TabBarButton" class= "buttonBack" data-dojo-props= "transition:'fade',dir:'-1',moveTo:'Services'">x</li> </h1> </pre>

    now there it is!
    Hello,

    Rather than overriding the back button's behavior, you should use the "bookmarkable" feature of Dojo Mobile.

    Please have a look at this page that explains how to use this:

    https://dojotoolkit.org/reference-guide/1.8/dojox/mobile/bookmarkable.html

    Note that you can also use the second part ("The bookmarkable feature in 1.8") since the version of Dojo Mobile included in Worklight since 5.0 is 1.8 (even though Dojo itself is 1.7).

    Hope this will help.

    Eric
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: WL.App.overrideBackButton

    ‏2012-12-11T07:23:48Z  
    Thanks! It works perfectly fine now!
  • SystemAdmin
    SystemAdmin
    2327 Posts

    Re: WL.App.overrideBackButton

    ‏2012-12-11T16:38:56Z  
    Thanks! It works perfectly fine now!
    You might still want to override the back button.

    Requiring dojox/mobile/bookmarkable and putting hash tags in your view navigation does most of what you might want but what do you want to happen if the back button is pressed when you have already backed up all the way to the initial page?

    The default behavior is to exit the app.

    If you want to remain on the initial page when there is no more history to back up through and the back button is pressed, put :

    WL.App.overrideBackButton(function() {history.back();});

    in wlEnvInit() in the Android Environment.

    If you want the back button to cause the app to exit when there is no more history, then all you need is bookmarkable.