Diseo de interfaces con TCL/TK en ambientes LINUX

Gabriel Gernimo Castillo Everth Hayde Rocha Trejo gcgero@nuyoo.utm.mx everth@nuyoo.utm.mx

Introduccin
Tcl (Tool Command Language) es un lenguaje de comandos interpretados, y Tk (Tool kit) es una extensin de Tcl que permite crear aplicaciones graficas de forma rpida 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 versin 8.4. Un programa Tcl no es ms 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 caractersticas ms importantes de este lenguaje es la flexibilidad para crear nuevos comandos Tcl. Si una aplicacin necesita alguna funcionalidad no ofrecida por los comandos estndar 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.

Introduccin (continuacin)
Tk surgi ante la idea de crear interfaces combinando una serie de elementos bsicos, por ejemplo: botones, etiquetas o ventanas de texto. Tk ofrece la posibilidad de desarrollar una interfaz independiente de la aplicacin, y permite adems la utilizacin del lenguaje de comandos Tcl para agrupar todos los componentes de la aplicacin y establecer la conexin con los elementos de la interfaz. Tk es un conjunto de herramientas de desarrollo para la generacin rpida de GUIs (Graphical User Interfaces). El elemento bsico 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, mens, barras de scroll, etiquetas, ventanas de texto, cuadros de dibujo (canvas). Los widgets se encuentran bajo la inspeccin del administrador de geometra encargado de controlar su posicin y tamao dentro de la pantalla. La estructura habitual de un programa Tk sigue las siguientes lneas bsicas: creacin de widgets, declaracin del administrador de ventanas que definir la presentacin de los widgets en la pantalla, y asociacin de instrucciones a eventos del ratn y/o teclado.

Introduccin (continuacin)
Razones del xito de Tcl (Tool Command Languaje)
Tcl es un lenguaje script Tcl es fcil 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 ejecucin un intrprete del lenguaje Tcl llamado tclsh (Tcl Shell). Existen dos formas de utilizar el intrprete tclsh: 1. Invocar al intrprete como un archivo de ejecucin normal, al realizar esto en la pantalla aparecer el prompt % que indicar que el intrprete esta esperando recibir instrucciones Tcl: Linux> /usr/bin/tclsh % set x 10 2. Escribir archivos completos con instrucciones Tcl, e incluir en su primera lnea la instruccin #! /usr/bin/tclsh con la cual se indica que para ejecutar el cdigo se debe utilizar el interprete tclsh.

Interpretes
El interprete Tk se llama wish, el cual adems de entender instrucciones Tcl incorpora los comandos necesarios para la creacin de GUIs. El intrprete 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 grfica. Desde la consola se podr introducir los comandos Tcl y/o Tk y en la ventana grfica se mostrar la evolucin de la interfaz. Linux> /usr/bin/wish 2. Incluir en la primera lnea del archivo del cdigo fuente: #! /usr/bin/wish para que al ejecutar el programa se llame al intrprete wish.

Intrpretes

Comandos bsicos en Tcl

set variable valor. puts $variable. append variable valores.

set a 5 puts $a append a 10

incr variable valor.

unset variable1 variable2.... array [exists|get|size] nombre

incr a
unset a set b(1) uno array exists b array get b

array size b

Estructuras de Control
Sintaxis
if { expresin} then { accin } else { accin } switch $b(1) { uno { puts valor de 1 } dos { puts valor de 2 } default { puts no puede ser} }

Ejemplo
if { $a == 0} then { puts divisin entre cero } else { set c [expr $b / $a] }

switch opciones cadena { patron1 { accion1 } patron2 { accion2 } }

Comandos de repeticin
Sintaxis for {inicio} {condicin} {incremento} {accin} for { set i 0} {$i < 10 } { incr i } { puts valor de i : $i Ejemplo

}
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 }

foreach variable $lista {accin}

Comandos de repeticin (continuacin)

Sintaxis

while {expresin} {accin}

Ejemplo 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
}

Prcticas
Prctica #1. Variables y cambio de datos en

variables.
Prctica #2. Arreglos.
Prctica #3. Control de flujo. Prctica #4. Uso de formato.

Nota: El listado de las prcticas se encuentran en el apndice A.

Introduccin a TK

Interfaz se integra de widgets Orden jerrquico (estructura de rbol)

La raz del rbol es el carcter . (ventana principal)

La ventana principal contiene a los dems widgets Cada widget tiene un nombre Ejemplo:
.menu

.
.pagina .botones

.estado
.menu.archivo .menu.insertar .botones.texto .menu.insertar.obj .botones.linea

.menu.insertar.imagen

Hola Mundo!
QT
#include <qapplication.h> #include <qpushbutton.h>

