Qt para Ruby Desarrolladores

Una de las cosas buenas acerca de Qt es que usted no tiene que ser un desarrollador de C + + con el fin de usarlo. La biblioteca cuenta con enlaces para muchos lenguajes de programación, incluyendo Ruby, Python, Perl, e incluso Java. Si está desarrollando en cualquiera de los idiomas mencionados y en busca de un buen marco de interfaz gráfica de usuario con capacidades de análisis de red y XML, estás en el lugar correcto.

En el siguiente artículo, voy a cubrir enlaces Qt para el lenguaje Ruby. Vamos a construir una aplicación de escritorio simple interfaz gráfica de usuario en Ruby usando Qt y voy a proporcionar referencias para el aprendizaje futuro.

1. Requisitos

Para empezar, tendrá que instalar la correspondiente gema rubí - se llama qtbindings. Use su línea de comandos shell favorita para ejecutar:

gem install qtbindings

Cuando la gema está en su lugar, empiece a leer el código.

2. Hola Qt Rubí

QtRuby utiliza todas las clases del framework (sistema) Qt, sólo envuelto como clases de rubí. Aquí está el Hola Mundo tradicional como una aplicación de rubí:

require 'Qt' app = Qt::Application.new ARGV label = Qt::Label.new("Hello World") label.show app.exec

Vamos a examinar el código de seguridad. Todas las clases de Qt se encuentran en el Qt:: module módulo Qt. Un programa que requiere Qt comienza con la gema, y luego pasa a la creación de Qt::Application object. Qt :: Application es un producto único que logra un comportamiento "global" de la aplicación. Se crea con los argumentos de la línea de comandos del programa. Casi todos los programas de Qt empezar por crear un

Qt::Application, y terminar con una llamada al método Exec - que entra en el bucle de eventos Qt.

Las clases de interfaz de usuario de Qt se llaman widgets. Hay un conjunto muy rico de las clases de widget que incluye una etiqueta (Qt :: Label), un pulsador (Qt :: PushButton), editor de línea (Qt :: LineEdit), y muchos más. Cada widget puede funcionar como una ventana independiente o integrado en otro widget. En el código de ejemplo anterior, hemos creado un objeto QLabel y llama al método Show, dando lugar a su aparición como una ventana completa.

Si usted busca en la documentación de Qt para la aplicación o etiqueta que no encontrará en ninguna, porque esas clases fueron renombrados como parte de la portabilidad. Qt :: Application es simplemente QApplication, Qt :: Label es QLabel, y así sucesivamente.

3. Diseños

Casi cualquier programa requerirá más de un widget. Estos aparatos se colocan utilizando las clases de diseño del administrador. Hay dos reglas para la disposición de los widgets de Qt:

1. Cada widget puede tener un padre. Si un widget tiene un padre, se colocará dentro de la ventana de los padres.

2. La clase que mantiene la lógica de colocación del algoritmo se llama un administrador de diseño.

Observemos el siguiente ejemplo que crea un diseño con múltiples widgets:

require 'Qt' app = Qt::Application.new ARGV w = Qt::Widget.new layout = Qt::VBoxLayout.new ( w ) layout.addWidget( Qt::Label.new("Hello Ruby") ) layout.addWidget( Qt::Label.new("Layouts are cool") ) layout.addWidget( Qt::Label.new("And so is Qt") ) w.show app.exec

El código resulta en 3 etiquetas, una debajo de la otra, dentro de la misma ventana. A VBoxLayout divide la ventana en cajas verticales y colocar cada widget dentro de su propia caja. Puedes leer más sobre esto en la documentación de Qt bajo QVBoxLayout. Qt tiene un total de 5 controladores de distribución: QVBoxLayout, QHBoxLayout, QGridLayout, QFormLayout, QStackedLayout. Los diseños de caja permiten disposición horizontal o vertical de los widgets, QGridLayout se utiliza para las redes, los lugares QFormLayout sus widgets en pares (etiqueta widget) y pantallas QStackedLayout sólo un widget simple a la vez, como una pila. También es posible combinar varios diseños para crear un diseño complejo anidado. Para ello, la creación de diseños para sus widgets hijos - como en el ejemplo siguiente:

