Custom Buttons in addition to a TabGroup

You must Login before you can answer or comment on any questions.

Im sure this has been addressed before, in fact I found a similar post to it, but it was almost 3 years old. Im building an app that has a tab group with 5 tabs at the bottom. on the main window I have 4 buttons and need for them to act just as the tabs at the bottom do. For example, button one will take you to the same page/window as tab two, etc..

The reason Im posting this is because last week I found a great post on how to best code this to avoid overlap, but have searched now for almost 2 hours and cannot find it. Can anyone point me to where I learn how to code the buttons so that when clicked they go to the same windows that the tabs do. I should also ask this- should the buttons be in a customized navigation menu? I saw a post that states that so have to ask.

Im building this app for iPhone, iPad, and Android. I have learned Xcode (Objective-C) and know some JavaScript, and am hoping to fall in love with Appcelerator Titanium too. So far its been a great experience, but Im definitely an Appcelerator newbie.

Any help, or point in the right direction would be sincerely appreciated.

Thank you, John

7 Answers

Accepted Answer

All you have to do is add an event listener to the click event of the button that calls the TabGroup method setActiveTab. This is how your code would look (assume the TabGroup is named tabGroup): 

var button = Titanium.UI.createButton({
   title: 'Hello',
   top: 10,
   width: 100,
   height: 50
});
button.addEventListener('click', function(e) {
    // Set the active tab here, its 0-indexed, so this will set the tab to the first tab
    tabGroup.setActiveTab(0);
});
I'm not entirely sure what your use case is but this is the basic code to change the active tab with a button.

Josiah thank you! I have the Event Listener in based on the documentation, but was stuck on the internal nav. I really appreciate you finding my post, as it had dropped back a couple pages, and helping me out. I will give it a shot and jump back here if for some reason it is not working like I need it to. I have to just say, for whoever happens to read this, but this forum is so much nicer than the Apple forum as far as the kindness and willingness to help. I got the point with Xcode where I would jump out to external forums for help because the guys typically answering the questions on the Apple forum tend to be rude and treat the newbies like they are experts asking newbie questions. Once again, my post was several pages back by now Im sure and I thank you for jumping in and providing me some assistance.

Best regards, John

— answered 10 months ago by John Bergman
answer permalink
1 Comment

  • Glad to help, we all start somewhere. Post back here if you continue to have problems, also please upvote! :-)

    — commented 10 months ago by Josiah Hester

OK here is a serious newbie question...how do I "upvote" and what is it? I seriously am brand new to Appcelerator but am here to stay so please elaborate and I will do it.

— answered 10 months ago by John Bergman
answer permalink
1 Comment

  • When you get your question answered you select from the answers given and choose one, this closes the thread essentially and allows other people to learn from your question, and my answer.

    — commented 10 months ago by Josiah Hester

Also, just so I follow the proper etiquette, can I ask you another question unrelated to my first or do I need to start a new thread? I got slammed on the Apple forum for that. Thank you!

— answered 10 months ago by John Bergman
answer permalink
2 Comments

  • If I answered your question satisfactorily, then you need to choose my answer as the answer to the question and then start a new thread (especially if the question is significantly different or on another topic).

    — commented 10 months ago by Josiah Hester

  • The whole idea is to keep a knowledge base of questions and answers, so separating it by topics allows others to learn from these questions, upvoting is when someone gives a really good answer, so you click on the up arrow, downvoting is when someone gives a crap answer and you click on the down arrow.

    — commented 10 months ago by Josiah Hester

Thank you again. I clicked on "best answer". I appreciate your help and will post my new questions in a new thread for each because they are significantly different than this topic. I appreciate your help and feedback.

John

OK so that did not do it. Im going to post the code here, with the addition that I made based on your suggestion. Let me also review my question just in case i missed something. Yes its called "tabGroup" and there are 5 tabs at the bottom. On the main page I have 4 buttons, the first to lead to tab2(window, page, etc..2) , the second to lead to tab3 and so on. Basically, my client just wants the buttons as a second option to the tabs. So here is the code on the main page, "app.js"- this is the first part of the code and I included it to show where it links over to a second page, "photos.js" where I have the buttons coded with their event listeners.

First part of "app.js":

Titanium.UI.setBackgroundColor ('#fff');

var tabGroup = Titanium.UI.createTabGroup(); . var win1 = Titanium.UI.createWindow({

title: 'Preschool Daily App',
backgroundImage: 'images/homeScreen2.png',
url: 'photos.js'

});

var tab1 = Titanium.UI.createTab ({ icon:'images/house.png', title:'PDA Main', window:win1 });

First part of "photos.js" to show all of the code for the first button, including your suggestion:

var win = Ti.UI.currentWindow;

var label1 = Titanium.UI.createLabel({ color:'#000', text:'New Window', font:{fontSize:20, fontFamily:'Helvetica Newe'}, textAlign:'center', width:'auto' });

var button = Ti.UI.createButton({ backgroundImage:'button1.png', title: 'Daily Reports', top: 3, width: 190, height:45

});

button.addEventListener('click', function(e) {

        tabGroup.setActiveTab(0);

        //});
        //newWin.myvar - "This is my var text";

        //Titanium.UI.currentTab.open(newWin,{animation:true});

});

I created this from a tutorial I watched and the tutorial had the Event Listener just put "You clicked the button" and that still appears down in the console. However, clicking the button does not take them to page 2/ tab 2. Have I provided enough information for you to understand where I am going wrong?

Most appreciated, John

— answered 10 months ago by John Bergman
answer permalink
1 Comment

  • It looks like tabGroup is not in the scope of photos.js, therefore inaccessible. As a quick fix, just make tabGroup a variable of each window. Like this:

    var win1 = Titanium.UI.createWindow({
    title: 'Preschool Daily App',
    backgroundImage: 'images/homeScreen2.png',
    url: 'photos.js'
});
// Do this for each window
win1.tabGroup = tabGroup;
    Then change the button code to : 
    button.addEventListener('click', function(e) {
        win.tabGroup.setActiveTab(0);
});
    Also if you use the styling when your posting it will make your code easier for everyone to read.

    — commented 10 months ago by Josiah Hester

Your Answer

Think you can help? Login to answer this question!