¿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.

Enlaces