Crear una Ventana

Voy a inaugurar la sección de Tutoriales de ZumOS con lo que para mí es lo más básico de este WebOS, la creación de ventanas.

El contenido de este tutorial irá cambiando, a medida que la forma de trabajar con ventanas en ZumOS vaya cambiando.

Si te consideras con conocimientos suficientes, puedes comenzar echando un ojo al código fuente del gestor de ventanas (en JavaScript) en esta dirección: http://zumos.zumbe.net/os/js/ventanas.js

Empecemos por el principio del todo, la clase Ventana. Primero de todo hemos de crear nuestra nueva ventana de la siguiente forma:

var miventana = new Ventana(id);

Aunque siempre es más cómodo usar la función puesta a tu disposición $V() :

var miventana = $V(id);

El parámetro id es el identificativo de la ventana. Es importante que cada programa tenga una única id en común. Por ejemplo, en el programa “prueba”, la id de ventana será “prueba”, el archivo JavaScript que cargue también tendrá la id “prueba”, etc.

Una ventana tiene una serie de procesos que explicaré a continuación:

Crea es el primero de todos, y sólo puede ser llamado una vez, para crear la ventana. Repetir el proceso devolverá un error.

Como único y obligado parámetro has de introducir un array de cuatro elementos, indicando coordenadas, que pueden ir vacías para que el sistema le adjudique unas por defecto. Las coordenadas son, por orden, distancia desde arriba, distancia desde la izquierda, ancho y alto; todas en píxeles. Pongamos un ejemplo:

$V('miventana').crea([,,300,400]); //las coordenadas de posición dejo que las elija el sistema, el ancho y el alto lo defino yo (300*400)

Cuando creamos una nueva ventana, por defecto se le adjudica un título provisional, pero deberíamos cambiarlo al título del programa, o lo que queramos, de la siguiente forma:

$V('miventana').titulo("Esta es mi ventana");

Algo interesante es que podemos encadenar los procesos de una misma ventana, puediendo hacer esto:

$V('miventana').crea([50,30,400,600]).titulo("Esta es mi ventana");

Se pueden encadenar todos los procesos que se quiera.

Otro proceso importante es llena, que llena de contenido HTML nuestra ventana. Por ahora sólo puede trabajarse de esta forma con el contenido de la ventana, pero próximamente esto va a cambiar mucho. Pero de momento tendremos que conformarnos con:

$V('miventana').llena('Esta ventana ha sido generada en ZumOS’);

Metiéndonos en procesos más específicos tenemos mueve, que cambia los parámetros iniciales por los dados, es un array de cuatro elementos, indicando distancia desde arriba, dist. desde la izquierda, ancho y alto. Podemos aplicar este proceso en cualquier momento. Un ejemplo:

$V('miventana').mueve([30,30,450,260]);

También disponemos del dominio sobre los controles de cada ventana, es decir, minimizar, maximizar y cerrar. Por si no te abias fijado, todos los procesos se escriben en imperativo, así que se llaman minimiza, maximiza, y cierra:

$V('miventana').minimiza(); //minimizo la ventana

Y por último, tenemos el proceso destaca, que hace que la ventana se convierta en la principal y destacada, es decir, la resalta sobre el resto. Es lo que ocurre cuando hacemos clic sobre una ventana.
Un detalle final. La función $V(), si no se le pasa ningun parámetro, devuelve un array con todos los elementos Ventana, para aplicarle cualquier propiedad Element de Mootools. Por ejemplo: