LiNpOx

Linux y Windows para informáticos

Jiggy: Desarrolla Aplicaciones para el touch

Posted by oftc007 en 21 mayo 2008

Bueno aqui les traigo este tutorial donde vamos a aprender como desarrollar aplicaciones para nuestro touch con el IDE Jiggy, el cual esta basado en JavaScript, lo que nos permite desarrollar aplicaciones de manera sencilla y sin muchas complicaciones al momento de compilacion.

Primero que nada necesitamos agregar un repositor a nuestro installer para descargar el IDE, el cual es:

http://jiggyapp.com/i

Despues de agregado y refrescado los repositores vamos a la seccion “Development” y descargamos el “Jiggy Runtime” y “Jiggy”.

Vamos al springboard y abrimos la aplicacion “Jiggy” y veremos lo siguiente:

Ahi configuramos el username y password para conectarnos al IDE. Luego de eso, desde cualquier navegador y sistema operativo, vamos a la direccion IP que aparece abajo. Nos aparece un cuadro de dialogo, donde nos pide la clave y contraseña que ya configuramos en el Jiggy.

Listo ya Entramos en el IDE, ahora vamos a conocerlo y crear nuestra primera aplicacion, el tipico “Hola Mundo”.

En la pantalla principal encontramos a mano izquierda el listado de aplicaciones que hemos elaborado o que tenemos instaladas y estan programadas con Jiggy. En el centro vemos 3 links, uno a la pagina ofcial de Jiggy, el foro de desarrolladores y el ultimo y mas importante un link a toda la documentacion, donde encontraremos todos los objetos y sus diferentes metodos que podemos utilizar.

[B]Es importante saber que siempre que estemos usando el IDE o por lo menos cuando vamos a relaizar una accion como guardar o cualquier otra el touch este prendido y con el Jiggy corriendo y el Wi-Fi encendido, de lo contrario, el IDE no funcionara o dara errores.[/B]

Creando una aplicacion

Hacemos click en “Create New Application” y aparecera lo siguiente:

Llenamos los campos, que no son dificiles de entender, pero vamos a explicarlos:

  • Title: Nombre de nuestra aplicacion
  • Identifier: Identificador de nuestra aplicacion. Este debe ser uncio y tiene el formato “com.algo.titulodeaplicacion”
  • Description: descripcion de nuestra aplicacion
  • Version
  • Author: el autor de la aplicacion
  • URL: pagina de contacto o mas informacion
  • Seleccionamos el icono o agregamos el de nuestra preferencia

Hacemos click en “Save” y aparece un cuadro de dialogo, el cual nos dice que el springboaard se reiniciara y que demos ok en el cuadro de dialogo luego de que el springboard se reinicie y ejecutemos nuevamente el jiggy. Luego de eso damos en Ok.

Ahora hacemos click sobre el nombre de nuestra aplicacion que debe aparece en el lado izquiero del IDE y se despliega una lista de tres archivos, los cuales vamos a explicar para entender bien que son:

Info.plist – Este archivo es necesario para el Iphone/Touch y contiene la informacion basica de la aplicacion, incluyendo el nombre del identificador que asignamos a nuestra aplicacion cuando la creamos. Este archivo es creado automaticamente por el Jiggy y no necesitamos editarlo.

icon.png – El icono que le asignamos a nuestra aplicacion cuando la creamos, ya sea si lo seleccionamos de los predeterminado o usamos uno diferente.

main.js – Este es el archivo donde va el codigo de tu aplicacion, el mas importante :D. Este archivo lo editamos y ejecutamos dentro del mismo IDE. Si borramos este archivo nuestra aplicacion no funcionara.

Debemos saber que es posible agregar mas archivos en la carpeta de nuestra aplicacion, por ejemplo, si nuestra aplicacion usa iconos o imagenes, las podemos agregar sin ningun problema.

 

Conociendo el IDE y programando el famoso “Hola mundo” en Jiggy

Despues de creada la aplicacion, abrimos el archivo “main.js” y encontramos el codigo:

// com.hello.holamundo
// /Applications/hola mundo.app/main.js

El cual no son mas que comentarios de donde cual es el identificador y ubicacion del archivo main.js de nuestra aplicacion.

Vamos a explicar la barra de tarea que tenemos a nuestra disposicion el IDE, y la funcion de los iconos que mas vamos a utilizar:

  • Carpeta: Carga la ultima modificacion guardada del codigo
  • Disquete: Guardar el codigo
  • Binoculares: Buscar
  • Flecha: Ir a la linea, si queremos brincar a una linea especifica de nuestro codigo
  • Triangulo verde: Ejecutar la aplicacion
  • Cuadrado azul: Detener aplicacion
  • Deshacer y Rehacer

