Monthly Archives: junio 2013

You are browsing the site archives by month.

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);
}
App de éxito

App de éxito

Ayer acudí a una charla sobre las oportunidades de negocio con las Apps patrocinada por Enpresa Digitala y aunque fue toda la mañana estuvo muy interesante y clarificante. Básicamente trataban temas sobre cómo desarrollar una app de éxito y qué hay que tener en cuenta a la hora de enfrentarnos a esta clase de retos.

Estos son los puntos más importantes:

  • Tener una idea sencilla: A la hora de crear una app, es importante que sea fácil de decir. Se tiene que poder explicar el objetivo de la aplicación con una frase. De lo contrario su función no está clara y puede dar lugar confusiones a la hora de usarla.
  • No hace falta que sea original: No importa si la aplicación que queremos crear es original o no, lo que importa es que cumpla su función perfectamente. Si es un juego tiene que entretener mucho, si es una herramienta que facilita la labor del usuario que resuelva sus problemas.
  • Tener un modelo de negocio claro: Hay que tener claro el modelo de negocio ya que es la forma de obtener beneficios o no:
    • Gratuita: Una app gratuita no genera beneficios. Sin embargo puede usarse este modelo de negocio para captar clientes por ejemplo.
    • De pago: Aunque los usuario prefieren las aplicaciones gratuitas, hay muchas que son únicamente de pago. Al usuario no le importa pagar por algo que vale la pena.
    • Freemium: Actualmente la mayoría de las apps usan este modelo de negocio. Esta basado en ofrecer la aplicación de forma gratuita pero con la realización de micropagos se puede acceder a contenido extra que ofrece la app.
  • Funcionalidades básicas y opcionales: Hay que diferenciar las funcionalidades primordiales de la aplicación o del juego. De esta manera las opcionales podrían servir como extra en un modelo Freemium, o para futuras actualizaciones.
  • Cuidar mucho el diseño: El usuario se fija mucho en el diseño del programa. Hay que dedicar mucho tiempo y esfuerzo a cuidar el diseño de la app ya que es en lo que primero se va a fijar el usuario. Un icono llamativo y muy colorido que identifique la funcionalidad de la app suele ser común.
  • Difusión: Una vez que la app esta creada hay que darse a conocer porque nadie sabe que existe la aplicación. Hace falta invertir tanto esfuerzo y financiación para publicitar la app como para los pasos previos. No sirve de nada hacer un juego o un programa que nadie utilice porque es desconocido.
  • Fidelización: Cuando se termina el desarrollo y la difusión de la aplicación desarrollada, es muy importante fidelizar al usuario que utiliza la app. De lo contrario le dará un uso y la borrará de su dispositivo. Existen muchas aplicaciones que son muy perecederas porque no están pensadas para fidelizar al usuario. Si se quiere obtener beneficios es necesario ofrecer al usuario contenido adicional cada cierto tiempo y atender a sus necesidades.

Estos son los puntos más importantes a tener en cuenta en el desarrollo de una aplicación o un juego. Durante todos ellos es necesaria la realización de un análisis exhaustivo del comportamiento del mercado y el usuario al que va dirigida la app.

En definitiva es un largo recorrido y con mucha competencia, pero cuando sale bien se obtienen muchos beneficios. Ánimo.

Una de las formas más habituales de mostrar grandes cantidades de datos por pantalla es a través de una tabla. Vamos a ver cómo podemos contruir una:

  1. El primer paso es crear un proyecto o elegir uno que ya tengamos.
  2. A continuación, crearemos la estructura de la tabla con los datos en un archivo html que tengamos y añadimos los estilos que queremos que tenga nuestra tabla para darle un formato a nuestro gusto. En mi caso, todo esto lo he hecho en el archivo “index.html”.

Este sería el resultado final de la tabla, los estilos los he obtenido de jQueryMobile para que quede algo mejor:

<table data-role="table" id="table-custom-2" class="ui-body-d">
			<thead>
				<tr class="ui-bar-d">
					<th>Cabecera 1</th>
					<th>Cabecera 2</th>
					<th>Cabecera 3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Fila 1 Col. 1</td>
					<td>Fila 1 Col. 2</td>
					<td>Fila 1 Col. 3</td>
				</tr>
				<tr>
					<td>Fila 2 Col. 1</td>
					<td>Fila 2 Col. 2</td>
					<td>Fila 2 Col. 3</td>
				</tr>
				<tr>
					<td>Fila 3 Col. 1</td>
					<td>Fila 3 Col. 2</td>
					<td>Fila 3 Col. 3</td>
				</tr>
			</tbody>
		</table>

De esta manera los datos de la tabla son fijos y los creamos cuando construimos la tabla, pero hay métodos para ir poblando automáticamente nuestra tabla en función de los datos que tengamos en otro lugar como por ejemplo una base de datos o un fichero. Para hacerlo de forma automática hay que usar funciones javascript.

