[ALOY-1746] Support Ti.UI.OptionBar as a tag

GitHub Issue	n/a
Type	New Feature
Priority	None
Status	Closed
Resolution	Fixed
Resolution Date	2021-06-16T14:06:49.000+0000
Affected Version/s	n/a
Fix Version/s	CLI Release 9.0.0
Components	n/a
Labels	n/a
Reporter	Ewan Harris
Assignee	Ewan Harris
Created	2021-03-01T18:35:15.000+0000
Updated	2021-06-16T14:06:49.000+0000

Description

TIMOB-28317 adds support for a new Ti.UI.OptionBar element, this should be mirrored in Alloy so that it's usable easily It should only be useable for apps using SDK 10 or higher, it maybe should have a similar API to where it allows Children elements that will be mapped to the labels property a la Ti.UI.ButtonBar An API that matches the ButtonBar usage:

<Alloy>
	<Window>
		<OptionBar style="Ti.UI.OPTION_STYLE_BUTTON">
			<Labels>
				<Label selected="true">Button 1</Label>
				<Label image="/Button2.png">Button 2</Label>
				<Label>Button 3</Label>
			</Labels>
		</OptionBar>
	</Window>
</Alloy>

* -The selected property will set the index property on the UI element to that option, it should warn if multiple have it set- The index should either be set on the OptionBar directly or programatically on open * The image property will change the entry for that option to be a label like ** Question, is setting an image all or nothing or can an individual element set it? *Individual elements can specify an image, on iOS setting an image will cause the text to not be shown*

{ image: <path>, label: <label> }

Comments

Ewan Harris 2021-03-01

Noting that my preference is to match the ButtonBar API

Ewan Harris 2021-03-02

PR: https://github.com/appcelerator/alloy/pull/1117

   <Alloy>
   	<Window layout="vertical">
   		<Label top="10dp">Text Buttons</Label>
   		<OptionBar style="Ti.UI.OPTION_STYLE_BUTTON" onClick="doClick" top="10dp">
   			<Labels>
   				<Label>One</Label>
   				<Label>Two</Label>
   				<Label>Three</Label>
   			</Labels>
   		</OptionBar>
   		<View backgroundColor="gray" width="Ti.UI.FILL" height="1dp" top="10dp" />
   
   		<Label top="10dp">Image Buttons</Label>
   		<OptionBar style="Ti.UI.OPTION_STYLE_CHIP" onClick="doClick" top="10dp">
   			<Labels>
   				<Label image="/images/tab1.png" />
   				<Label image="/images/tab2.png" />
   				<Label image="/images/tab1.png" />
   			</Labels>
   		</OptionBar>
   		<View backgroundColor="gray" width="Ti.UI.FILL" height="1dp" top="10dp" />
   
   
   		<Label top="10dp">Image/Text Buttons</Label>
   		<OptionBar style="Ti.UI.OPTION_STYLE_CHIP" onClick="doClick" top="10dp " layout="vertical">
   				<Labels>
   				<Label image="/images/tab1.png">One</Label>
   				<Label image="/images/tab2.png">Two</Label>
   				<Label image="/images/tab1.png">Three</Label>
   			</Labels>
   		</OptionBar>
   		<View backgroundColor="gray" width="Ti.UI.FILL" height="1dp" top="10dp" />
   	</Window>
   </Alloy>

   function doClick (e) {
   	console.log(e.index);
   }
   $.index.open();

JSON Source