Category Archives: Titanium

Hoy vamos a ver cómo podemos crear una lista desplegable con opciones para elegir. Este componente suele ser muy habitual en las apps sobre todo para elegir localidades, fechas, etc.

  1. El primer paso como siempre es tener un proyecto ya creado o crear uno.
  2. A continuación añadimos el código necesario para crear nuestra lista desplegable con las opciones que queremos. Éste sería el código:

Como podemos observar en el código, la lista desplegable está dividida en varias partes:

  • Picker: Es el elemento principal. En este aparatado indicamos las propiedades que queremos que tenga.
  • PickerColumn: Con este componente indicamos que vamos a añadir una columna. Este quiere decir que podemos hacer una lista desplegable de varias columnas juntas. Esto es más habitual cuando queremos que el usuario elija fecha y hora.
  • PickerRow: Este parámetro indica cada fila que tendrá la lista desplegable. Con el atributo “title” mostraremos el texto que tiene que aparecer en la fila.
<Alloy>
	<Window class="container">
		<Picker id="selector" selectionIndicator="true">
            <PickerColumn id="columna1">
                <PickerRow title="Opción 1" />
                <PickerRow title="Opción 2" />
                <PickerRow title="Opción 3" />
                <PickerRow title="Opción 4" />
            </PickerColumn>          
        </Picker>
	</Window>
</Alloy>

Además de estos atributos podemos añadir más para modificar su apariencia a nuestro gusto. En este enlace se indican todas las propiedades y eventos.

El código que acabamos de hacer es una forma sencilla y estática de crear una lista desplegable pero, ¿cómo podríamos hacerlo de manera que se rellene automáticamente? En el archivo .js que hace referencia a la vista donde hemos añadido nuestra lista, en mi caso index.js, he incluido el siguiente código que simplemente añade una fila extra al objeto.

var fila = Ti.UI.createPickerRow({title: "fila nueva"}); //Definimos uan variable que será la fila nueva y la creamos indicando el texto que mostrará
$.selector.add(fila); //añadimos la fila a la lista desplegable con id=selector.

Así queda el resultado.

Ejemplo de lista desplegable

Ejemplo de lista desplegable

 

Existe una manera muy sencilla para mostrar un listado de componentes por pantalla en forma de tabla. Vamos a hacer un ejemplo para ver cómo queda. Estos son los pasos a seguir:

  1. Debemos tener creado un proyecto o elegir uno donde vayamos a mostrar el listado.
  2. El código para crear una tabla es el siguiente:
<TableView id="table">
    <TableViewSection id="seccion1" headerTitle="Titulo Sección">
        <TableViewRow title="Texto de componente" />
    </TableViewSection>
</TableView>

Ahora miraremos un poco sus propiedades:

– TableViewSection: Con esta etiqueta indicamos que la tabla está dividida en secciones que contendrán filas en su interior. Además, en el atributo “headerTitle” escribimos el texto que queramos que se muestre por pantalla. Podemos no añadir este apartado si preferimos que nuestra tabla no contenga secciones.

– TableViewRow: Esta etiqueta indica que es una fila. Cada fila que queramos añadir tendrá que ser un “tableViewRow”. De la misma manera que con el “tableViewSection”, el atributo “title” indica el texto que mostrará en esta fila.

Aparte de estas propiedades, existen más para poder configurarlo al gusto de cada uno. Aquí dejo el enlace.

Es muy común que los datos que queremos mostrar en una tabla los obtengamos de una base de datos o los tengamos ya en un array guardados. Para eso habría que automatizar el proceso de creación de las filas para crear tantas filas como contenido queramos visualizar. Este sería el código que añade una fila por cada componente guardado en un array.

var arrayData = Array("Componente 1","Componente 2","Componente 3"); // En este array se guardan los datos a mostrar por pantalla
 
