Titanium JIRA Archive
Appcelerator Community (AC)

[AC-4691] Windows: TabGroup createEventListener for "back" or "windows:back" do not work

GitHub Issuen/a
TypeBug
Priorityn/a
StatusClosed
ResolutionCannot Reproduce
Resolution Date2017-01-03T20:51:00.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAlloy
Labelsn/a
ReporterMitch Starnes
AssigneeShak Hossain
Created2016-12-22T19:34:04.000+0000
Updated2017-01-03T20:51:00.000+0000

Description

I am currently unable to intercept the back button on a Windows Phone when the current window is based on a TabGroup. The back button kills the app. Documentation: http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TabGroup-event-androidback refers to the Windows platform but it doesn't work. Please add/fix event listening support for TabGroup on the Windows platform.

Comments

  1. Sharif AbuDarda 2016-12-22

    Hello, Please provide a full sample code to reproduce the issue in our environment. Thanks.
  2. Mitch Starnes 2016-12-23

    Steps to reproduce:

    Build new mobile app based on the "Two-tabbed Alloy Application"

    Build and run in a Windows emulator for test purposes

    Replace index.js and index.xml with the code shown below.

    Build and run and test that tabs still work

    Hit the Back button and notice that neither windows:back nor back nor androidback are captured by the listeners in index.js

       <!-- index.xml -->
   <Alloy>
   	<TabGroup>
   		<Tab title="Tab 1" icon="KS_nav_ui.png">
   			<Window id="tab1" title="Tab 1">
   				<Label>I am Window 1</Label>
   			</Window>
   		</Tab>
   		<Tab title="Tab 2" icon="KS_nav_views.png">
   			<Window id="tab2" title="Tab 2">
   				<Label>I am Window 2</Label>
   			</Window>
   		</Tab>
   	</TabGroup>
   </Alloy>
   
       // index.js
   $.index.open();
   
   /* Don't let the user back out of the app */
   $.index.addEventListener('androidback',function(e) {
   	Ti.API.warn("index androidback");
   	e.cancelBubble = true;
       return false;
   });
   
   /* Don't let the user back out of the app */
   $.index.addEventListener('windows:back',function(e) {
   	Ti.API.warn("index windows:back");
   	e.cancelBubble = true;
       return false;
   });
   
   
   /* Don't let the user back out of the app */
   $.index.addEventListener('back',function(e) {
   	Ti.API.warn("index back");
   	e.cancelBubble = true;
       return false;
   });
   
   /* Don't let the user back out of the app */
   $.tab1.addEventListener('androidback',function(e) {
   	Ti.API.warn("tab1 androidback");
   	e.cancelBubble = true;
       return false;
   });
   
   /* Don't let the user back out of the app */
   $.tab1.addEventListener('windows:back',function(e) {
   	Ti.API.warn("tab1 windows:back");
   	e.cancelBubble = true;
       return false;
   });
   
   
   /* Don't let the user back out of the app */
   $.tab1.addEventListener('back',function(e) {
   	Ti.API.warn("tab1 back");
   	e.cancelBubble = true;
       return false;
   });
   
   /* Don't let the user back out of the app */
   $.tab2.addEventListener('androidback',function(e) {
   	Ti.API.warn("tab2 androidback");
   	e.cancelBubble = true;
       return false;
   });
   
   /* Don't let the user back out of the app */
   $.tab2.addEventListener('windows:back',function(e) {
   	Ti.API.warn("tab2 windows:back");
   	e.cancelBubble = true;
       return false;
   });
   
   
   /* Don't let the user back out of the app */
   $.tab2.addEventListener('back',function(e) {
   	Ti.API.warn("tab2 back");
   	e.cancelBubble = true;
       return false;
   });
   
   
   /* Don't let the user back out of the app */
   Ti.App.addEventListener('androidback',function(e) {
   	Ti.API.warn("Ti.App androidback");
   	e.cancelBubble = true;
       return false;
   });
   
   /* Don't let the user back out of the app */
   Ti.App.addEventListener('windows:back',function(e) {
   	Ti.API.warn("Ti.App windows:back");
   	e.cancelBubble = true;
       return false;
   });
   
   
   /* Don't let the user back out of the app */
   Ti.App.addEventListener('back',function(e) {
   	Ti.API.warn("Ti.App back");
   	e.cancelBubble = true;
       return false;
   });
  3. Mostafizur Rahman 2016-12-27

    Hello, Thanks for your query. We have tested your issue on our end on following environment and its working for me. *Testing Environment:* Appcelerator Studio, build: 4.8.0.201611121409 SDK: 6.0.1.GA Appcelerator Command-Line Interface, version 6.0.0 Windows emulator: 8.1 WVGA 4 inch 512MB *Testing Code:* 
    $.tab2.addEventListener('windows:back',function(e) {
          alert("windows:back Working");
   	Ti.API.warn("tab2 windows:back");
   	e.cancelBubble = true;
       return false;
   });
     *Output:* [WARN] : tab2 windows:back [INFO] : Disconnected from app Also showing the alert. Thanks
  4. Mitch Starnes 2016-12-29

    Still not working for me. Did you follow my instructions to build the project from the "Two-tabbed Alloy Application" sample? If so, our projects should now be identical as I replaced the contents of index.js with this: 
       $.index.open();
   
   $.tab2.addEventListener('windows:back',function(e) {
   	alert("windows:back Working");
   	Ti.API.warn("tab2 windows:back");
   	e.cancelBubble = true;
       return false;
   });
    I have logging set at TRACE level. I am able to toggle between Tab1 and Tab2 but tapping the hardward back button closes the app with no alert and no WARN output. I am using VS 2015 Community Update 3. How about you?
  5. Mitch Starnes 2016-12-29

    Is yours an Alloy project? Can I see your index.xml? Can you share your working project in github?
  6. Mostafizur Rahman 2017-01-02

    Hello [~mstarnes], Yes, I have tested on Alloy project. I am using VS 2013 Community. I have used your *index.xml* file. *Testing Environment:* Appcelerator Studio, build: 4.8.0.201611121409 SDK: 6.0.1.GA Appcelerator Command-Line Interface, version 6.0.0 Windows emulator: 8.1 WVGA 4 inch 512MB VS 2013 Community Thanks

JSON Source