yomybaby / kr.yostudio.drawer

DrawerLayout, Titanium Alloy widget. (Android: com.tripvi.drawerlayout, iOS: using ScrollableView)

DrawerLayout

This is a Alloy drawer widget for Android drawerLayout style.
I got a lot of ideas and hints from @FokkeZB's drawer. Thanks @FokkeZB. :)
On Android, this works as a wrapper of Ti.DrawerLayout Android module. Thanks @Tripvi and @manumaticx.
On iOS, this works using pure Titanium API.

ios	androd

Why use this?

I want to make it simple and use leftNavButton, rightNavButton, Menu, ActionBar on xml directly even using drawer.

Usage

1. Install the Ti.DrawerLayout Unfortunately, latest version of Ti.DrawerLayout not avaliable on gitt.io. Because original version of this module was stopped to maintain. You can download @manumaticx version.
2. Install this widget via gitTio:

gittio install kr.yostudio.drawer

1. In your xml, use like below code. You have to set one leftView and one centerWindow

xml

<Alloy>
	<Widget src="kr.yostudio.drawer"
    	onDraweropen="onDrawerOpen"
		onDrawerclose="onDrawerClose">
		<View class="menuWrap" role="leftView">
			<Require id="menuC" src="menu">
			</Require>
		</View>
		<Window platform="ios" role="centerWindow" title="yo.drawer widget">
			<LeftNavButton>
				<View>
					<Button  class="ion-android-menu menuBtn" onClick="onMenuButtonClick"/>
				</View>
			</LeftNavButton>
			<Require src="main" id="mainC">
			</Require>
		</Window>
		<Window platform="android" role="centerWindow">
		    <ActionBar onHomeIconItemSelected="onMenuButtonClick" title="yo.drawer widget" ></ActionBar>
			<Menu>
				<MenuItem id="item1" title="Settings"/>
				<MenuItem id="item2" title="Search"/>
			</Menu>
			<Require src="main" id="mainC">
			</Require>
		</Window>
	</Widget>
</Alloy>

js

function onMenuButtonClick(e){
    $.index.toggleLeftView();
}

function onDrawerOpen(e) {
    Ti.API.info($.index.isLeftDrawerOpen);
}

function onDrawerClose(e) {
    Ti.API.info($.index.isLeftDrawerOpen);
}

$.menuC.on('menuclick',function(e){
    $.index.toggleLeftView({animated:false}); //animated option only work on ios
    
    switch(e.itemId){
      case 'smile':
      case 'cry':
        $.index.openWindow(Alloy.createController(e.itemId).getView());
      break;
      
      default:
        $.index.setCenterView(Alloy.createController(e.itemId).getView()); //Arg shold be View(not window)
      break;
    }
});

$.index.open();

Method

Name	Description
toggleLeftView	Toggle left drawer open status
openWindow	openWindow on Navigation window (On Android, just open new window)
setCenterView	change centerView

Event

Name	Description
draweropen	Fired after drawer opened
drawerclose	Fired after drawer closed
drawerslide	Fired while drawer is sliding

To do

This is a very first version. Welcome to any suggest and any PR.

• Add changeCenterView method as a widget method. resolve #2
• Add drawerslide event

License

MIT

kr.yostudio.drawer's Issues

Adding SearchView to ActionBar

I can't figure out how to add SearchView - or other menu items - into the ActionBar, without hacking the code. The ActionBar only allows 1 settings dropdown. What's the proper way to do this?

Scrollview horizontal not working

Hi

if i add a scrollview with horizontal layout under a view the app crashes:

[ERROR] : V8Exception: Exception occurred at ti:/titanium.js:315: Uncaught Error: Attempt to invoke virtual method 'boolean ti.modules.titanium.ui.widget.TiUIScrollView.getScrollingEnabled()' on a null object reference

can you help me?

thanks!

Memory management.

Hello, I'm trying to do some proper memory allocation using your beautiful widget, so I'm implementing a cleanup() function that runs on window close like so:

$.personWindow.addEventListener('close', function() {
    // let Alloy clean up listeners to global collections for data-binding
    // always call it since it'll just be empty if there are none
    $.destroy();

    // remove all event listeners on the controller
    $.off();
});

• The thing is, 'close' dispatches only when I go back from a newly opened window to the previous window (nav tree level up) and never when I open a new window.

I believe it should also close the previous window, since we are not using it, or if not the previous one, maybe the one before the previous etc..

• Also 'close' dispatches ONLY when I open a new window and NEVER when I change my center view.

The thing is, I'm trying to think of a good way to clean stuff up, and I was wondering:

• Is there a way to know how many levels deep inside the nav tree I currently am. Is there any property I can access?
• In a blind shot, is there perhaps any OTHER way I could be managing my memory allocations other than what I'm currently describing? If yes what is that way?

Again thank you for your widget! I'm grateful!

Not responding menu on IOS with share module

I use the drawer with the widget https://github.com/ricardoalcocer/socialshare/tree/master/app/widgets/com.alcoapps.socialshare
that uses the module dk.napp.social on IOS.
I use the share widget in window opened with $.drawer.openWindow() in that window a use a button to open the share module. Once it's opened and return to use the drawer, the menu is opened but is not clickable, only respond the background. This only happens on Iphone, on Ipad the social its opened in a popup and works well.

In Android, CenterWindow's title bar (action bar) does not disappear.

HI ! everyone. and thanks for creater.

I want to that,
In Android, CenterWindow's title bar (action bar) does not disappear.
I want a fullscreen screen without a title bar (action bar).

I've tried some guided methods at http://docs.appcelerator.com/platform/latest/#!/guide/Android_Action_Bar. I set up a theme in Tiapp.xml, set up Cutom_theme.xml, tried actionbar.hide (), but failed.

In the following issues, it seems that the title bar (action bar) is customized. Is there any way to erase it?

Please advise. Thank you.

How do I style the navigation bar?

Hello, I LOVE your widget, thank you for sharing.

I'd like to know how I can style the navigation bar in iOS, let me explain.

I have 2 xml view files:

index.xml

<Alloy>
    <Widget id="drawer" class="container" src="kr.yostudio.drawer" onDraweropen="onDrawerOpen" onDrawerclose="onDrawerClose">
        <View class="menuWrap" role="leftView">
            <Require id="menuC" src="menu">
            </Require>
    /View>
        <Window platform="ios" role="centerWindow" id="titleBearer" title="Dashboard"  >
            <LeftNavButton>
                <View>
                    <Button  class="ion-android-menu barItem" onClick="onMenuButtonClick"/>
                </View>
            </LeftNavButton>
            <TitleControl><Label id="barTitleLbl" class="barItem" >Dashboard</Label></TitleControl>
            <RightNavButton>
                  <View>
                    <Button  class="ion-android-settings barItem" onClick="toggleSettings"/>
                </View>
                <!-- <Widget class="barItem barBtn" src="com.rolandschwan.iconlabel" onClick="toggleSettings"/> -->
            </RightNavButton>
        </Window>

    </Widget>

</Alloy>

and announcements.xml:

<Alloy>
    <Window id="announcementsWindow" class="container">
        <LeftNavButton>
            <Widget id="barMenuBtn" class="barItem barBtn" src="com.rolandschwan.iconlabel" onClick="toggleMenu"/>
        </LeftNavButton>
        <TitleControl><Label id="barTitleLbl" class="barItem" >Announcements</Label></TitleControl>
        <RightNavButton>
            <Widget id="barSettingsBtn" class="barItem barBtn" src="com.rolandschwan.iconlabel" onClick="toggleSettings"/>
        </RightNavButton>

        <TitleControl><Label>Announcements</Label></TitleControl>
        <Label id="dashboardLabel">I am announcements!</Label>
    </Window>
</Alloy>

I'm able to style index.xml bar like so

but I'm not able to style announcement.xml bar for some strange reason.

Notice that eventhough I define LeftNavButton, TitleControl, and RightNavButton in both views, in the announcements.xml view ONLY the RightNavButton part of the code actually does what its supposed to. For example, the title SHOULD be white!

Any ideas?
Thanks!

Set center view on Android ?

Hi,
I have installed kr.yostudio.drawer widget with com.tripvi.drawerlayout module.
Actually, we cannot update center view because "setCenterView" method from module is not exposed.

First, I have added container view in "centerWindow" with update method for set the content view.

But, this solution doesn't work with Google Maps. The drawerlayout module handles this case.
Solution, for update center view on Android :

DrawerLayout.prototype.setCenterView = function(view){
    if (OS_ANDROID && view) {
      this.drawer.setCenterView(view);
    }
};

in my project :

#CoffeeScript
drawerLayout = Alloy.createWidget('kr.yostudio.drawer')
mapView = require('ti.map').createView()
$.sections.addEventListener 'itemclick', (event) =>
   drawerLayout.setCenterView(mapView) if event.itemIndex is 1
...

Doesn't seem to work with com.tripvi.drawerlayout 3.0.1

I'm trying to use the new version of titanium sdk 7.0.2.GA which is requiring me to update to 3.0.1 of com.tripvi.drawerlayout. When the app loads the menu doesn't appear and I'm not sure why. It worked fine with 2.0.0 and titanium sdk 6.0.1.

