¿Qué es Bindows?
Bindows es un framework AJAX para crear aplicaciones RIA (Rich Internet Applications) las cuales corren en un navegador.
¿Cómo crear una aplicación?
Primer paso tendremos que crear el archivo de descripción de aplicación (Application Description File o ADF).
Este archivo es un archivo xml que Bindows interpretará para crear la aplicación.
Holamundo.xml
<?xml version="1.0"?>
<Application>
<Window caption="Hello Mundo" width="300" height="200">
<Label padding="5">Hola Mundo</Label>
</Window>
</Application>
Ejecutando la aplicación:
Las aplicaciones siempre son lanzadas desde una página html. Este html lanza la aplicación Hola Mundo:
Launch.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Launcher</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../bindows/html/js/bilauncher.js"></script>
</head>
<body>
<p>
<a href="#" onclick="biExec('../bindows/html/', 'HelloWorld.xml'); return false;">
Ejecutar holamundo.xml
</a>
</p>
</body>
</html>
Al abrir esta página se mostrará un link “Ejecutar Hola Mundo” que ejecutará la aplicación.
Se utiliza la función biExec que se encuentra en el archivo bilauncher.js que es incluído en la página html.
biExec recibe dos parámetros:
- El primero es la ubicación de los archivos de Bindows. En este caso se encuentran en un nivel más arriba dentro de la carpeta bindows/.
- El segundo es la ubicación del ADF de la aplicación, en este caso el archivo holamundo.xml.
Bindows markup:
En el archivo holamundo.xml se ha incorporado un componente label utilizando el lenguaje de marcado de Bindows o Bindows markup.
Esto permite al desarrollador definir pantallas y componentes como etiquetas XML en vez de código Javascript. La información del markup es traducida por Bindows en el código necesario para desplegar la pantalla.
Note que todos los componentes que se agreguen a la aplicación estarán siempre colgados de una ventana. Por lo que para utilizar componentes primero se tiene que definir el tag
<Window> dentro de <Application>.
Manejando eventos:
Todos los eventos de Bindows generan objetos que derivan de BiEvent. El ciclo de vida de un evento típico sería el siguiente:
- Un escuchador de eventos (event listener) es asignado a un objeto.
- Un objeto crea un objecto evento y lo despacha.
- El escuchador de eventos maneja el evento despachado.
Por ejemplo: para manejar un clic en un botón, se tiene que agregar un escuchador de eventos al objeto botón, que escuchará el evento “clic”.
Primero definimos el ADF:
eventos.xml
<?xml version="1.0"?>
<Application>
<Window caption="Eventos" width="300" height="200">
<MenuBar id="menu-bar" left="0" right="0" height="25" top="0">
<MenuButton text="Archivo" mnemonic="m">
<Menu>
<MenuItem id="mnuSalir" text="Salir" mnemonic="S" />
</Menu>
</MenuButton>
</MenuBar>
</Window>
<Resources>
<Script src="eventos.js"/>
</Resources>
</Application>
Ahora incorporamos las acciones a la pantalla definida:
Eventos.js
// define constructor
function Eventos() {
var btn = application.getComponentById("mnuSalir");
btn.addEventListener("action", onMnuExit);
};
function onMnuExit()
{
var win = application.getWindow();
win.close();
};
// define static main method
Eventos.main = function () {
new Eventos();
};
Nota: el nombre de la función Eventos tiene que coincidir con el nombre del archivo xml.
Ahora ejecutemos la aplicación con el launch.html de la siguiente manera:
<a href="#" onclick="biExec('../bindows/html/', 'eventos.xml'); return false;">
Ejecutar holamundo.xml
</a>
Obtendremos una aplicación con una barra de menú. La misma tendrá un menú “Archivo”, y dentro del mismo la opción “Salir”. Al hacer clic (evento action capturado por el addEventListener) se disparará el método onMnuExit el cual cerrará la ventana.
Conoce más acerca de Bindows en la segunda parte de este artículo y déjanos tus comentarios.
Loading ...
