Ruby - Guía Tk
Introducción
La interfaz gráfica de usuario (GUI) estándar de Ruby es Tk. Tk comenzó como la GUI para el lenguaje de scripting Tcl desarrollado por John Ousterhout.
Tk tiene la distinción única de ser la única GUI multiplataforma. Tk se ejecuta en Windows, Mac y Linux y proporciona una apariencia nativa en cada sistema operativo.
El componente básico de una aplicación basada en Tk se llama widget. Un componente a veces también se llama ventana, ya que, en Tk, "ventana" y "widget" se usan a menudo indistintamente.
Las aplicaciones de Tk siguen una jerarquía de widgets donde cualquier número de widgets se puede colocar dentro de otro widget, y esos widgets dentro de otro widget, ad infinitum. El widget principal en un programa Tk se denomina widget raíz y se puede crear creando una nueva instancia de la clase TkRoot.
La mayoría de las aplicaciones basadas en Tk siguen el mismo ciclo: crea los widgets, colócalos en la interfaz y, finalmente, vincula los eventos asociados con cada widget a un método.
Hay tres administradores de geometría; place, grid y pack que se encargan de controlar el tamaño y ubicación de cada uno de los widgets en la interfaz.
Instalación
Los enlaces Ruby Tk se distribuyen con Ruby, pero Tk es una instalación separada. Los usuarios de Windows pueden descargar una instalación de Tk con un solo clic desde ActiveTcl de ActiveState .
Es posible que los usuarios de Mac y Linux no necesiten instalarlo porque existe una gran posibilidad de que ya esté instalado junto con el sistema operativo, pero de lo contrario, puede descargar paquetes precompilados u obtener la fuente de Tcl Developer Xchange .
Aplicación simple de Tk
Una estructura típica de los programas Ruby / Tk es crear el principal o root ventana (una instancia de TkRoot), agregue widgets para construir la interfaz de usuario y luego inicie el ciclo de eventos principal llamando Tk.mainloop.
El tradicional Hello, World! El ejemplo de Ruby / Tk se parece a esto:
require 'tk'
root = TkRoot.new { title "Hello, World!" }
TkLabel.new(root) do
text 'Hello, World!'
pack { padx 15 ; pady 15; side 'left' }
end
Tk.mainloopAquí, después de cargar el módulo de extensión tk, creamos un marco a nivel de raíz usando TkRoot.new . Luego creamos un widget TkLabel como hijo del marco raíz, configurando varias opciones para la etiqueta. Finalmente, empaquetamos el marco raíz e ingresamos al bucle principal de eventos de la GUI.
Si ejecutara este script, produciría el siguiente resultado:
Clases de widgets Ruby / Tk
Hay una lista de varias clases de Ruby / Tk, que se pueden usar para crear una GUI deseada usando Ruby / Tk.
TkFrame Crea y manipula widgets de marcos.
TkButton Crea y manipula widgets de botones.
TkLabel Crea y manipula widgets de etiquetas.
TkEntry Crea y manipula widgets de entrada.
TkCheckButton Crea y manipula widgets de botón de verificación.
TkRadioButton Crea y manipula widgets de botones de radio .
TkListbox Crea y manipula widgets de cuadro de lista.
TkComboBox Crea y manipula widgets de cuadro de lista.
TkMenu Crea y manipula widgets de menú.
TkMenubutton Crea y manipula widgets de botones de menú .
Tk.messageBox Crea y manipula un diálogo de mensaje.
TkScrollbar Crea y manipula widgets de barra de desplazamiento.
TkCanvas Crea y manipula widgets de lienzo.
TkScale Crea y manipula widgets de escala.
TkText Crea y manipula widgets de texto.
TkToplevel Crea y manipula widgets de nivel superior.
TkSpinbox Crea y manipula widgets Spinbox.
TkProgressBar Crea y manipula widgets de la barra de progreso.
Cuadro de diálogo Crea y manipula widgets de cuadro de diálogo.
Tk :: Tile :: Notebook Muestra varias ventanas en un espacio limitado con la metáfora del cuaderno.
Tk :: Tile :: Paned Muestra una serie de subventanas, apiladas vertical u horizontalmente.
Tk :: Tile :: Separator Muestra una barra separadora horizontal o vertical.
Fuentes, colores e imágenes de Ruby / Tk Comprensión de las fuentes, colores e imágenes de Ruby / Tk
Opciones de configuración estándar
Todos los widgets tienen varias opciones de configuración diferentes, que generalmente controlan cómo se muestran o cómo se comportan. Las opciones que están disponibles dependen de la clase de widget, por supuesto.
Aquí hay una lista de todas las opciones de configuración estándar, que podrían ser aplicables a cualquier widget Ruby / Tk.
| No Señor. | Opciones y descripción |
|---|---|
| 1 | activebackground => Cadena Especifica el color de fondo que se utilizará al dibujar elementos activos. Un elemento está activo si el cursor del mouse está posicionado sobre el elemento y al presionar un botón del mouse se producirá alguna acción. Puede utilizar nombres de colores como "rojo", "azul", "rosa", "amarillo", etc. |
| 2 | activeborderwidth => Entero Especifica un valor no negativo que indica el ancho del borde 3-D dibujado alrededor de los elementos activos. |
| 3 | activeforeground => Cadena Especifica el color de primer plano que se utilizará al dibujar elementos activos. |
| 4 | anchor => Cadena Especifica cómo se mostrará la información de un widget (por ejemplo, texto o mapa de bits) en el widget. Debe ser uno de los valoresn, ne, e, se, s, sw, w, nwo center. Por ejemplo,nw significa mostrar la información de manera que su esquina superior izquierda esté en la esquina superior izquierda del widget. |
| 5 | background or bg => Cadena Especifica el color de fondo normal que se utilizará al mostrar el widget. |
| 6 | bitmap => Mapa de bits Especifica un mapa de bits para mostrar en el widget. La forma exacta en que se muestra el mapa de bits puede verse afectada por otras opciones como anclar o justificar. |
| 7 | borderwidth or bd => Entero Especifica un valor no negativo que indica el ancho del borde 3-D para dibujar alrededor del exterior del widget. |
| 8 | compound => Cadena Especifica si el widget debe mostrar texto y mapas de bits / imágenes al mismo tiempo y, de ser así, dónde debe colocarse el mapa de bits / imagen en relación con el texto. Debe ser uno de los valoresnone, bottom, top, left, righto center. |
| 9 | cursor => Cadena Especifica el cursor del mouse que se utilizará para el widget. Los valores posibles pueden ser "reloj", "flecha", etc. |
| 10 | disabledforeground => Cadena Especifica el color de primer plano que se utilizará al dibujar un elemento desactivado. |
| 11 | exportselection => Booleano Especifica si una selección en el widget también debe ser la selección X. El valor puede tener cualquiera de lostrue, false, 0, 1, yeso no. Si se exporta la selección, seleccionar en el widget deselecciona la selección X actual, seleccionar fuera del widget deselecciona cualquier selección de widget y el widget responderá a las solicitudes de recuperación de selección cuando tenga una selección. |
| 12 | font => Cadena Especifica la fuente que se utilizará al dibujar texto dentro del widget. |
| 13 | foreground or fg => Cadena Especifica el color de primer plano normal que se utilizará al mostrar el widget. |
| 14 | highlightbackground => Cadena Especifica el color que se mostrará en la región de resaltado transversal cuando el widget no tiene el foco de entrada. |
| 15 | highlightcolor => Cadena Especifica el color que se utilizará para el rectángulo de resaltado transversal que se dibuja alrededor del widget cuando tiene el foco de entrada. |
| dieciséis | highlightthickness => Entero Especifica un valor no negativo que indica el ancho del rectángulo resaltado para dibujar alrededor del exterior del widget cuando tiene el foco de entrada. |
| 17 | image => Imagen Especifica una imagen para mostrar en el widget, que debe haber sido creada con una imagen creada. Por lo general, si se especifica la opción de imagen, anula otras opciones que especifican un mapa de bits o un valor textual para mostrar en el widget; la opción de imagen se puede restablecer a una cadena vacía para volver a habilitar un mapa de bits o visualización de texto. |
| 18 | jump => Cadena Para los widgets con un control deslizante que se puede arrastrar para ajustar un valor, como barras de desplazamiento y escalas, esta opción determina cuándo se realizan las notificaciones sobre cambios en el valor. El valor de la opción debe ser booleano. Si el valor es falso, las actualizaciones se realizan continuamente a medida que se arrastra el control deslizante. Si el valor es verdadero, las actualizaciones se retrasan hasta que se suelta el botón del mouse para finalizar el arrastre; en ese momento se realiza una sola notificación. |
| 19 | justify => Cadena Cuando se muestran varias líneas de texto en un widget, esta opción determina cómo se alinean las líneas entre sí. Debe ser uno deleft, centero right. Left significa que los bordes izquierdos de las líneas están alineados, center significa que los centros de las líneas están alineados, y right significa que los bordes derechos de las líneas se alinean. |
| 20 | offset => Cadena Especifica el desplazamiento de mosaicos (ver también tileopción). Puede tener dos formatos diferentesoffset x,y o offset side, donde el lado puede estar n, ne, e, se, s, sw, w, nwo center. |
| 21 | orient => Cadena Para los widgets que pueden colocarse con una orientación horizontal o vertical, como barras de desplazamiento, esta opción especifica qué orientación se debe utilizar. Debe ser cualquierahorizontal o vertical o una abreviatura de uno de estos. |
| 22 | padx => Entero Especifica un valor no negativo que indica cuánto espacio adicional solicitar para el widget en la dirección X. |
| 23 | pady => Entero Especifica un valor no negativo que indica cuánto espacio adicional solicitar para el widget en la dirección Y. |
| 24 | relief => Entero Especifica el efecto 3D deseado para el widget. Los valores aceptables sonraised, sunken, flat, ridgey groove. |
| 25 | repeatdelay => Entero Especifica la cantidad de milisegundos que se debe mantener presionado un botón o tecla antes de que comience a repetirse automáticamente. Se utiliza, por ejemplo, en las flechas hacia arriba y hacia abajo en las barras de desplazamiento. |
| 26 | repeatinterval => Entero Usado junto con repeatdelay: una vez que comienza la repetición automática, esta opción determina el número de milisegundos entre las repeticiones automáticas |
| 27 | selectbackground => Cadena Especifica el color de fondo que se utilizará al mostrar los elementos seleccionados. |
| 28 | selectborderwidth => Entero Especifica un valor no negativo que indica el ancho del borde 3-D para dibujar alrededor de los elementos seleccionados. |
| 29 | selectforeground => Cadena Especifica el color de primer plano que se utilizará al mostrar los elementos seleccionados. |
| 30 | setgrid => Booleano Especifica un valor booleano que determina si este widget controla la cuadrícula de cambio de tamaño para su ventana de nivel superior. Esta opción se usa normalmente en los widgets de texto, donde la información del widget tiene un tamaño natural (el tamaño de un carácter) y tiene sentido que las dimensiones de la ventana sean números enteros de estas unidades. |
| 31 | takefocus => Entero Proporciona información que se utiliza al mover el foco de una ventana a otra mediante el desplazamiento del teclado (por ejemplo, Tab y Shift-Tab). Antes de establecer el foco en una ventana, los scripts de recorrido primero verifican si la ventana es visible (ella y todos sus antepasados están mapeados); si no, se salta la ventana. Un valor de 0 significa que esta ventana debe omitirse por completo durante el recorrido del teclado. 1 significa que esta ventana siempre debe recibir el foco de entrada. |
| 32 | text => Cadena Especifica una cadena que se mostrará dentro del widget. La forma en que se muestra la cadena depende del widget en particular y puede estar determinada por otras opciones, comoanchor o justify. |
| 33 | textvariable => Variable Especifica el nombre de una variable. El valor de la variable es una cadena de texto que se mostrará dentro del widget; si el valor de la variable cambia, el widget se actualizará automáticamente para reflejar el nuevo valor. La forma en que se muestra la cadena en el widget depende del widget en particular y puede estar determinada por otras opciones, comoanchor o justify. |
| 34 | tile => Imagen Especifica la imagen utilizada para mostrar el widget. Si la imagen es la cadena vacía, se muestra el color de fondo normal. |
| 35 | troughcolor => Cadena Especifica el color que se utilizará para las áreas de canal rectangular en widgets como barras de desplazamiento y escalas. |
| 36 | troughtile => Imagen Especifica la imagen que se usa para mostrar en las áreas de canal rectangular en widgets como barras de desplazamiento y escalas. |
| 37 | underline => Entero Especifica el índice entero de un carácter para subrayar en el widget. Los enlaces predeterminados utilizan esta opción para implementar el desplazamiento del teclado para los botones y las entradas del menú. 0 corresponde al primer carácter del texto mostrado en el widget, 1 al siguiente carácter, y así sucesivamente. |
| 38 | wraplength => Entero Para los widgets que pueden realizar ajustes de palabras, esta opción especifica la longitud máxima de línea. |
| 39 | xscrollcommand => función Especifica una devolución de llamada utilizada para comunicarse con barras de desplazamiento horizontales. |
| 40 | yscrollcommand => función Especifica una devolución de llamada utilizada para comunicarse con las barras de desplazamiento verticales. |
Gestión de geometría Ruby / Tk
Geometry Management se ocupa de posicionar diferentes widgets según los requisitos. La gestión de la geometría en Tk se basa en el concepto de widgets maestro y esclavo.
Un maestro es un widget, normalmente una ventana de nivel superior o un marco, que contendrá otros widgets, que se denominan esclavos. Puede pensar que un administrador de geometría toma el control del widget maestro y decide qué se mostrará dentro.
El administrador de geometría le preguntará a cada widget esclavo su tamaño natural o qué tan grande le gustaría que se mostrara. Luego toma esa información y la combina con cualquier parámetro proporcionado por el programa cuando le pide al administrador de geometría que administre ese widget esclavo en particular.
Hay tres administradores de geometría de lugar, cuadrícula y paquete que se encargan de controlar el tamaño y la ubicación de cada uno de los widgets en la interfaz.
grid Geometry Manager que organiza los widgets en una cuadrícula.
empaque Geometry manager que empaca alrededor de los bordes de la cavidad.
place Geometry manager para colocación fija o de láminas de goma.
Manejo de eventos Ruby / Tk
Ruby / Tk admite el bucle de eventos , que recibe eventos del sistema operativo. Se trata de cosas como pulsaciones de botones, pulsaciones de teclas, movimiento del ratón, cambio de tamaño de ventana, etc.
Ruby / Tk se encarga de administrar este bucle de eventos por usted. Descubrirá a qué widget se aplica el evento (¿el usuario hizo clic en este botón? Si se presionó una tecla, ¿qué cuadro de texto tenía el foco?), Y lo enviará en consecuencia. Los widgets individuales saben cómo responder a los eventos, por lo que, por ejemplo, un botón puede cambiar de color cuando el mouse se mueve sobre él y volver atrás cuando el mouse se retira.
En un nivel superior, Ruby / Tk invoca devoluciones de llamada en su programa para indicar que algo significativo le sucedió a un widget. En cualquier caso, puede proporcionar un bloque de código o un objeto Ruby Proc que especifique cómo responde la aplicación al evento o devolución de llamada.
Echemos un vistazo a cómo usar el método bind para asociar eventos básicos del sistema de ventanas con los procedimientos de Ruby que los manejan. La forma más simple de vinculación toma como entradas una cadena que indica el nombre del evento y un bloque de código que Tk usa para manejar el evento.
Por ejemplo, para capturar el evento ButtonRelease para el primer botón del mouse en algún widget, escribirías -
someWidget.bind('ButtonRelease-1') {
....code block to handle this event...
}El nombre de un evento puede incluir modificadores y detalles adicionales. Un modificador es una cadena como Shift , Control o Alt , que indica que se presionó una de las teclas modificadoras.
Entonces, por ejemplo, para capturar el evento que se genera cuando el usuario mantiene presionada la tecla Ctrl y hace clic con el botón derecho del mouse.
someWidget.bind('Control-ButtonPress-3', proc { puts "Ouch!" })Muchos widgets Ruby / Tk pueden activar devoluciones de llamada cuando el usuario los activa, y puede usar la devolución de llamada del comando para especificar que se invoca un determinado bloque de código o procedimiento cuando eso sucede. Como se vio anteriormente, puede especificar el procedimiento de devolución de llamada del comando cuando crea el widget:
helpButton = TkButton.new(buttonFrame) {
text "Help"
command proc { showHelp }
}O puede asignarlo más tarde, utilizando el método de comando del widget :
helpButton.command proc { showHelp }Dado que el método de comando acepta procedimientos o bloques de código, también puede escribir el ejemplo de código anterior como:
helpButton = TkButton.new(buttonFrame) {
text "Help"
command { showHelp }
}| No Señor. | Etiqueta y descripción del evento |
|---|---|
| 1 | "1" (one) Haga clic en el botón izquierdo del mouse. |
| 2 | "ButtonPress-1" Haga clic en el botón izquierdo del mouse. |
| 3 | "Enter" Movió el mouse hacia adentro. |
| 4 | "Leave" Movió el mouse afuera. |
| 5 | "Double-1" Doble clic. |
| 6 | "B3-Motion" Arrastre el botón derecho de una posición a otra. |
| 7 | Control-ButtonPress-3 El botón derecho se presiona junto con la tecla Ctrl . |
| 8 | Alt-ButtonPress-1 Se presiona el botón Dejar junto con la tecla Alt . |
El método de configuración
El método de configuración se puede utilizar para establecer y recuperar cualquier valor de configuración del widget. Por ejemplo, para cambiar el ancho de un botón, puede llamar al método configure en cualquier momento de la siguiente manera:
require "tk"
button = TkButton.new {
text 'Hello World!'
pack
}
button.configure('activebackground', 'blue')
Tk.mainloopPara obtener el valor de un widget actual, simplemente suminístrelo sin un valor de la siguiente manera:
color = button.configure('activebackground')También puede llamar a configure sin ninguna opción, lo que le dará una lista de todas las opciones y sus valores.
El método cget
Para simplemente recuperar el valor de una opción, configure devuelve más información de la que generalmente desea. El método cget devuelve solo el valor actual.
color = button.cget('activebackground')