require 'Qt' app = Qt::Application.new ARGV w = Qt::Widget.new # Outer layout is initialized with a widget outer = Qt::VBoxLayout.new ( w ) # Inner layout is initialized without any Widget. # We'll need to add this to a widget later on inner = Qt::HBoxLayout.new inner.addWidget( Qt::PushButton.new("Save") ) inner.addWidget( Qt::PushButton.new("Exit") ) outer.addWidget( Qt::Label.new("Simple Editor") ) outer.addWidget( Qt::TextEdit.new ) outer.addLayout( inner ) w.show app.exec

El nuevo método utilizado, addLayout añade una disposición existente con todos sus widgets a la ventana de la disposición de llamada. Mediante los widgets de anidación y diseños, es posible crear dos ventanas simples y complejos para satisfacer sus necesidades de aplicación.

4. Señales and Slots

La última pieza de nuestro viaje Qt es el mecanismo de control de eventos. En Qt se le llama Signals and Slots, señales y ranuras. Una señal es más que un evento con significado semántico. Cuando algo le sucede a un widget, que es importante de alguna manera con el widget, emite una señal. Así, por ejemplo, un clic del ratón en el interior de un botón, para emitir la señal clicked en el botón, mientras que el mismo clic del ratón en una etiqueta no genera ninguna señal. Usted puede obtener una lista de todas las señales de un widget específico pueden emitir al ver la documentación.

La otra cara de la señal es la ranura. Un Slot es un bloque de código enlazado a una señal, y se llama automáticamente cuando una señal conectada a ella fue emitida.

En el terreno de Qt, por lo tanto, comenzamos por conectar señales con las slots (definición de código que se ejecutará cuando algo ocurre), entonces llamamos a app.exec y esperar. Cuando la señal se emite, el código del slots será ejecutado.

Así es como se ve en el código:

require 'Qt' app = Qt::Application.new ARGV b = Qt::PushButton.new("Click Me") b.connect(SIGNAL :clicked) { b.setText("Ouch") } b.show app.exec

Los Signals, señales se representan mediante cadenas especialmente diseñados, que se producen con la SIGNAL function. Esta función toma un nombre de señal como un símbolo y devuelve el identificador de la señal. Finalmente, connect method de un widget se une a un bloque de código a la señal.

En lo anterior, el bloque de código que se ejecutan cada vez que se pulsa el botón, lo que lleva a cambiar el texto del botón.

5. Qt Rubí Takeaways

Al aprovechar el poder de Qt, podemos empezar a construir aplicaciones de escritorio de rubí que funcionan bien en las plataformas Mac, Windows y Unix / Linux. Qt conceptos de la gestión de diseño y gestión de eventos con señales y ranuras de formar una base sólida para nuestra aplicación GUI. Qt también tiene widgets de embalaje muy amplios para casi cualquier tarea de la aplicación que necesite. Tiene soporte para los menús, barras de herramientas, barras de estado, barras de desplazamiento y editores, tablas de datos, árboles y muchos más.