Ahora si, vamos a correr nuestra primera aplicacion, el tradicional “Hola Mundo” con una barra de navegacion que tiene escrito “LiNpOx”.

El codigo es el siguiente:

Plugins.load( "UIKit" );

var window = new UIWindow( UIHardware.fullScreenApplicationContentRect );
window.setHidden( true );
window.orderFront();
window.makeKey();
window.backgroundColor = [ 1 , 1 , 1 , 1 ];

var mainView = new UIScroller();
mainView.contentSize = [ window.bounds[ 2 ] * 1 , window.bounds[ 3 ] * 1 ];
mainView.backgroundColor = [ 0 , 0 , 0 , 0 ];

window.setContentView( mainView );

var hello = new UITextLabel( [ 20 , 55 , window.bounds[ 2 ] - 40 , 400 ] );

hello.text = "Hola Mundo!";
hello.backgroundColor = [ 0 , 0 , 0 , 0.25 ];
hello.setFont( new Font( "Arial" , 2 , 45 ) );
hello.color = [ 1 , 1 , 1 , 1 ];
hello.centersHorizontally = true;

var bar = new UINavigationBar( [ 0 , 0 , window.bounds[ 2 ] , 48 ] );
var itemOne = new UINavigationItem( "LiNpOx" );
bar.pushNavigationItem( itemOne );

mainView.addSubview( bar );

mainView.addSubview( hello );

Guardamos y ejecutamos la aplicacion, el resultado sera:

Es importante saber que debemos de detener la aplicacion desde el IDE con el cuadrado azul, si lo hacemos con el boton “home” de nuestro touch, tendremos que reiniciarlo para poder usarlo nuevamente.
 

Explicando un poco el codigo del “Hola Mundo”

Bueno ahora vamos a explicar un poco el codigo, para enteder que estamos haciendo :D. Vamor por partes para entender mejor.

Plugins.load( "UIKit" );

var window = new UIWindow( UIHardware.fullScreenApplicationContentRect );
window.setHidden( true );
window.orderFront();
window.makeKey();
window.backgroundColor = [ 1 , 1 , 1 , 1 ];

Primero que nada cargamos el plugin que nos permite programar para el touch el “UIKit”, eso no puede faltar en ningun inicio de codigo de nuestras aplicaciones.

Luego de eso declaramos una variable “Window” a la cual le asignamos la creacion de una nueva ventana en pantalla completa. Luego de eso, la variable “window” toma los metodos de un objeto UIWindow.

En la siguien parte del codigo estamos utilizando los diferentes metodos de una ventana como “setHidden” que tiene como valor true ya que no la queremos escondida y el color de fondo ques “backgroundColor” y los parametros del color.

var mainView = new UIScroller();
mainView.contentSize = [ window.bounds[ 2 ] * 1 , window.bounds[ 3 ] * 1 ];
mainView.backgroundColor = [ 0 , 0 , 0 , 0 ];

window.setContentView( mainView );

En esta parte del codigo estamos creando un “UIScroller” y asignandolo a la variable “mainView”. Despues de eso definimos el tamaño, color de fondo y por ultimo se lo asignamos a la ventana.

var hello = new UITextLabel( [ 20 , 55 , window.bounds[ 2 ] - 40 , 400 ] );

hello.text = "Hola Mundo!";
hello.backgroundColor = [ 0 , 0 , 0 , 0.25 ];
hello.setFont( new Font( "Arial" , 2 , 45 ) );
hello.color = [ 1 , 1 , 1 , 1 ];
hello.centersHorizontally = true;

Creamos el “Label” donde vamos a escribir “Hola Mundo” y se lo asignamos a la variable “hello”. Este tipo de objetos se llaman “UITextLabel”. Le asignamos sus propiedades como el texto que queremos escribir, color de fondo, el tipo de fuente y caracteristicas y el color.

var bar = new UINavigationBar( [ 0 , 0 , window.bounds[ 2 ] , 48 ] );
var itemOne = new UINavigationItem( "www.ipodtouchfans.com" );
bar.pushNavigationItem( itemOne );

Para finalizar agregamos la barra de navegacion y se lo asignamos a la variable “bar”. Luego de eso agregamos un “UINavigarionItem” donde le asignamos el titulo para la barra y se lo asignamos a la barra que creamos.

mainView.addSubview( bar );

mainView.addSubview( hello );


Por ultimo agregamos la barra y el texto a la ventana y listo :D.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: