Appcelerator Titanium Facebook Like Menu - titanium

Question

at that moment i'm developing an App where i want to use the Facebook Like Menü from here:
https://github.com/mpociot/titanium-facebook-slide-menu
// ALPHABYTES
// Facebook like menu window
var leftMenu = Ti.UI.createWindow({
backgroundColor: 'red',
top: 0,
left: 0,
width: 150,
zIndex: 1
});
var data = [{title:"Row 1"},{title:"Row 2"},{title:"Row 3"},{title:"Row 4"}];
var tableView = Ti.UI.createTableView({ data: data });
leftMenu.add(tableView);
leftMenu.open();
// Facebook like menu window
var rightMenu = Ti.UI.createWindow({
backgroundColor: 'red',
top: 0,
right: 0,
width: 150,
zIndex: 1
});
var data = [{title:"Row 1"},{title:"Row 2"},{title:"Row 3"},{title:"Row 4"}];
var tableView = Ti.UI.createTableView({ data: data });
rightMenu.add(tableView);
rightMenu.open();
// animations
var animateLeft = Ti.UI.createAnimation({
left: 150,
curve: Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT,
duration: 500
});
var animateRight = Ti.UI.createAnimation({
left: 0,
curve: Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT,
duration: 500
});
var animateNegativeLeft = Ti.UI.createAnimation({
left: -150,
curve: Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT,
duration: 500
});
var win = Titanium.UI.createWindow({
left: 0,
zIndex: 10
});
var win1 = Titanium.UI.createWindow({
backgroundColor: 'white',
title: 'Facebook menu',
left: 0,
zIndex: 10
});
var nav = Titanium.UI.iPhone.createNavigationGroup({
window: win1,
left: 0,
width: Ti.Platform.displayCaps.platformWidth
});
var button = Ti.UI.createButton({
title: 'm',
left: 10,
width: 30,
height: 30,
top: 10
});
var button2 = Ti.UI.createButton({
title: 'm',
right: 10,
width: 30,
height: 30,
top: 10
});
var touchStartX = 0;
var touchStarted = false;
win1.addEventListener('touchstart',function(e){
touchStartX = parseInt(e.x,10);
});
win1.addEventListener('touchend',function(e){
touchStarted = false;
if( win.left < 0 ){
if( win.left <= -140 ){
win.animate(animateNegativeLeft);
isToggled = true;
} else {
win.animate(animateRight);
isToggled = false;
}
} else {
if( win.left >= 140 ){
win.animate(animateLeft);
isToggled = true;
} else {
win.animate(animateRight);
isToggled = false;
}
}
});
win1.addEventListener('touchmove',function(e){
var x = parseInt(e.globalPoint.x, 10);
var newLeft = x - touchStartX;
if( touchStarted ){
if( newLeft <= 150 && newLeft >= -150)
win.left = newLeft;
}
// Minimum movement is 30
if( newLeft > 30 || newLeft < -30 ){
touchStarted = true;
}
});
nav.add(button);
nav.add(button2);
win.add(nav);
win.open();
var isToggled = false;
button.addEventListener('click',function(e){
if( !isToggled ){
win.animate(animateLeft);
isToggled = true;
} else {
win.animate(animateRight);
isToggled = false;
}
});
button2.addEventListener('click',function(e){
if( !isToggled ){
win.animate(animateNegativeLeft);
isToggled = true;
} else {
win.animate(animateRight);
isToggled = false;
}
});
I have also implemented the menu and everything works as expected.
Now my Problem is the following:
If i click in the leftMenu on e.g. "Row 1" ("Settings" with me), i want to have my Settings Menu shown in the Main Window. How to do that?
If i create a new Window and open it, i get a complete new window without the facebook menu on the left and the buttons... I don't know how to do?!?! Can someone help?
Thanks,
Sascha

Answer 1

I hope I did't misunderstand your question, but I would open new windows as views inside of the main window. Here's some code: https://gist.github.com/manumaticx/4961175
Or do you want to change the menu? Then you would do the same to the left menu window!

Answer 2

var curWin = Titanium.UI.createWindow();
var menuBtn = Titanium.UI.createButton({
title : "Menu",
top : 20,
left : 5,
zIndex : 999
});
var windowView = Titanium.UI.createView({
top : 60,
left : 0,
right : 0,
width : '100%',
height : '100%',
backgroundColor : "blue",
zIndex : 1
});
curWin.add(windowView);
curWin.add(menuBtn);
curWin.open();
var menuWindow = Titanium.UI.createView({
top : 20,
left : 0,
width : 150
});
curWin.add(menuWindow);
//// ---- Menu Table
// Menu Titles
var menuTitles = [{
title : 'Menu 1'
}, {
title : 'Menu 2'
}, {
title : 'Menu 3'
}, {
title : 'Menu 4'
}, {
title : 'Menu 5'
}, {
title : 'Menu 6'
}];
// Tableview
var tableView = Titanium.UI.createTableView({
data : menuTitles
});
menuWindow.add(tableView);
var toggle = false;
menuWindow.hide();
menuBtn.addEventListener('click', function(e) {
if (toggle) {
menuWindow.hide();
toggle = false;
windowView.left = 0;
menuBtn.left = 5;
} else {
menuWindow.show();
toggle = true;
windowView.left = 150;
menuBtn.left = 160;
}
});
windowView.addEventListener('click', function(e) {
if (toggle) {
menuWindow.hide();
toggle = false;
windowView.left = 0;
menuBtn.left = 5;
}
});