Haciendo una lista de opciones desplegables en Titanium Appcelerator – Código y Vídeo

Algunas veces necesitamos una verdadera lista de opciones desplegables (combobox) para nuestros proyectos pero el SDK del Iphone no tiene uno que sea nativo (al menos que yo sepa) y por supuesto tampoco lo tiene Titanium.

Así que construiremos uno. Un “verdadero” combobox para iPhone y iPad que permita al usuario usar el mismo campo de texto para introducir textos arbitrarios o seleccionar un valor desde un elemento UIPicker.

Actualizado con capturas de pantalla de @CJ_Reed’s screenshot y el código del final del tutorial.

Vemos el vídeo primero, luego haremos el trabajo:

Ok, qué necesitamos para este combobox para el iPhone?

Primero que todo, necesitamos un campo de texto textField que acepte entradas del usuario. Titanium le permite colocar un botón a la izquierda (leftButton) y un botón a la derecha (rightButton) para este textField mientras se construye. Así que tomaremos ventaja de esto y crearemos un textField de la siguiente manera:

var my_combo = Titanium.UI.createTextField({
	hintText:"write your name or select one",
	height:40,
	width:300,
	top:20,
	borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});

Nada especial, un textField regular con una pequeña referencia para el usuario que desaparecerá cuando el textField tenga un valor.

Ahora necesitamos crear el rightButton para él.

Usaremos los botones del sistema provistos por Apple(Titanium.UI.iPhone.SystemButton.DISCLOSURE) sólo que lo rotaremos 90 grados para que sirva a nuestros propósitos. Este es el código que crea el rightButton y la transformación aplicada al mismo.

var tr = Titanium.UI.create2DMatrix();
tr = tr.rotate(90);
 
var drop_button =  Titanium.UI.createButton({
		style:Titanium.UI.iPhone.SystemButton.DISCLOSURE,
		transform:tr
});

Ahora que tenemos el rightButton que necesitamos, el constructor del textField se convierte en:

var my_combo = Titanium.UI.createTextField({
	hintText:"write your name or select one",
	height:40,
	width:300,
	top:20,
	borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
	rightButton:drop_button,
	rightButtonMode:Titanium.UI.INPUT_BUTTONMODE_ALWAYS
});

Note la declaración rightButtonMode:Titanium.UI.INPUT_BUTTONMODE_ALWAYS , esto hace que el botón sea visible todo el tiempo.

Así es como se ve:

iPhone combobox with Titanium

Bastante sexy verdad?, bueno, aún no hemos terminado.

Construir el selector modal

Cuando el usuario coloque el foco en el textField, el teclado aparece – así que tendremos que construir nuestro selector para emular el mismo comportamiento y maximizar la usabilidad de nuestro formulario. Para esto necesitaremos un Selector y dos botones: “Done” y “Cancel”. Estos dos botones posicionaremos en una barra de herramientas, nuevamente, para emular de la mejor manera posible, el comportamiento del teclado.

Construyamos todo:

var picker_view = Titanium.UI.createView({
	height:251,
	bottom:0
});
 
var cancel =  Titanium.UI.createButton({
	title:'Cancel',
	style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
});
 
var done =  Titanium.UI.createButton({
	title:'Done',
	style:Titanium.UI.iPhone.SystemButtonStyle.DONE
});
 
var spacer =  Titanium.UI.createButton({
	systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
 
var toolbar =  Titanium.UI.createToolbar({
	top:0,
	items:[cancel,spacer,done]
});
 
var picker = Titanium.UI.createPicker({
		top:43
});
picker.selectionIndicator=true;
 
var picker_data = [
	Titanium.UI.createPickerRow({title:'John'}),
	Titanium.UI.createPickerRow({title:'Alex'}),
	Titanium.UI.createPickerRow({title:'Marie'}),
	Titanium.UI.createPickerRow({title:'Eva'}),
	Titanium.UI.createPickerRow({title:'James'})
];
 
picker.add(picker_data);
 
picker_view.add(toolbar);
picker_view.add(picker);

Este código es un poco largo, pero no es ciencia de cohetes, algunas cosas sobre las que conversar:

  • Todo está envuelto en una vista – picker_view – porque tendremos que animarlo como lo hace el teclado, así que es mas rápido animar sólo un elemento.
  • La altura del picker_view es la altura de la barra de herramientas (43px) + la altura del selector (208px). Cómo sé esto? Usé una regla. 😀

La interfaz del combobox se verá así:

picker Titanium for combobox

Creando la animación del selector

Adicionalmente, necesitamos crear dos animaciones: slide_in y slide_out. Animaremos la propiedad bottom del picker_view. Necesitamos comenzar con el picker_view fuera de la pantalla, por lo tanto, lo construimos de la siguiente manera:

 bottom:-251

En vez de cero como tenia inicialmente.

var slide_in =  Titanium.UI.createAnimation({bottom:0});
var slide_out =  Titanium.UI.createAnimation({bottom:-251});

La lógica detrás de la animación es esta:

  • El usuario coloca el foco sobre el textField – el teclado aparece (es hecho por el SO, no hay de que preocuparse aquí), y si el picker_view está visible, necesitamos ocultarlo.
  • El usuario hace click en el rightButton – necesitaremos ocultar el teclado y mostrar el picker_view

Aquí está el código:

my_combo.addEventListener('focus', function() {
	picker_view.animate(slide_out);
});
 
drop_button.addEventListener('click',function() {
	picker_view.animate(slide_in);
	my_combo.blur();
});
 
cancel.addEventListener('click',function() {
	picker_view.animate(slide_out);
});

Además añadí el evento para cuando hagan click en el botón cancel para ocultar el picker_view.

Llenar el textField con el valor del selector

Lo único que nos queda por hacer es colocar el valor del selector en el textField de my_combo cuando el usuario haga click en el botón done y ocultar el pick_view.

done.addEventListener('click',function() {
	my_combo.value =  picker.getSelectedRow(0).title;
	picker_view.animate(slide_out);
});

El método getSelectedRow del selector retorna la fila seleccionada, y nosotros usaremos este titulo. El argumento del getSelectedRow es el índice de la columna del selector, y ya que sólo tenemos uno, es 0.

Bajar el proyecto

El directorio de recursos del proyecto puede ser bajado aquí.

Todo lo demás tiene licencia MIT y como es usual, difundan la palabra 🙂

Tenemos una actualización

@CJ_Reed só este tutorial para “producir tipos de datos de selección múltiple en una sola ventana”

Así es como se ve:

producir tipos de datos de selección múltiple en una sola ventana

Puede echarle un vistazo al código aquí.

Estupendo trabajo!