[TIMOB-9093] iOS: Setting backgroundImage on a custom navBar button does not show up the button
| GitHub Issue | n/a |
|---|
| Type | Bug |
|---|
| Priority | High |
|---|
| Status | Closed |
|---|
| Resolution | Fixed |
|---|
| Resolution Date | 2012-07-10T23:26:50.000+0000 |
|---|
| Affected Version/s | Release 1.8.2 |
|---|
| Fix Version/s | Release 2.1.0, Sprint 2012-11 API |
|---|
| Components | iOS |
|---|
| Labels | SupportTeam, api, module_navgroup, qe-testadded |
|---|
| Reporter | Varun Joshi |
|---|
| Assignee | Vishal Duggal |
|---|
| Created | 2012-05-10T09:24:52.000+0000 |
|---|
| Updated | 2012-07-11T15:10:53.000+0000 |
|---|
Description
Problem
When a button is created without the backgroundImage property set, and added to the navbar using setRightNavButton method the code works. However, when backgroundImage is set on the button, the button isn't displayed.
Steps to Reproduce
Run the below sample code and provide any image in the backgroundImage property to see the issue.
Sample Code
{noformat}
//create module instance
var self = Ti.UI.createTabGroup();
var win1 = Ti.UI.createWindow({
title : 'Hello World',
backgroundColor : 'white'
});
var navBarRightButton = Ti.UI.createButton({title: 'Test Button', backgroundImage:'buttonBackground.png'});
var button = Ti.UI.createButton({
height : 44,
width : 200,
title : 'openWindow',
top : 20
});
win1.add(button);
win1.setRightNavButton(navBarRightButton);
var tab1 = Ti.UI.createTab({
title : 'home',
icon : '/images/KS_nav_ui.png',
window : win1
});
var win2 = Ti.UI.createWindow({
title : 'Hello World',
backgroundColor : 'white'
});
var tab2 = Ti.UI.createTab({
title : 'settings',
icon : '/images/KS_nav_views.png',
window : win2
});
self.addTab(tab1);
self.addTab(tab2);
self.open();
{noformat}
Comments
JSON Source
This ticket will be scheduled in next sprint. For now you can use the following JS workaround
var wrapper = Ti.UI.createView(); var navBarRightButton = Ti.UI.createButton({title: 'Test Button', backgroundImage:'buttonBackground.png'}); wrapper.add(navBarRightButton); win1.setRightNavButton(wrapper);Closing issue Tested with Ti Studio build 2.1.0.201206172244 Ti Mobile SDK2.1.0.v20120618134156 hash r00905cd0 OSX Lion 10.7.3 iPhone 4S OS 5.1 The expected behavior is shown
Updating the background image in the code does still not update the background image of a custom navbar button. Example: // we have set the backgroundImage at the creation, now we call this function to update it: function showStatePicker() { state_label.focus(); state_label.enabled = false; backNavButton.title = L('Select'); backNavButton.backgroundImage = '/imgs/navbar/navbar.png'; backNavButton.removeEventListener('click', closeAnimation); backNavButton.addEventListener('click', hideStatePicker); self.setRightNavButton(backNavButton); self.add(states_picker); if (!state_label.value) { state_label.value = states_picker_data[0].title; } }
Reopening to update labels.