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
});
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.