[Tutorial] Jiggy: Desarrolla Aplicaciones para el touch

Discussion in 'iFans en Español' started by of_007, Jan 4, 2008.

  1. of_007

    of_007 Retired Moderator

    Joined:
    Sep 18, 2007
    Messages:
    218
    Likes Received:
    1
    Device:
    4G iPod touch
    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:

    Code:
    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:

    Please Register or Log in to view images


    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.

    Please Register or Log in to view images


    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.

    Creando una aplicacion


    Hacemos click en "Create New Application" y aparecera lo siguiente:

    Please Register or Log in to view images


    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

    Please Register or Log in to view images

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

    of_007 Retired Moderator

    Joined:
    Sep 18, 2007
    Messages:
    218
    Likes Received:
    1
    Device:
    4G iPod touch
    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:

    Code:
    // 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.

    Please Register or Log in to view images


    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 "www.ifans.com".

    El codigo es el siguiente:

    Code:
    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( "www.ifans.com" );
    bar.pushNavigationItem( itemOne );
    
    mainView.addSubview( bar );
    
    mainView.addSubview( hello );
    Guardamos y ejecutamos la aplicacion, el resultado sera:

    Please Register or Log in to view images


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

    of_007 Retired Moderator

    Joined:
    Sep 18, 2007
    Messages:
    218
    Likes Received:
    1
    Device:
    4G iPod touch
    Explicando un poco el codigo del "Hola Mundo"​


    Bueno ahora vamos a explicar un poco el codigo, para enteder que estamos haciendo

    Please Register or Log in to view images

    . Vamor por partes para entender mejor.

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


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


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


    Code:
    var bar = new UINavigationBar( [ 0 , 0 , window.bounds[ 2 ] , 48 ] );
    var itemOne = new UINavigationItem( "www.ifans.com" );
    bar.pushNavigationItem( itemOne );
    
    mainView.addSubview( bar );
    
    mainView.addSubview( hello );
    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.

    Por ultimo agregamos la barra y el texto a la ventana y listo

    Please Register or Log in to view images

    .


    Cualquier duda pregunten con confianza. Tratare de mejorar la explicacion del codigo un poco en unos dias.


    Saludos!
  4. xALeXzx

    xALeXzx Active Member

    Joined:
    Oct 4, 2007
    Messages:
    3,953
    Likes Received:
    22
    OMG, otro tuto de off xD, Aver como esta.
  5. iamjose

    iamjose New Member

    Joined:
    Nov 4, 2007
    Messages:
    22
    Likes Received:
    0
    hola mundo? wtf??? porqué me torturais con esas frases... hahahaha

    Please Register or Log in to view images


    que maldad... hay k ver. xddd

    gracias!
  6. victoric

    victoric New Member

    Joined:
    Dec 28, 2007
    Messages:
    50
    Likes Received:
    0
    Incultura... esa frase se utiliza como prueba en todos los codigos fuentes que existen es el tipico Hello World, busca en la wikipedia

    Please Register or Log in to view images



    Saludos...
  7. iamjose

    iamjose New Member

    Joined:
    Nov 4, 2007
    Messages:
    22
    Likes Received:
    0
    lo sé no es incultura, ya se porque se dice, es que mi profe siempre la pone de ejemplo jajajaj

    Please Register or Log in to view images

Share This Page