viezel/NappDrawer

Black Window on open drawer

Opened this issue · 7 comments

AlokGupta007 commented

Hi Team,

I am facing the issue in drawer. When I opening the drawer there is a black screen is showing in iPhone.
I am using the latest module of drawer 1.2.1, 1.2.3 and latest sdk of titanium 5.5.0
Please help, It's urgent.

Thanks

jcsomac commented

Can you show your code ?

AlokGupta007 commented

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title : 'Tab 1',
backgroundColor : '#fff'
});

var label1 = Titanium.UI.createLabel({
color : '#999',
text : 'I am Window 1',
font : {
fontSize : 20,
fontFamily : 'Helvetica Neue'
},
textAlign : 'center',
width : 'auto'
});

win1.add(label1);

//
// create controls tab and root window
//

win1.open();

label1.addEventListener('click', function(e) {
drawer.open();
});

var leftMenuView = Ti.UI.createView({
backgroundColor : 'white',
width : Ti.UI.FILL,
height : Ti.UI.FILL
});

var centerView = Ti.UI.createView({
backgroundColor : 'white',
width : Ti.UI.FILL,
height : Ti.UI.FILL
});

var rightMenuView = Ti.UI.createView({
backgroundColor : '#ddd',
width : Ti.UI.FILL,
height : Ti.UI.FILL
});

// create a menu
var leftTableView = Ti.UI.createTableView({
font : {
fontSize : 12
},
rowHeight : 40,
data : [{
title : 'Toggle Left View'
}, {
title : 'Change Center Windowr'
}, {
title : 'Default Window'
}]
});
leftMenuView.add(leftTableView);
leftTableView.addEventListener("click", function(e) {
Ti.API.info("isAnyWindowOpen: " + drawer.isAnyWindowOpen());
switch(e.index) {
case 0:
drawer.toggleLeftWindow();
//animate back to center
alert("You clicked " + e.rowData.title + ". Implement menu structure.. ");
break;
case 1:
drawer.setCenterWindow(Ti.UI.createView({
backgroundColor : "red"
}));
drawer.toggleLeftWindow();
//animate back to center
break;
case 2:
drawer.setCenterWindow(centerView);
drawer.toggleLeftWindow();
//animate back to center
break;
}
});

// Action Bar - FAKE example
var actionBar = Ti.UI.createView({
top : 0,
height : "44dp",
backgroundColor : "#333"
});
var leftToolbarBtn = Ti.UI.createButton({
title : "Left",
left : "6dp",
backgroundColor : "transparent",
color : "#FFF"
});
leftToolbarBtn.addEventListener("click", function() {
drawer.toggleLeftWindow();
});
var rightToolbarBtn = Ti.UI.createButton({
title : "Right",
right : "6dp",
backgroundColor : "transparent",
color : "#FFF"
});
rightToolbarBtn.addEventListener("click", function() {
drawer.toggleRightWindow();
});
var centerLabel = Ti.UI.createLabel({
text : "NappDrawer",
font : {
fontSize : "14dp",
fontWeight : "bold"
},
color : "#FFF"
});
actionBar.add(leftToolbarBtn);
actionBar.add(rightToolbarBtn);
actionBar.add(centerLabel);
centerView.add(actionBar);

// create interface
var scrollView = Ti.UI.createScrollView({
layout : "vertical",
left : 0,
right : 0,
top : "44dp",
contentHeight : 'auto',
contentWidth : "100%",
showVerticalScrollIndicator : true,
showHorizontalScrollIndicator : false
});

var slider = Ti.UI.createSlider({
top : "20dp",
width : "280dp",
min : 0,
max : 1,
value : 0.2
});
var label = Ti.UI.createLabel({
text : "Parallax: " + slider.value,
color : "#000",
top : "15dp"
});
slider.addEventListener('touchend', function(e) {
label.setText("Parallax: " + e.source.value);
drawer.setParallaxAmount(e.source.value);
});
scrollView.add(label);
scrollView.add(slider);

var gestureModeBtn = Ti.UI.createButton({
title : "Gesture Mode: ALL",
toggled : true,
top : 10
});
gestureModeBtn.addEventListener("click", function(e) {
if (!e.source.toggled) {
var mode = "ALL";
drawer.setOpenDrawerGestureMode(NappDrawerModule.OPEN_MODE_ALL);
} else {
var mode = "NONE";
drawer.setOpenDrawerGestureMode(NappDrawerModule.OPEN_MODE_NONE);
}
gestureModeBtn.setTitle("Gesture Mode: " + mode);
e.source.toggled = !e.source.toggled;

});
scrollView.add(gestureModeBtn);