En mi caso he creado un archivo javascript llamado “misJs.js” donde he definido la función que rellenará la tabla automáticamente.

function poblarTabla(){
	var contadorFila;
	var contadorColumna;
 
	$('#tabla-automatica').html(
			'<thead><tr class="ui-bar-d">' +
				'<th>Cabecera 1</th>' +
				'<th>Cabecera 2</th>' +
				'<th>Cabecera 3</th>' +
			'</tr></thead>');
 
	for (contadorFila = 1; contadorFila <= 3; contadorFila++){
		$('#tabla-automatica').append('<tr id="fila' + contadorFila + '">');
 
		for (contadorColumna = 1; contadorColumna <= 3; contadorColumna++){
			$('#fila' + contadorFila).append('<td id="columna' + contadorColumna + '">Fila ' + contadorFila +' Col. ' + contadorColumna +'</td>');
		}
	}
}

Y este es el resultado final en el smartphone. En otro momento ya explicaré cómo obtener los datos desde una base de datos.

Ejemplo de tabla en smartphone con Phonegap

Ejemplo de tabla en smartphone con Phonegap

Hoy vamos a ver cómo podemos mostrar una batería de datos en una estructura de tabla. Con App Inventor es muy sencillo, hay que ir poco a poco construyendo y dando formato a cada fila y columna. El ejemplo que voy a hacer es una tabla de 4 filas y 3 columnas.

1.- El primer paso es, como siempre, crear un proyecto o elegir uno que ya tengamos.
2.- A continuación lo que haremos será arrastrar un elemento “TableArrangement” ubicado en el apartado “Screen Arrangement” a la zona donde queremos que se visualice nuestra tabla.
3.- Una vez que tengamos el “TableArrangement” donde queremos, cambiamos sus propiedades para darle el tamaño adecuado y definimos cuantas filas y columnas queremos que tenga.

Propiedades tabla

Propiedades tabla

4.- Ahora vamos a rellenar cada celda con una label que mostrará el texto que queramos y modificamos las propiedades para que la primera fila muestre un texto en negrita y con un fondo de color llamativo. De esta manera habrémos creado una cabecera. Los mismo hay que ir haciendo con el resto de filas hasta que quede un resultado que nos guste. Aquí está el mío.

Tabla llena

Tabla llena

En este caso he definido directamente cada label con su texto a mostrar, pero por ejemplo se puede programar para que cuando se inicie la pantalla se rellene automáticamente cada label con los datos que tengamos. Así quedarían las piezas de puzzle.

Rellenar automáticamente las labels

Rellenar automáticamente las labels

También es habitual que los datos que vayamos a mostrar se obtengan de una base de datos pero eso comentaré en otro momento.

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.

Ya hemos visto como crear botones en Phonegap, ahora veremos también algo sencillo: cómo crear labels.

Las labels son etiquetas que se usan para mostrar un texto. Suelen ir acompañadas de otro objeto como por ejemplo una caja de texto para indicar qué es lo que se debe rellenar en ella y es muy común que encontrar estas etiquetas dentro de un formulario “form”.

Para crear una label seguiremos los siguientes pasos:

  1. Creamos un proyecto o elegimos uno donde queramos añadir la label.
  2. En el archivo html donde decidamos crear la label, escribimos el código para crearla. En mi caso he puesto el código en “index.html”.
<body>
		<form id="formulario1">
		    <label for="textoNombre">Nombre</label>
		    <input type="text" name="textoNombre" />
		</form>
	</body>

Las labels pueden contener varios atributos, son los siguientes:

  • For: Este atributo indica el nombre del objeto con el que queremos enlazar. Por ejemplo nuestra label va ligada al cuadro de texto donde hay que introducir el nombre por este el valor de este atributo es el mismo que el “name” de la caja de texto.
  • Form: Este atributo es nuevo y se usa para indicar a qué formulario o formularios pertenece la label. Generalmente una label se añade dentro del código de un “form” pero puede que en alguna ocasión nos convenga crearla fuera, separada en otro lugar de la pantalla. Mediante este atributo podemos indicarle el id del objeto “form” al que queremos que pertenezca.

Normalmente no se suelen indicar eventos en las labels, no obstante aquí hay una lista de todos los eventos que se pueden utilizar con estos componentes.

Siguiendo con los componentes más habituales de una app, hoy vamos a ver las labels o etiquetas.

