Es muy extraño ver una aplicación node.js que no haga uso de una solución NoSQL, pero puede presentarse el caso de tener que acceder a una base de datos legacy y casi con seguridad esa DB sea MySQL, el estado de los modulos MySQL en node.js, es muy dispar, pero hay un proyecto liderado por Felix Geisendörfer al que vengo siguiendo desde hace un tiempo, es al que mas fe le tenia, mas que nada, porque cuenta con el patrocinio de Joyent que ha tomado a node.js como algo estratégico para su plan de negocios.

El modulo que estoy usando es node-mysql, el cual es una implementación del protocolo MySQL escrito 100% con node.js, la forma mas fácil de instalarlo es usando npm.

# Instalando node-mysql y sus dependencias vía npm
npm install mysql

El modulo aunque ya esta siendo usando por algunos en producción y las funcionas básicas ya están implementadas, no esta etiquetado como estable, así que hay que tener un poco de cuidado si se quiere hacer uso de el.

Pasemos al ejemplo, como se ve en el código a continuación, la primera parte se encarga de cargar el modulo y todo lo relacionado a la conexión a la DB, luego paso la consulta que quiero ejecutar haciendo uso de client.query y para terminar creo una función que se encargara de mostrar los resultado en la consola o tirar un mensaje de error si algo no va bien.

var Client = require('mysql').Client,
    client = new Client();  
	client.user = 'root';
	client.password = 'password';
	client.host='127.0.01';
	client.port='3306';
	client.database='Oranje'
	client.connect();

	client.query(
		'SELECT * FROM players WHERE name LIKE "Minke%"',
        function selectPlayers(err, results, fields) {
            if (err) {
                console.log("Error: " + err.message);
                throw err;
            }
            console.log("Number of rows: "+results.length);
            console.log(results);
            client.end();
        });

En la siguiente screenshot pueden ver la salida de datos en la consola.

En github pueden encontrar mas información acerca del proyecto, ademas de la documentación.

Una de las características interesantes de QML es la posibilidad de usar Javascript para agregar funcionalidades extras de forma rápida y fácil, básicamente contamos con un entorno igual al que se encuentra en cualquier browser moderno con algunas pequeñas adiciones.

Vamos a comenzar con un ejemplo simple, la idea de este ejemplo es crear una app que muestre numero aleatorios cuando se presione la barra espaciadora o cuando se haga click sobre el elemento Text que mostrara los numeros.

Javascript Inline

Para comenzar vamos a mostrar como integrar el código Javascript de forma inline, esta practica se aconseja siempre y cuando el código a añadir no sea muy extenso, ya que sino la legibilidad y mantenibilidad del código se resiente.

Pasemos ahora al código, en un nuevo proyecto pegamos el siguiente código, como verán luego de declarar un Rectangle y dentro del mismo, agregue un función que genera números aleatorios en este caso hasta el numero 100, luego viene el elemento Text encargado de mostrar el numero aleatorio, el cual contiene un MouseArea que cuando se dispara el evento onClicked toma un numero generado por la función Javascript y se lo asigna al elemento Text, lo mismo pasa a continuación con la función Keys.onPressed seteada para dispararse cuando se presiona la barra espaciadora.

Numerator.qml

import Qt 4.7

Rectangle {
    width: 640
    height: 360
    id:container

    function rand (n){
        return (Math.floor(Math.random() * n + 1));
    }

    Text{
        id: start
        text: "click!"
        font.pointSize: 128
        font.family: "Arial"
        font.bold: true
        color: "#cc0000"
        focus: true
        anchors.horizontalCenter: container.horizontalCenter
        anchors.verticalCenter: container.verticalCenter

        MouseArea {
            id: mouseRegion
            anchors.fill: start
            onClicked: {
                start.text = RandomFunctions.rand (100);
            }
        }

        Keys.onPressed: {
            if (event.key == Qt.Key_Space) {
                start.text = rand(100);
            }
        }
    }
}

Javascript Standalone

Cuando el código Javascript crece en tamaño o si se quiere mantener todo mas ordenado la opción es poner el código Javascript en uno o mas archivos separados, si vamos al caso de nuestro ejemplo podemos mover la función que genera los numero aleatorios a un archivo aparte, en este caso yo lo llame generator.qml, un tip a tener en cuenta es que por convención los nombres de los archivos .js deben comenzar con minúscula.

generator.js

function rand (n){
      return (Math.floor(Math.random() * n + 1));
}

Para poder hacer uso de las funciones ubicadas en un archivo separado debemos hacer un import con la ruta del archivo .js y setear un “alias” el cual debe ser único para cada archivo que importemos, este “alias” lo usaremos para poder invocar las funciones que albergue el archvio .js, un ejemplo de ello pueden verlo en el MouseArea o en la Keys.onPressed del código a continuación.