Tcl/Tk
#!/usr/bin/wish button .hola -text Hola Mundo! pack .hola

int main(int argc, char **argv){ QApplication App(argc, argv); QPushButton HolaW("Hola Mundo"); App.setMainWidget(&HolaW);

HolaW.show();

return App.exec();
}

Widgets Tk
button. Crea un botn. canvas. Dibuja una rea para los widgets checkbutton. Crea un botn 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 multilneas. radiobutton. Botn de encendido o apagado; solo
uno puede ser seleccionado.

scale. Valor mnimo o mximo. scrollbar. Barra de scroll. toplevel. Ventana de aplicacin o de dilogo.

Opciones comunes de los widgets

-activebackground color color activo de fondo.
-activeborderwidth ancho ancho del borde, en pixeles. -activeforeground color -background color widget. color activo de frente. fija el color del fondo del fija el ancho del borde, en pixeles. fija el color de frente del despliega una imagen en el despliega un bitmap en el widget:

-borderwidth ancho -foreground color

widget.

-image imagen
widget.

-bitmap bitmap

Opciones comunes de los widgets

-justify justificado Fija el justificado en multiples lneas: left, center o right -orient orientacin Fija la orientacin en horizontal o vertical -padx pad -pady pad Coloca pixeles extras en la direccin X. Coloca pixeles extras en la direccin Y.

-relief relieve ridge, solid

-state estado active -text cadena

Fija nivel 3D a flat, groove, raised, o sunken.

Fija el estado a normal, disabled o Fija el texto para el despliege

Opciones comunes de los widgets

-textvariable variable -width ancho

Variable utilizada para obtener la cadena de despliege 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
-size tamao -weight grosor

Controla el tipo de font

Tamao del font Grosor, puede ser bold o normal

-slant inclinacin italic

Inclinacin puede roman(normal) o (inclinada)

-underline booleano Verdadero para colocar lnea de bajo del texto -overstrike booleano Verdadero para colocar lnea 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 posicin_inicial cadena .entrada insert 5 Falto esto!

Widget selection clear

Prcticas
Practica #5. Botones en Tk Practica #6. Procedimientos. Practica #7. Radiobotn. Prctica #8. El widget scale.

Prctica #9. Diseo de una forma.

Nota: El listado de las prcticas se encuentran en el apndice A.

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 botn del mouse ButtonPress presion el botn del mouse ButtonRelease presion el botn del mouse, ahora fue
liberado.

Key KeyPress KeyRelease Enter Leave

presion una tecla presion una tecla presion una tecla, ahora fue liberada. el puntero del mouse esta en la ventana el puntero del mouse dejo la ventana

Motion ventana

mueve el puntero del mouse atravs de la

Modificadores de eventos

Alt
Control Shift

Tecla Alt
Tecla Control Tecla Shift

Lock
Button1 B1

Tecla Caps Lock

Primer botn del mouse Lo mismo que Button1

Button2
B2 Button3 B3 Double

Segundo botn del mouse

Lo mismo que Button2 Tercer botn del mouse Lo mismo que Button3 Uso doble click del mouse

Captura de datos del evento

%% Usado para desplegar el signo de porcentaje en el script

%b %k %x %y %A %K
Delete. El nmero del botn para los eventos del ButtonPress o ButtonRelease. Cdigo de la tecla en el evento de teclas, el valor depende del teclado y del sistema operativo. Posiscin en X. Posicin en Y. Valor ASCII de la tecla presionada. Nombre de la tecla del sistema, tal como Delete para la tecla

%N
%T

Nmero decimal de la tecla, tal como 65 para A.

Tipo de evento.

Eventos
Sintaxis bsica 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 botn 3 }

bind all <Button-1> { puts presion en %x %y} bind all <Key> { puts Tecla %K presionada}

Widget text
frame .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 mens
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....}

Prcticas
Practica #10. Ventana de dilogo. Practica #11. Barra de herramientas. Practica #12. Mens. Prctica #13. Ayuda tooltips.

Nota: El listado de las prcticas se encuentran en el apndice A.

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 opcin:

nombre_canvas create tipo x y opciones

Para eliminar un elemento del canvas nombre_canvas delete etiqueta

Para cambiar la configuracin de un elemento del canvas

Tipos de elementos en el canvas

arc nombre_canvas create arc x1 y1 x2 y2 nombre_canvas create image x y bitmap nombre_canvas create bitmap x y image

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 cdigo 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 extensin del toolkit Tk, aade nuevos

widgets, administrador de geometras, y una miscelnea de comandos.

Table. Administrador de geometra 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 cdigo Tcl Bltdebug. Se utiliza para mostrar la salida del comando

Xconq
Juego de estrategias similar a Empire/Empire

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

Bibliografa

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.