Las labels son componentes que se utilizan para mostrar un texto. Para crear una simplemente deberemos arrastrarla desde el panel izquierdo a la pantalla de nuestra app. Estas sos sus propiedades:

  • BackgroundColor: Esta opción permite asignar un color de fondo a la etiqueta.
  • FontBold: Si queremos que el texto de se muestre en negrita tendremos que marcar esta propiedad.
  • FontItalic: Para mostrar el texto en cursiva marcaremos esta opción.
  • FontSize: Este parámetro indica el tamaño de letra del texto mostrado en la label. Por defecto es 14 pero lo podemos modificar para que muestre el tamaño que queramos.
  • FontTypeFace: Para cambiar el tipo de letra que se muestra podemos elegir entre los tres distintos que permite esta opción: sans serif, serif y monospace.
  • Text: Aquí escribiremos el texto que queremos que muestre nuestra label.
  • TextAlignment: Esta opción nos permite definir que alineación queremos que tenga el texto: a la izquierda, centrado o a la derecha. Por defecto está alineado a la izquierda.
  • TextColor: Con este parámetro podemos indicar qué color queremos que tenga el texto de la label. Por defecto es negro.
  • Visible: Podemos hacer que la label no se muestre. Para ello debemos seleccionar el valor “hidden” en esta propiedad. Por defecto se muestra y su valor es “showing”.
  • Width: Este parámetro define la archura de la label en pixels. También podemos indicar que se ajuste a la anchura del objeto donde está contenida.
  • Height: Al igual que con la propiedad “width”, esta opción indica el tamaño de la altura en pixels. También se puede indicar que se ajuste al tamaño del objeto padre.
Propiedades label

Propiedades label

A diferencia de los botones, las labels no contienen eventos. Hay más información en la documentación oficial.

Algo que llama mucho la atención cuando empiezas con App Inventor son los bloques de los puzzles. Hay muchos con formas distintas y con distintos colores y lo primero que uno se pregunta es ¿Y por qué tienen esos colores?, ¿Tienen un significado? Pues resulta que sí. Investigando un poco he encontrado un significado a los colores que puede ser interesante para comprender las piezas de puzzle que usamos. Aquí va la explicación:

  • Eventos: Los bloques que corresponden a eventos son de color verde y se muestran siempre en la parte superior de cada sección.
Bloques de eventos

Bloques de eventos

  • Expresiones y acciones: Normalmente dentro de un bloque de eventos se introducen otros que indican acciones o expresiones como por ejemplo la llamada a una función o un procedimiento. Estas piezas suelen ser de color azul o morado según lo que se vaya a usar y siempre se colocan apilados uno debajo del otro indicando un orden lógico de ejecución.
Bloques de expresiones y funciones

Bloques de expresiones y funciones

  • Funciones de texto: En ocasiones es útil utilizar funciones para manipular cadenas de texto. Estos bloques son de color marrón y siempre van unidos a los parámetros que nosotros indiquemos.
Bloques de funciones de texto

Bloques de funciones de texto

  • Funciones de números: En el caso del tratamiento de números y el uso de funciones matemáticas,  son de un color verde claro y siempre están unidas a los parámetros que indiquemos.
Bloques de funciones de números

Bloques de funciones de números

  • Estructuras de control: Existen piezas para reflejar condiciones de nuestra app y funciones más básicas del sistema como por ejemplo cerrar la aplicación. Son de color amarillo y pueden englobar el resto de funciones.
Bloques de control

Bloques de control

Esto son los tipos de bloques más importantes. Para saber más sobre este tema aquí está la documentación oficial.

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.

Hoy vamos a ver cómo podemos crear botones si utilizamos Phonegap. En mi caso yo siempre voy a utilizar los estilos de jQueryMobile para que no haya dudas. Veremos que es muy sencillo porque es lenguaje HTML5:

1.- Primero como siempre creamos el proyecto.

2.- A continuación creamos nuestro archivo “index.html” y modificamos el nombre del anterior archivo “index”. Además, he creado un archivo Javascript llamado “misJs.js” donde incluiré mis funciones javascript.

Estructura app

Estructura app

3.- Creamos el código HTML5 con dos tipos de botones:

  • Button: El button se utiliza para lanzar un evento en la página.
  • Submit: El submit en cambio se usa para mandar información de un formulario a una dirección url definida en la etiqueta “form”.

4.- Una vez creados los botones, he añadido un evento a uno de ellos: el evento “onclick”.

  • Onclick: Este evento se ejecuta cuando se hace click en el botón. En este caso ejecutará la función llamada “clicEjemplo” que esta definida en el archivo “misJs.js”.

Así queda el resultado:

<html>
	<head>
	<title>Demo Botones</title>
	<!-- Incluimos los archivos de estilos y liberías jQuery -->
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
	<script src="jquery.mobile/jquery-1.7.2.min"></script>
	<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
	<script src="misJs.js"></script> <!-- Incluimos el nuevo archivo de funciones js creado -->
	</head>
	<body>
		<form>
		    <button onclick="clicEjemplo();">Pulsar Button</button>
		    <input type="submit" value="Pulsar Submit">
		</form>
	</body>
</html>

Este evento es el más común  pero existen muchos más dependiendo de las necesidades de nuestra app y la manera de usarlos es la misma. Aquí aparecen todos.

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