Numerator.qml

import Qt 4.7
import "generator.js" as RandomFunctions

Rectangle {
    width: 640
    height: 360
    id:container

    Text{
        id: start
        text: "click!"
        font.pointSize: 128
        font.family: "Arial"
        font.bold: true
        color: "#cc0000"
        focus: true
        anchors.horizontalCenter: container.horizontalCenter
        anchors.verticalCenter: container.verticalCenter

        MouseArea {
            id: mouseRegion
            anchors.fill: start
            onClicked: {
                start.text = RandomFunctions.rand (100);
            }
        }

        Keys.onPressed: {
            if (event.key == Qt.Key_Space) {
                start.text = RandomFunctions.ran (100);
            }
        }
    }
}

Como verán el integrar Javascript con QML es muy fácil y nos permite potenciar las posibilidades de QML, en la documentación oficial pueden encontrar mas información, ejemplos y buenas practicas para aplicar a nuestros desarrollos.

Para quienes hayan o estén trabajado con Flash, Flex, WPF o Silverlight el tema de los States es algo conocido y de uso diario, en QML un State nos permite cambiar propiedades de un elemento, disparar un script usando StateChangeScript, modificar el parent utilizando ParentChanges, cambiar la alineación usando AnchorChanges o sobrescribir un signal handler utilizando PropertyChanges, todo ello cuando ocurra un evento determinado ya sea por nosotros en código o por el usuario cuando interactúa con la aplicación.

Vamos a comenzar con un ejemplo simple, la idea es crear un botón, mas que nada porque es un elemento de uso común el cual cuenta con varios estados con los que podemos jugar y porque QML no trae un elemento Button definido así que si necesitamos hacer uso de uno vamos a tener que crearlo nosotros, esto puede parecer un poco molesto, pero por suerte es un proceso fácil y cuyo código puede ser reutilizado posteriormente.

Vamos a empezar creando un proyecto con Qt Creator, luego de crearlo vamos a añadir un archivo QML llamado Button.qml, una cosa a tener en cuenta es que el nombre que usemos para el archivo sera el que usaremos para invocar el elemento que creemos con el, en este caso Button.

El próximo paso sera pegar el siguiente código en el archivo Button.qml

Button.qml

import Qt 4.7

Item {
    id: container
    signal clicked
    property string text

    Rectangle {
        id: button
        color: "#00aeef"
        border.width: 1
        radius: 4
        width: container.width
        height: container.height
    }

    MouseArea {
        id: mouseRegion
        anchors.fill: button
        onClicked: {
            container.clicked();
        }
    }

    Text {
        color: "#fff"
        anchors.centerIn: button
        font.pixelSize: 12
        text: container.text
    }

    states: [
        State {
            name: "Pressed"
            when: mouseRegion.pressed == true
            PropertyChanges {
                target: button
                color: "#333"
            }
        }
    ]
 }

El código comienza con el import de rigor y sigue con un Item, el cual es el mas básico de los visual items en QML, continua con el signal que no es mas que un handler usado por el MouseArea y que detecta las acciones hechas por el mouse dentro de si, y por ultimo en esta primera parte del código tenemos la declaración de la propiedad text la cual usaremos para setear el texto a mostrar por el botón.

A continuación tenemos un elemento Rectangle que sera nuestro botón en si, sigue el MouseArea que esta configurado para que ocupe toda la superficie del Rectangle y que contiene el handler onClicked el cual se dispara cuando se hace click con el botón izquierdo del mouse, por ultimo tenemos un elemento Text que hace las veces de label del botón.

Y para finalizar llegamos a la sección de states donde tenemos un State cuyo nombre es Pressed y se dispara cuando el MouseArea ha recibido un click el cual a través de la PropertyChanges que apunta al botón cambien la propiedad color del mismo.

Bien, ya tenemos nuestro botón listo, utilizarlo es tan simple como invocar un elemento Button, en el código que sigue pueden ver un ejemplo de como hacerlo.

Main.qml

import Qt 4.7

Rectangle {
    width: 200
    height: 200
    id: container
    Button {
        width: 100;
        height: 25;
        text: 'Hello World';
        anchors.horizontalCenter: container.horizontalCenter;
        anchors.verticalCenter: container.verticalCenter;
    }
}

Animación

Bien como se ve en el ejemplo anterior el uso de states es bastante simple e intuitivo, con states se pueden hacer muchas mas cosas y pueden aprender mas de ellos viendo la documentación, pero para ir cerrando este post y como adelanto de los que vienen vamos a agregarle una pequeña animación al State utilizado por nuestro botón para hacer mas suave la transición entre el estado por default y Pressed, para ello solamente hay que agregar el siguiente código luego de la sección de states.

