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 programacin, 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 grfica de usuario con capacidades de anlisis de red y XML, ests en el lugar correcto. En el siguiente artculo, voy a cubrir enlaces Qt para el lenguaje Ruby. Vamos a construir una aplicacin de escritorio simple interfaz grfica 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 lnea de comandos shell favorita para ejecutar:
gem install qtbindings

Cuando la gema est en su lugar, empiece a leer el cdigo.

2. Hola Qt Rub
QtRuby utiliza todas las clases del framework (sistema) Qt, slo envuelto como clases de rub. Aqu est el Hola Mundo tradicional como una aplicacin de rub:
require 'Qt' app = Qt::Application.new ARGV label = Qt::Label.new("Hello World") label.show app.exec

Vamos a examinar el cdigo de seguridad. Todas las clases de Qt se encuentran en el Qt:: module mdulo Qt. Un programa que requiere Qt comienza con la gema, y luego pasa a la creacin de Qt::Application object. Qt :: Application es un producto nico que logra un comportamiento "global" de la aplicacin. Se crea con los argumentos de la lnea de comandos del programa. Casi todos los programas de Qt empezar por crear un

Qt::Application, y terminar con una llamada al mtodo 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 lnea (Qt :: LineEdit), y muchos ms. Cada widget puede funcionar como una ventana independiente o integrado en otro widget. En el cdigo de ejemplo anterior, hemos creado un objeto QLabel y llama al mtodo Show, dando lugar a su aparicin como una ventana completa. Si usted busca en la documentacin de Qt para la aplicacin 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. Diseos
Casi cualquier programa requerir ms de un widget. Estos aparatos se colocan utilizando las clases de diseo del administrador. Hay dos reglas para la disposicin 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 lgica de colocacin del algoritmo se llama un administrador de diseo. Observemos el siguiente ejemplo que crea un diseo con mltiples 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 cdigo 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 ms sobre esto en la documentacin de Qt bajo QVBoxLayout. Qt tiene un total de 5 controladores de distribucin: QVBoxLayout, QHBoxLayout, QGridLayout, QFormLayout, QStackedLayout. Los diseos de caja permiten disposicin horizontal o vertical de los widgets, QGridLayout se utiliza para las redes, los lugares QFormLayout sus widgets en pares (etiqueta widget) y pantallas QStackedLayout slo un widget simple a la vez, como una pila. Tambin es posible combinar varios diseos para crear un diseo complejo anidado. Para ello, la creacin de diseos 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 mtodo utilizado, addLayout aade una disposicin existente con todos sus widgets a la ventana de la disposicin de llamada. Mediante los widgets de anidacin y diseos, es posible crear dos ventanas simples y complejos para satisfacer sus necesidades de aplicacin.

4. Seales and Slots

