Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Popover multiple right hand side buttons/rightHandNavBar multiple buttons

Hello, I had posted this on the premium support pages but it seems like it's taking a little while to get a response (well, Clint did respond, but it still isn't working). I was wondering if you guys here in the community would mind looking at my problem really quick?

Here is the ticket:
I was needing to create a popover with multiple buttons (one system cancel one system save) and I was able to find samples on how to create a popover with a single rightHand button. But, I couldn't locate one with multiple buttons.

I was also needing the same to show up on a window with 2 buttons for the rightNavButton. I kept getting errors whenever I tried to add the system buttons. I can add a single button with no problem (also, I am not wanting to use a button bar since I want it to be styled like separate buttons).

Would you be able to provide me with a quick code sample of adding a multiple button navbar to the right hand side at the top?

Here is what is happening (notice the top right buttons):

http://skitch.com/swhitlow/d25wy/iphone-simulator%3C/

Here is the code:

var btnRefresh = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.REFRESH,
    right:50
});

btnRefresh.addEventListener('click', function() {
    alert("Refresh code here");
});

var btnAddNew = Titanium.UI.createButton({
    systemButton:Titanium.UI.iPhone.SystemButton.ADD
});

btnAddNew.addEventListener('click', function() {
    alert("Add new code here");
});

var oppListViewBtn = Ti.UI.createView({
    width: 50,
    height: 25
});

oppListViewBtn.add(btnRefresh);
oppListViewBtn.add(btnAddNew);

oppTableWindow.rightNavButton = oppListViewBtn;


oppTableWindow.add(tableview);
detailNavigationGroup.open(oppTableWindow,{animated:true});

Here is what is happening with the popover:
http://skitch.com/swhitlow/d25wk/iphone-simulator%3C/

Here is the code for that section:

var close = Ti.UI.createButton({
        systemButton:Titanium.UI.iPhone.SystemButton.CANCEL,
        right: 75
    });
    close.addEventListener('click', function()
    {
        popover.hide({animated:true});
        contactPanel.visible = false;
    });

    var btnSave = Ti.UI.createButton({
        systemButton:Titanium.UI.iPhone.SystemButton.SAVE
    });
    btnSave.addEventListener('click', function() {
        popover.hide({animated:true});
        contactPanel.visible = false;
    });

    var btnView = Ti.UI.createView({
        width: 100,
        height: 25
    });

    btnView.add(close);
    btnView.add(btnSave);

    var popover = Ti.UI.iPad.createPopover({ 
        width:400, 
        height:200,
        title:'Add Task',
        arrowDirection:Ti.UI.iPad.POPOVER_ARROW_DIRECTION_RIGHT,
        rightNavButton:btnView
    });
— asked October 1st 2010 by Scott Whitlow
  • buttons
  • ipad
0 Comments

1 Answer

  • There are a couple things that I changed in the PopOver code and it helped the look somewhat. The first is your view width which had been 100 but each button was 100 each so you needed at least 200 so I changed the width to 'auto.' The next thing I changed was I got rid of the system constants and replaced them with a title that matched what they were trying to do. It's not perfect but it looks better.

    
            var close = Ti.UI.createButton({
              title: 'Cancel',
              right: 75
            });
    
            close.addEventListener('click', function() {
              popover.hide({animated:true});
              contactPanel.visible = false;
            });
    
            var btnSave = Ti.UI.createButton({
              title: 'Save'
            });
    
            btnSave.addEventListener('click', function() {
              popover.hide({animated:true});
              contactPanel.visible = false;
            });
    
            var btnView = Ti.UI.createView({
              width: 'auto',
              height: 25
            });
    
            btnView.add(close);
            btnView.add(btnSave);
    

    The code above will also work, more or less, in a Window as well.

    — answered October 1st 2010 by John McKnight
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.