*Summary:*
The
Ti.UI.ButtonBar is a row of buttons on does not display a "selection" state when a button is tapped like
Ti.UI.TabbedBar. Because of this, the
Ti.UI.ButtonBar "index" property should be removed since it isn't relevant.
*Issue 1:*
Setting the "index" property should not put a button in the "selected" state.
Run the below code on iOS.
Note that the middle button "Two" is selected. (See attached "Screenshot.png".)
Tap on the middle button.
Notice the selection state is removed.
Tap on the left button.
Notice the left button is not selected. (It shouldn't be selected.)
*Issue 2:*
Fetching the value of property "index" always returns -1 unless fetched during the "click" event
Run the below code on iOS.
Tap on the right-most button.
Notice the 1st logged message "(1) buttonBar.index: 2" has the correct index.
Notice the 2nd message "(2) buttonBar.index: -1" has the incorrect index.
In this case, it would be better to use the "click" event's "index" property.
var window = Ti.UI.createWindow();
var buttonBar = Ti.UI.createButtonBar({
labels: ["One", "Two", "Three"],
index: 1,
});
buttonBar.addEventListener("click", function(e) {
Ti.API.info("@@@ (1) buttonBar.index: " + buttonBar.index);
setTimeout(function() {
Ti.API.info("@@@ (2) buttonBar.index: " + buttonBar.index);
}, 10);
});
window.add(buttonBar);
window.open();
*Recommended Solution:*
Remove the "index" property. It is not appropriate for this type of UI control. It would be better to use the "click" event's "index" property to identify which button was clicked on.
*Note:*
I think the "index" property exists for this UI control because it shares the same Objective-C code as
Ti.UI.TabbedBar. An "index" property makes sense for
TabbedBar since it has a selection state.
This issue is being raised since we want to add
ButtonBar to Android and Windows and we don't think the "index" property will make sense on those platforms either.
Oh, the
ButtonBaruses a segmented control as well? We do we even have that? It's a duplicate of theTi.UI.[iOS].TabbedBar. Let's deprecate the whole API.I'm okay with us keeping the
ButtonBarfeature (why break it if we don't have to), but I do question its value. If we were to implement it on Android and Windows, then it would simply be a horizontal layout of buttons. Not particularly interesting.PR - https://github.com/appcelerator/titanium_mobile/pull/10473 Test case 1 -
// Should not log deprecation message var window = Ti.UI.createWindow({ backgroundColor: 'white' }); var tabbedBar = Titanium.UI.iOS.createTabbedBar({ labels: ["One", "Two", "Three"], index: 1, }); tabbedBar.addEventListener("click", function(e) { Ti.API.info("@@@ (1) tabbedBar.index: " + tabbedBar.index); Ti.API.info("@@@ (2) tabbedBar.index: " + e.index); setTimeout(function() { Ti.API.info("@@@ (3) tabbedBar.index: " + tabbedBar.index); }, 10); }); window.add(tabbedBar); window.open();// Should log deprecation message var window = Ti.UI.createWindow({ backgroundColor: 'white' }); var buttonBar = Titanium.UI.createButtonBar({ labels: ["One", "Two", "Three"], index: 1, }); buttonBar.addEventListener("click", function(e) { Ti.API.info("@@@ (1) Should result (-1): " + buttonBar.index); Ti.API.info("@@@ (2) Should give selected value: " + e.index); setTimeout(function() { Ti.API.info("@@@ (3) Should result (-1): " + buttonBar.index); }, 10); }); window.add(buttonBar); window.open();FR Passed. Waiting on CR and Jenkins build.
Closing ticket, fix verified in SDK version
8.0.0.v20181210172243. Test and other information can be found at: https://github.com/appcelerator/titanium_mobile/pull/10473