Maestros del Web


Estás en Inicio / Editorial / Ajax

22.08.2006

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

Enlaces

Califica esta nota:

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (No hay votos aún)
Loading ... Loading ...
Leonardo Alberto Celis

Sobre el autor

Leonardo Alberto Celis
Senior software engineer y IT consulting en Argentina, en la actualidad es uno de los directores de Oh!STUDIO media solutions.

Si eres nuevo en Maestros del Web y te agradan nuestras publicaciones, te invitamos a suscribirte a nuestro Feed.

Sindícanos en: Google Reader, Bloglines, My Yahoo o My MSN | ¿Qué es el Feed?

Comentarios

14 comentarios en total.

  1. Ramon 23.08.2006 - 16:22 - #

    Al principio crei que se habian equivocado en el nombre, pero luego eso llamo mi atención y me parecio un articulo muy interesante. tendre que aprender mas sobre esto del bindows.

  2. Leonardo Celis 23.08.2006 - 20:50 - #

    Si deseas obtener más información podés ingresar a nuestro blog en http://bindows.blogspot.com.

    // http://www.ohstudio.com.ar //

  3. Julian Lasso 29.08.2006 - 12:24 - #

    La verdad está muy pero muy interesante, excelente para hacer aplicaciones web, pero….. ¿desplazará las actuales aplicaciones web? o que tipo de aplicaciones web podria desplazar??

  4. Lalo Kura 06.09.2006 - 10:13 - #

    Las aplicaciones resultantes tienen el llok and feel de los programas windows. Pero funcionan en Linux?

  5. RFGP-Chile 06.09.2006 - 13:14 - #

    Yo estuve bien el funcionamiento tanto el WinXP (IE6 y FireFox 1.5.0.6) como Linux SuSe (FireFox).

    Que muy sorprendido, ya que la grafica es bastante buena y los ejemplos que se proporcionan funcionan muy bien.

  6. oscar 07.09.2006 - 18:50 - #

    Es muy interesante esto de bindows me gustaria aprender mas hacer de esta nueva aplicacion

  7. oscar 07.09.2006 - 18:50 - #

    Es muy interesante esto de bindows me gustaria aprender mas hacer de esta nueva aplicacion

  8. oscar 07.09.2006 - 18:50 - #

    Es muy interesante esto de bindows me gustaria aprender mas hacer de esta nueva aplicacion

  9. Marko 15.09.2006 - 13:43 - #

    Solo digo: uau!
    Fascinante framework, aunque tengo un poco de repulsión al “dows” de Bindows, sin embargo es buena la idea.

  10. Danny 26.09.2006 - 15:12 - #

    me parece realmente interesante, pero tengo muy poco conocimiento de este, espero conocer un poco mas y aprender mas de esta aplicacion

  11. ruben 26.09.2006 - 17:50 - #

    de que hablan no entiendo nada

  12. ruben 26.09.2006 - 18:01 - #

    enserio expliquenme

  13. ruben 26.09.2006 - 18:05 - #

    mejor me voy, chao suerete con eso lo que quiera que sea

  14. Manuel 25.08.2007 - 09:04 - #

    Interesante. Pero creo que primero hay que aprender bien a trabajar un poco más “desde cero”, o sea, hacer sitios web utilizando sólo AJAX y después intentar utilizar un framework.
    Mi opinión particular es que un FrameWork es útile cuando su objetivo es evitarle al programador un trabajo rutinario, que no tiene nada de complejidad pero sí muy agobiador. Los FrameWork generalmente amarran y limitan a los desarrolladores a usar sólo los recursos que ellos brindan.

Deja tu Comentario


Maestros del Web se reserva el derecho de moderación de los comentarios. Evita utilizar palabras soeces, ataques directos, descalificativos, insultos, de lo contrario tu comentario será eliminado.


Anuncios por Q
-


Maestros del Web es el punto de encuentro para los entusiastas de la red.

Creative Commons by-nc-sa 3.0 | Política de Privacidad | CMS: Wordpress