Category Archives: Phonegap

Gracias a jQuery Mobile podemos crear una lista desplegable con estilos definidos y muy usable de cara al usuario. Vamos a ver cómo crear una de forma muy sencilla:

  1. El primer paso es el de siempre, debemos tener creado un proyecto o crear uno.
  2. En el archivo donde queremos mostrar nuestro listado añadiremos el código necesario para crearla. Esto incluye una label que indica al usuario lo que debe hacer y la propia lista con sus atributos y elementos.
  3. La lista con los elementos consta de 2 partes:
    • Select: Esta etiqueta es la principal para crear el listado y es donde se indican los atributos como el nombre que tendrá, el id y los eventos que podemos añadir.
    • Option: Cada opción está incluida dentro de una etiqueta “option” con un atributo “value” que indica el valor de dicha opción.

Así, el código sería el siguiente:

<head>
	<title>Listas</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>
	</head>
	<body>
		<label for="lista-opciones" class="select">Elige una opción</label>
		<select name="lista" id="lista-opciones">
		   <option value="1">Opción 1</option>
		   <option value="2">Opción 2</option>
		   <option value="3">Opción 3</option>
		   <option value="4">Opción 4</option>
		</select>
	</body>

 

Con esto ya tenemos la lista desplegable creada y con buen resultado.

Ejemplo de lista desplegable

Ejemplo de lista desplegable

Además de estas propiedades, existe un gran listado con eventos incluido para poder configurar a gusto de cada uno. Éste es el enlace.

 

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

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.

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.

Vamos a empezar a meternos en materia con Phonegap, así que hoy haremos un menú de navegación entre pantallas de la forma más fácil: haciendo páginas Web.

1.- Primeramente creamos un proyecto, ya hemos visto aquí como hacerlo.

2.- Una vez creado, renombraremos el archivo “index.html” ubicado en “assets -> www” para poder crear nosotros un archivo con dicho nombre sin tener que borrar el que ya viene de ejemplo. En mi caso le he puesto de nombre “index.old.html”.

3.- Creamos el nuevo archivo “index.html” y otros 2 a los que he llamado “pantalla2.html” y “pantalla3.html”.

Archivos de pantallas

Archivos de pantallas

4.- Y para terminar simplemente creamos en cada pantalla una botonera que servirá de menú para acceder al resto de pantallas. Este sería el código para cada pantalla:

<html>
	<head>
	<title>Demo Pantallas</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>
	</head>
	<body>
		<!-- Creamos una capa para la navegación -->
		<div data-role="navbar">
    		<ul>
    		<!-- Enlaces a las pantallas. Por defecto indicamos que la pantalla actual se muestre marcada -->
		        <li><a href="#" class="ui-btn-active">Pantalla Principal</a></li> 
		        <li><a href="pantalla2.html" rel="external">Pantalla 2</a></li>
		        <li><a href="pantalla3.html" rel="external">Pantalla 3</a></li>
		    </ul>
		</div>
		Pantalla Principal
	</body>
</html>

Phonegap no trae por defecto una splash screen creada por lo que, si queremos que nuestra app tenga una, tendremos que hacerla nosotros. Es bastante rápido y sencillo:

1.- El primer paso es tener un proyecto creado y la imagen que usaremos de splash screen preparada. Hay que tener en cuenta que dependiendo de la resolución de las pantallas de los dispositivos móviles nos convendría crear una misma imagen pero de diferentes tamaños para ajustarla.

2.- A continuación, copiamos la imagen que usaremos de splash screen en la ruta “res -> drawable-xxxx” donde xxxx indica las diferentes resoluciones de pantalla.

Splash screen

Splash screen

3.- Después, abrimos el archivo “MyPhoneGapActivity.java” que está en la ruta “src -> extension.dominio.nuestrapp” y añadimos esta linea antes de la función “loadUrl”: “super.setIntegerProperty(“splashscreen”, R.drawable.pantalla_bienvenida);” En mi caso, “pantalla_bienvenida” es el nombre que le he dado a la imagen.

4.- Por último modificamos la linea de la función “loadUrl” para añadirle los milisegundos que queremos que tarde en cargar nuestra aplicación (en mi caso he puesto 5000), es decir, lo que estamos haciendo es retrasar el inicio de nuestra app. Así es como quedaría:

Función modificada para añadir splash screen

Función modificada para añadir splash screen

Ya tenemos creada nuestra splash screen así que solo queda probarla en el emulador o en un dispositivo móvil.

