Update to 2.0

CHANGELOG.txt

@@ -1,2 +1,3 @@
 01/18/2013 orthlieb Version 1.0: Initial commit
 02/04/2013 orthlieb Version 1.1: Remove dependency on Alloy.Globals.mainWindow (evil) and use a parameter instead. Also support parent styling through .tss file.
+03/25/2013 orthlieb Version 2.0: You can now style the dropButton on the combobox via the parent tss file. Passing in choices and the selected id is no longer supported at init() time, you need to do this explicitly in your code. Styling the combobox is no longer supported at init() time, you need to do this explicitly in the parent .tss file.

app/config.json

@@ -6,6 +6,6 @@
     "os:ios": {},
     "os:android": {},
     "dependencies": {
-        "com.orthlieb.combobox": "1.0"
+        "com.orthlieb.combobox": "2.0"
     }
 }

app/controllers/index.js

@@ -55,7 +55,8 @@ var countries = {
 	esh: { title: 'Western Sahara' }, yem: { title: 'Yemen' }, zmb: { title: 'Zambia' }, zwe: { title: 'Zimbabwe' } 
 }
 
-$.country.init({ choices: countries, id: $.country.id, parentView: $.getView() });
+$.country.init($.getView());
+$.country.choices = countries;
 
 $.country.on('change', function (event) {
 	alert('Country changed: ' + event.id + " => " + event.value);
@@ -75,7 +76,8 @@ var colors = {
     violet: { title: "Violet", rgb: "#9400D3" }
 };
 
-$.color.init({ choices: colors, id: $.color.id, parentView: $.getView() });
+$.color.init($.getView());
+$.color.choices = colors;
 
 $.color.on('change', function (event) {
     $.swatch.backgroundColor = colors[event.id].rgb;

app/styles/index.tss

@@ -18,7 +18,12 @@
     right: 5, 
     height: 40, 
     borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED, 
-    hintText: 'Select a Country' 
+    hintText: 'Select a Country',
+    dropButton: {
+        color: "black",
+        selectedColor: "yellow",
+        style: Ti.UI.iPhone.SystemButtonStyle.PLAIN
+    }     
 },
 
 "#color": {
@@ -27,5 +32,10 @@
     right: 5, 
     height: 40, 
     borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED, 
-    hintText: 'Select a Color'
+    hintText: 'Select a Color',
+    dropButton: {
+        color: "black",
+        selectedColor: "yellow",
+        style: Ti.UI.iPhone.SystemButtonStyle.PLAIN
+    }     
 }

app/widgets/com.orthlieb.combobox/controllers/widget.js

@@ -5,36 +5,29 @@
 
 var defaults = {
 	editable: false,
-	rightButtonMode:Ti.UI.INPUT_BUTTONMODE_ALWAYS
+	rightButtonMode: Ti.UI.INPUT_BUTTONMODE_ALWAYS
 };
+var dimensions =  [ "left", "top", "right", "bottom", "center", "width", "height" ];
+var properties = [ "choices", "id", "parentView" ];
 
 // Allow parameters to be brought in through the parent tss file.
-var comboBoxArgs = _.defaults(arguments[0], defaults);
-_.extend($.field, _.omit(comboBoxArgs, ["choices", "id", "parentView"]));
+var args = _.defaults(arguments[0], defaults);
+if (OS_IOS) {
+    _.extend($.field, _.chain(args).omit(properties).omit(dimensions).value());
+    _.extend($.container, _.pick(args, dimensions));
+    _.extend($.dropButton, args.dropButton);
+    $.field.rightButton = $.dropButton;
+} else {
+    _.extend($.field, _.omit(args, properties));    
+}
 
 /**
  * @method init
  * Initializes the combobox.
- * @param {Object} comboBoxArgs Standard properties for a Ti.UI.TextField.
- * @param {Object} [choices] Dictionary of entries where the key is a selectable id and the value is an object suitable for use in a TiUIPickerRow. Must have a title entry for each item.
- * @param {String} [id] Key of the selected item in the combobox.
  * @param {TiUIWindow} [parentView] Parent view/window to display the picker in.
- * NOTE: The comboBoxArgs are for backwards compatibility only. It is better to include the view based properties of the combobox in the parent view's tss file.
- * The last three parameters can now be included in the comboBoxArgs objects or in place of the comboBoxArgs as named arguments. 
  */
-exports.init = function (comboBoxArgs, choices, id) {
-	comboBoxArgs = _.defaults(comboBoxArgs, defaults);
-	_.extend($.field, _.omit(comboBoxArgs, ["choices", "id", "parentView"]));
-
-    $.choices = choices || comboBoxArgs.choices;
-    $.id = id || comboBoxArgs.id;	
-    $.parentView = comboBoxArgs.parentView || Alloy.Globals.mainWindow;
-
-    if (OS_IOS) {
-        // In IOS the combobox is a text field with a right drop down button.
-        $.dropbutton.transform = Ti.UI.create2DMatrix().rotate(90);
-        $.field.rightButton = $.dropbutton;
-     }
+exports.init = function (parentView) {
+     $.parentView = parentView || Alloy.Globals.mainWindow;
 };
 
 // id is currently selected item in the combobox.	
@@ -79,7 +72,7 @@ Object.defineProperty($, "choices", {
             // Pickers must be destroyed and then recreated if you change their choices.
 	       if ($.picker) 
 	           $.field.remove($.picker);
-	       $.picker = null;
+	       $.picker = null;   	
 	       CreatePicker(); 
 	   }
 	}
@@ -117,6 +110,11 @@ if (OS_IOS) {
         // create the picker on the fly and destroy/recreate when the choices change.
         $.picker = Ti.UI.createPicker({ left: 0, top: 0, width: Ti.UI.FILL, height: Ti.UI.FILL });
 
+        // Degenerate case, no choices yet. You still need to create a picker!
+        if (!$._choices || !_.keys($._choices).length) {
+            $._choices = { dg: { title: $.field.hintText || "Choose..." } };
+        }
+
         // Load up the picker. We also populate an id entry to allow for easy back mapping on the trigger.
         var rows = [], i, count = -1, selected = -1;
         for (i in $.choices) {

app/widgets/com.orthlieb.combobox/styles/pickerview.tss

@@ -12,7 +12,7 @@
     left: 0,
     width: Ti.UI.FILL,
     height: 45, 
-	barColor : '#515151' // Putty
+	barColor : '#26688b' // Putty
 },
 "#cancel": { 
 	top: 5, 

app/widgets/com.orthlieb.combobox/styles/widget.tss

@@ -1,7 +1,18 @@
-"#dropbutton[platform=ios]": {
-    right : 0,
-    bottom : 0,
+"#container[platform=ios]": {
+    width: Ti.UI.SIZE,
+    height: Ti.UI.SIZE
+},
+
+"#field[platform=ios]": {
+    left: 0,
+    center: { y: "50%" },
+    width: Ti.UI.FILL
+},
+
+"#dropButton[platform=ios]": {
+    right: 0,
     width : Ti.UI.SIZE,
     height : Ti.UI.SIZE,
-    style : Ti.UI.iPhone.SystemButton.DISCLOSURE
+    title: '\u25BC',
+    backgroundColor: 'transparent'
 }

app/widgets/com.orthlieb.combobox/views/widget.xml

@@ -1,5 +1,7 @@
 <Alloy>
-	<TextField platform="ios" id="field" onClick="ComboBoxClick"/>
-	<Button platform="ios" id="dropbutton" onClick="ComboBoxClick"/>
+    <View id="container" platform="ios">
+        <TextField id="field" onClick="ComboBoxClick"/>
+        <Button id="dropButton" onClick="ComboBoxClick"/>
+	</View>
     <View platform="android,mobileweb" id="field"/>
 </Alloy>

app/widgets/com.orthlieb.combobox/widget.json

@@ -3,7 +3,7 @@
 	"name": "com.orthlieb.combobox",
 	"description" : "The Combobox widget provides a field that allows the user to pick from a list of items.",
 	"author": "Carl Orthlieb",
-	"version": "1.1",
+	"version": "2.0",
 	"copyright":"Copyright (c) 2013",
 	"license":"Apache 2.0",
 	"min-alloy-version": "1.0",

tiapp.xml

@@ -29,6 +29,7 @@
         </orientations>
     </iphone>
     <android xmlns:android="http://schemas.android.com/apk/res/android"/>
+    <property name="ti.android.fastdev" type="bool">false</property>
     <mobileweb>
         <precache/>
         <splash>