Monthly Archives: mayo 2013

You are browsing the site archives by month.

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>

Hoy vamos a ver cómo podemos crear nuevas pantallas en App Inventor. Además, para poder acceder a cada pantalla nueva, vamos a poner unos botones que indiquen qué pantalla se va a abrir:

1.- Como siempre, hace falta tener creado el proyecto. Una vez hecho esto, accedemos a la sección “Screen Arrangement” y colocamos en nuestra pantalla un “HorizontalArrangement”. En las propiedades de este objeto debemos marcar “Width” y “Height” con valor “Fill parent”, de esta manera se ajustará a la pantalla.

Screen Arrangement

Screen Arrangement

2.- El segundo paso es arrastrar dentro de nuestro objeto “HorizontalArrangement” 2 “Button”, uno al lado del otro. Estos botones serán los que utilizaremos para navegar entre las distintas pantallas de nuestra app. Para que queden bien maquetados en la aplicación, les pondremos a cada uno el texto que queremos que muestre y en sus propiedades pondremos el “Width” y “Height” como “Fill parent”. Así es como nos ha quedado nuestro menú.

Botones menú

Botones menú

3.- En el menú superior del diseñador de pantallas hay un botón para añadir nuevas pantallas. Este será el siguiente paso, pulsamos en “Add Screen” y añadimos las pantallas que queramos: en mi caso he añadido 2 más y les he puesto de nombre “Pantalla2” y “Pantalla3”.

Pantallas

Pantallas

4.- Y de nuevo para poder navegar entre estas nuevas pantallas repetiremos el paso número 1 y 2 para la creación del menú.

5.- Ahora nos vamos al editor de bloques para empezar a programar los botones. Lo que haremos será acceder a la pestaña “Built-In” y en la sección “Definition” sacamos un bloque “procedure” y un bloque “name”. El objetivo de estos bloques es crear una función que abra una pantalla nueva que nosotros indicaremos. Por ello, al bloque “procedure” le llamaremos “abrirPantalla” y al bloque “name”, que encaja en la parte “arg” de la pieza, “nombrePantalla”.

6.- A continuación, dentro de la pestaña “Built-In” en la sección “Control”, sacamos el bloque “open another screen” que irá dentro de nuestra función “abrirPantalla” al que encajaremos el bloque “nombrePantalla” que se encuentra en la pestaña “My Blocks” dentro de “My Definitions”. Este sería el resultado de nuestra función:

Función abrirPantalla

Función abrirPantalla

Este procedimiento de “abrirPantalla” hay que crearla en cada pantalla de lo contrario no funcionará nuestra app.

7.- Lo que falta en este punto es que cuando se pulse cada botón de la app, abra la pantalla correspondiente. Para ello sacamos el bloque “Button1.Click” dentro de “My Blocks -> Button1” (en caso de haberle cambiado el nombre al botón aparecerá con el nombre que se le haya asignado) y dentro pondremos el bloque “abrirPantalla” que lo podemos sacar de “My Blocks -> My Definitions”. Conectado con este bloque, pondremos un bloque “text” obtenido de “Built-In -> Text” y al que cambiaremos el texto por el nombre de la pantalla que queremos que se abra.

8.- Y para terminar lo que haremos será añadir debajo de “abrirPantalla” un bloque “close screen” que lo podemos encontrar en “Built-In -> Control”. Esto hará que la pantalla anterior se cierre después de abrir la nueva.

Evento click del botón

Evento click del botón

Los puntos 7 y 8 se deben hacer para cada botón de cada pantalla porque si no no funcionará la app.

Así es como quedaría cada una de nuestras pantallas con la diferencia de que en función del botón se debe abrir una u otra pantalla. A probarlo!

Bloques pantalla

Bloques pantalla

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”.

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.

Todas las apps suelen tener una pantalla de bienvenida con una imagen o logotipo que dura unos segundos hasta que se muestra el menú y la página principal del programa. Esta pantalla recibe el nombre de Splash Screen y es lo que vamos a crear hoy con App Inventor:

1.- Lo primero que necesitamos es tener un proyecto creado. Una vez lo tengamos, desplegamos la opción “Basic” que está en el menú de la columna de la izquierda y arrastramos un elemento “Canvas” dentro de nuestra pantalla.

Elemento canvas

Elemento canvas

2.- A continuación, lo seleccionamos en la columna de la derecha y modificamos sus propiedades “Width” y “Height” para que tengan el valor “Fill parent”. Además, en la propiedad “BackgroundImage” subimos el archivo de imagen que queremos (es importante que la imagen elegida ocupe toda la pantalla, de lo contrario no quedará bien) y nos aseguramos de que la propiedad “visible” tiene el valor “showing”.

Propiedades canvas

Propiedades canvas

3.- El siguiente paso es arrastrar “clock” de la columna de la izquierda dentro del menú “Basic” dentro de nuestra pantalla y cambiar su propiedad “TimerInterval” a los mili segundos que queremos que dure el splash screen. En mi caso yo pongo 5000.

Elemento clock

Elemento clock

4.- Ahora es momento de acceder al editor de bloques. Lo primero que haremos será ir a la pestaña “My Blocks”, coger el evento “screen.Initialize” y arrastrarlo al centro de la pantalla. Dentro introducimos los bloques de “canvas.Visible” y “clock.TimerEnabled” (cada uno los obtenemos desde su propia sección), y junto a ellos les indicamos el valor lógico “true” el cual podemos encontrar en la pestaña “Built-in -> Logic” o haciendo click con el ratón en cualquier sitio de la pantalla y seleccionando “logic -> true”.

5.- El ultimo paso consiste en programar el temporizador. Para ello cogemos el bloque “clock.Timer” de su propia sección y dentro, al igual que hemos hecho en el punto 4, añadimos los bloques “canvas.Visible” y “clock.TimerEnabled” pero esta vez indicaremos los valores “false”.

Bloques splash screen

Bloques splash screen

Con esto ya tenemos listo un splash screen muy básico. Ahora ya todo depende de la imaginación de cada uno para modificarlo a su gusto.

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 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.

Algo que siempre vamos a hacer cuando desarrollamos una aplicación es cambiar el icono que viene por defecto en el programa. Queremos que la app tenga una imagen asociada que refleje su funcionalidad o que tenga que ver con su objetivo, así que vamos a ver cómo se hace cuando creamos aplicaciones con App Inventor:

1.- En el proyecto que tengamos creado, desde el diseñador de pantallas accedemos a las propiedades de la primera pantalla, la principal.

2.- Cuando veamos sus propiedades nos fijamos en que una de ellas se llama “Icon”. Es aquí donde podremos cambiar el icono.

Cambiar icono app

Cambiar icono app

3.- Elegimos el icono que tenemos ya preparado y que queremos que tenga nuestra app, lo subimos y aceptamos dando a “Ok”.

Al descargar la app a nuestro dispositivo móvil para comprobar cómo ha ido veremos los cambios realizados. ¿Bastante sencillo verdad?

 

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.

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