Титановый сплав: Actionbar & DrawerMenu

Question

Недавно я начал работать над мультиплатформенным приложением с использованием Titanium Alloy. Одна из вещей, которую я хотел бы достичь, - это наличие кнопки меню на панели действий (напротив приложения).

При нажатии он переключает окно меню.

После небольшого расследования я не смог найти виджет / модуль, который мог бы предложить мне оба. Поэтому я решил использовать комбинацию com.alcoapps.actionbarextras и https://github.com/mcongrove/com.mcongrove.slideMenu.

Кажется, что и пользовательская панель действий, и опция ящика работают так, как должны.

Проблема, однако, в том, что оно показывает изображение "меню", оно кликабельно, но я понятия не имею, как прикрепить к нему событие.

Я пробовал несколько способов, таких как привязка события ко всей панели действий того, что когда-либо было… Но я не могу найти подходящую привязку для достижения этой цели.

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>

Я надеюсь, что люди с большим знанием о Titanium и / или этих модулях могут мне помочь.

С наилучшими пожеланиями, larssy1

Answer 1

После обращения к создателю виджета результат будет следующим:

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