function updateSlider(value) {
slider.value = value;
slider.fireEvent("touchend", {
source : {
value : value
}
});
}

// animation mode
var animationMode = 0;
var animationModeBtn = Ti.UI.createButton({
title : "Animation Mode: NONE",
top : 10
});
var aniModeText;
animationModeBtn.addEventListener("click", function(e) {
if (animationMode == 3) {
animationMode = 0;
} else {
animationMode++;
}
switch(animationMode) {
case 0:
drawer.setAnimationMode(NappDrawerModule.ANIMATION_NONE);
updateSlider(0.2);
aniModeText = "NONE";
break;
case 1:
drawer.setAnimationMode(NappDrawerModule.ANIMATION_SLIDEUP);
updateSlider(0);
aniModeText = "SLIDEUP";
break;
case 2:
drawer.setAnimationMode(NappDrawerModule.ANIMATION_ZOOM);
updateSlider(0);
aniModeText = "ZOOM";
break;
case 3:
drawer.setAnimationMode(NappDrawerModule.ANIMATION_SCALE);
updateSlider(0);
aniModeText = "SCALE";
break;
}
animationModeBtn.setTitle("Animation Mode: " + aniModeText);
});
scrollView.add(animationModeBtn);

centerView.add(scrollView);

// CREATE THE MODULE
var NappDrawerModule = require('dk.napp.drawer');
var drawer = NappDrawerModule.createDrawer({
fullscreen : false,
leftWindow : leftMenuView,
centerWindow : centerView,
rightWindow : rightMenuView,
fading : 0.2, // 0-1
parallaxAmount : 0.2, //0-1
shadowWidth : "40dp",
leftDrawerWidth : "200dp",
rightDrawerWidth : "200dp",
animationMode : NappDrawerModule.ANIMATION_NONE,
closeDrawerGestureMode : NappDrawerModule.CLOSE_MODE_MARGIN,
openDrawerGestureMode : NappDrawerModule.OPEN_MODE_ALL,
orientationModes : [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT]
});

drawer.addEventListener("didChangeOffset", function(e) {
Ti.API.info("didChangeOffset: " + e.offset);
});

drawer.addEventListener("windowDidOpen", function(e) {
Ti.API.info('Opennnnnnnnnnnn')
if (e.window == NappDrawerModule.LEFT_WINDOW) {
Ti.API.info("windowDidOpen - LEFT DRAWER");
} else if (e.window == NappDrawerModule.RIGHT_WINDOW) {
Ti.API.info("windowDidOpen - RIGHT DRAWER");
}
});
drawer.addEventListener("windowDidClose", function(e) {
Ti.API.info("windowDidClose");
});

// Action Bar - REAL example
drawer.addEventListener('open', onNavDrawerWinOpen);
function onNavDrawerWinOpen(evt) {

Ti.API.info('Open Calll;lllll');
this.removeEventListener('open', onNavDrawerWinOpen);

if (this.getActivity()) {
    // need to explicitly use getXYZ methods
    var actionBar = this.getActivity().getActionBar();

    if (actionBar) {
        // Now we can do stuff to the actionbar
        actionBar.setTitle('NappDrawer Example');

        // show an angle bracket next to the home icon,
        // indicating to users that the home icon is tappable
        actionBar.setDisplayHomeAsUp(true);

        // toggle the left window when the home icon is selected
        actionBar.setOnHomeIconItemSelected(function() {
            drawer.toggleLeftWindow();
        });
    }
}

}

// lets open it

It's example given in module.

jcsomac commented

hi ALok... the example has no "tabview"..
Please.. check again.

https://github.com/viezel/NappDrawer/blob/master/ios/example/app.js

e-m-s-y commented

This module doesn't support TabGroups.

caspahouzer commented

Of course it does! I'm using it with a tabGroup

e-m-s-y commented

@caspahouzer On android this won't work because a TabGroup is basically a Window object which can't be set as a centerWindow.

#87

caspahouzer commented

You're right. Sorry. Had my view only to iOS

  • Sebastian

Sent from my iPhone

Am 21.10.2016 um 12:31 schrieb Gerben Hofman notifications@github.com:

@caspahouzer On android this won't work because a TabGroup is basically a Window object which can't be set as a centerWindow.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.