Titanium Alloy: Actionbar & DrawerMenu

Question

Recently I started working on a multi-platform application using Titanium Alloy. One of the things I'd like to achieve is having a menu button in the actionbar (infront of the appicon).

When pressed, it toggles the drawermenu.

After a little investigation I failed to find a widget / module that could offer me both. So I decided to use a combination of com.alcoapps.actionbarextras and com.mcongrove.slideMenu.

Both a custom actionbar and a drawer option seem to functionate as they appear they should.

The problem is however, that it does show the 'menu' image, it is clickable, but I have no idea how to attach an event to it.

I've tried several ways, like binding the event to the entire actionbar of what so ever.. But I can't seem to find the appropriate binding to accomplish this.

index.js

var abextras = require('com.alcoapps.actionbarextras');

$.MainWindow.on('open', function(evt) {

    // set extras once the Activity is available
    abextras.title = "Test Window";
    abextras.homeAsUpIcon = "/images/menu.png";
    //abextras.titleColor = "#840505";
    //abextras.subtitle = "for some extra action";
    //abextras.subtitleFont = "Chunkfive.otf";
    //abextras.subtitleColor = "#562A2A";
    //abextras.backgroundColor = "#F49127";


    var activity = evt.source.activity;

    if (activity) {
        activity.onCreateOptionsMenu = function(e) {

            e.menu.clear();


            activity.actionBar.displayHomeAsUp = true;
                        //abextras.setHomeAsUpIcon("/images/menu.png");

                        //activity.actionBar.addEventListener("click", function(ev) {
                        //  console.log("HI");
                        //});

        };
    }

    /*

     // now set the menus
     evt.source.activity.onCreateOptionsMenu = function(e) {

     // aboutBtn and creditsBtn will be displayed in the menu overflow

     aboutBtn = e.menu.add({
     title : "About",
     showAsAction : Ti.Android.SHOW_AS_ACTION_NEVER
     });
     aboutBtn.addEventListener("click", function(e) {
     console.log('Clicked on About');
     });
     creditsBtn = e.menu.add({
     title : "Credits",
     showAsAction : Ti.Android.SHOW_AS_ACTION_NEVER
     });
     creditsBtn.addEventListener("click", function(e) {
     console.log('Clicked on Credits');
     });
     // create the Share intent and add it to the ActionBar
     var intent = Ti.Android.createIntent({
     action : Ti.Android.ACTION_SEND,
     type : 'text/plain'
     });
     intent.putExtra(Ti.Android.EXTRA_TEXT, 'Hello world!');
     abextras.addShareAction({
     menu : e.menu,
     //intent : intent
     });

     };
     */
});

function doClick(e) {
    alert($.label.text);
}

// Create our node items
var nodes = [{
    menuHeader : "My Tabs",
    id : 0,
    title : "Home",
    image : "/images/home.png"
}, {
    id : 1,
    title : "Contact",
    image : "/images/phone.png"
}, {
    id : 2,
    title : "Settings",
    image : "/images/gear.png"
}];

// Initialize the slide menu
$.SlideMenu.init({
    nodes : nodes,
    color : {
        headingBackground : "#000",
        headingText : "#FFF"
    }
});

// Set the first node as active
$.SlideMenu.setIndex(0);

// Add an event listener on the nodes
$.SlideMenu.Nodes.addEventListener("click", handleMenuClick);

// Handle the click event on a node
function handleMenuClick(_event) {
    if ( typeof _event.row.id !== "undefined") {
        // Open the corresponding controller
        openScreen(_event.row.id);
    }
}

function openMenu() {
    $.AppWrapper.animate({
        left : "300dp",
        duration : 250,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });

    $.SlideMenu.Wrapper.animate({
        left : "0dp",
        duration : 250,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });

    toggleMenu();
}

function closeMenu() {
    $.AppWrapper.animate({
        left : "0dp",
        duration : 250,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });

    $.SlideMenu.Wrapper.animate({
        left : "-300dp",
        duration : 250,
        curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    });

    toggleMenu();
}

function toggleMenu() {
    //
    console.log($.AppWrapper.left);
}

$.AppWrapper.addEventListener("swipe", function(_event) {
    if (_event.direction == "right") {
        openMenu();
    } else if (_event.direction == "left") {
        closeMenu();
    }
});

$.MainWindow.open();

//$.index.open();

index.xml

<Alloy>
    <Window class="container" id="MainWindow">
        <Require type="widget" src="com.mcongrove.slideMenu" id="SlideMenu" />

        <View id="AppWrapper">
            <Label text="Profile View" />
        </View>
    </Window>
</Alloy>

I hope people with more knowledge about Titanium and/or these modules could guide me.

Kind Regards, larssy1

Answer 1

After contacting the creator of the widget, the outcome is as the following:

var activity = evt.source.activity;      
if (activity){
    activity.actionBar.onHomeIconItemSelected = function() {
       // your callback here
       alert('I was clicked');
    }
}