Author Archives: Iker

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.

Olimpiadas Android

Olimpiadas Android

Atentos a todos los interesados en la programación para Android porque acaba de salir un concurso para desarrollar apps. Se llama Olimpiadas Android y se trata de un concurso en el que los participantes deberán programar una aplicación para este sistema operativo en un plazo de 8 horas. Los requisitos son los siguientes:

  1. El equipo de desarrollo deberá estar compuesto de no más de 2 personas.
  2. Cada miembro del equipo debe tener una edad comprendida entre 16 y 22 años.
  3. Cada participante deberá residir en territorio Español sin importar su nacionalidad.
  4. Hay que registrarse en la web para participar, el plazo límite de inscripción es el 19 de Junio del 2013.
  5. No puede haber más de 40 equipos participantes por lo que es bastante limitado. En caso de haber más, el jurado seleccionará los 40 equipos en función de los motivos que haya indicado cada equipo en el formulario de registro.

La temática será totalmente libre y para que no sea posible tener algo ya desarrollado, no dejarán llevar ningún dispositivo móvil ni portátil como por ejemplo USB. Las apps se evaluarán en función de su originalidad, la calidad de la programación, la cantidad de recursos usados (cuantos más recursos mejor como por ejemplo: GPS, cámara, audio, etc..) y la calidad de los comentarios. Basándose en esto, el jurado elegirá 1 equipo ganador del primer premio, 4 del segundo y 10 del tercero.

Estos son los premios:

  • El primer premio consistirá en un ordenador portátil HP Pavilion g6-2319ss.
  • El segundo premio será una tablet Nexus de 7 pulgadas.
  • El tercer premio consistirá en  un smartwatch de Sony.

Animo a todos los desarrolladores de apps que puedan participar que lo hagan, siempre se aprende algo de estos concursos y además puede ser muy divertido.

Vamos a empezar a profundizar más en los objetos que podemos crear cuando estamos diseñando nuestra app. Uno de los más comunes es el botón, así que voy a explicar todas sus propiedades para que cuando tengamos que añadir uno sepamos cómo modificarlo a nuestro gusto.

Antes de hacer nada tenemos que añadir un botón a nuestra pantalla. Una vez hecho esto, podemos ver en la columna de la derecha todas sus propiedades.

Propiedades botón

Propiedades botón

Propiedades:

  • BackgroundColor: En esta opción podemos elegir un color de fondo para nuestro botón. No tiene mucho sentido si queremos poner una imagen de fondo en lugar de un color.
  • Enabled: Esta propiedad sirve para indicar si queremos que el botón se muestre desactivado o activado por defecto. Si desmarcamos esta casilla no se podrá usar el botón al utilizar la app.
  • FontBold: Al marcar esta propiedad indicamos que el texto del botón se muestre en negrita.
  • FontItalic: Si queremos que el texto del botón se muestre en cursiva marcamos esta opción.
  • FontSize: En esta propiedad indicamos el tamaño que queremos que tenga el texto del botón. Por defecto es 14.
  • FontTypeface: Aquí podemos modificar el tipo de letra que queremos que tenga el botón. Hay 3 tipos: sans serif, serif y monospace
  • Image: En esta propiedad podemos indicar si queremos que muestre una imagen de fondo el botón. En ese caso tenemos que elegir una imagen, subirla y aplicarla a este botón.
  • Shape: Esta opción indica la forma del botón. Por defecto es rectangular pero podemos cambiarla para que sea ovalada o con los bordes redondeados.
  • ShowFeedback: Con esta propiedad podemos definir si queremos que el botón haga un efecto visual a la hora de hacer click en el. Esto viene bien para el usuario que lo usa ya que si no hay efecto visual puede que no sepa que ha pulsado el botón.
  • Text: Aquí escribiremos el texto que se mostrará en el botón. También podemos dejarlo vacío por ejemplo porque queremos mostrar una imagen de fondo.
  • TextAlignment: En caso de que queramos mostrar un texto en el botón, podemos definir en esta propiedad cómo queremos que esté alineado: izquierda, derecha o en el centro.
  • TextColor: Esta propiedad define el color del texto que muestra el botón. Si no hemos indicado ningún texto no tiene sentido definir color.
  • Visible: La propiedad “Visible” sirve para hacer que el botón se muestre o no. Puede que nos sea útil que al principio nuestro botón esté oculto, en tal caso el valor deberá ser “hidden”.
  • Width: Aquí podemos indicar el tamaño del botón a lo ancho. La medida es en pixels o podemos indicar que se ajuste al contenedor donde se muestra, de esta manera ocuparía el total de ancho de su contenedor.
  • Height: Al igual que con la propiedad “Width”, podemos hacer lo mismo con “Height”. Esta, indica el tamaño del botón a lo largo en pixels. También podemos indicar que se ajuste al tamaño de su contenedor.

Eventos:

Para ver los eventos que tienen los botones, es necesario abrir el editor de bloques y acceder al apartado “My blocks” y el nombre del botón al que queramos programar el evento.

Eventos botón

Eventos botón

Estos son los eventos disponibles:

  • Click: Este evento se ejecuta cuando se hace click en el botón.
  • GotFocus: Este caso se ejecutará cuando el cursor esté sobre el botón pero sin pulsarlo. Puede ser un caso dificil en algunos dispositivos móviles ya que no todos tienen esta posibilidad.
  • LongClick: Aquí indicamos lo que queremos programar en caso de que se haya pulsado y mantenido el botón durante unos segundos.
  • LostFocus: Al igual que con “GotFocus”, este evento no puede darse en todos los dispositivos móviles pero ocurre cuando el botón deja de tener el cursor sobre si mismo.

Toda esta información y más está en la documentación oficial de App Inventor.

 

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.

 

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.

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