martes, 4 de noviembre de 2014

HaxeUI: Reproductor Mp3 (2da Parte)

En la entrada anterior vimos como está estructurado básicamente un proyecto en Haxe y comenzamos con nuestro reproductor mp3. Vamos a comenzar a dibujar la interfaz.

HaxeUI como vimos, cuenta con varios controles que son útiles en la creación de interfaces. Muchos de ellos ya conocidos (botones, cajas de texto, deslizadores, etc.). Comencemos a presentarlos en pantalla para ver algunas de sus propiedades.




Lo primero que debemos hacer es importar a nuestro código otra herramienta que HaxeUI necesita para construir:

import haxe.ui.toolkit.core.Root;

Root (Raíz) es un "contenedor" de controles. Además, HaxeUI lo utiliza para dibujar los controles que nosotros declaremos dentro de él. Una aplicación puede tener más de un contenedor root, cosa que puede ser útil como por ejemplo en un programa que utilice múltiples herramientas divididas en varios sectores de la pantalla.

En nuestro caso del reproductor, solo necesitamos mostrar todos los controles de una sola vez, en una sola ventana, por lo que Root va a ocupar toda la pantalla de nuestra aplicación; Asimismo vamos a usar solamente uno.

Entonces lo invocamos:

Toolkit.openFullscreen(function (root:Root){


});

Ya lo tenemos inicializado. Vamos a ponerlo a trabajar:

Nuevo import, en este caso un contenedor llamado Box (aquí solamente lo voy a tratar como un objeto estético (un recuadro), pero tengan en cuenta que es un contenedor real; ya veremos este tipo de contenedores más adelante. Por el momento cumple la sencilla función de mostrar un recuadro dentro de la interfaz del usuario.

import haxe.ui.toolkit.containers.Box;

Y lo creamos dentro de Root:

var cajon:Box = new Box();

Luego de haber creado el nuevo objeto, vamos a darle forma aplicando propiedades al mismo. El código que hayan escrito debería tener una sintaxis similar a esta:


Como expliqué más arriba, es solo un recuadro estético; Un marco para encerrar todos los controles dentro.

En la imágen, se puede ver que propiedades le asigno al objeto. Básicamente tenemos:
Un punto de origen por el cual va a comenzar a dibujarse en la pantalla (x,y).
Un Ancho y un Alto del recuadro.
El color que va a tener de fondo.
El color que va a tener el recuadro.
El redondeo de sus esquinas.

Una vez definido, le decimos a root que lo añada a su ámbito.

Si esta vez compilamos nuestro programa, veremos el primer resultado "visible" del mismo:




Como no sabemos ya mismo que tamaño va a tener nuestra aplicación cuando esté terminada, lo dejamos con esos parámetros por ahora.

Lo mismo para con la ventana de flash que hemos configurado anteriormente. Es muy probable que volvamos a modificar estos parámetros a medida que vayamos incorporando más controles.

De todas formas, lo ideal es que vayan jugando con estas propiedades para dejarlas a su gusto.

Agreguemos otro; En este caso un control propiamente dicho: un cuadro de texto.

Primero lo importamos como ya vimos:

import haxe.ui.toolkit.controls.TextInput;

Luego lo creamos justo debajo del cajon:


Nuestro reproductor de mp3, no va a cargar los archivos desde un dispositivo de almacenamiento local como puede ser un disco rígido, sino que va a ir a buscar los archivos de música a la dirección web que el usuario introduzca en el cuadro de texto que acabamos de crear.

Por último en este capítulo, insertemos un botón:

import haxe.ui.toolkit.controls.Button;

Justo por debajo de "direccion", creamos nuestro primer botón:


Hasta aquí hemos visto como inicializar haxeUI, creamos algunos objetos con él y a esos objetos les modificamos algunas propiedades.

Si todo salió correctamente, nuestra ventana debería de mostrar algo similar a esto:

Como verán el botón tiene un color determinado. Si nosotros eliminamos la línea donde declaramos el conjunto de colores, el resultado sería completamente distinto..intenten a ver que les parece.





Aquí está el código fuente completo de lo que vimos hasta ahora:




package ;

import flash.display.Sprite;
import flash.events.Event;
import flash.Lib;

import haxe.ui.toolkit.core.Toolkit;
import haxe.ui.toolkit.themes.GradientTheme;
import haxe.ui.toolkit.core.Root;
import haxe.ui.toolkit.containers.Box;
import haxe.ui.toolkit.controls.TextInput;
import haxe.ui.toolkit.controls.Button;

/**
 * ...
 * @author gabriel
 */

class Main {
 static public function main(){
  
  Toolkit.theme = new GradientTheme();
  Toolkit.init();
  Toolkit.openFullscreen(function (root:Root)
  {
  
   var cajon:Box = new Box();
   cajon.x = 10;    //Punto de Origen x (abscisa o eje horizontal)
   cajon.y = 10;    //Punto de Origen y (origen o eje vertical)
   cajon.width = 420;   //Largo del cajon
   cajon.height = 170;   //Alto del cajón
   cajon.style.backgroundColor = 0xFFFFFF; //Color de Fondo (blanco)
   cajon.style.borderSize = 3;    //Grosor en pixels del borde
   cajon.style.borderColor = 0x000000;  //Color del borde (negro)
   cajon.style.cornerRadius = 4;   //Redondeo de las esquinas
   
   var direccion:TextInput = new TextInput();
   direccion.x = 25;
   direccion.y = 25;
   direccion.width = 300;
   direccion.style.fontSize = 15;   //Tamaño de la tipografía
   direccion.text = "Agregar";   //Texto a mostrar inicialmente
   
   var carga:Button = new Button();
   carga.x = 350;
   carga.y = 25;
   carga.text = "Cargar";    //Etiqueta del boton
   
   root.addChild(cajon);
   root.addChild(direccion);
   root.addChild(carga);
  });
  
   
 }
 
}


En la próxima entrada seguimos agregando controles, y empezamos a darle cierta lógica mediante eventos. Cualquier duda pueden escribirme  o dejar comentarios aquí debajo. 

Prueben lo visto hasta ahora..agreguen mas botones, traten de cambiarles los colores..diviértanse con Haxe.