Hacemos otra aplicación sencilla con el framework Bindows en el que realizamos un manejo de 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:
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 "click".
Primero definimos el ADF:
<?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>
Este XML lo podemos guardar en un archivo llamado Eventos.xml que podemos poner en una carpeta dentro del directorio "samples". La carpeta la vamos la llamar por ejemplo "eventos". Da igual el nombre, pero lo que es importante es que la ruta a las librerías de Bindows que pongamos en el HTML estén correctas.
Si nos fijamos en el XML anterior, se ha definido un recurso externo en un archivo .js que llamamos Eventos.js. En ese archivo se definen las acciones a la pantalla definida. El archivo Eventos.js se tiene que localizar en este caso en el mismo directorio del XML. Su código sería algo como sigue:
// 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();
};
Ahora ejecutemos la aplicación con el launch.html de la siguiente manera:
<!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="../../html/js/bilauncher.js"></script>
</head>
<body>
<p>
<a href="#" onclick="biExec('../../html/', 'Eventos.xml'); return false;">
Ejecutar Eventos.xml
</a>
</p>
</body>
</html>
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.
Enlaces
Bindows http://www.bindows.net
Bindows - User's Manual, Ilan Zisser & Tali Eilam, Junio 7, 2005
http://www.bindows.net/documentation/download/
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 objeto 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 "click".
Primero definimos el ADF:
<?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>
Este XML lo podemos guardar en un archivo llamado Eventos.xml que podemos poner en una carpeta dentro del directorio "samples". La carpeta la vamos la llamar por ejemplo "eventos". Da igual el nombre, pero lo que es importante es que la ruta a las librerías de Bindows que pongamos en el HTML estén correctas.
Si nos fijamos en el XML anterior, se ha definido un recurso externo en un archivo .js que llamamos Eventos.js. En ese archivo se definen las acciones a la pantalla definida. El archivo Eventos.js se tiene que localizar en este caso en el mismo directorio del XML. Su código sería algo como sigue:
// 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. Las mayúsculas y minúsculas importan, incluso en los nombres de los archivos donde hayamos guardado los códigos. Hay que fijarse que nosotros siempre hemos utilizado la palabra Eventos en los nombres de archivos y de funciones con la primera "e" en mayúscula. |
Ahora ejecutemos la aplicación con el launch.html de la siguiente manera:
<!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="../../html/js/bilauncher.js"></script>
</head>
<body>
<p>
<a href="#" onclick="biExec('../../html/', 'Eventos.xml'); return false;">
Ejecutar Eventos.xml
</a>
</p>
</body>
</html>
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.
Enlaces
Bindows http://www.bindows.net
Bindows - User's Manual, Ilan Zisser & Tali Eilam, Junio 7, 2005
http://www.bindows.net/documentation/download/
Leonardo Alberto Celis