Button.qml

transitions: [
    Transition {
        PropertyAnimation { properties: "color"; duration: 300 }
    }
]

La animación que usamos es bastante simple lo único que hacemos es crear una Transition y setear las propiedades que serán animadas por la PropertyAnimation y su duración.

El resultado de todo esto debería de verse de la siguiente manera:

Recuerden darse una vuelta por los ejemplos y por la documentación de Qt Quick, en la cual hay mas información acerca de states.

Qt Quick fue para mi la novedad mas importante que nos trajo el reciente lanzamiento de Qt 4.7, Qt Quick permite que diseñadores y developers trabajen codo a codo para crear aplicaciones en donde la UX es lo mas importante, Qt Quick incluye a QML (Qt Meta-Object Language), un lenguaje declarativo para el diseño de interfaces basado en Javascript y que puede ser extendido usando Javascript o C++, tambien esta disponible en versión beta Qt Creator 2.1 con el cual podemos diseñar usando valga la redundancia el designer o editando directamente el codigo QML, por ultimo disponemos de Qt Declarative con el cual podemos integrar QML en aplicaciones C++.

Hello World

Vamos a comenzar con el tradicional Hello World, podemos crear un proyecto nuevo en Qt Creator o crear un archivo de texto y lo guardamos con extension .qml, un documento QML describe los elementos que los componen en un arbol de objetos, QML trae incluidos algunos elementos graficos como Canvas, Imagenes, Rectangulos entro otros ademas de algunos Behaviors como por ejemplo States, Animations y Transitions, estos elementos serán los que combinaremos para crear nuestra aplicación.

En nuestro proyecto en Qt Creator o en un archivo de texto ingresamos el siguiente código.

import Qt 4.7

Rectangle {
    id: container
    width: 200
    height: 200
    Text {
        text: "Hello World"
        anchors.horizontalCenter: container.horizontalCenter
        anchors.verticalCenter: container.verticalCenter
    }
}

En la primera linea vemos el import para utilizar las bibliotecas básicas de Qt 4.7, luego creamos un elemento Rectangle el cual tiene seteadas sus dimensiones y la id container, paso siguiente y dentro del Rectangle que hace las veces de contenedor creamos un elemento Text, le damos un valor a la propiedad text del mismo y alineamos el elemento usando las propiedades anchors las cuales enlazaremos a las propiedades horizontalCenter y verticalCenter del Rectangle.

Paso siguiente si estamos en QT Creator podemos correr nuestro ejemplo pulsando Ctrl+R si usamos Linux o Windows o cmd+R si utilizamos en OS X, en cambio si solo estamos trabajando con un archivo de texto podemos correr la demo usando el comando qmlviewer hello.qml, si todo sale bien deberíamos de ver algo así.

Lo que viene

Este es el primero de una serie de posts en donde hablare sobre los fundamentos de Qt Quick, si quieren ir investigando por sus propios medios pueden comenzar bajando el SDK de Qt 4.7 y Qt Creator y luego darle una mirada a la documentación online (ver links abajo), que por cierto es muy completa y se va actualizando y mejorando permanentemente.

• Download Qt 4.7 & Qt Creator
• Qt Quick Documentation

Estos últimos días aparecieron un par de soluciones para crear animaciones usando CSS3 de una manera fácil y rápida, por un lado en el marco de Adobe MAX 2010 se mostró el prototipo de Adobe Edge una herramienta con un uso y funcionalidades básicas parecidas a Adobe Flash pero que utiliza CSS3 para crear las animaciones, a continuación pueden ver un video donde se aprecian sus capacidades, por ahora no hay mucha información acerca de Edge, no se sabe si va a llegar a materializarse como un producto independiente o si esta tecnología va a formar parte de algún otro producto de Adobe, aunque viendo el compromiso que Adobe mostró en la MAX 2010 para con HTML5 no seria raro que dentro de poco tiempo tengamos novedades.

La otra herramienta viene de la mano de la gente de Sencha Labs, la misma corre tanto en Windows, OS X y Linux y su interfaz al igual que Edge tiene un cierto parecido con Adobe Flash (ver screenshot debajo), su instalación es muy fácil, aunque aun es muy inestable y tiene la contra de necesitar una cuenta de los foros de Sencha Labs para poder usarla. El código generado por Sencha Animator esta optimizado para navegadores compatibles con Webkit, por lo que algunas features es posible que no funcionen en Firefox como por ejemplo los keyframes.

Pueden descargar Sencha Animator directamente desde aquí, hay disponibles también un par de screencast donde pueden ver el funcionamiento y las cosas que se pueden lograr utilizando Sencha Animator (ver videos abajo).