Tag browsing: Qt
November 17th, 2010
Photo Credits: Quim Gil – Photo License: AttributionShare Alike Attribution, Share Alike
Entre ayer y hoy en Dublin se llevo a cabo la MeeGo Conference 2010, con un concurrencia de mas de 1000 developers y con muchas novedades desde el principio, quizás la noticia mas importante la dio AMD anunciando su ingreso al proyecto, algo lógico de cara al próximo lanzamiento de sus procesadores AMD Zacate orientados al mercado de la netbooks, mercado en el cual Intel quiere empezar a posicionar a MeeGo el año que viene.
También se hizo el anuncio de que para el próximo año se van a realizar dos MeeGo Conferences las primera de ellas en Mayo en San Francisco que va a estar orientada a los partners de hardware y la segunda se realizara a finales de año y estará enfocada en los developers, ademas de estos anuncios se pudieron ver los planes para las próximas versiones de Qt y Meego.
Pasando a las charlas, la temática ha sido variada, tocando todas las versiones de MeeGo (Netbook, Handset, Connected TV e IVI) y por suerte todas ellas han sido grabadas, en este momento ya se encuentran disponibles los vídeos de casi todas las charlas dadas el Día 1 y próximamente estarán disponibles las del Día 2, pueden ver el listado de las mismas aquí, para ver los vídeos o bajar los slides solo hagan click en la charla de su interés, sino pueden ir a la pagina de la Linux Foundation donde también se han subido los vídeos.
Como verán, la comunidad y las empresas que giran en torno de MeeGo no paran de crecer, así que les dejo algunos links con recursos por si están interesados en investigar mas y probar MeeGo.
November 11th, 2010
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.
November 6th, 2010
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.
November 4th, 2010
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.
July 20th, 2010
Meego nace de la unión de los proyectos Moblin (Intel) y Maemo (Nokia) además cuenta con el auspicio de la Linux Foundation, lo que asegura que sea 100% OSS compliant, esto ultimo sumado a la política de upstream first para mantener una constante compatibilidad con el kernel de Linux, le esta trayendo algunos dolores de cabeza a Intel, que tiene problemas para integrar los drivers de sus chipsets GMA500 y del próximo GMA600 por una incompatibilidad de licencias.
Meego es la concreción del viejo dicho que dice, se juntaron el hambre y las ganas de comer, por una lado tenemos a Intel, que ve que el segmento mobile no para de crecer y a ARM y sus derivados llevarse la mayoría de las ganancias y el marketshare, por el otro lado esta Nokia, que ya había empezado a despegarse de Symbian con Maemo, pero que necesita acelerar el paso y tener un OS que le sirva para entrar en otros mercados (tablets, netbooks) como así también tener un plan B, por si el barco Symbian se termina de hundir en el segmento de los smartphones high end.
Arquitectura
Meego es una distro Linux, cuya arquitectura a grandes rasgos se divide en 3 capas, OS Base, Middleware y UX.
OS Base
Esta capa esta constituida por la HAL y un kernel Linux, a diferencia de Android, Meego sigue una política de upstream first que lo mantiene sincronizado con las ultimas versiones de el kernel Linux, esto permite adoptar fácilmente nuevas versiones del kernel dentro del proyecto, sino que también obliga a los fabricantes de hardware a que se encarguen de todo el proceso de inclusión de sus drivers en el kernel.
Middleware
En esta capa corren a grandes rasgos:
- Los servicios y APIs que permiten el acceso a todo tipo de conectividad, 3G, WiFi, Bluethot (Comms Services)
- El web runtime, los servicios de rendering y geolocalización (Internet Services)
- Los subsistemas 2D y 3D, los servicios para el rendering de fonts, la libreria Clutter y el server X (Visual Services)
- Todos los servicios y codecs necesarios para la reproducción y captura de audio y video (Media Services)
- El subsistema que se encarga de proveer los servicios para la manipulación de metadata, por ejemplo información de media files, la posición del dispositivo (acelerometro) (Data Management).
- Todos los subsistemas y servicios encargados de administrar el estado del dispositivo, como así también las sincronización, backup y restauración del sistema. (Device Services)
- Todos los servicios necesario para el manejo y administración de los datos personales del usuario, (contactos, tareas, calendario) y el manejo de las cuentas de acceso a servicios web. (Personal Services)
Meego API
La Meego API esta basada en QT 4.6.x (al día de hoy, pronto se estara dando soporte a la versión 4.7), además se están desarrollando complementos como MeeGo Touch Framework, MeeGo Web Runtime (permite crear aplicaciones nativas usando HTML, CSS y Javascript) y Qt Mobility (un set de librerías con funciones y componentes especialmente desarrollando para se usados en ambientes mobile)
UX
Meego fue pensado desde un principio para ser usado en una gran variedad de dispositivos (netbooks, smartphones, tablets, televisores y automóviles), en esta capa corre una User Interface especializada para cada uno de ellos.
Hasta el momento han sido liberas las versiones 1.0 de Meego para Netbooks y una Alpha (muy alpha) de Meego para Smartphones.
Herramientas y Ambiente de Desarrollo
Aunque la idea de Nokia es usar QT para todo, aun quedan algunas aplicaciones GTK en Meego (por ejemplo Banshee) resabios de su pasado como Moblin, no esta en los planes desterrar a GTK del entorno, sino impulsar a QT para que tome una posición mas relevante, para ello Nokia provee de QT Creator y los SDKs necesarios para comenzar ya mismo a desarrollar, también Novell se esta sumando a la fiesta con su propio sabor de Meego y el consiguiente soporte para Mono.
Recursos