Hoy vamos a modificar el icono de nuestra app con Phonegap. Es bastante sencillo así que son muy pocos pasos:

1.- Primero necesitamos tener un proyecto creado y un icono ya preparado para la app que estamos desarrollando.

2.- Dentro de la carpeta “res” hay varias carpetas que se llaman “drawable-xxxx” donde xxxx es el tipo de definición de la pantalla del dispositivo movil. Si queremos que según la calidad del móvil muestre un icono u otro porque tenemos distintos, entonces pegaremos cada icono dentro de la carpeta correspondiente. En mi caso he metido la misma imagen dentro de todas las carpetas.

Ruta iconos

Ruta iconos

Es muy importante que el icono se llame igual en todas las carpetas ya que lo único que cambia debería ser la calidad de la imagen según el dispositivo.

3.- A continuación abrimos el archivo “AndroidManifest.xml”, que es donde podemos modificar todas las propiedades de nuestro proyecto. En la pestaña “Application” podemos modificar el atributo “Icon” indicándole el nombre del icono que hemos añadido en las carpetas.

Atributos aplicación

Atributos aplicación

Con esto ya solo nos falta probarlo y ver cómo queda.

Aquí se encuentran los archivos del ejemplo para quien este interesado en tenerlos.

Hace un par de días hablé sobre el App Inventor para conocerlo y probar su funcionamiento. Ahora voy a hablar de Phonegap, un framework de desarrollo de apps que permite hacerlo utilizando lenguaje Web como son HTML, Javascript y CSS. Como es Web, es soportado prácticamente por todos los dispositivos móviles lo cual da mucha ventaja a la hora de empezar a crear apps porque no hace falta adaptar el código en función del sistema operativo donde irá instalado. Y para probarlo voy a explicar los pasos:

1.- Primero hay que instalarse un entorno de desarrollo. Yo recomiendo Eclipse porque existe un plugin para instalar phonegap en él. Nos descargamos eclipse de aquí. Existe un pack ya creado con el entorno de desarrollo Eclipse en  una carpeta y android SDK en otra instalados y compatibles, se llama ADT (Android Development Tools). En caso de optar por esta opción, saltar al punto número 4.

2.- El siguiente paso es descomprimir Eclipse donde queramos tenerlo y lo arrancamos.

3.- Una vez abierto ya podemos comenzar a instalar los plugins necesarios para poder crear proyectos android con Phonegap. Empezaremos por el SDK de android, para ello, accedemos al menú “Help -> Install New Software”. A continuación nos aparecerá una ventana emergente.

Instalar plugins

Instalar plugins

Pulsamos en el botón llamado “Add” que está en la parte derecha de la ventana y en el hueco para introducir datos al lado de “Location” copiamos esta dirección: “https://dl-ssl.google.com/android/eclipse/”. Para completar la instalación del plugin pulsamos en el botón “Ok” y aceptamos la licencia. Al final tendremos que reiniciar el Eclipse.

Añadir repositorio

Añadir repositorio

4.- Cuando se reinicie el Eclipse, tendremos que volver a hacer los mismos pasos para instalar otro plugin, esta vez el de Phonegap. Accedemos al menú “Help -> Install New Software” y en el botón “Add” copiamos esta dirección: “http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download” Y para completar con la instalación pulsamos el botón “Ok” y aceptamos la licencia. De nuevo Eclipse pedirá reiniciarse.

5.- Ahora que ya tenemos instalados los dos plugins, podemos crear un proyecto de Phonegap para empezar a desarrollar apps. Este paso se realiza pulsando en el nuevo botón del móvil que se ha añadido en la barra de botones al instalar el plugin. Lo primero que tendremos que decidir es qué librerías de estilos usar, jQuery Mobile o Sencha Touch. Por último solo nos quedará pulsar en “Next” para ir pasando de pantallas y proporcionando los datos como el nombre del proyecto y el nombre del paquete (suele ser extension.dominio.nombreproyecto).

Crear proyecto Phonegap

Crear proyecto Phonegap

6.- Ya tenemos la aplicación base creada con un ejemplo de jQuery Mobile. Para ejecutarlo y ver cómo se muestra en el emulador android, con el proyecto seleccionado pulsamos en el botón que es una flecha en un circulo verde y seleccionamos la opción “Run as -> Android application”.

Ejecutar proyecto phonegap

Ejecutar proyecto phonegap

Con esto ya tenemos preparado el entorno de desarrollo para hacer nuestras propias apps, pero eso ya iremos comentando más adelante.

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