Rubí Qt tutorial Nota: Pagina para descargar Qt cualquier versión ftp://ftp.qt-project.org/qt/source/ Este tutorial es Ruby Qt. En este tutorial usted aprenderá los fundamentos de la programación programación en Qt GUI con el lenguaje Ruby. El tutorial es conveniente para los principiantes y los programadores intermedios.
Tabla de contenidos
Introducción
Diseño de gestión
Artilugios
Menús y barras de herramientas
Diálogos
Pintura
Custom Widget
Nibbles
Qt Qt es un framework de aplicaciones multi-plataforma de desarrollo. Algunas de las aplicaciones conocidas desarrolladas con Qt son KDE, Opera, Google Earth y Skype. Qt fue lanzado públicamente por primera vez en mayo de 1995. Es de doble licencia. Eso significa, que puede ser utilizado para la creación de aplicaciones de código abierto, así como las comerciales. Qt toolkit es una herramienta muy poderosa. Está bien establecido en la comunidad de código abierto.
Tutoriales similares Hay un completo tutorial de Ruby en Ruby en ZetCode. Rubí GTK tutorial es un tutorial para otra biblioteca de interfaz gráfica de usuario con el apoyo de Ruby. Qt4 tutorial presenta la biblioteca Qt en el lenguaje C + +.
ZetCode :: última modificación el 02 de noviembre 2012 © 2007 - 2012 ene Bodnar
Introducción a Ruby Qt En esta parte del tutorial de Ruby Qt, vamos a introducir el conjunto de herramientas Qt y crear nuestros primeros programas que utilizan el lenguaje de programación Ruby. El propósito de este tutorial es para empezar con el conjunto de herramientas Qt con el lenguaje Ruby. Las imágenes utilizadas en este tutorial puede ser descargado aquí . He utilizado algunos iconos del paquete de iconos tango del proyecto Gnome.
Sobre Qt es una de las herramientas principales para la creación de interfaces gráficas de usuario. Ruby es un lenguaje de programación popular.
Creación de un mensaje de ayuda Creating a Tooltip El primer ejemplo se mostrará una descripción. Una descripción es una pequeña ventana rectangular, rectangular, lo que da una breve información información sobre un objeto. objeto. Por lo general es un componente GUI. Es parte del sistema de ayuda de la aplicación. #!/usr/bin/ruby # ZetCode Rubí Qt tutorial # Este código muestra una descripción de # Una ventana # Autor: Jan Bodnar # website: www.zetcode.com # Última modificación: 09 2012 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Tooltip" setToolTip "This is Qt::Widget" resize 250, 150 move 300, 300 show end end
ZetCode :: última modificación el 02 de noviembre 2012 © 2007 - 2012 ene Bodnar
Introducción a Ruby Qt En esta parte del tutorial de Ruby Qt, vamos a introducir el conjunto de herramientas Qt y crear nuestros primeros programas que utilizan el lenguaje de programación Ruby. El propósito de este tutorial es para empezar con el conjunto de herramientas Qt con el lenguaje Ruby. Las imágenes utilizadas en este tutorial puede ser descargado aquí . He utilizado algunos iconos del paquete de iconos tango del proyecto Gnome.
Sobre Qt es una de las herramientas principales para la creación de interfaces gráficas de usuario. Ruby es un lenguaje de programación popular.
Creación de un mensaje de ayuda Creating a Tooltip El primer ejemplo se mostrará una descripción. Una descripción es una pequeña ventana rectangular, rectangular, lo que da una breve información información sobre un objeto. objeto. Por lo general es un componente GUI. Es parte del sistema de ayuda de la aplicación. #!/usr/bin/ruby # ZetCode Rubí Qt tutorial # Este código muestra una descripción de # Una ventana # Autor: Jan Bodnar # website: www.zetcode.com # Última modificación: 09 2012 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Tooltip" setToolTip "This is Qt::Widget" resize 250, 150 move 300, 300 show end end
app = Qt::Application.new ARGV QtApp.new app.exec
El ejemplo crea una ventana. Si nos sitúe el puntero del ratón sobre el área de la ventana, una información información sobre sobre herramientas herramientas aparece. require 'Qt'
El require importa palabras claves claves de tipos necesarios que vamos a utilizar en la aplicación. class QtApp
El ejemplo hereda de un Qt :: Widget . La clase Widget es la clase base de todos los objetos de interfaz de usuario. El widget es el átomo de la interfaz de usuario. Recibe los eventos del ratón, del teclado y del otro del sistema de ventanas. setWindowTitle "Tooltip"
Esta llamada al método crea un título para la ventana. setToolTip "Este es Qt :: widget"
El setToolTip método crea un texto de ayuda para el objeto Widget. resize 250, 150
Aquí se establece establece la anchura y la la altura de la ventana. ventana. move 300, 300
El método move mueve la ventana en la pantalla. show
Cuando todo esté listo, se muestra la ventana de la pantalla. app = Qt::Application.new ARGV QtApp.new app.exec
Estas tres líneas instalan la aplicación.
Figura: Tooltip
Centrar una ventana En el segundo ejemplo, vamos a centrar la ventana en la pantalla. #!/usr/bin/ruby # # # # # # # #
ZetCode Ruby Qt tutorial This program centers a window on the screen. author: Jan Bodnar website: www.zetcode.com last modified: September 2012
require 'Qt' WIDTH = 250 HEIGHT = 150 class QtApp < Qt::Widget def initialize super setWindowTitle "Center" resize WIDTH, HEIGHT center show end def center qdw = Qt::DesktopWidget.new screenWidth = qdw.width screenHeight = qdw.height
x = (screenWidth - WIDTH) / 2 y = (screenHeight - HEIGHT) / 2 move x, y end end app = Qt::Application.new ARGV QtApp.new app.exec
El conjunto de herramientas Qt toolkit, no tiene un método simple para centrar una ventana. WIDTH = 250 HEIGHT = 150
Estas dos constantes definen la anchura y la altura de la ventana de aplicación. qdw = Qt :: DesktopWidget.new
La clase Qt :: DesktopWidget proporciona información sobre la pantalla. screenWidth = qdw.width screenHeight = qdw.height
Aquí se determina determina el ancho de la pantalla pantalla y la altura. altura. x = (screenWidth - WIDTH) / 2 y = (screenHeight - HEIGHT) / 2
A continuación continuación se calcula la coordenadas coordenadas x, y de de la ventana centrada. centrada. Para centrar centrar una ventana en la pantalla, es necesario conocer el tamaño de la pantalla y el tamaño de la ventana. move x, y
Nos mueve la ventana para las coordenadas x, y consideradas
Salga botón Quit button En el último ejemplo de esta sección, vamos a crear un botón de salida. Cuando se pulsa este botón, la aplicación termina. #!/usr/bin/ruby # # # # # # # # #
ZetCode Ruby Qt tutorial This program creates a quit button. When we press the button, the application terminates. author: Jan Bodnar website: www.zetcode.com last modified: September 2012
require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Quit button" init_ui resize 250, 150 move 300, 300 show end def init_ui quit = Qt::PushButton.new 'Quit', self quit.resize 80, 30 quit.move 50, 50 connect quit, SIGNAL('clicked()'), $qApp, SLOT('quit()') end end app = Qt::Application.new ARGV QtApp.new app.exec
La clase Qt :: PushButton muestra un botón en Ruby Qt. Es un widget rectangular y por lo general muestra una etiqueta de texto.
init_ui
Nos delega la creación de la interfaz de usuario para el método init_ui quit = Qt::PushButton.new 'Quit', self
Creamos el widget de botón. El primer parámetro del constructor es la etiqueta que muestra el botón. El segundo parámetro es el widget padre del botón. quit.resize 80, 30 quit.move 50, 50
Nos da el tamaño y la posición del widget de botón. connect quit, SIGNAL('clicked()'), $qApp, SLOT('quit()')
El clicked señal se emite cuando hacemos clic sobre el botón de salida. La conexión método, se conecta una señal a una ranura particular de un objeto. En nuestro caso, es el quit método del objeto de aplicación. El $qApp es un puntero global a la instancia de solicitud.
Figura: Quit botón Esta sección fue una introducción al kit de herramientas Qt con el lenguaje Ruby.
Diseño de gestión En esta parte del tutorial de programación Ruby Qt, vamos a introducir los administradores de diseño. Cuando diseñamos el GUI, la interfaz gráfica de usuario de nuestra aplicación, podemos decidir qué componentes vamos a utilizar y cómo vamos a organizar los componentes de la aplicación. Para organizar nuestros componentes, utilizamos especializados objetos no visibles llamados controladores de distribución. Hay varias opciones en Qt. Podemos utilizar el posicionamiento absoluto, una función de gestores de diseño o crear un administrador de diseño personalizado. También podemos crear los diseños visualmente utilizando el Qt Designer.
Qt tiene algunos controladores de distribución importantes incorporadas. El Qt:: VBoxLayout es una clase para alinear verticalmente los widgets. Qt::HBoxLayout alinea los widgets horizontalmente. El Qt::GridLayout es una clase que expone los widgets en una cuadrícula. El diseño de cuadrícula es el gestor de diseño más flexible. Los diseños de caja pueden anidarse uno dentro de otro para crear diseños complejos.
Posicionamiento absoluto En la mayoría de los casos, los programadores deben usar controladores de distribución. Hay algunas situaciones, en las que podemos utilizar el posicionamiento absoluto. En la posición absoluta, el programador especifica la posición y el tamaño de cada widget en píxeles. El tamaño y la posición de un control no cambian, si cambia el tamaño de una ventana. Aplicaciones de aspecto diferente en las distintas plataformas, lo que se ve bien en Linux, no puede tener un buen aspecto en Mac OS. El Cambio de fuentes en su aplicación puede estropear el diseño. Si traduce la aplicación en otro idioma, debe rehacer su diseño. Por todos estos problemas, utilice el posicionamiento absoluto sólo cuando tenga una razón para hacerlo. #!/usr/bin/ruby # # # # # # # #
ZetCode Ruby Qt tutorial In this program, we lay out widgets using absolute positioning. author: Jan Bodnar website: www.zetcode.com last modified: September 2012
require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Absolute" init_ui resize 300, 280 move 300, 300 show end def init_ui
setStyleSheet "QWidget { background-color: #414141 }" bardejov = Qt::Pixmap.new "bardejov.jpg" rotunda = Qt::Pixmap.new "rotunda.jpg" mincol = Qt::Pixmap.new "mincol.jpg" barLabel = Qt::Label.new self barLabel.setPixmap bardejov barLabel.move 20, 20 rotLabel = Qt::Label.new self rotLabel.setPixmap rotunda rotLabel.move 40, 160 minLabel = Qt::Label.new self minLabel.setPixmap mincol minLabel.move 170, 50 end end app = Qt::Application.new ARGV QtApp.new app.exec
En este ejemplo, se muestran tres imágenes utilizando la posición absoluta. barLabel = Qt::Label.new self barLabel.setPixmap bardejov
El Qt::Label widget se utiliza para guardar la imagen. barLabel.move 20, 20
Usamos el método move para colocar la etiqueta de la ventana en x = 20, y = 20. Al cambiar el tamaño de la ventana, las etiquetas conservan su tamaño inicial.
Figura: Posicionamiento absoluto
Botones ejemplo En el siguiente ejemplo, vamos a colocar dos botones en la esquina inferior derecha de la ventana. #!/usr/bin/ruby # # # # # # # # #
ZetCode Ruby Qt tutorial In this program, we use box layouts to position two buttons in the bottom right corner of the window. author: Jan Bodnar website: www.zetcode.com last modified: September 2012
require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Buttons" init_ui resize 330, 170 move 300, 300
show end def init_ui vbox = Qt::VBoxLayout.new self hbox = Qt::HBoxLayout.new ok = Qt::PushButton.new "OK", self apply = Qt::PushButton.new "Apply", self hbox.addWidget ok, 1, Qt::AlignRight hbox.addWidget apply vbox.addStretch 1 vbox.addLayout hbox end end app = Qt::Application.new ARGV QtApp.new app.exec
Utilizamos diseños anidados caja para que nuestro diseño previsto. vbox = Qt::VBoxLayout.new self hbox = Qt::HBoxLayout.new
Utilizamos una caja vertical y una caja horizontal. ok = Qt::PushButton.new "OK", self apply = Qt::PushButton.new "Apply", self
Estos son los dos botones que se incluirán en la esquina inferior derecha de la ventana. hbox.addWidget ok, 1, Qt::AlignRight
Ponemos el botón Aceptar en el cuadro horizontal. El segundo parámetro es el factor stretch. Se amplía el área asignada al botón ok. Se necesita todo el espacio disponible que queda. La alineación de la windget dentro de esta zona es controlada por el tercer parámetro. El el botón Qt::AlignRight se alineará a la derecha. vbox.addStretch 1
Esta línea crea un espacio vertical amplio blanco, lo que hará que la caja horizontal con los botones se ubiquen en la parte inferior.
vbox.addLayout hbox
La caja horizontal está anidada dentro de la caja vertical.
Figura: Botones ejemplo
Ejemplo en Windows El siguiente es un ejemplo más complicado con diseños de caja anidados. #!/usr/bin/ruby # # # # # # # #
ZetCode Ruby Qt tutorial In this program, use box layouts to create a Windows example author: Jan Bodnar website: www.zetcode.com last modified: September 2012
require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Windows" init_ui resize 350, 300 move 300, 300 show end
def init_ui vbox = Qt::VBoxLayout.new self vbox1 = Qt::VBoxLayout.new hbox1 = Qt::HBoxLayout.new hbox2 = Qt::HBoxLayout.new windLabel = Qt::Label.new "Windows", self edit = Qt::TextEdit.new self edit.setEnabled false activate = Qt::PushButton.new "Activate", self close = Qt::PushButton.new "Close", self help = Qt::PushButton.new "Help", self ok = Qt::PushButton.new "OK", self vbox.addWidget windLabel vbox1.addWidget vbox1.addWidget hbox1.addWidget hbox1.addLayout
activate close, 0, Qt::AlignTop edit vbox1
vbox.addLayout hbox1 hbox2.addWidget help hbox2.addStretch 1 hbox2.addWidget ok vbox.addLayout hbox2, 1 setLayout vbox end end app = Qt::Application.new ARGV QtApp.new app.exec
En esta presentación, hemos utilizado dos cajas verticales y horizontales. box = Qt::VBoxLayout.new self
Este es el diseño base del ejemplo. windLabel = Qt::Label.new "Windows", self
Primero va el widget etiqueta. Se va simplemente a la parte superior de la caja vertical. vbox1.addWidget activate vbox1.addWidget close, 0, Qt::AlignTop
hbox1.addWidget edit hbox1.addLayout vbox1 vbox.addLayout hbox1
En la parte central de la ventana que tenemos un control de edición de texto y dos botones verticalmente alineados. Los botones de entrar en una caja vertical. Los botones están alineadas a la parte superior dentro de esta caja vertical. La caja vertical y la edición de texto vaya en una caja horizontal. Este cuadro horizontal va a la caja vertical de la base, justo debajo del control de etiqueta. Ayuda hbox2.addWidget hbox2.addStretch 1 hbox2.addWidget ok vbox.addLayout hbox2, 1
La ayuda y el botón Aceptar entrar en otra caja horizontal. Hay un espacio expandido blanco entre estos dos botones. Una vez más, la caja horizontal va a la caja base vertical. setLayout vbox
El cuadro de base vertical está dispuesto a ser el diseño principal de la ventana.
Figura: Ejemplo en Windows
Ejemplo Nueva carpeta En el último ejemplo, se utiliza el Qt :: GridLayout Manager para crear un ejemplo de carpeta nuevo diseño.
#! / Usr / bin / ruby # ZetCode Rubí tutorial Qt # # En este programa, utilice el GridLayout # para crear un ejemplo en Nueva carpeta. # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: 09 2012 require 'Qt' clase QtApp
En nuestro ejemplo, tenemos una etiqueta, una línea de edición, una edición de texto y dos botones. cuadrícula = Qt :: GridLayout.new auto
Creamos una instancia de la GridLayout Qt :: gerente. grid.addWidget nameLabel, 0, 0
Ponemos el control de etiqueta en la primera celda de la cuadrícula. Las células contar desde 0. Los dos últimos parámetros son el número de fila y columna. grid.addWidget NAMEEDIT, 0, 1, 1, 3
El widget de edición se sitúa en la primera fila, segunda columna. Los dos últimos parámetros son el tamaño de fila y el tamaño de columna. Horizontalmente, el widget se extenderá por tres columnas. grid.setColumnStretch 1, 1
Los parámetros del método son el número de columna y el factor de estiramiento. Aquí establecemos factor de estiramiento 1 a la segunda columna. Esto significa, que esta columna tendrá todo el espacio restante. Así lo establece, porque queríamos que nuestros botones para conservar su tamaño inicial.
Figura: ejemplo Nueva carpeta
Artilugios En esta parte del tutorial de programación Ruby Qt, cubriremos los widgets básicos. Los widgets son los bloques básicos de construcción de una aplicación GUI. Con los años, varios widgets se convirtió en un estándar en todos los conjuntos de herramientas en todas las plataformas de sistemas operativos. Por ejemplo, un botón, una casilla de verificación o una barra de desplazamiento. Qt tiene un rico conjunto de controles que cubre la mayor parte de las necesidades de programación. Aparatos más especializados se pueden crear como widgets personalizados.
Qt :: CheckBox El Qt :: CheckBox es un widget, que tiene dos estados. On y Off. El estado On se visualiza mediante una marca de verificación. Se utiliza para denotar una propiedad booleana. El Qt :: widget de casilla de verificación ofrece una casilla con una etiqueta de texto. #! / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa utiliza Qt :: CheckBox # widget para mostrar / ocultar el título de # de la ventana. # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: 09 2012 require 'Qt' clase QtApp
cb = Qt :: CheckBox.new "Mostrar título", self verdadero cb.setChecked cb connect, SIGNAL ("activarse y desactivarse (bool)"), yo, SLOT ("on_toggled (bool ) ") cb.move 50, 50 def final on_toggled estatal si el estado setWindowTitle" Qt :: CheckBox "else setWindowTitle" "end end end app = Qt :: Application.new ARGV QtApp.new app.exec
En nuestro ejemplo, podemos colocar una casilla de verificación en la ventana. La casilla de verificación muestra / oculta el título de la ventana. setWindowTitle "Qt :: CheckBox"
Durante la construcción de la ventana, ponemos el título de la ventana. cb = Qt :: CheckBox.new "Mostrar título", self
El Qt :: CheckBox widget está creado. El primer parámetro del constructor es su etiqueta de texto. El segundo parámetro es el widget padre. cb.setChecked verdadero
El título es visible al comienzo de la aplicación. Así que la casilla de verificación debe ser revisado también. conectar cb, SIGNAL ("activarse y desactivarse (bool)"), yo, SLOT ("on_toggled (bool)")
La activarse la señal se emite cuando el estado de una casilla de verificación. Cuando se emite la señal, que desencadenan la on_toggled método. si el estado setWindowTitle "Qt :: CheckBox" else setWindowTitle "" end
Según el estado de la casilla de verificación, nosotros mostrar u ocultar el título de la ventana.
Figura: Qt :: CheckBox
Qt :: Etiqueta El Qt :: Etiqueta widget se utiliza para mostrar texto o imagen. Sin interacción del usuario está disponible. #! / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa utiliza Qt :: widget de etiqueta para mostrar # letra de una canción. # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: 09 2012 requieren de clase 'Qt' QtApp
Nuestro ejemplo muestra la letra de una canción en la ventana. text = "Te veo abajo en el bar y escuchó las mangas enrolladas y su cráneo t-shirt ...
Se define un texto de líneas múltiples. label = Qt :: Label.new texto, auto label.setFont Qt :: Font.new "Purisa", 9
Creamos el widget de etiqueta y cambiar su tipo de letra. vbox = Qt :: VBoxLayout.new vbox.addWidget etiqueta setLayout vbox
En lugar de manualmente la codificación de la posición y el tamaño de la etiqueta, es poner la etiqueta en un diseño de caja.
Figura: Qt :: Etiqueta
Qt :: LineEdit El Qt :: LineEdit es un widget que permite introducir y editar una sola línea de texto sin formato. Hay deshacer / rehacer, cortar / pegar y arrastrar y soltar las funciones disponibles para un Qt :: LineEdit widget. #! / Usr / bin / ruby # ZetCode Rubí Qt tutorial # # Este programa muestra el texto # que se introduce en un widget de Qt :: LineEdit # en un widget de Qt :: Label. # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: 09 2012 requieren de clase 'Qt' QtApp
En nuestro ejemplo se muestran dos widgets. Una línea de edición y un widget etiqueta. El texto introducido en la edición en línea se muestra el widget etiqueta. edit = Qt :: LineEdit.new auto
El Qt :: LineEdit widget está creado.
conectar edición, SIGNAL ("TextChanged (QString)"), yo, SLOT ("on_changed (QString)")
Cuando escriba o borre parte del texto de la edición de línea, el on_changed método se dispara. def on_changed
[email protected] [email protected] final
En el on_changed método, se establece el contenido de la edición de línea para el widget de etiqueta. El adjustSize método garantiza que todo el texto es visible.
Figura: Qt :: LineEdit Widget
Botones de alternar Botones de alternar son pulsadores con un pabellón conjunto comprobable. Toggle botón es un botón que tiene dos estados. Prensado y no presionado. Usted alternar entre estos dos estados haciendo clic en él. Hay situaciones en las que esta funcionalidad se adapta bien. #! / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa utiliza botones de selección para cambiar el color de fondo # de # un widget. # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: 09 2012 require 'Qt' clase QtApp
final
[email protected] azul más azul = 255 = 0 @ end color = Qt :: Color.new rojo, verde,
[email protected] ("QWidget {backgroundcolor:% s} "% @ color.name) end end app = Qt :: Application.new ARGV QtApp.new app.exec
En el ejemplo de código, se utilizan tres botones de selección para cambiar el color de un control rectangular. @ RedB = Qt :: 'Red' PushButton.new,
[email protected] verdadero
Creamos un Qt :: PushButton widget. El setCheckable método cambia el pulsador en un botón de activación. conectar @ RedB, SIGNAL ("clicked ()"), SLOT ("on_clicked ()")
Nos conecta el botón en el on_clicked llamada al método. @ Cuadrado = Qt :: Widget.new
[email protected] 150, 20, 100,
[email protected] "QWidget {background-color:% s}"% @ color.name
Creamos un widget cuadrado. Hemos establecido su tamaño. Al principio, es negro. En Qt, se utiliza hojas de estilos para personalizar el aspecto de un widget. Dentro de la on_clicked método, se determina el valor del color y actualizar el widget cuadrado a un nuevo color. rojo = @ Color.red verde = @ = @ Color.green azul Color.Blue
Aquí se determina el color actual del widget cuadrado.
[email protected] rojo más rojo = 255 = 0 End
La parte roja del color se cambia, dependiendo del estado del botón de conmutación rojo. @ Color = Qt :: Color.new rojo, verde, azul
Creamos un valor nuevo color. @ Square.setStyleSheet ("QWidget {background-color:% s}"% @ color.name)
El color de la plaza está actualizado.
Figura: Botones de alternar
Qt :: ComboBox El Qt :: ComboBox es un widget que permite al usuario elegir entre una lista de opciones. Se trata de un control de selección que muestra el elemento actual, y puede mostrar una lista de elementos seleccionables. Un cuadro combinado puede ser editable. Se presenta una lista de opciones para el usuario de una manera que toma la cantidad mínima de espacio en la pantalla. #! / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa utiliza el widget de Qt :: ComboBox. # La opción seleccionada en el menú desplegable que se muestra en el # widget de etiqueta. # # Autor: Jan sitio web Bodnar #: # www.zetcode.com última modificación: Sepetmber 2012 require 'Qt' clase QtApp
En nuestro ejemplo de código, tenemos dos widgets. Un cuadro combinado y un widget de etiqueta. La opción seleccionada en un cuadro combinado se muestra en la etiqueta. @ Label = Qt :: Label.new "Ubuntu", self
Esta es la etiqueta que se mostrará la opción seleccionada en el cuadro combinado.
combo = Qt :: ComboBox.new auto
Creamos la instancia de la Qt :: ComboBox widget. combo.addItem "Ubuntu" combo.addItem "Fedora" combo.addItem "Mandriva" combo.addItem "Red Hat" combo.addItem "Mint"
Cuadro combinado se rellena con los valores. conectar combo, SIGNAL ("activado (QString)"), yo, SLOT ("on_activated (QString)")
Al seleccionar una opción en el cuadro combinado, el on_activated método se dispara. def on_activated
[email protected] final
[email protected]
En el on_activated método, actualizamos el widget de etiqueta a la cadena seleccionada en el cuadro combinado.
Figura: Qt :: ComboBox Widget
En esta parte del tutorial de Ruby Qt, hemos presentado varios widgets Qt.
Menús y barras de herramientas En esta parte del tutorial de programación Ruby Qt, vamos a trabajar con los menús y barras de herramientas.
Una barra de menú es una de las partes más visibles de la aplicación GUI. Se trata de un grupo de comandos situados en varios menús. Mientras que en las aplicaciones de consola que tenía que recordar todos esos arcanos comandos, aquí tenemos la mayoría de los comandos agrupados en partes lógicas. Hay normas aceptadas que reducen aún más la cantidad de gasto tiempo para aprender una nueva aplicación. Menús de grupo comandos que podemos usar en una aplicación. Las barras de herramientas proporcionan un acceso rápido a los comandos más utilizados.
Menú sencillo El primer ejemplo se mostrará un menú simple. #! / Usr / bin / ruby # ZetCode Rubí Qt tutorial # # Este programa muestra un sencillo menú #. Tiene una acción, que # finalizará el programa, cuando # seleccionado. # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: 11 2012 require 'Qt' clase QtApp
Tenemos una barra de menús, un menú y una acción. Con el fin de trabajar con los menús, hay que heredar de MainWindow widget. dejar de fumar = Qt :: Action.new "& Salir", auto
Esta línea de código crea una acción . Cada menú tiene uno o más objetos de acción. Tenga en cuenta el signo (&) carácter. Crea un acceso directo para el elemento. Alt + Q. También subraya el carácter Q. El acceso directo está activado, cuando el menú de archivo se coloca hacia abajo. archivo = MenuBar (). AgregarMenú "& Archivo" file.addAction dejar
Creamos un menú de objetos. El carácter ampersand crea un acceso directo. Alt + F. Los atajos consecutivos Alt + F, Alt + Q salir de la aplicación.
connect (dejar de fumar, SIGNAL ("disparado ()"), Qt :: Application.instance, SLOT ("quit ()"))
Al seleccionar esta opción en el menú, la aplicación se cierra.
Figura: Menú sencillo
Submenú Un submenú es un menú conectado a otro objeto de menú. El ejemplo siguiente lo demuestra. ! # / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa crea un submenú # # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: 11 2012 requieren de clase 'Qt' QtApp
En el ejemplo, tenemos tres opciones en un submenú de un menú archivo. archivo = MenuBar (). AgregarMenú "& Archivo" IMPM = Qt :: Menu.new "Importar"
Tenemos dos menús objetos. El menú de archivos y el menú de importación.
semillas = Qt :: Action.new "news feed Importar ...", las marcas de auto = Qt :: Action.new "Importar marcadores ...", el correo self = Qt :: Action.new "Importar correo ..." , auto
Creamos tres objetos de acción. impm.addAction impm.addAction semillas marca correo impm.addAction
Añadimos los objetos de acción en el menú de importación. file.addMenu IMPM
Por último, añadimos el menú Importar en el menú archivo.
Figura: Submenú
Imágenes, menús, separadores En el ejemplo siguiente, se mejorará aún más nuestra solicitud anterior. Vamos a añadir iconos a los menús, atajos de uso y un separador. Tenga en cuenta que el escritorio Gnome puede ser configurado para no mostrar iconos de menú por defecto. En este caso tenemos que habilitar el menu_have_icons opción en la configuración de la interfaz Gnome. gconftool-2 - tipo Boolean - set / desktop / gnome / interface / menus_have_icons Verdadero
Podemos usar el comando anterior o el gconf-editor de la herramienta.
! # / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa muestra la imagen # menús, atajos y un separador # # autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: 11 2012 require 'Qt' clase QtApp
En nuestro ejemplo, tenemos un menú con tres acciones. Sólo la acción de dejar de hacer algo realmente, si lo selecciona. También creamos un separador y un atajo Ctrl + Q, que pondrá fin a la aplicación. newpix = Qt :: Icon.new "new.png" openpix = Qt :: Icon.new "open.png" quitpix = Qt :: Icon.new "exit.png"
Estas son las imágenes PNG, que utilizaremos en la aplicación. Newa = Qt :: Action.new newpix, "& Nuevo", self open = Qt :: Action.new openpix, "& Abrir", auto quit = Qt :: Action.new quitpix, "& Salir", auto
Aquí hemos creado tres objetos de acción. El primer parámetro es el icono . quit.setShortcut "Ctrl + Q"
Esta línea crea un acceso directo. Haciendo clic en este acceso directo, vamos a ejecutar la acción para dejar de fumar, que se salga de la aplicación. file.addSeparator
Hemos crear un separador. El separador es una línea horizontal, que nos permite acciones de menú de grupo en algunas partes lógicas.
Figura: Imágenes, acceso directo y un separador
Una barra de herramientas La barra de herramientas de clase proporciona un panel móvil que contiene un conjunto de controles que proporcionan un acceso rápido a las acciones de la aplicación. ! # / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa crea una barra de herramientas # # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: 11 2012 requieren de clase 'Qt' QtApp
Creamos una barra de herramientas con tres objetos de acción y un separador. newpi = Qt :: Icon.new "new2.png" openpi = Qt :: Icon.new "open2.png" quitpi = Qt :: Icon.new "exit2.png"
Objetos de la barra de herramientas de acción mostrará los siguientes iconos. addToolBar toolbar = "main toolbar"
El addToolBar método de la MainWindow crea una barra de herramientas para la aplicación. La cadena de texto ofrece una barra de herramientas un nombre. Este nombre se utiliza para hacer referencia a esta barra de herramientas, porque puede haber varias barras de herramientas en una sola aplicación. Si haga clic derecho en el área de la ventana, podemos ver una opción de comprobarse, que muestra / oculta la barra de herramientas. toolbar.addSeparator
Nosotros creamos un separador vertical. connect (dejar de fumar, SIGNAL ("disparado ()"), Qt :: Application.instance, SLOT ("quit ()"))
Cuando se hace clic en el objeto de acción para dejar de fumar, la aplicación termina.
Figura: Barra de herramientas
Deshacer Rehacer El siguiente ejemplo demuestra, cómo podemos desactivar botones de barra de herramientas en la barra de herramientas. Es una práctica común en la programación de GUI. Por ejemplo, el botón Guardar. Si guardar todos los cambios de nuestro documento en el disco, el botón Guardar está desactivado en muchos editores de texto. De esta forma la solicitud indica al usuario, todos los cambios que están ya registrados.
! # / Usr / bin / ruby # ZetCode Rubí Qt tutorial # # Esto deshabilita programas / # permite acciones en una barra de herramientas # # Autor: Jan Bodnar # web: www.zetcode.com # última modificación: 11 2012 requieren de clase 'Qt' QtApp
= false [email protected] @ red.setDisabled verdadero fin end end app = Qt :: Application.new ARGV QtApp.new app.exec
En nuestro ejemplo, tenemos tres Acción objetos y un separador. Después de varios clics en los botones de deshacer o rehacer, se convierten en desactivada. Visualmente, los botones aparecen en gris. @ Count = 2
Los @ conteo determina variables, qué botón se activa y desactiva. Connect @ und, SIGNAL ("disparado ()"), auto, SLOT ("count ()") connect @ red, SIGNAL ("disparado ()"), auto, SLOT ("count ()")
Al hacer clic en el botón de barra de herramientas, la activa señal es emitida. Unimos esta señal a la cantidad método. action = remitente
Los dos botones de la barra llame al número método. Tenemos que decirle entre ellos. Esta línea determina que la acción objeto la actualidad se emite la señal. si "Deshacer" == action.text @ @ count = count - 1 else @ @ count = count + 1 end
El botón de barra de herramientas deshacer resta 1 de la variable de recuento. La redo suma 1. Dependiendo del valor de la variable de recuento, se activar / desactivar los botones de la barra de herramientas.
si @ count <= False End [email protected] [email protected]
El setDisabled método activa o desactiva los botones de la barra de herramientas.
Figura: Deshacer Rehacer
En esta parte del tutorial de Ruby Qt, mencionamos los menús y barras de herramientas.
Diálogos En esta parte del tutorial de programación Ruby Qt, vamos a trabajar con cuadros de diálogo. Ventanas de diálogo o cuadros de diálogo son una parte indispensable de la mayoría de aplicaciones gráficas modernas. Un cuadro de diálogo se define como una conversación entre dos o más personas. En una aplicación informática un cuadro de diálogo es una ventana que se utiliza para "hablar" con la aplicación. Un cuadro de diálogo se utiliza para ingresar datos, modificar datos, cambie la configuración de la aplicación Diálogos etc son un medio importante de comunicación entre un usuario y un programa informático.
Los cuadros de mensaje
Los cuadros de mensaje son cuadros de diálogo convenientes que proporcionan mensajes al usuario de la aplicación. El mensaje se compone de texto y datos de imagen. ! # / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # # Este programa muestra los cuadros de diálogo de mensajes # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: Julio 2009 requieren class 'Qt' QtApp
Usamos el GridLayout gerente de crear una cuadrícula de cinco botones. Cada uno de los botones muestra un cuadro de mensaje diferente. si "Error" == button.text Qt :: auto MessageBox.critical, "Error", "Error al cargar archivo"
En caso de que pulsó el botón de error, se muestra el cuadro de diálogo de error. Utilizamos métodos estáticos de la de mensajes de clase para mostrar los cuadros de mensaje.
InputDialog El InputDialog clase proporciona un cuadro de diálogo simple conveniencia de obtener un único valor para el usuario. El valor de entrada puede ser una cadena, un número o un elemento de una lista. Una etiqueta debe estar configurado para decirle al usuario lo que debe ingresar. ! # / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa muestra un cuadro de diálogo de entrada # # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: Julio 2009 requieren class 'Qt' QtApp
En el ejemplo de código, tenemos un botón y una edición de línea. El botón muestra un cuadro de diálogo de entrada. Tenemos un poco de texto y el texto se muestra en el widget de línea de edición. text = Qt :: auto InputDialog.getText, "Diálogo de entrada", "Escriba su nombre"
El getText método estático crea el diálogo de entrada. El texto del cuadro de diálogo se almacena en la variable de texto. si el texto! name = nil text.strip = si no name.empty? @ Name edit.setText end end
Antes de actualizar la edición en línea, nos aseguramos de que la variable de texto no es nulo y que no está vacío y no se compone sólo de espacios.
Figura: diálogo de entrada
ColorDialog El ColorDialog clase proporciona un widget de diálogo para especificar los colores. La función del diálogo de color es permitir a los usuarios elegir los colores. ! # / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # En este programa, se utiliza el ColorDialog # para cambiar el color de un texto # etiqueta # # Autor: Jan sitio web Bodnar #: # www.zetcode.com última modificación : julio 2009 requieren clase 'Qt' QtApp
Se muestra un poco de texto en el centro de la ventana. Al hacer clic en el área de la ventana, se muestra un cuadro de diálogo de color. Cambiamos el color de primer plano del texto con el color seleccionado en el cuadro de diálogo. def mousePressEvent evento ... final
Para recibir eventos de ratón de prensa para nuestra ventana, hay que reimplementar el mousePressEvent método. color = Qt :: ColorDialog.getColor
El ColorDialog se está creando. El color seleccionado se almacena en el color de la variable. @ Label.setStyleSheet "QWidget {color:% s}"% color.name
Aquí actualizamos el color de primer plano del texto de la etiqueta.
Figura: ColorDialog
FontDialog
El FontDialog clase proporciona un widget de diálogo para seleccionar una fuente. ! # / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # En este programa, se utiliza el FontDialog # para cambiar el tipo de letra de un texto # etiqueta # # Autor: Jan sitio web Bodnar #: # www.zetcode.com última modificación : julio 2009 requieren clase 'Qt' QtApp
Este ejemplo es similar al anterior. Esta vez, cambiar la fuente del texto. font = Qt :: ok FontDialog.getFont
El FontDialog se está creando. si no return end ok
El booleano ok variable es true, si hace clic en el botón Aceptar del cuadro de diálogo. Volvemos a partir del método, si el botón Cancelar se presionó. @ Label.setFont fuente
Actualizamos la etiqueta a la fuente que ha seleccionado.
Figura: FontDialog
En esta parte del tutorial de Ruby Qt, trabajamos con ventanas de diálogo.
Pintura En esta parte del tutorial de programación Ruby Qt vamos a hacer un poco de pintura. Cuando tenemos que pintar? Hay situaciones, cuando tenemos que crear un widget desde cero. En tal caso, tenemos que hacer la pintura. ¿O queremos crear gráficos, adornos especiales, efectos o mejoras widget. El Pintor de clases es fundamental cuando hacemos algo de pintura en la biblioteca Qt. Eventos de pintura son recibidos en el paintEvent método. Para hacer pintura de encargo, tenemos que reimplementar este método.
Patrones
En Qt, hay varios modelos, que podemos utilizar para rellenar el interior de formas. #!/usr/bin/ruby # # # # # # # # #
ZetCode Ruby Qt tutorial This program draws nine rectangles. The interiors are filled with different built-in patterns. author: jan bodnar website: www.zetcode.com last modified: June 2009
require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Patterns" resize 350, 280 move 300, 300 show end def paintEvent event painter = Qt::Painter.new self drawPatterns painter painter.end end def drawPatterns painter painter.setPen Qt::NoPen painter.setBrush Qt::HorPattern painter.drawRect 10, 15, 90, 60 painter.setBrush Qt::VerPattern painter.drawRect 130, 15, 90, 60 painter.setBrush Qt::CrossPattern painter.drawRect 250, 15, 90, 60 painter.setBrush Qt::Dense7Pattern painter.drawRect 10, 105, 90, 60
painter.setBrush Qt::Dense6Pattern painter.drawRect 130, 105, 90, 60 painter.setBrush Qt::Dense5Pattern painter.drawRect 250, 105, 90, 60 painter.setBrush Qt::BDiagPattern painter.drawRect 10, 195, 90, 60 painter.setBrush Qt::FDiagPattern painter.drawRect 130, 195, 90, 60 painter.setBrush Qt::DiagCrossPattern painter.drawRect 250, 195, 90, 60 end end app = Qt::Application.new ARGV QtApp.new app.exec
In the code example, we will draw nine rectangles and fill them with different brush patterns. def paintEvent event painter = Qt::Painter.new self drawPatterns painter painter.end end
When the window area needs to be redrawn, the paintEvent method is called. This happens, when we resize the window, maximize it or minimize it etc. Inside this method, we create the Painter object. This object is used to do all painting in Qt. The painting itself is delegated to the drawPatterns method. painter.setPen Qt::NoPen
The pen object is used to draw outlines of the shapes. In our example we will not use a pen. painter.setBrush Qt::HorPattern
We set a horizontal pattern as a brush. painter.drawRect 10, 15, 90, 60
We draw a rectangle, with the current pen and brush. The first two parameters of the method are the x, y coordinates. The last two parameters are the width and height of the rectangle. painter.end
Ends painting. Any resources used while painting are released.
Figure: Patterns
Shapes The Qt painting API can draw various shapes. The following programming code example will show some of them. #!/usr/bin/ruby # # # # # # #
ZetCode Ruby Qt tutorial This program draws basic shapes author: jan bodnar website: www.zetcode.com last modified: June 2009
require 'Qt'
class QtApp < Qt::Widget def initialize super setWindowTitle "Basic shapes" resize 350, 280 move 300, 300 show end def paintEvent event painter = Qt::Painter.new self drawShapes painter painter.end end def drawShapes painter painter.setRenderHint Qt::Painter::Antialiasing painter.setPen Qt::Color.new 150, 150, 150 painter.setBrush Qt::Brush.new Qt::Color.new 150, 150, 150 path1 = Qt::PainterPath.new path1.moveTo 5, 5 path1.cubicTo 40, 5, 50, 50, path1.cubicTo 5, 99, 50, 50, painter.drawPath path1
99, 99 5, 5
painter.drawPie 130, 20, 90, 60, 30*16, 120*16 painter.drawChord 240, 30, 90, 60, 0, 16*180 painter.drawRoundRect 20, 120, 80, 50 points = [] points.push points.push points.push points.push points.push
Qt::Point.new Qt::Point.new Qt::Point.new Qt::Point.new Qt::Point.new
130, 180, 180, 220, 140,
140 170 140 110 100
polygon = Qt::Polygon.new points painter.drawPolygon polygon painter.drawRect 250, 110, 60, 60 baseline = Qt::PointF.new 20, 250 font = Qt::Font.new "Georgia", 55 path2 = Qt::PainterPath.new
path2.addText baseline, font, "Q" painter.drawPath path2 painter.drawEllipse 140, 200, 60, 60 painter.drawEllipse 240, 200, 90, 60 end end app = Qt::Application.new ARGV QtApp.new app.exec
In this code example, we draw nine different shapes on the window. A complex path, a pie, a chord, a rounded rectangle, a polygon, a rectangle, a character based shape, a circle and an ellipse. painter.setRenderHint Qt::Painter::Antialiasing
We use antialiasing in the example. Antialiased shapes look better, but it takes more time to draw them. painter.setPen Qt::Color.new 150, 150, 150 painter.setBrush Qt::Brush.new Qt::Color.new 150, 150, 150
We use a dark gray pen and brush to draw the shapes. path1 = Qt::PainterPath.new path1.moveTo 5, 5 path1.cubicTo 40, 5, 50, 50, path1.cubicTo 5, 99, 50, 50, painter.drawPath path1
99, 99 5, 5
La forma compleja primero se crea con la PainterPath objeto. La clase PainterPath proporciona un recipiente para operaciones de p intura. Un camino pintor es un objeto compuesto por una serie de bloques de construcción gráficos, como rectángulos, elipses, líneas y curvas. painter.drawPie 130, 20, 90, 60, 30 * 16, 120 * 16 painter.drawChord 240, 30, 90, 60, 0, 16 * 180 painter.drawRoundRect 20, 120, 80, 50
Estas tres líneas dibujar un pastel, una cuerda y un rectángulo redondeado.
puntos = [] points.push Qt :: Point.new 130, 140 points.push Qt :: Point.new 180, 170 points.push Qt :: Point.new 180, 140 points.push Qt :: Point.new 220 , 110 points.push Qt :: Point.new 140, 100 polígono = Qt :: puntos Polygon.new polígono painter.drawPolygon
Nosotros utilizamos una matriz de cinco puntos para crear un polígono. baseline = Qt :: PointF.new 20, 250 font = Qt :: Font.new "Georgia", 55 path2 = Qt :: PainterPath.new path2.addText línea de base, la fuente, "Q" painter.drawPath path2
Estas líneas crean una forma basada en caracteres. painter.drawEllipse 140, 200, 60, 60 painter.drawEllipse 240, 200, 90, 60
Estas dos líneas de crear un círculo y una elipse, respectivamente.
Figura: Formas
Rectángulos transparentes La transparencia es la cualidad de ser capaz de ver a través de un material. La manera más fácil de entender la transparencia es imaginar un trozo de vidrio o el agua. Técnicamente, los rayos de luz puede pasar a través del vidrio y de esta manera podemos ver los objetos detrás del vidrio.
En gráficos de computadora, podemos lograr efectos de transparencia con la composición alfa. Composición alfa es el proceso de combinar una imagen con un fondo para crear la apariencia de una transparencia parcial. El proceso de composición utiliza un canal alfa. (Wikipedia.org, answers.com) #! / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa se basa Ten # # rectángulos con diferentes niveles de transparencia. # # Autor: Jan sitio web Bodnar #: # www.zetcode.com última modificación: Junio 2009 require 'Qt' clase QtApp
En el ejemplo que vamos a sacar diez rectángulos con diferentes niveles de transparencia. painter.setPen Qt::NoPen
No utilizamos pluma. for i in 1 .. 10 painter.setBrush Qt :: Brush.new Qt :: Color.new 0, 0, 255, i * 25 painter.drawRect 50 * i, 20, 40, 40 final
El último parámetro del objeto Color es el valor de transparencia alfa.
Figura: rectángulos transparentes
Donut Shape
En el siguiente ejemplo se crea una forma compleja por rotación de un manojo de elipses. ! # / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa dibuja un donut forma # # # Autor: Jan sitio web Bodnar #: # www.zetcode.com última modificación: Junio 2009 require 'Qt' clase QtApp
En este ejemplo, creamos un donut. La forma se asemeja a una galleta, de ahí el nombre de donut. color = Qt :: Color.new color.setNamedColor "# 333333"
Podemos utilizar una notación hexadecimal para crear un objeto de color. w = ancho h = altura
Aquí se determina la anchura y la altura de la ventana. painter.translate Qt :: Point.new w / 2, h / 2
Nos mover el sistema de coordenadas para el centro de la ventana. De esta manera hacemos el dibujo matemáticamente más fácil. 72.times hacer painter.drawEllipse -125, -40, 250, 80 painter.rotate final 5,0
Dibujamos un objeto elipse 72 veces. Cada vez que gire la elipse en 5 grados. Esto creará nuestra forma de rosquilla.
Figura: Donut
Dibujar texto En el último ejemplo, vamos a dibujar texto en la ventana. ! # / Usr / bin / ruby # ZetCode tutorial de Ruby Qt # # Este programa dibuja texto en la ventana # # # Autor: Jan sitio web Bodnar #: # www.zetcode.com última modificación: Junio 2009 requieren class 'Qt' QtApp < Qt :: Widget def initialize súper setWindowTitle "Soulmate" resize 370, 240 se mueven 300, 300 def espectáculo final paintEvent evento pintor = Qt :: Painter.new auto drawText pintor painter.end final def drawText pintor painter.setBrush Qt :: Brush. nuevo Qt :: Color.new 25, 25, 25 painter.setFont Qt :: Font.new "Purisa", 10 painter.drawText Qt :: Point.new (20, 30), "La mayoría de las relaciones parecen tan transitorio" pintor. drawText Qt :: Point.new (20, 60): "Son buenos, pero no el permanente" painter.drawText Qt :: Point.new (20, 120), "¿Quién no dura para alguien a quien abrazar" painter.drawText Qt :: Point.new (20, 150): "¿Quién sabe amar sin ser dicho" painter.drawText Qt :: Point.new (20, 180), "Que alguien me diga por qué estoy en mi propio "painter.drawText Qt :: Point.new (20, 210):" Si hay un alma gemela para cada uno "end end app = Qt :: Application.new ARGV QtApp.new app.exec
Trazamos una letra de la canción en la ventana. painter.setFont Qt :: Font.new "Purisa", 10
Hemos creado una fuente Purisa para nuestro texto. painter.drawText Qt :: Point.new (20, 30), "La mayoría de las relaciones parecen tan transitorio"
El drawText método se utiliza para dibujar el texto.
Figura: texto Dibujo
En esta parte del tutorial de programación Ruby Qt, hicimos un poco de pintura.
Custom Widget En esta parte del tutorial de programación Ruby Qt, vamos a crear un widget personalizado. Toolkits sólo suelen proporcionar los widgets más comunes como botones, widgets de texto, barras de desplazamiento, etc No toolkit puede proporcionar todos los controles posibles. Los programadores deben crear widgets tales por sí mismos. Lo hacen mediante el uso de las herramientas de dibujo que proporciona el conjunto
de herramientas. Hay dos posibilidades. Un programador puede modificar o mejorar un widget existente. O puede crear un widget personalizado desde cero.
El widget Burning En el siguiente ejemplo, vamos a crear un widget quema personalizado. Este control puede verse en aplicaciones como Nero o K3B. El widget se puede crear a partir de cero. #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # # # # #
In this program, we create a custom widget @author jan bodnar website zetcode.com last modified July 2009
require 'Qt' PANEL_HEIGHT = 30 DISTANCE = 19 LINE_WIDTH = 5 DIVISIONS = 10 FULL_CAPACITY = 700 MAX_CAPACITY = 750 class Burning < Qt::Widget def initialize(parent) super(parent) @num = [ "75", "150", "225", "300", "375", "450", "525", "600", "675" ] @redColor = Qt::Color.new 255, 175, 175 @yellowColor = Qt::Color.new 255, 255, 184 @parent = parent setMinimumHeight PANEL_HEIGHT end def paintEvent event
painter = Qt::Painter.new self drawWidget painter painter.end end def drawWidget painter w = width.to_f slid_width = @parent.getCurrentWidth step = (w / DIVISIONS).round.to_f till = ((w / MAX_CAPACITY) * slid_width).to_f full = ((w / MAX_CAPACITY) * FULL_CAPACITY).to_f if slid_width > FULL_CAPACITY painter.setPen @yellowColor painter.setBrush Qt::Brush.new @yellowColor painter.drawRect Qt::RectF.new 0, 0, full, PANEL_HEIGHT painter.setPen @redColor painter.setBrush Qt::Brush.new @redColor painter.drawRect Qt::RectF.new full+1, 0, till-full, PANEL_HEIGHT else if slid_width > 0 painter.setPen @yellowColor painter.setBrush Qt::Brush.new @yellowColor painter.drawRect Qt::RectF.new 0, 0, till, PANEL_HEIGHT end end painter.setPen Qt::Color.new 90, 90, 90 painter.setBrush Qt::NoBrush painter.drawRect 0, 0, w-1, PANEL_HEIGHT-1 newFont = font newFont.setPointSize 7 painter.setFont newFont for i in ([email protected]) painter.drawLine Qt::LineF.new i*step, 1, i*step, LINE_WIDTH metrics = Qt::FontMetrics.new newFont w = metrics.width @num[i-1] painter.drawText(Qt::PointF.new(i*step-w/2, DISTANCE), @num[i-1]) end end end
class QtApp < Qt::Widget slots 'onChanged(int)' def initialize super setWindowTitle "The Burning Widget" initUI resize 370, 200 move 300, 300 show end def initUI @cur_width = 0 @slider = Qt::Slider.new Qt::Horizontal , self @slider.setMaximum MAX_CAPACITY @slider.setGeometry 50, 50, 130, 30 connect(@slider, SIGNAL("valueChanged(int)"), self, SLOT("onChanged(int)")) vbox = Qt::VBoxLayout.new self hbox = Qt::HBoxLayout.new vbox.addStretch 1 @widget = Burning.new self hbox.addWidget @widget, 0 vbox.addLayout hbox setLayout vbox end def onChanged val @cur_width = val @widget.repaint end def getCurrentWidth return @cur_width end end app = Qt::Application.new ARGV QtApp.new app.exec
In this file, we create the Burning widget. class Burning < Qt::Widget
The custom widget is based on the Widget widget. PANEL_HEIGHT = 30 DISTANCE = 19 LINE_WIDTH = 5 DIVISIONS = 10 FULL_CAPACITY = 700 MAX_CAPACITY = 750
These are important constants. The PANEL_HEIGHT defines the height for the custom widget. The DISTANCE is the distance of the numbers on the scale from the top of their parent border. The LINE_WIDTH is the vertical line width. The DIVISIONS is the number of parts of the scale. The FULL_CAPACITY is the maximum capacity of the media. After it is reached, overburning happens. This is visualized by a red color. The MAX_CAPACITY is the maximum capacity of a medium. @num = [ "75", "150", "225", "300", "375", "450", "525", "600", "675" ]
We use these numbers to build the scale of the Burning widget. def paintEvent event painter = Qt::Painter.new self drawWidget painter painter.end end
The drawing of the custom widget is delegated to the drawWidget method. slid_width = @parent.getCurrentWidth
We use it to get the currently selected slider value. w = width.to_f
We get the width of the widget. The width of the custom widget is dynamic. It can be resized by a user.
till = ((w / MAX_CAPACITY) * slid_width).to_f full = ((w / MAX_CAPACITY) * FULL_CAPACITY).to_f
We use the w variable to do the transformations. Between the values of the scale and the custom widget's measures. Note that we use floating point values. We get greater precision in drawing. painter.setPen @ redcolor painter.setBrush Qt :: Brush.new @ redcolor painter.drawRect Qt :: RectF.new completo +1, 0, hasta que llena, PANEL_HEIGHT
Estas tres líneas de dibujar el rectángulo rojo, lo que indica la grabación de tamaño extra. painter.drawRect 0, 0, w-1, PANEL_HEIGHT-1
Este es el perímetro del widget. El rectángulo exterior. painter.drawLine Qt :: LineF.new i * step, 1, i * paso, line_width
Aquí trazamos las líneas verticales pequeños. w = metrics.width @ num [i-1] painter.drawText (Qt :: PointF.new (i * step-w / 2, distancia), @ num [i-1])
Aquí nos basamos en los números de la escala. Para colocar con precisión los números, debemos obtener el ancho de la cadena. @ Widget = Burning.new auto hbox.addWidget @ widget, 0
Creamos la instancia del widget Burning y agregarlo a la caja horizontal. def onChanged @ val = cur_width [email protected] final
Cuando el valor de la barra cambia, la almacenamos en el interior del cur_width @ variable y volver a pintar el widget personalizado. def volver getCurrentWidth @ end cur_width
Este método es llamado por el widget personalizado para obtener el valor del control deslizante actual.
Figura: El widget Burning
En esta parte del tutorial de Ruby Qt, hemos demostrado cómo crear un widget personalizado.
Nibbles En esta parte del tutorial de programación Ruby Qt, vamos a crear un clon juego Nibbles. Nibbles es un juego antiguo video clásico. Fue creado por primera vez en años 70. Más tarde fue llevado a los PC. En este juego el jugador controla una serpiente. El objetivo es comer tantas manzanas como sea posible. Cada vez que la serpiente se come una manzana, su cuerpo crece. La serpiente se deben evitar las paredes y su propio cuerpo.
Desarrollo El tamaño de cada una de las articulaciones de una serpiente es 10px. La serpiente se controla con las teclas de cursor. Inicialmente, la serpiente tiene tres
articulaciones. El juego comienza inmediatamente. Cuando el juego termina, se muestra "Game Over" mensaje en el centro de la ventana. Board.rb
ANCHO ALTURA = 300 = 300 = 10 DOT_SIZE ALL_DOTS = ancho * altura / (* DOT_SIZE DOT_SIZE) RAND_POS DELAY = 29 = 140 $ x = [0] * ALL_DOTS $ y = [0] * ALL_DOTS clase general 0 $ x [z] = $ x [(z - 1)] $ y [z] = $ y [(z - 1)] z = z - 1 end if @ dejó $ x [0] - = DOT_SIZE extremo derecho si @ $ x [0] + = DOT_SIZE final si @ hasta $ y [0] - = DOT_SIZE final si @ $ y abajo [0] + = DOT_SIZE end end def checkCollision z = @ puntos, mientras que z> 0 si z> 4 y $ x [0] == $ x [z] y $ y [0] == $ y [z] @ ingame = False End z = z - 1 End If $ y [0]> ALTURA @ ingame = False End If $ y [0] <0 @ ingame = False End si $ x [0]> ANCHO @ ingame = False End If $ x [0] <0 @ ingame = False End final locateApple def r = rand RAND_POS @ apple_x = r * r = rand DOT_SIZE RAND_POS @ apple_y = r * Final DOT_SIZE def TimerEvent evento dentro del juego si @ checkCollision checkApple final del desplazamiento [email protected] repintar final def keyPressEvent evento clave = event.key si key == Qt :: Key_Left.value y no @ @ izquierda derecha = true up = @ @ = false abajo False End If key == Qt :: Key_Right.value y no @ @ izquierda derecha = true @ @ = false hasta abajo = False End If key == Qt :: Key_Up.value y no por @ @ hasta = @ = true derecho @ falso izquierda = False End If key == Qt :: Key_Down.value y no a @ @ @ = true abajo a la derecha = false @ left = false end end end
En primer lugar vamos a definir algunas constantes que se utilizan en nuestro juego.
Los ANCHO y ALTURA constantes de determinar el tamaño de la Junta. El DOT_SIZE es el tamaño de la manzana y el punto de la serpiente. El ALL_DOTS Define el número máximo de puntos posibles en el Consejo. El RAND_POS constante se usa para calcular una posición aleatoria de una manzana. La DELAY constante determina la velocidad del juego. $ X = [0] * ALL_DOTS $ y = [0] * ALL_DOTS
Estos dos conjuntos x tienda, y las coordenadas de todas las articulaciones posibles de una serpiente. El initGame método inicializa variables, imágenes cargas e inicia una función de tiempo de espera. si @ ingame drawObjects pintor otro extremo GameOver pintor
Dentro de la paintEvent método, comprobamos el @ ingame variable. Si bien es cierto, nos basamos nuestros objetos. La manzana y las articulaciones de serpiente. De lo contrario, mostrará el mensaje "Game over" de texto. def drawObjects pintor painter.drawImage @ apple_x, apple_y @, @ manzana para z en (0 .. @ puntos) si z == 0 painter.drawImage $ x [z], $ y [z], @ cabeza más painter.drawImage $ x [z], $ y [z], @ end end end pelota
El drawObjects método dibuja la manzana y las articulaciones de la serpiente. La articulación de la primera de una serpiente es su cabeza, que está representado por un círculo rojo. def checkApple si $ x [0] == @ apple_x y $ y [0] == @ @ apple_y puntos = @ dots + 1 end end locateApple
Los checkApple método comprueba si la serpiente ha golpeado el objeto de manzana. Si es así, agregamos otra articulación serpiente y llamar a la locateApple método, que coloca al azar un nuevo objeto de manzana. En el movimiento método que tenemos el algoritmo de clave del juego. Para entenderlo, observar cómo la serpiente se mueve. Usted controla la cabeza de la serpiente. Usted puede cambiar su dirección con las teclas de cursor. El resto de las
articulaciones se mueven una posición hacia arriba de la cadena. Las segundas jugadas conjuntas en las que la primera es la articulación tercero en la segunda, etc mientras que z> 0 $ x [z] = $ x final de 1 - [(z - 1)] $ y [z] = $ y [(z - 1)] z = z
Este código mueve las articulaciones de la cadena. si @ dejó $ x [0] - = fin DOT_SIZE
Mueva la cabeza hacia la izquierda. En el checkCollision método, se determina si la serpiente ha afectado a sí mismo o una de las paredes. mientras que z> 0 si z> 4 y $ x [0] == $ x [z] y $ y [0] == $ y [z] @ ingame = False End z = z - 1 final
Termina el juego, si la serpiente golpea a uno de sus articulaciones con la cabeza. si $ y [0]> ALTURA @ ingame = False End
Termina el juego, si la serpiente llega a la parte inferior de la Junta. El locateApple método localiza una manzana al azar en el tablero. r = rand RAND_POS
Obtenemos un número aleatorio entre 0 y RAND_POS - 1. @ Apple_x = r * DOT_SIZE ... @ Apple_y = r * DOT_SIZE
Estas líneas ajustar la coordenadas x, y del objeto de la manzana. si @ ingame checkCollision checkApple movimiento final [email protected]
Cada ms 140, el TimerEvent método se llama. Si estamos en el juego, que llamamos tres métodos, que se basan la lógica del juego. De lo contrario, detener el temporizador. En el keyPressEvent método de la clase Board, podemos determinar las teclas que fueron presionadas.
si key == Qt :: Key_Left.value y no @ @ izquierda derecha = true @ @ = false hasta abajo = False End
Si se pulsa la tecla de cursor hacia la izquierda, nos propusimos @ izquierdo en true. Esta variable se usa en el movimiento método para cambiar las coordenadas del objeto de serpiente. Nótese también, que cuando la serpiente se dirige a la derecha, no podemos girar inmediatamente a la izquierda. Nibbles.rb
#! / Usr / bin / ruby # ZetCode Rubí tutorial Qt # # En este programa, se crea un clon # juego Nibbles. # # Autor: Jan sitio web Bodnar #: # www.zetcode.com Última modificación: 09 2012 require 'Qt' require 'Junta' clase QtApp
En el archivo Nibbles.rb, hemos creado el juego Nibbles.
Figura: Nibbles
