Mostramos paso a paso la creación de la aplicación Bindows más sencilla posible, el hola mundo.
Bindows es un framework AJAX para crear aplicaciones RIA (Rich Internet Applications) las cuales corren en un navegador. Ya se presentó anteriormente esta herramienta artículos del manual de Bindows.
Como crear una aplicación
Ahora vamos a ver cómo crear una aplicación, lo más sencilla utilizando Bindows, el típico "Hola Mundo". Esta explicación se encuentra entre los tutoriales en Inglés de la propia página web de Bindows, que se han traducido y ampliado libremente en este artículo.
Como primer paso tendremos que crear el archivo de descripción de aplicación (Application Description File o ADF).
Este es un archivo XML que Bindows interpretará para crear la aplicación.
<?xml version="1.0"?>
<Application>
<Window caption="Hello Mundo" width="300" height="200">
<Label padding="5">Hola Mundo</Label>
</Window>
</Application>
Para probar el ejercicio, guardaremos este archivo entre los ejemplos que vienen con la descarga de Bindows, en el directorio "samples". Concretamente, dentro de samples, hemos creado una nueva carpeta para localizar esta aplicación que podemos llamar "holamundo" o cualquier cosa similar.
Ejecutando la aplicación
Las aplicaciones siempre son lanzadas desde una página HTML. El HTML que lanza la aplicación Hola Mundo sería algo como lo que sigue:
<!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/', 'holamundo.xml'); return false;">
Ejecutar holamundo.xml
</a>
</p>
</body>
</html>
Este archivo lo podemos llamar launch.html, por ejemplo, y lo vamos a situar en la misma carpeta que el XML de antes. Lo más importante es que las rutas relativas a las librerías de Bindows estén bien escritas, pues de lo contrario no funcionará. En este caso se supone que este archivo, y el XML holamundo.xml estarán en un subdirectorio dentro de samples. Entonces, la ruta hasta la librería del API Bindows para lanzar la aplicación será "../../html/js/bilauncher.js".
Al abrir esta página se mostrará un link "Ejecutar Hola Mundo" que ejecutará la aplicación.
En el código anterior se puede ver que se utiliza la función biExec, que se encuentra en el archivo bilauncher.js que es incluido como archivo .js externo en la cabecera en la página HTML.
biExec recibe dos parámetros:
Bindows markup
En el archivo holamundo.xml se ha incorporado un componente label, utilizando el lenguaje de marcado de Bindows o Bindows markup, que 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, en el archivo XML, primero se tiene que definir el tag dentro de .
Como crear una aplicación
Ahora vamos a ver cómo crear una aplicación, lo más sencilla utilizando Bindows, el típico "Hola Mundo". Esta explicación se encuentra entre los tutoriales en Inglés de la propia página web de Bindows, que se han traducido y ampliado libremente en este artículo.
Como primer paso tendremos que crear el archivo de descripción de aplicación (Application Description File o ADF).
Este es un archivo XML que Bindows interpretará para crear la aplicación.
<?xml version="1.0"?>
<Application>
<Window caption="Hello Mundo" width="300" height="200">
<Label padding="5">Hola Mundo</Label>
</Window>
</Application>
Para probar el ejercicio, guardaremos este archivo entre los ejemplos que vienen con la descarga de Bindows, en el directorio "samples". Concretamente, dentro de samples, hemos creado una nueva carpeta para localizar esta aplicación que podemos llamar "holamundo" o cualquier cosa similar.
Ejecutando la aplicación
Las aplicaciones siempre son lanzadas desde una página HTML. El HTML que lanza la aplicación Hola Mundo sería algo como lo que sigue:
<!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/', 'holamundo.xml'); return false;">
Ejecutar holamundo.xml
</a>
</p>
</body>
</html>
Este archivo lo podemos llamar launch.html, por ejemplo, y lo vamos a situar en la misma carpeta que el XML de antes. Lo más importante es que las rutas relativas a las librerías de Bindows estén bien escritas, pues de lo contrario no funcionará. En este caso se supone que este archivo, y el XML holamundo.xml estarán en un subdirectorio dentro de samples. Entonces, la ruta hasta la librería del API Bindows para lanzar la aplicación será "../../html/js/bilauncher.js".
Al abrir esta página se mostrará un link "Ejecutar Hola Mundo" que ejecutará la aplicación.
En el código anterior se puede ver que se utiliza la función biExec, que se encuentra en el archivo bilauncher.js que es incluido como archivo .js externo en la cabecera 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 la ruta "../../html/"
- 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, que 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, en el archivo XML, primero se tiene que definir el tag
Leonardo Alberto Celis