¿Que es Qooxdoo?

Qooxdoo es un Framework de JavaScript, de código abierto, que ofrece soporte de desarrollo profesional en JavaScript, interfaz gráfica de usuario (GUI) y comunicación cliente / servidor de alto nivel. Permite desarrollar aplicaciones para diferentes plataformas, tales como: web, escritorio, móvil o servidor.


Características principales

  • Permite al desarrollador abstraerse del HTML, CSS y DOM de la aplicación.
  • Programación orientada a objetos.
  • Multi navegador.
  • Soporte Ajax.
  • Widgets de aspecto similar a los usados en los entornos de escritorio.

Requisitos

El código Qooxdoo se compila usando scripts en Python que se proporcionan con la SDK, por lo tanto, hará falta tener instalado el Python, en concreto la versión 2.7, actualmente soportada por Qooxdoo Framework.


Caso práctico

Ahora, os enseñaré un pequeño ejemplo, paso a paso, del típico “Hola mundo”. Ante todo, como se dijo mas arriba, hace falta tener instalada la versión 2.7 de Python. Una vez instalada, nos dirigimos a la página de Qooxdoo, a la sección de descargas. En este caso me bajaré la SDK de escritorio.

Qooxdoo Desktop Qooxdoo Desktop

Una vez descargada la SDK, la descomprimimos donde queramos. Yo lo tengo en la carpeta publica del Apache, en el local.

Qooxdoo 2.1 - SDK Qooxdoo 2.1 – SDK

Si entramos en la carpeta descomprimida, enseguida veremos una estructura similar a esta:

Qooxdoo - create-application.py Qooxdoo – create-application.py

Si os fijáis, tenemos un fichero llamado “create-applicatión.py”, el cual sirve para crear proyectos nuevos, es decir, cuando se quiere empezar una aplicación nueva, este fichero nos ayudará a construir su directorio con toda la estructura necesaria.

Ahora procederemos a crear un proyecto nuevo. Primero necesitamos ejecutar el MS-DOS (cmd.exe), con permisos de administrador (si se quiere crear el proyecto en un directorio protegido). Nos dirigimos al directorio de la SDK usando el comando:

cd la/ruta/de/tu/sdk

Ahora usaremos otro comando, indicando el nombre del proyecto y la ruta de la salida, es decir, la ruta donde queremos tener el proyecto.

create-application.py -n nombre_proyecto -o ruta/de/proyecto
Qooxdoo SDK Qooxdoo SDK

Nos dirigimos al directorio indicado y veremos el proyecto creado.

Qooxdoo Files Qooxdoo Files

Dentro del directorio, veremos la estructura que se creó.

Qooxdoo - generate.py Qooxdoo – generate.py

Si nos fijamos, existe otro fichero llamado “generate.py”, que nos servirá para compilar el código Qooxdoo.

Ahora nos dirigimos al directorio de “carpeta_proyecto\source\class\nombre_proyecto”, veremos otra estructura:

Qooxdoo Project Qooxdoo Project

En este directorio, hará falta tener todo, es decir, los recursos como (imágenes, documentos, etc..), así como los ficheros *.js que vayamos a usar. La clase principal del proyecto se encuentra en el fichero “Aplication.js”, por lo tanto es por donde empezaremos a programar.

Al abrir el fichero, veremos ya un código de ejemplo generado, el clásico “Hola mundo” que aparecerá al hacer el “click” en el botón:

qx.Class.define("securitynull_test.Application",
{
  extend : qx.application.Standalone,

  /*
  *****************************************************************************
     MEMBERS
  *****************************************************************************
  */

  members :
  {
    /**
     * This method contains the initial application code and gets called
     * during startup of the application
     *
     * @lint ignoreDeprecated(alert)
     */
    main : function()
    {
      // Call super class
      this.base(arguments);

      // Enable logging in debug variant
      if (qx.core.Environment.get("qx.debug"))
      {
        // support native logging capabilities, e.g. Firebug for Firefox
        qx.log.appender.Native;
        // support additional cross-browser console. Press F7 to toggle visibility
        qx.log.appender.Console;
      }

      /*
      -------------------------------------------------------------------------
        Below is your actual application code...
      -------------------------------------------------------------------------
      */

      // Create a button
      var button1 = new qx.ui.form.Button("First Button", "securitynull_test/test.png");

      // Document is the application root
      var doc = this.getRoot();

      // Add button to document at fixed coordinates
      doc.add(button1, {left: 100, top: 50});

      // Add an event listener
      button1.addListener("execute", function(e) {
        alert("Hello World!");
      });
    }
  }
});

Bueno ya visto el código, nos dirigimos al directorio de la raíz de nuestro proyecto y ejecutamos el fichero “generate.py” para compilar el código Qooxdoo. Nos aparecerá algo similar si todo ha ido bien.

Qooxdoo Compile Qooxdoo Compile

Cuando se cierre la ventana de MS-DOS, nos dirigimos al directorio de “nombre_proyecto\source\” y abrimos el “index.html”

Qooxdoo HTML Qooxdoo HTML

Veremos algo similar a la de captura:

Qooxdoo Test Qooxdoo Test

Conclusión

Si queremos desarrollar aplicaciones de manera rápida, fácil, con GUI amigable e intuitiva, entonces sin duda el Qooxdoo seria una de las mejores opciones.


Página Oficial de Qooxoo

http://qooxdoo.org/