Has anyone had a chance yet to test this with the new sdk?

Thanks.

Open Child Window

Hi @yomybaby,

I need to open a child window with the back button as your widget does. I'll try to explain more. If i click an option in the menu a window opens, in that window i have a button to open a new window, how can i add to that window to the navigationwindow in ios and in Android how can i create a modal window with the back button?

Appreciate your help.

index window is not open in IOS

Hi,

the index window didnt open in IOS if i place the menu view under the next level of the widget. example like the view below but it worked in android.

    <View class="menuWrap" role="leftView">
        <Require id="menuC" src="menu">
        </Require>
    </View>         
    <Window platform="ios" role="centerWindow" title="yo.drawer widget">    
        <LeftNavButton>
            <View>
                <Button backgroundColor="black" onClick="onMenuButtonClick"/>
            </View>
        </LeftNavButton>
        <Require src="main" id="mainC">
        </Require>
    </Window>

</Widget>

But the index able to open if i move the menu view into window view and then i will get these error below when i click on the menu button

[ERROR] : message = "undefined is not an object (evaluating 'this._view.scrollView.views[this._view.scrollView.currentPage ? 0 : 1]')";
[ERROR] : stack = "toggleLeftWindow\ntoggleLeftView\nonMenuButtonClick";

The Titanium SDK i used is 5.4.0GA.

ScrollView on mainView

Hi!
I have trouble creating a scrollView inside the main view (what you see before opening the drawer).
It works everywhere (ex. opening another window) except inside the "main" controller.

<Require src="main" id="mainC"> </Require>

This is my main.xml

<Alloy>
<ScrollView id="testscroll" layout="vertical" backgroundColor="white" showVerticalScrollIndicator="true"></ScrollView>
</Alloy>

my main.js

var containerView = Ti.UI.createView({
  height: Ti.UI.SIZE,
  layout: "vertical",
  borderColor: "blue"
});
var label1 = Ti.UI.createLabel({
  text: "MyText",
  color: "black"
});

containerView.add(label1);
$.testscroll.add(containerView);

Appreciate your help.

Window Title Color

Hi

I'm using a custom theme to give the window title a background color, instead of the gray. Works fine, but when i open a new view under the current view the new one has the gray color and not the one i have on the theme. Do you have any ideas?

thanks!

direction menu

Hi, there is a way to open menu from the bottom side?
thanks in advice.

How to show the leftview or leftmenu from top?

Hi all,

I wan't show the left side menu list as like gmail left side menu for both android and iOS.
Left side menu list should be start from top of the window(Not below of action bar onwards) for both android and iOS.

Can any one help me out, How to get that with this widget.

Scrollview

Hi!

When you have a lot of options in the menu in iphone the scroll is not working.

iOS, stuck on splash screen if "run-on-main-thread = true" on tiapp.xml

Hello @yomybaby

I use this widget in one big app, we need to flag as true on tiapp.xml
<property name="run-on-main-thread" type="bool">true</property>

But I found today, and after many tests and also after run the kr.yostudio.drawer app example, that indeed stop on splash screen.

I will try see what is happen in mean time if you can kindly check that too I appreciate.

P.S If I omit the that flag or set to false, works ok!.

Status

Hello @yomybaby, what is the status at this point in time of this widget ?

IOS Support?

Hi all ,

previously I am used com.tripvi.drawerlayout module for android through titanium.
I want use com.tripvi.drawerlayout module for IOS through titanium.

To Support com.tripvi.drawerlayout module for IOS , I have installed kr.yostudio.drawer module in through titanium.Now I able to add the com.tripvi.drawerlayout module to my app.But when I am running my app I am getting below error:

[ERROR] :  Module com.tripvi.drawerlayout version 1.2.0 is missing library file: /Users/srinivas/Library/Application Support/Titanium/modules/iphone/com.tripvi.drawerlayout/1.2.0/libcom.tripvi.drawerlayout.a

can any help me out how to resolve it?

index.js

var TiDrawerIndex = require('com.tripvi.drawerlayout');
$.index.open();

System requirements:

Node.JS: 0.10.13
Titanium CLI: 3.4.1
Node.Acs: 10.0.21
Alloy: 1.5.1
Titanium Studio: 3.4.1.2014
Titanium Sdk version: 3.5.0 GA
Ios Sdk: 8.1
Mac Os X: 10.9.5 64bit os

Change color from container where the menu buttons are

Hi,

In your widget examples at the index.xml controller you have an Windows that acts like an navigation bar (the one that has title yo.drawer widget).

How do i change the background color of this window, because it always shows in gray.