Titanium JIRA Archive
Alloy (ALOY)

[ALOY-1584] [Android] Ti.UI.Toolbar has no click event on 'displayHomeAsUp' icon when used as ActionBar, but ActionBar allows to close the window on its back-button press.

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2017-11-06T19:16:11.000+0000
Affected Version/sn/a
Fix Version/sCLI Release 7.0.0, Alloy 1.10.8
ComponentsTooling
Labelsn/a
ReporterPrashant Saini
AssigneeYordan Banev
Created2017-10-11T04:23:10.000+0000
Updated2017-11-08T17:14:38.000+0000

Description

After testing further, this issue is only valid for Alloy projects. As you can see in attached screenshot, there's a white back-button in Toolbar which is inherited by ActionBar when Toolbar is used as an ActionBar as per Appc Docs. But I could not find out any click event which can be raised on clicking this back-button just like we have onHomeIconItemSelected in ActionBar to add callback function. For a workaround, we will need to use Alloy with Ti.UI.Window's open event like this:
$.win.activity.supportToolbar = $.toolBarID;

$.win.addEventListener('open', function() {
    //Accessing the properties for ActionBar through it's own API
    $.win.activity.actionBar.displayHomeAsUp = true;
    $.win.activity.actionBar.onHomeIconItemSelected = function() {
      $.win.close();
    }
});
See below code for the screenshot.
<Alloy>
    <Window title="My Test App" backgroundColor="gray" customToolbar="toolBarID">
        <Toolbar
            id="toolBarID"
            title="MyMenu"
            subtitle="Subtitle"
            extendBackground="true"
            width="Ti.UI.FILL"
            top="0"
            barColor="#639851"
            displayHomeAsUp="true"
            homeButtonEnabled="true"
            overflowIcon="logo.png">

            <!-- The Items tag sets the Toolbar.items property. -->
            <Items>
                <Button id="ok" title="OK"/>
            </Items>
        </Toolbar>

       <View width="Ti.UI.FILL"  height='80' backgroundColor='red' bottom='0' />
    </Window>
</Alloy>
- Another point is that Toolbar must have its *id* property set to Window's *customToolbar* property

Attachments

FileDateSize
screenshot_20171010-221829_720.png2017-10-11T04:16:11.000+000022228

Comments

  1. Yordan Banev 2017-10-11

    PR: https://github.com/appcelerator/alloy/pull/853
  2. Abir Mukherjee 2017-11-08

    Validated fix with the following environment: Node Version: 6.11.5 NPM Version: 3.10.10 Mac OS: 10.13 Appc CLI: 7.0.0-master.6 Alloy 1.10.8 Appc CLI NPM: 4.2.11-2 Titanium SDK version: 7.0.0.v20171107142411

JSON Source