Picker Fields in Titanium

D e c

0 9

2 0 1 0

I see a lot of questions in the Titanium Developer Forum about hiding the Keyboard when you click a text field. Typically you want to bring a Picker up when you do this.

Almost every response says "Just blur the field in a focus handler" While I guess this "works" you can still see the keyboard slide in and out. Especially on the iPhone 3G and OG.

I present a better way.

First, create your Picker and the view, and provide a toolbar to cancel or choose your selection.

var pickerView = Titanium.UI.createView({
  height:260,
  bottom:-260
});
var cancel =  Titanium.UI.createButton({
  title:'Cancel',
  style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
cancel.addEventListener('click',function() {
  pickerView.animate(slide_out);
});
 
var done =  Titanium.UI.createButton({
  title:'Done',
  style: Titanium.UI.iPhone.SystemButtonStyle.DONE
});
done.addEventListener('click', function(event) {
  specialField.text = picker.getSelectedRow(0).title;
  specialField.color = "#333333"; // no more hint text
  pickerView.animate(slide_out);
});
 
var spacer =  Titanium.UI.createButton({
  systemButton: Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
 
var toolbar =  Titanium.UI.createToolbar({
  height: 43,
  top: 0,
  items:[cancel,spacer,done]
});
pickerView.add(toolbar);
window.add(pickerView); // do this last or set a z-index

You probably already had something similar to slide in when the textField was focused. Notice I didn't put the picker in this example.

Now comes the key part. Make a view and a label that look like a textField. Luckily, Titanium (or javascript really) lets you assign random attributes to an existing object. (OK, so it's really an associate array but we're going to use Object Notation so it looks like a traditional attribute)


var specialFieldView = Ti.UI.createView({
  borderColor: "#a6a6a6",
  top: 240,
  width: 260,
  height: 40
});
var specialField = Ti.UI.createLabel({
  color: "#bbb",
  left: 10,
  width: 260,
  height: 40,
  text: "Choose Special Thing", // used like hint text
  font: {fontSize: 16, fontWeight: "normal"}
});
specialFieldView.add(specialField);

specialFieldView.addEventListener('click', function(event) {
  pickerView.animate(slide_in);
});

So the key now is to just make the View and Label combination look like your Text Fields. It's pretty easy to do. If you want to use Hint Text, just make sure to change the text color to something darker once the value is set.

my current Work Stack

here's all my posts so far

here's some tweets I made

Picker Fields in Titanium