for(var i = 0; i < arrayData.length; i++){
	// Por cada componente que vamos a mostrar, creamos una fila dentro de la sección que hemos añadido a nuestra tabla.
	var row = Titanium.UI.createTableViewRow({
		title:arrayData[i] // Aquí indicamos el texto que se visualizará por pantalla en esa fila.
	});
	$.seccion1.add(row);
}

Hoy vamos a ver lo sencillo que resulta crear labels en Titanium. Las labels son etiquetas que se suelen utilizar para mostrar un texto. Los pasos para crear una label son los siguientes.

  1. Creamos un proyecto nuevo o elegimos uno que ya tengamos creado. En caso de crear el proyecto, con alloy, por defecto en el archivo “index.xml” ubicado en “app->views” hay una label creada.
  2. Deberá ir dentro del código de una ventana “window” ya que donde queremos que se muestre es en nuestra pantalla. El código para crear una label quedaría así:
<Alloy>
	<Window class="container">
		<Label id="label">Texto que muestra la label</Label>
	</Window>
</Alloy>

Existen muchas propiedades que podemos poner a estas etiquetas como por ejemplo el color de fondo, el color de texto, etc. Del mismo modo que podemos definir a nuestro gusto las labels, podemos aplicar eventos. En este enlace están todos los eventos y propiedades.

Empezando a usar los componentes más habituales en una app, vamos a comenzar por crear un botón con un evento. Haremos que al hacer click en el botón se muestre un mensaje. Estos son los pasos a seguir:

1.- Primero creamos el proyecto Alloy.

2.- En el archivo “index.xml” ubicado en la ruta “app -> views” escribimos el código para crear el botón indicando el texto que mostrará y el evento, que en nuestro caso será “onclick”. A este evento pondremos que ejecute una función llamada “ejemploClick”, la cual vamos a crear en el siguiente paso.

<Alloy>
    <Window class="container">
        <Button id="button" onClick="ejemploClick" title="Pulsar boton" />
    </Window>
</Alloy>

3.- A continuación buscamos el archivo controlador javascript de la vista donde estamos, en este caso como hemos creado el botón en “index.xml” vamos al archivo “index.js” situado en “app -> controllers” y creamos la función javascript llamada “ejemploClick” que mostrará un mensaje por pantalla.

function ejemploClick(e) {  
    alert("Mensaje");
}
$.index.open();

Con esto ya tenemos creado nuestro botón. Existen muchos más eventos y propiedades que se pueden añadir a los botones. Aquí está la documentación oficial.

La manera más fácil que hay para navegar entre distintas pantallas si desarrollamos con Titanium es creando pestañas. Cada pantalla en una pestaña, de esta manera nos quedará un menú donde tendremos acceso a todas las pantallas que queramos. Los pasos a seguir para crear estas pestañas son los siguientes:

1.- Lo primero que necesitamos es tener un proyecto Alloy creado. Si no lo tenemos pues vamos al menú “File -> New -> Mobile Project” y ahí elegimos “Alloy”.

2.- Una vez que el proyecto está creado, abrimos el archivo “index.xml” ubicado en “app -> views” y para crear una pestaña simplemente debemos escribir este código:

<Alloy>
	<TabGroup> <!-- Creamos un grupo de pestañas -->
		<Tab title="Pantalla 1" icon="KS_nav_ui.png"> <!-- Creamos una pestaña con su icono y su etiqueta -->
			<Window title="Pantalla1"> <!-- Indicamos la pantalla que está contenida dentro de la pestaña -->
				<Label>Contenido de la pantalla 1</Label> <!-- Aquí añadimos el contenido de la pantalla-->
			</Window>
		</Tab>
	</TabGroup>
</Alloy>

Si queremos añadir más pestañas simplemente tenemos que crear otra etiqueta “Tab” seguida de la que ya tenemos con toda su estructura igual que la pestaña anterior.

 

Cuando creamos un proyecto con Titanium Appcelerator, vemos que al ejecutarlo añade por defecto una splash screen a nuestra app. Vamos a ver cómo podemos modificarla para que muestre la imagen que nosotros queremos:

1.- Lo primero que necesitamos es tener el proyecto creado y la imagen que vamos a poner preparada.

2.- Para que nuestra app muestre la imagen que nosotros queremos es muy sencillo, simplemente tenemos que sustituir los archivos “default.png” que se encuentran en la ruta “app -> assets -> android -> images -> res-xxxx-yyyy-zzzz” donde cada parámetro indica la resolución de la pantalla y si es a lo largo o a lo ancho. La imagen que nosotros pongamos debe tener como nombre “default.png” y debe tener la resolución apropiada según indica la carpeta donde la copiemos.

Splash screen Titanium

Splash screen Titanium

En caso de hacerlo para iphone la ruta estaría dentro de la carpeta “iphone” y las imágenes serían las que empiezan por “Default”.

El primer paso que daremos con Titanium Appcelerator es cambiar el icono de nuestra app. Para ello seguiremos estos pasos:

1.- Primero tenemos que tener preparada la imagen que queramos poner de icono.

2.- Una vez creado el proyecto, accedemos a la ruta “app -> assets” y dentro nos encontramos con varias carpetas con el nombre de diferentes dispositivos móviles como Android, Iphone, etc… Para cambiar el icono simplemente debemos copiar nuestra imagen dentro de la carpeta de cada dispositivo móvil.

Ruta iconos

Ruta iconos

En mi caso la he puesto dentro de “android” ya que lo probaré en el emulador de Titanium aunque es recomendable que la imagen esté en todas las carpetas para asegurarnos de que se verá igual en todos los dispositivos.

3.- El último paso que nos queda es abrir el archivo “tiapp.xml” y modificar la propiedad “Icon” escribiendo el nombre de la imagen que hemos copiado anteriormente.

Propiedades tiapp

Propiedades tiapp

Ahora ya podemos ver el resultado en el emulador o en un dispositivo móvil.

Hoy voy a hablar sobre Titanium Appcelerator. Esta herramienta es un framework de desarrollo de apps para dispositivos móviles basado en el entorno de desarrollo ya conocido Aptana. La peculiaridad que tiene es la posibilidad de hacer una app como si de una Web se tratara (HTML5, CSS3 y Javascript) y la opción de hacer programas nativos utilizando para ello el lenguaje de programación Javascript orientado a objetos. El framework compila el código generado y lo adapta al dispositivo donde se va a instalar por lo tanto, ya sea app Web o nativa con Javascript, no es necesario codificar varias veces según el dispositivo móvil donde queramos ejecutarlo como por ejemplo en iOS y Android. Así que voy a explicar cómo se realiza la instalación de esta herramienta:

1.- Primero hay que tener una cuenta en la web de Titanium Appcelerator para poder descargarse la aplicación. En este enlace está el formulario para registrarse. A continuación nos descargamos el programa.

2.- Una vez descargado lo ejecutamos para instalarlo y cuando termine deberemos esperar hasta asegurarnos de que todo está actualizado. Si queremos probar el código en un emulador de Android necesitamos descargar e instalar el SDK de Android. Para ello en la página principal que se muestra al abrir Titanium hay un botón donde indica que se puede instalar Android SDK.

Instalar SDK

Instalar SDK

Pulsamos y descargamos las librerías. Hay que tener en cuenta que Titanium requiere la versión 2.2 de Android por lo que es importante que se marque esa opción al instalar.

Seleccionar API 2.2

Seleccionar API 2.2

3.- Ya podemos crear un nuevo proyecto. Pinchamos en la opción “Create project”, elegimos “mobile project” y rellenamos los datos como el id de proyecto y su nombre.

Crear proyecto

Crear proyecto

4.- Una vez creado el proyecto ya podemos ejecutarlo pulsando en “Run -> Android emulator” para ver cómo queda.

Ejecutar en emulador

Ejecutar en emulador

A partir de este momento ya podemos empezar a codificar como queramos el programa.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies