Diseño de interfaces con TCL/TK en ambientes LINUX Gabriel Gerónimo Castillo Everth Haydeé Rocha Trejo [email protected] [email protected]

Diseño de interfaces con TCL/TK en ambientes LINUX

Gabriel Gerónimo Castillo Everth Haydeé Rocha Trejo

[email protected]@nuyoo.utm.mx

Tcl (Tool Command Language) es un lenguaje de comandos interpretados, y Tk (Tool kit) es una extensión de Tcl que permite crear aplicaciones graficas de forma rápida y sencilla.

Tcl y Tk fueron desarrollados por John K. Ousterhout en la Universidad de California, Berkeley. Tanto Tcl como Tk se distribuyen de forma totalmente gratuita, actualmente se encuentra liberada la versión 8.4.

Un programa Tcl no es más que una serie de comandos, similares a los scripts de shell de UNIX tales como el Bourne Shell, C Shell, Korn Shell, y Perl. Una de las características más importantes de este lenguaje es la flexibilidad para crear nuevos comandos Tcl. Si una aplicación necesita alguna funcionalidad no ofrecida por los comandos estándar proporcionados por el lenguaje, es posible desarrollarlos utilizando el lenguaje C e integrarlos de forma sencilla. Éste es el principal motivo por el cual se encuentran en Internet muchas extensiones de Tcl, entre las que se encuentran: Expect, Incr Tcl /Tk, Incr Widgets, Tix, OraTcl, VisualTcl, BLT.

Introducción

Tk surgió ante la idea de crear interfaces combinando una serie de elementos básicos, por ejemplo: botones, etiquetas o ventanas de texto. Tk ofrece la posibilidad de desarrollar una interfaz independiente de la aplicación, y permite además la utilización del lenguaje de comandos Tcl para agrupar todos los componentes de la aplicación y establecer la conexión con los elementos de la interfaz. Tk es un conjunto de herramientas de desarrollo para la generación rápida de GUIs (Graphical User Interfaces). El elemento básico es el widget, el cual es una ventana con una aspecto determinado y utilizado para fines concretos en la interfaz, dentro de los widgets se encuentran los botones, menús, barras de scroll, etiquetas, ventanas de texto, cuadros de dibujo (canvas).

Los widgets se encuentran bajo la inspección del administrador de geometría encargado de controlar su posición y tamaño dentro de la pantalla. La estructura habitual de un programa Tk sigue las siguientes líneas básicas: creación de widgets, declaración del administrador de ventanas que definirá la presentación de los widgets en la pantalla, y asociación de instrucciones a eventos del ratón y/o teclado.

Introducción (continuación)

Introducción (continuación)

Razones del éxito de Tcl (Tool Command Languaje)

• Tcl es un lenguaje script

• Tcl es fácil de aprender

• Tcl trabaja en diferentes plataformas

• Tcl puede embeberse dentro de programas en C o C++

• Tcl se puede extender

• Tcl es libre

• Tcl puede trabajar en Internet

Interpretes

Un programa Tcl necesita para su ejecución un intérprete del lenguaje Tcl llamado tclsh (Tcl Shell). Existen dos formas de utilizar el intérprete tclsh:

1. Invocar al intérprete como un archivo de ejecución normal, al realizar esto en la pantalla aparecerá el prompt % que indicará que el intérprete esta esperando recibir instrucciones Tcl:

Linux> /usr/bin/tclsh

% set x 10

2. Escribir archivos completos con instrucciones Tcl, e incluir en su primera línea la instrucción

#! /usr/bin/tclsh

con la cual se indica que para ejecutar el código se debe utilizar el interprete tclsh.

El interprete Tk se llama wish, el cual además de entender instrucciones Tcl incorpora los comandos necesarios para la creación de GUIs. El intérprete wish puede usarse de dos formas:

1. Invocando el programa ejecutable wish, lo cual hará que en la pantalla tengamos dos ventanas, la consola y la ventana gráfica. Desde la consola se podrá introducir los comandos Tcl y/o Tk y en la ventana gráfica se mostrará la evolución de la interfaz.

Linux> /usr/bin/wish

2. Incluir en la primera línea del archivo del código fuente:

#! /usr/bin/wish

para que al ejecutar el programa se llame al intérprete wish.

Interpretes

Intérpretes

Comandos básicos en Tcl

• set variable valor. set a 5

• puts $variable. puts $a

• append variable valores. append a 10

• incr variable valor. incr a

• unset variable1 variable2.... unset a

• array [exists|get|size] nombre set b(1) “uno”

array exists b

array get b

array size b

Estructuras de Control Sintaxis Ejemplo

if if { expresión} then {{ expresión} then {

acciónacción

}} else else {{

acciónacción

}}

switch switch opciones cadena {opciones cadena {

patron1 { accion1 }patron1 { accion1 }

patron2 { accion2 }patron2 { accion2 }

}}

if { $a == 0} then {puts “ división entre cero” } else {set c [expr $b / $a]}

switch $b(1) {

uno { puts “valor de 1” }

dos { puts “valor de 2” }

default { puts “no puede ser”}

}

Comandos de repeticiónSintaxis Ejemplo

forfor {inicio} {condición} {incremento} {acción} {inicio} {condición} {incremento} {acción}

for { set i 0} {$i < 10 } { incr i } {

puts “valor de i : $i”

}

set lista { 1 2 3 4 5 seis siete }foreach a $lista { puts “elemento: $a”}

foreach {color num} {azul 6 rojo 2} {

puts “$color: $num”

}

foreachforeach variable $lista {acción} variable $lista {acción}

Comandos de repetición (continuación…)

set i 1; set x 10; set pro 3.332112

while { $i <= $x} {

set pro [expr $pro * $i]

puts “producto= $pro”

puts [format “producto= %4.3f” $pro]

puts [format “hex=%x octal=%o decimal%d” $i $i $i]

incr i

}

Sintaxis

whilewhile {expresión} {expresión} {acción}{acción}

Ejemplo

Prácticas

• Práctica #1. Variables y cambio de datos en variables.

• Práctica #2. Arreglos.

• Práctica #3. Control de flujo.

• Práctica #4. Uso de formato.

Nota: El listado de las prácticas se encuentran en el apéndice A.

Introducción a TK

• Interfaz se integra de widgets

• Orden jerárquico (estructura de árbol)

• La raíz del árbol es el carácter “.” (ventana principal)

• La ventana principal contiene a los demás widgets

• Cada widget tiene un nombre

Ejemplo: ..

.menu .pagina .botones .estado

.menu.archivo .menu.insertar .botones.texto .botones.linea

.menu.insertar.imagen .menu.insertar.obj

Hola Mundo!

QT#include <qapplication.h>

#include <qpushbutton.h>

int main(int argc, char **argv){

QApplication App(argc, argv);

QPushButton HolaW("Hola Mundo");

App.setMainWidget(&HolaW);

HolaW.show();

return App.exec();

}

Tcl/Tk

#!/usr/bin/wish

button .hola -text “Hola Mundo!”

pack .hola

Widgets Tk

• button. Crea un botón.

• canvas. Dibuja una área para los widgets

• checkbutton. Crea un botón para encendido o apagado.

• entry. Widget de entrada de texto.

• text. Widget de entrada de texto.

• frame. Ventana para widgets.

• label. Despliega un mensaje de texto.

• listbox. Una lista con scroll.

• Menu. Crea un menú.

Widgets Tk

• menubutton. Menú desplegable.

• message. Etiqueta de multilíneas.

• radiobutton. Botón de encendido o apagado; solo uno puede ser seleccionado.

• scale. Valor mínimo o máximo.

• scrollbar. Barra de scroll.

• toplevel. Ventana de aplicación o de diálogo.

Opciones comunes de los widgets

• -activebackground color color activo de fondo.

• -activeborderwidth ancho ancho del borde, en pixeles.

• -activeforeground color color activo de frente.

• -background color fija el color del fondo del widget.

• -borderwidth ancho fija el ancho del borde, en pixeles.

• -foreground color fija el color de frente del widget.

• -image imagen despliega una imagen en el widget.

• -bitmap bitmap despliega un bitmap en el widget: error, gray12, gray25,

gray50, hourglass, info, question, warning.

• -justify justificado Fija el justificado en multiples líneas: left, center o right

• -orient orientación Fija la orientación en horizontal o vertical

• -padx pad Coloca pixeles extras en la dirección X.

• -pady pad Coloca pixeles extras en la dirección Y.

• -relief relieve Fija nivel 3D a flat, groove, raised, ridge, solid o sunken.

• -state estado Fija el estado a normal, disabled o active

• -text cadena Fija el texto para el despliege


• -textvariable variable Variable utilizada para obtener la cadena de despliege

• -width ancho Fija el ancho.

• -xscrollcommand prefijo El prefijo es utilizado para que el comando se comunique con

las barras de scroll horizontal.

• -yscrollcommand prefijo El prefijo es utilizado para que el comando se comunique con

las barras de scroll vertical.


Opciones de fonts

• -family nombre Controla el tipo de font

• -size tamaño Tamaño del font

• -weight grosor Grosor, puede ser bold o normal

• -slant inclinación Inclinación puede roman(normal) o italic (inclinada)

• -underline booleano Verdadero para colocar línea de bajo del texto

• -overstrike booleano Verdadero para colocar línea en medio del texto.

Botones

global conta

set conta 0

button .reset -text “Click para reset” -command { global conta; set conta 0}

button .contador -textvariable conta -command incremento

pack .reset .contador -side top

proc incremento { } {

global conta

set conta [expr $conta + 1]

.reset configure -activebackground green -activeforeground red

}

Widget entry

• Widget delete 0 end

.entrada delete 0 end

• Widget icursor position

.entrada icursor 0

• Widget insert posición_inicial cadena

.entrada insert 5 “Falto esto!”

• Widget selection clear

• Practica #5. Botones en Tk

• Practica #6. Procedimientos.

• Practica #7. Radiobotón.

• Práctica #8. El widget scale.

• Práctica #9. Diseño de una forma.

Prácticas


listbox

• El widget listbox proporciona una lista de elementos que puede seleccionar el usuario.

listbox .lista –height 10 –yscrollcommand “.scroll set”

.lista insert end “Congreso”

.lista insert end “Tlaxcala”

scrollbar .scroll –command “.lista yview”

pack .scroll –side right –fill y

pack .lista –side left

Tipos de eventos

• Button presionó el botón del mouse

• ButtonPress presionó el botón del mouse

• ButtonRelease presionó el botón del mouse, ahora fue liberado.

• Key presionó una tecla

• KeyPress presionó una tecla

• KeyRelease presionó una tecla, ahora fue liberada.

• Enter el puntero del mouse esta en la ventana

• Leave el puntero del mouse dejo la ventana

• Motion mueve el puntero del mouse através de la ventana

• Destroy la ventana es destruida

Modificadores de eventos• Alt Tecla Alt

• Control Tecla Control

• Shift Tecla Shift

• Lock Tecla Caps Lock

• Button1 Primer botón del mouse

• B1 Lo mismo que Button1

• Button2 Segundo botón del mouse


• Button3 Tercer botón del mouse


• Double Uso doble click del mouse

Captura de datos del evento• %% Usado para desplegar el signo de porcentaje en el script

• %b El número del botón para los eventos del ButtonPress o ButtonRelease.

• %k Código de la tecla en el evento de teclas, el valor depende del teclado y del sistema operativo.

• %x Posisción en X.

• %y Posición en Y.

• %A Valor ASCII de la tecla presionada.

• %K Nombre de la tecla del sistema, tal como “Delete” para la tecla Delete.

• %N Número decimal de la tecla, tal como 65 para “A”.

• %T Tipo de evento.

• %W Ventana (widget) en el cual el evento fue reportado.

Eventos

• Sintaxis básica de bind

bind all/widget/tag <evento> instrucciones

• bind . <Control-v> { puts “pegar”}

• bind all <Control-Alt-Key-Delete> { puts “kill of window”}

• bind all <Button-3> { puts “presionó el botón 3” }

• bind all <Button-1> { puts “presionó en %x %y”}

• bind all <Key> { puts “Tecla %K presionada”}

Widget textframe .uno

text .uno.texto –yscrollcommand “.uno.texto set”

scrollbar .uno.scroll –command “.uno.texto yview”

# desplegamos primero el scrollbar

pack .uno.scroll –side rigth –fill y

pack .uno.texto –side left

pack .uno –side top

Despliegue de menús

menubutton .archivo -text “Archivo” -menu .archivo.menu

pack .archivo -side left

menu .archivo.menu

.archivo.menu add command -label “Nuevo” -command {puts “nuevo”}

.archivo.menu add command -label “Abrir” -command {puts “abrir”}

.archivo.menu add separador

.archivo.menu add command -label “Guardar” -command {puts “guardar”}

.archivo.menu add command -label “Guardar como...” \

command { puts “Guardar como....”}

• Practica #10. Ventana de diálogo.

• Practica #11. Barra de herramientas.

• Practica #12. Menús.

• Práctica #13. Ayuda tooltips.

Prácticas


Canvas widget

• Para crear una canvas se usa el comando:

canvas .can [-width x -height y ]

pack .can

• Para crear elementos dentro del canvas se utiliza la opción:

nombre_canvas create tipo x y opciones

• Para eliminar un elemento del canvas

nombre_canvas delete etiqueta

• Para cambiar la configuración de un elemento del canvas

nombre_canvas itemconfigure etiqueta opciones

Tipos de elementos en el canvas

• arc nombre_canvas create arc x1 y1 x2 y2

• bitmap nombre_canvas create bitmap x y

• image nombre_canvas create image x y

• line nombre_canvas create line x1 y1 x2 y2 . . .

• oval nombre_canvas create oval x1 y1 x2 y2

• polyg nombre_canvas create polygon x1 y1 x2 y2 . . .

• rectangle nombre_canvas create rectangle x1 y1 x2 y2

• text nombre_canvas create text x y

• window nombre_canvas create window x y

Visual TCL

• 100% Tcl/Tk y genera código en Tcl/Tk.

• Interfaz GUI para mayores aspectos de desarrollo en Tcl/Tk

• Nuevas caracteristicas de widgets: combo box, multicolumn listbox, progress bar.

• Incluye componentes predefinidos: scrolled text, scrolled listbox, scrolled canvas.

http://vtcl.sourceforge.net/

Visual TCL

BLT

• BLT es una extensión del toolkit Tk, añade nuevos widgets, administrador de geometrías, y una miscelánea de comandos.

• Table. Administrador de geometría basado en tablas para Tk.• Graph. Un widget para graficar X-Y.• Barchart. Un widget para barras.• Vector. Crea un vector de valores punto flotante.• Bgexec. Utilizado para verificar el estado de los subprocesos.• Watch. Utilizado para el trazado o depurado de código Tcl• Bltdebug. Se utiliza para mostrar la salida del comando Tcl

antes de su ejecuciòn.

http://www.tcltk.com/blt/index.html

Xconq• Juego de estrategias similar a Empire/Empire

http://sources.redhat.com/xconq/

Bibliografía

• Graphical Applications with Tcl&Tk, Eric Foster, M&T Books.

• Practical Programming Tcl and Tk, Brent B. Welch, Prentice Hall.

• Programmer's Reference Tcl/Tk, Christopher Nelson, McGraw Hill.

• Building Network Management Tools with Tcl/Tk, Dave Zeltserman, Prentice Hall.

• [Incr TclTk] from the ground Up. The Accelerated track for professional programmers, Chad Smith, Osborne.

Documents

Diseño de interfaces con TCL/TK en ambientes LINUX Gabriel Gerónimo Castillo Everth Haydeé Rocha Trejo [email protected] [email protected]