La ltima pieza de nuestro viaje Qt es el mecanismo de control de eventos. En Qt se le llama Signals and Slots, seales y ranuras. Una seal es ms que un evento con significado semntico. Cuando algo le sucede a un widget, que es importante de alguna manera con el widget, emite una seal. As, por ejemplo, un clic del ratn en el interior de un botn, para emitir la seal clicked en el botn, mientras que el mismo clic del ratn en una etiqueta no genera ninguna seal. Usted puede obtener una lista de todas las seales de un widget especfico pueden emitir al ver la documentacin. La otra cara de la seal es la ranura. Un Slot es un bloque de cdigo enlazado a una seal, y se llama automticamente cuando una seal conectada a ella fue emitida. En el terreno de Qt, por lo tanto, comenzamos por conectar seales con las slots (definicin de cdigo que se ejecutar cuando algo ocurre), entonces llamamos a app.exec y esperar. Cuando la seal se emite, el cdigo del slots ser ejecutado. As es como se ve en el cdigo:
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, seales se representan mediante cadenas especialmente diseados, que se producen con la SIGNAL function. Esta funcin toma un nombre de seal como un smbolo y devuelve el identificador de la seal. Finalmente, connect method de un widget se une a un bloque de cdigo a la seal. En lo anterior, el bloque de cdigo que se ejecutan cada vez que se pulsa el botn, lo que lleva a cambiar el texto del botn.

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 gestin de diseo y gestin de eventos con seales y ranuras de formar una base slida para nuestra aplicacin GUI. Qt tambin tiene widgets de embalaje muy amplios para casi cualquier tarea de la aplicacin que necesite. Tiene soporte para los mens, barras de herramientas, barras de estado, barras de desplazamiento y editores, tablas de datos, rboles y muchos ms. Si usted est listo para dar el siguiente paso en la creacin de aplicaciones Qt en rub, Nokia tiene algunos buenos tutoriales en su sitio web ( http://qt-project.org/doc/qt4.8/tutorials.html ). Usted puede tomar cualquiera de ellos y tratar de ruby o ampliarlo segn sus necesidades. Otro gran recurso es la base de conocimiento de KDE. Tienen una larga pgina dedicada a los enlaces Ruby y Qt. As que ... Qu ests esperando? Vamos a codificar

Prototipado Rpido 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 rpido desarrollo de una nueva aplicacin de escritorio GUI, lo mejor es tener una herramienta de diseo de arrastrar y soltar, una buena documentacin y un marco maduro y extenso. Por suerte, Qt proporciona todo eso. En este artculo voy a cubrir lo bsico de trabajar con Qt Designer, arrastrar y soltar Qt GUI herramienta de creacin, para crear un fichero especial XML que representa la interfaz de la aplicacin. Luego (automticamente) convertir el archivo a cdigo rub, y, finalmente, construir una maqueta gerente Todo.

1. Requisitos previos
El diseador 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 diseo de cdigo 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 . Slo tiene que elegir la versin 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.

Despus de la descarga y la instalacin se haya completado, podr iniciar el diseador del directorio en que se instal el SDK. La herramienta se llama simplemente Diseador (Designer) y usted debe encontrar en: SDK Folder/Desktop/Qt/480/gcc/bin /

2. Qt Designer

El diseador se divide para mltiples ventanas, cada una con su propio papel. El primer cuadro de dilogo que muestra, y el que toma todo el foco, es la nueva forma de dilogo. Antes de que podamos comenzar a disear tenemos que decirle al diseador lo que queremos crear. Vamos a elegir choose MainWindow haciendo doble clic en l. Despus de la seleccin, todas las ventanas de diseo son ahora sensibles. Tmese unos minutos para navegar por la Caja de widgets y el editor de propiedades. El primer paso para utilizar el diseador 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 lnea de edicin, una etiqueta y un widget de lista.
For our todo manager, Ill go for two push buttons, a line edit, a label and a list widget.

Esto es lo que mi ventana se ve como diseador despus de arrastrar (ntese que no es necesario ser precisos al arrastrar los controles):

3. Una palabra acerca de los diseos

Arrastrar los controles en una ventana puede parecer atractivo, pero tiene algunas cosas malas importantes. Para el arranque, no es fcil ser preciso con los controles que se arrastran. Ms importante, sin embargo, para los usuarios puede ser un poco inesperado. El usuario puede tener una resolucin de pantalla diferente, puede optar por cambiar el tamao de la ventana de la aplicacin, o puede hablar un idioma extranjero (de manera que se escribe de derecha a izquierda), y luego todo el diseo tiene que ser ajustada. Para superar las dificultades de diseo Qt nos proporciona clases genricas que son realmente buenos para trazar los elementos de una manera simple y predecible. Se llaman Administradores de Diseo. Un controlador de diseo no es un widget, pero es un algoritmo. Un widget puede tener un controlador de diseo, y si lo hace, el controlador decidir la colocacin de widgets hijos. Qt tiene 5 tipos de controladores de diseo, casi todos se encuentran en la parte superior de la caja de widget (por encima de la lnea de bsqueda). 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 presentacin, le asignamos un diseo para su widget contenedor. Haga clic en alguna parte en la ventana, pero no en un widget especfico y, a continuacin, seleccione la VBoxLayout. Su diseador va a cambiar el diseo de los widgets y ahora se ver algo como esto:

Desde la ventana exterior tiene la distribucin, todos sus widgets hijos se organizan automticamente en una caja vertical: una debajo de la otra. Un paso ms antes de que podamos seguir adelante es el diseo de anidacin. Diseo 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 diseo diferente para este grupo de widgets. En el diseador, diseo de anidacin se lleva a cabo mediante la seleccin de un grupo de widgets con el ratn y luego elegir un diseo. Vamos a construir un diseo anidado: 1. Rompe el esquema actual haciendo clic en el icono de diseo "no entrada" (su descripcin dice Break Layout) o elija Break Layout Pausa en el Diseo, en el men formulario Form menu. 2. Seleccione los 3 widgets (etiquetas, edicin de lnea 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 diseos para una mejor orden. Esto es lo que mi ventana del diseador finalmente parece:

Los widgets de diseo y el diseador son herramientas tiles en la creacin de nuestra aplicacin de interfaz de usuario, utilizando una interfaz de arrastrar y soltar. El XML resultante puede convertirse automticamente al cdigo en cualquier lenguaje compatible con Qt. Se necesita algn tiempo para acostumbrarse a los conceptos de diseador y diseo, pero despus de un tiempo escribiendo nuevas interfaces de usuario es muy fcil.

4. Preparacin Nuestra interfaz de usuario de Ruby Archivos

El paso final en la obtencin de una app, aplicacin 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 edicin de lnea

Al escribir el nombre ha terminado, guardar su trabajo como un archivo de extensin .ui. Eleg el nombre todo.ui pero por supuesto cualquiera servir. Ahora, tenemos que convertir el archivo ui, para el cdigo Ruby. Rubys Qt bindings Enlaces Ruby Qt cuenta con una herramienta automtica para ese trabajo llamado rbuic4

(que significa compilador rub interfaz de usuario). Dirgete 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 diseo, ya que elegimos el nombre del diseador. El parmetro -x hace que rbuic4 aada un bloque de prueba, de modo que el cdigo resultante rub es realmente ejecutable. Pruebe con el comando:
rub todo_ui.rb

Y ver su interfaz en accin.

5. Con nuestra interfaz de usuario en cdigo

El cdigo actual de Ruby para que la app este mejor escrito en otro archivo. Creamos una nueva clase derivada de QMainWindow, y utilizando el cdigo 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 diseador, el acceso a los widgets es simplemente una manera de acceder a miembros de datos. A continuacin se muestra el cdigo para el mtodo 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 rpido

Qt marco, con su extensa biblioteca de los widgets y herramientas, es una herramienta eficaz en el desarrollo rpido de aplicaciones de escritorio. Combinado con el poder de rub, ahora es fcil construir interfaces de usuario atractivas para sus programas. Estos son los pasos para escribir su prximo rub aplicacin de escritorio: 1. Inicie el diseador y crear una interfaz de usuario atractiva de arrastrar y soltar los widgets 2. Asignacin de layouts y grupos de diseo anidadas 3. Utilice rbuic4 para convertir el archivo resultante. ui para ruby cdigo 4. Escriba una clase rub lo que posee, utiliza la clase generada automticamente y asigna acciones Siguiendo la arquitectura descrita anteriormente, el cdigo ms tarde puede ser fcilmente extendido. Reemplazar el archivo ui o mover la ubicacin de los widgets no tiene ningn efecto sobre el cdigo (slo ejecute rbuic4 otra vez y ya est). Y, puesto que tenemos una clase rub como punto de partida, podemos construir toda una jerarqua de cdigos de la aplicacin a su alrededor.

Diseos Qt y lo que puede hacer al respecto

La colocacin de widgets en un formulario utilizando el diseador Qt es muy fcil. Slo tienes que arrastrar el cuadro de widgets en el widget o de la ventana principal y usted tiene una interfaz de usuario. Por desgracia, slo se necesita un cambio de tamao 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 tamao es la negacin. "Por qu es importante cambiar el tamao de la ventana? Pude arreglar y tamao que todo est bien ". Esto, por supuesto, es un error. Los usuarios utilizar una resolucin de pantalla diferente de lo que hacen, se puede utilizar un idioma diferente, o pueden utilizar un tamao de escritorio de fuente diferente. Todo esto puede dar lugar a diferentes preferencias como para la colocacin de widgets. Disposicin de los widgets en un formulario de una forma escalable es realmente un problema difcil. 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 solucin lista para usar llamado Controladores de Distribucin.

Los controladores de diseo

Un controlador de diseo es el algoritmo por el cual un widget decide cmo su dispositivo espacio entre widgets hijos. Esto significa que slo los widgets de contenedor tienen controladores de distribucin, y que los administradores de diseo son en s mismas no widgets. Qt tiene 5 controladores de distribucin: QVBoxLayout, QHBoxLayout, QGridLayout, QFormLayout y QStackedLayout. Esto es lo que parece:

QHBoxLayout organiza widgets hijos horizontalmente. Aadir un nuevo widget con diseo-> addWidget (widget)

QVBoxLayout organiza widgets hijos verticalmente. Aadir un nuevo widget con diseo> addWidget (widget)

QGridLayout organiza widgets hijos en una cuadrcula. Aadir un nuevo widget con diseo-> addWidget (widget, fila, columna)

QFormLayout organiza los widgets por parejas widget de etiqueta. Aadir nuevo par de diseo-> addRow (labelWidget, valueWidget) Finalmente, QStackedLayout es un gestor de diseo especial que slo se muestra un widget a la vez (como en una pila). Diseos tambin se pueden anidar con addLayout mtodo de un controlador de distribucin. Llame addLayout con otro diseo como parmetro, y en vez de un simple widget que obtendr todo el trazado.

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

La creacin de los diseos 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 diseo, pero no pasa nada y cambio de tamao se ha roto todava.
La primera cosa que la mayora de los desarrolladores de encontrar con el diseador Qt es su modo contrario al sentido comn para manejar trazado ms exterior. Hay que recordar que los diseos se pueden anidar, por lo que en realidad hay dos maneras diferentes de agregar cosas a un widget. Seleccin de un grupo de widgets en el diseador, y luego haciendo clic en el botn de diseo utiliza addLayout . Se crea un nuevo interno (anidada) de diseo, y se agrega a disposicin el widget del exterior. Seleccin de un widget nico en el diseador y luego haciendo clic en el botn de diseo que establece widget diseo. La distribucin del widget de la mayor parte-se debe establecer de esta manera. Diseos internos pueden ajustarse mediante la seleccin de grupo. Tenga en cuenta que cada widget que tiene widgets hijos debe tener un controlador de distribucin. Se establece que el administrador de diseo, haga clic en el widget y luego en el icono de diseo. Adems, un grupo de widgets puede tener un anidado diseo y diseos anidados son creados por el grupo de seleccin de algunos widgets y luego haciendo clic en el icono de diseo.

2. Quiero tener un grupo de botones para llevar juntos verticalmente, pero el diseo que se aparta.
Otro problema comn con los diseos es la poltica de cambio de tamao. Artilugios tener una poltica tamao que le dice al controlador de distribucin como debe tratarlos en caso de que haya ms espacio. QPushButton poltica por defecto de tamao vertical dice fijo, por lo botones nunca se cambiar de tamao verticalmente, pero como todo lo que tenemos es botones, el controlador de distribucin 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 slo hay una cosa que tenemos que aadir - un separador vertical. Un espaciador es un widget que ocupa todo el espacio disponible, dndole el controlador de distribucin una salida. Todo el espacio se va a dejar el espaciador nuestros botones embalarse en comn. As es como se ve en el diseador:

3. Todos los widgets aparecen en la esquina superior izquierda del formulario.

ste suele ocurrir cuando no se utiliza el diseador. Si usted aadir hijos a un widget padre que no tiene ningn conjunto controlador de distribucin, todos los widgets que su nio se mostrar una encima de la otra en la esquina superior izquierda del formulario. Este error es muy fcil de hacer cuando la codificacin de cdigo de interfaz de usuario a mano. Aqu hay un cdigo errneo 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 fcil olvidar el establecimiento de un padre para el diseo. El cdigo se compila y se ejecuta, pero desde w no tiene disposicin, todos los botones no estn dispuestas como se esperaba. La solucin es simple, o bien proporcionan un widget padre a su disposicin, o mejor an, utilizar el diseador para escribir cdigo de interfaz de usuario.

4. Layouts Takeaways
Ahora que ya sabe cmo usar controladores de distribucin para crear sus diseos, y cmo combinarlos para crear complejos diseos anidados, aqu hay algunas cosas a tener en cuenta:

Hay algo de muy buena documentacin sobre controladores de distribucin en documentacin de Qt . Probablemente voy a salvar algunas trampas. Utilice los controladores de distribucin, y tener en cuenta que cada widget que tiene widgets sub debe tener un diseo Utilice diseador para escribir interfaces de usuario. Usted puede ver cmo se comportan en vivo por la eleccin de "Form -> Vista previa". Los controladores de distribucin tienen limitaciones. Para algunas aplicaciones se adaptan muy bien, pero algunas aplicaciones necesitarn ajustar importante para hacer que funcionen. Los controladores de distribucin no son la mejor opcin para la interfaz de usuario compleja o nico. Considere la posibilidad de aplicaciones hbridas para ello.