Si usted está listo para dar el siguiente paso en la creación de aplicaciones Qt en rubí, Nokia tiene algunos buenos tutoriales en su sitio web ( http://qt-project.org/doc/qt-4.8/tutorials.html ). Usted puede tomar cualquiera de ellos y tratar de ruby o ampliarlo según sus necesidades. Otro gran recurso es la base de conocimiento de KDE. Tienen una larga página dedicada a los enlaces Ruby y Qt.

Así que ... ¿Qué estás esperando? Vamos a codificar

Prototipado Rápido con QtDesigner y Ruby

Ruby es un lenguaje ideal para prototipos, pero tiene un defecto - ruby no tiene las capacidades nativas de GUI. Si usted está adentro para un rápido desarrollo de una nueva aplicación de escritorio GUI, lo mejor es tener una herramienta de diseño de arrastrar y soltar, una buena documentación y un marco maduro y extenso. Por suerte, Qt proporciona todo eso.

En este artículo voy a cubrir lo básico de trabajar con Qt Designer, arrastrar y soltar Qt GUI herramienta de creación, para crear un fichero especial XML que representa la interfaz de la aplicación. Luego (automáticamente) convertir el archivo a código rubí, y, finalmente, construir una maqueta gerente Todo.

1. Requisitos previos

El diseñador Qt es parte de Qt SDK, junto con muchas otras herramientas para crear aplicaciones Qt. Desde su producto son los archivos XML, que es la misma herramienta para el diseño de código de interfaz de usuario si está programando en Ruby, C + +, Python o cualquier otro lenguaje Qt tiene enlaces para. Qt SDK está disponible gratuitamente para su descarga desde sitio web de Nokia . Sólo tiene que elegir la versión de su sistema operativo, descargue e instale.

Ten en cuenta el SDK es grande (alrededor de 1 GB), por lo que es probable que desee tomar un café antes de seguir adelante.

Después de la descarga y la instalación se haya completado, podrá iniciar el diseñador del directorio en que se instaló el SDK. La herramienta se llama simplemente Diseñador (Designer) y usted debe encontrar en:

SDK Folder/Desktop/Qt/480/gcc/bin /

2. Qt Designer

El diseñador se divide para múltiples ventanas, cada una con su propio papel. El primer cuadro de diálogo que muestra, y el que toma todo el foco, es la nueva forma de diálogo. Antes de que podamos comenzar a diseñar tenemos que decirle al diseñador lo que queremos crear. Vamos a elegir choose MainWindow haciendo doble clic en él.

Después de la selección, todas las ventanas de diseño son ahora sensibles. Tómese unos minutos para navegar por la Caja de widgets y el editor de propiedades. El primer paso para utilizar el diseñador es simplemente arrastrar los elementos que necesita en la parte superior de la ventana, y cambiar sus propiedades en el editor de propiedades. Para nuestro gestor de tareas, voy a ir por dos pulsadores, una línea de edición, una etiqueta y un widget de lista. For our todo manager, I’ll go for two push buttons, a line edit, a label and a list widget.

Esto es lo que mi ventana se ve como diseñador después de arrastrar (nótese que no es necesario ser precisos al arrastrar los controles):

3. Una palabra acerca de los diseños

Arrastrar los controles en una ventana puede parecer atractivo, pero tiene algunas cosas malas importantes. Para el arranque, no es fácil ser preciso con los controles que se arrastran. Más importante, sin embargo, para los usuarios puede ser un poco inesperado. El usuario puede tener una resolución de pantalla diferente, puede optar por cambiar el tamaño de la ventana de la aplicación, o puede hablar un idioma extranjero (de manera que se escribe de derecha a izquierda), y luego todo el diseño tiene que ser ajustada.

Para superar las dificultades de diseño Qt nos proporciona clases genéricas que son realmente buenos para trazar los elementos de una manera simple y predecible. Se llaman Administradores de Diseño. Un controlador de diseño no es un widget, pero es un algoritmo. Un widget puede tener un controlador de diseño, y si lo hace, el controlador decidirá la colocación de widgets hijos.

Qt tiene 5 tipos de controladores de diseño, casi todos se encuentran en la parte superior de la caja de widget (por encima de la línea de búsqueda). Son HBoxLayout, VBoxLayout, GridLayout, FormLayout y la StackedLayout falta. HBoxLayout y VBoxLayout son buenas para empezar. HBoxLayout organiza sus widgets horizontalmente en una caja de izquierda a derecha, mientras que VBoxLayout las organiza verticalmente. Para organizar los widgets en una presentación, le asignamos un diseño para su widget contenedor.

Haga clic en alguna parte en la ventana, pero no en un widget específico y, a continuación, seleccione la VBoxLayout. Su diseñador va a cambiar el diseño de los widgets y ahora se verá algo como esto:

Desde la ventana exterior tiene la distribución, todos sus widgets hijos se organizan automáticamente en una caja vertical: una debajo de la otra.

Un paso más antes de que podamos seguir adelante es el diseño de anidación. Diseño de anidamiento significa que podemos tomar unos cuantos artilugios y los agrupan para que se vea como si fueran un widget único en el mundo exterior. A nivel interno, se puede asignar un diseño diferente para este grupo de widgets. En el diseñador, diseño de anidación se lleva a cabo mediante la selección de un grupo de widgets con el ratón y luego elegir un diseño.

Vamos a construir un diseño anidado:

1. Rompe el esquema actual haciendo clic en el icono de diseño "no entrada" (su descripción dice Break Layout) o elija Break Layout Pausa en el Diseño, en el menú formulario Form menu.

2. Seleccione los 3 widgets (etiquetas, edición de línea y pulsadores) (label, line edit and push button), y luego haga clic en el icono HBoxLayout.

3. Ahora, seleccione la forma externa, haga clic fuera de todo control, y haga clic en el icono VBoxLayout.

4. Si es necesario, arrastre los widgets dentro de sus diseños para una mejor orden.

Esto es lo que mi ventana del diseñador finalmente parece:

Los widgets de diseño y el diseñador son herramientas útiles en la creación de nuestra aplicación de interfaz de usuario, utilizando una interfaz de arrastrar y soltar. El XML resultante puede convertirse automáticamente al código en cualquier lenguaje compatible con Qt. Se necesita algún tiempo para acostumbrarse a los conceptos de diseñador y diseño, pero después de un tiempo escribiendo nuevas interfaces de usuario es muy fácil.

4. Preparación Nuestra interfaz de usuario de Ruby Archivos

El paso final en la obtención de una app, aplicación fuera de la puerta es el codigo. Vamos a empezar con algunos preparativos. Cada control tiene un nombre con el que se identifica. Puede asignar un nombre en el editor de propiedades.

Revise todos los controles y asignar nombres significativos para ellos. Estos son los nombres que elegí:

btn_add para el boton agregar btn_done para el boton hecho lst_tasks para el widget de lista line_task para la edición de línea

Al escribir el nombre ha terminado, guardar su trabajo como un archivo de extensión “.ui”. Elegí el nombre todo.ui pero por supuesto cualquiera servirá.

Ahora, tenemos que convertir el archivo “ui”, para el código Ruby. Ruby’s Qt bindings Enlaces Ruby Qt cuenta con una herramienta automática para ese trabajo llamado rbuic4

(que significa compilador rubí interfaz de usuario). Dirígete al directorio donde guardó el archivo “ui” y tipee :

rbuic4 todo.ui-x-o todo_ui.rb

El comando crea un nuevo archivo llamado todo_ui.rb con una clase de rubí que crea la interfaz. La clase se llama Ui_MainWindow (segunda palabra es el nombre del widget de nivel superior). Dispone de acceso para todos los controles definidos en el diseño, ya que elegimos el nombre del diseñador. El parámetro -x hace que rbuic4 añada un bloque de prueba, de modo que el código resultante rubí es realmente ejecutable. Pruebe con el comando:

rubí todo_ui.rb

Y ver su interfaz en acción.

5. Con nuestra interfaz de usuario en código

El código actual de Ruby para que la app este mejor escrito en otro archivo. Creamos una nueva clase derivada de QMainWindow, y utilizando el código ”ui”, como un miembro de nuestra nueva clase. Así es como se ve:

require 'Qt' require './todo_ui.rb' class TodoApp < Qt::MainWindow def initialize(*args) super(*args) @ui = Ui_MainWindow.new @ui.setup_ui( self ) setup_actions end def setup_actions end end app = Qt::Application.new ARGV w = TodoApp.new w.show app.exec

Y, ya que @ ui tiene acceso para todos los widgets creados en el diseñador, el acceso a los widgets es simplemente una manera de acceder a miembros de datos. A continuación se muestra el código para el método setup_actions agregar funcionalidad a Agregar y botones Hecho: Below is the code for setup_actions method adding functionality to Add and Done buttons:

def setup_actions @ui.btn_add.connect( SIGNAL :clicked ) { @ui.lst_tasks.addItem ( @ui.line_task.text ) } @ui.btn_done.connect( SIGNAL :clicked ) { @ui.lst_tasks.takeItem( @ui.lst_tasks.currentRow )

} end

6. Takeaways de prototipado rápido

Qt marco, con su extensa biblioteca de los widgets y herramientas, es una herramienta eficaz en el desarrollo rápido de aplicaciones de escritorio. Combinado con el poder de rubí, ahora es fácil construir interfaces de usuario atractivas para sus programas.

Estos son los pasos para escribir su próximo rubí aplicación de escritorio:

1. Inicie el diseñador y crear una interfaz de usuario atractiva de arrastrar y soltar los widgets

2. Asignación de layouts y grupos de diseño anidadas 3. Utilice rbuic4 para convertir el archivo resultante. ui para ruby código 4. Escriba una clase rubí lo que posee, utiliza la clase generada automáticamente y

asigna acciones

Siguiendo la arquitectura descrita anteriormente, el código más tarde puede ser fácilmente extendido. Reemplazar el archivo “ui” o mover la ubicación de los widgets no tiene ningún efecto sobre el código (sólo ejecute rbuic4 otra vez y ya está). Y, puesto que tenemos una clase rubí como punto de partida, podemos construir toda una jerarquía de códigos de la aplicación a su alrededor.

Diseños Qt y lo que puede hacer al respecto

La colocación de widgets en un formulario utilizando el diseñador Qt es muy fácil. Sólo tienes que arrastrar el cuadro de widgets en el widget o de la ventana principal y usted tiene una interfaz de usuario. Por desgracia, sólo se necesita un cambio de tamaño sencillo para descubrir la amarga verdad - Su interfaz de usuario hermoso está roto.

La primera cosa que muchos desarrolladores hacer cuando se enfrentan con el problema de cambio de tamaño es la negación. "¿Por qué es importante cambiar el tamaño de la ventana? Pude arreglar y tamaño que todo está bien ". Esto, por supuesto, es un error. Los usuarios utilizar una resolución de pantalla diferente de lo que hacen, se puede utilizar un idioma diferente, o pueden utilizar un tamaño de escritorio de fuente diferente. Todo esto puede dar lugar a diferentes preferencias como para la colocación de widgets.

Disposición de los widgets en un formulario de una forma escalable es realmente un problema difícil. Hay muchos factores a tener en cuenta, y muchos casos de uso diferentes para probar sucesivamente. Si intenta resolverlo usted mismo es probable que se equivocan. Por suerte para nosotros, Qt tiene una solución lista para usar llamado Controladores de Distribución.

Los controladores de diseño Un controlador de diseño es el algoritmo por el cual un widget decide cómo su dispositivo espacio entre widgets hijos. Esto significa que sólo los widgets de contenedor tienen controladores de distribución, y que los administradores de diseño son en sí mismas no widgets. Qt tiene 5 controladores de distribución: QVBoxLayout, QHBoxLayout, QGridLayout, QFormLayout y QStackedLayout. Esto es lo que parece:

QHBoxLayout organiza widgets hijos horizontalmente. Añadir un nuevo widget con diseño-> addWidget (widget)

QVBoxLayout organiza widgets hijos verticalmente. Añadir un nuevo widget con diseño-> addWidget (widget)

QGridLayout organiza widgets hijos en una cuadrícula. Añadir un nuevo widget con diseño-> addWidget (widget, fila, columna)

QFormLayout organiza los widgets por parejas widget de etiqueta. Añadir nuevo par de diseño-> addRow (labelWidget, valueWidget)

Finalmente, QStackedLayout es un gestor de diseño especial que sólo se muestra un widget a la vez (como en una pila).

Diseños también se pueden anidar con addLayout método de un controlador de distribución. Llame addLayout con otro diseño como parámetro, y en vez de un simple widget que obtendrá todo el trazado.

Ahora vamos a volver al diseñador y tratar de crear diseños para nuestra interfaz de usuario. Elegir un gestor de diseño en el diseñador es una manera simple de hacer clic en el widget padre (el contenedor ) y luego hacer clic en un icono de diseño pesebre. En el diseñador, director de diseño de iconos se encuentran justo encima de la caja widget:

La creación de los diseños puede ser confuso al principio. Estos son algunos problemas comunes y soluciones que pueden aparecer.

1. He seleccionado todos los widgets y hecho clic en un icono de diseño, pero no pasa nada y cambio de tamaño se ha roto todavía. La primera cosa que la mayoría de los desarrolladores de encontrar con el diseñador Qt es su modo contrario al sentido común para manejar trazado más exterior. Hay que recordar que los diseños se pueden anidar, por lo que en realidad hay dos maneras diferentes de agregar cosas a un widget.

Selección de un grupo de widgets en el diseñador, y luego haciendo clic en el botón de diseño utiliza addLayout . Se crea un nuevo interno (anidada) de diseño, y se agrega a disposición el widget del exterior.

Selección de un widget único en el diseñador y luego haciendo clic en el botón de diseño que establece widget diseño. La distribución del widget de la mayor parte-se debe establecer de esta manera. Diseños internos pueden ajustarse mediante la selección de grupo.

Tenga en cuenta que cada widget que tiene widgets hijos debe tener un controlador de distribución. Se establece que el administrador de diseño, haga clic en el widget y luego en el icono de diseño. Además, un grupo de widgets puede tener un anidado diseño y diseños anidados son creados por el grupo de selección de algunos widgets y luego haciendo clic en el icono de diseño.

2. Quiero tener un grupo de botones para llevar juntos verticalmente, pero el diseño que se aparta. Otro problema común con los diseños es la política de cambio de tamaño. Artilugios tener una política tamaño que le dice al controlador de distribución como debe tratarlos en caso de que haya más espacio. QPushButton política por defecto de tamaño vertical dice fijo, por lo botones nunca se cambiará de tamaño verticalmente, pero como todo lo que tenemos es botones, el controlador de distribución no sabe qué hacer con el espacio adicional para que divide el espacio en partes iguales entre los botones. En resumen, tenemos la imagen de la izquierda, pero queremos que se vea como la imagen de la derecha (dos botones agruparse en la parte inferior).

Resulta que sólo hay una cosa que tenemos que añadir - un separador vertical. Un espaciador es un widget que ocupa todo el espacio disponible, dándole el controlador de distribución una salida. Todo el espacio se va a dejar el espaciador nuestros botones embalarse en común. Así es como se ve en el diseñador:

3. Todos los widgets aparecen en la esquina superior izquierda del formulario. Éste suele ocurrir cuando no se utiliza el diseñador. Si usted añadir hijos a un widget padre que no tiene ningún conjunto controlador de distribución, todos los widgets que su niño se mostrará una encima de la otra en la esquina superior izquierda del formulario. Este error es muy fácil de hacer cuando la codificación de código de interfaz de usuario a mano. Aquí hay un código erróneo muestra:

#include <QtCore/QtCore> #include <QtGui/QtGui> int main(int argc, char **argv) { QApplication app( argc, argv ); QWidget w; // This line is buggy: should have used &w as the parent QVBoxLayout *l = new QVBoxLayout; QPushButton *b1 = new QPushButton( "One", &w ); QPushButton *b2 = new QPushButton( "Two", &w ); QPushButton *b3 = new QPushButton( "Three", &w ); w.show(); app.exec();

Como se puede ver, es fácil olvidar el establecimiento de un padre para el diseño. El código se compila y se ejecuta, pero desde w no tiene disposición, todos los botones no están dispuestas como se esperaba. La solución es simple, o bien proporcionan un widget padre a su disposición, o mejor aún, utilizar el diseñador para escribir código de interfaz de usuario.

4. Layouts Takeaways Ahora que ya sabe cómo usar controladores de distribución para crear sus diseños, y cómo combinarlos para crear complejos diseños anidados, aquí hay algunas cosas a tener en cuenta:

Hay algo de muy buena documentación sobre controladores de distribución en documentación de Qt . Probablemente voy a salvar algunas trampas.

Utilice los controladores de distribución, y tener en cuenta que cada widget que tiene widgets sub debe tener un diseño

Utilice diseñador para escribir interfaces de usuario. Usted puede ver cómo se comportan en vivo por la elección de "Form -> Vista previa".

Los controladores de distribución tienen limitaciones. Para algunas aplicaciones se adaptan muy bien, pero algunas aplicaciones necesitarán ajustar importante para hacer que funcionen. Los controladores de distribución no son la mejor opción para la interfaz de usuario compleja o único. Considere la posibilidad de aplicaciones híbridas para ello.