Drawer widget Titanium alloy

Question

I'm new in Titanium and I want to put a Drawer Widget but the Widget doesn't appears. Soemeone con tell me why and the solution? Thanks.

Here is my classes:

index.xml

<Alloy>
    <Window class="container">
        <Require type="widget" src="com.appcelerator.drawer" id="drawer" />
    </Window>
</Alloy>

This is de javascript class.

index.js

var principal = Ti.UI.createWindow({
    fullscreen : true,
    navBarHidden : true
});

var boton1 = Ti.UI.createButton({
    zIndex : 0,
    width : "33%",

    height : "50%",
    top : 0,
    left : 0
});
var boton2 = Ti.UI.createButton({
    zIndex : 0,
    width : "34%",
    height : "50%",
    top : 0,
    center : true
});

var boton3 = Ti.UI.createButton({
    zIndex : 0,
    width : "33%",
    height : "50%",
    top : 0,
    right : 0
});

principal.add(boton1);
principal.add(boton2);
principal.add(boton3);

$.drawer.init({
    mainWindow : principal,
    buttons : [{
        id : 'One',
        title : 'One',
        backgroundcolor : "white",
        click : function(e) {
            alert("One");
        }
    }],
    gutter : 5,
    overrideMenu : true
});

principal.open();

Answer 1

Actually you added widget in another window and you are passing another window object in index.js file so only use one window.

index.xml

<Alloy>
    <Window class="container" id="principal">
        <Require type="widget" src="com.appcelerator.drawer" id="drawer" />
    </Window>
</Alloy>

index.js

$.drawer.init({
    mainWindow : $.principal,
    buttons : [{
        id : 'One',
        title : 'One',
        backgroundcolor : "white",
        click : function(e) {
            alert("One");
        }
    }],
    gutter : 5,
    overrideMenu : true
});

$.principal.open();