¡Descarga Python (Tkinter) para comenzar y más Guías, Proyectos, Investigaciones en PDF de Introducción a Ingeniería Software solo en Docsity!
RESUMEN INTERFAZ GRÁFICA
PRIMERA PARTE
3 Noviembre del 2010
Autor: Grupo 50, Segundo Semestre 2010 (Sede San Carlos)
1. Introducción:
Este tutorial no está hecho para seguirlo al pie de la letra solo son algunas cosas básicas que debemos entender para poder trabajar con ventanas y para dar un pequeño salto desde la cónsola a la interfaz. Recordemos que somos la primera generación en el TEC que recibe Python, por lo que el tutorial es meramente experimental, y puede contener cosas que no son del todo correctas. Se tratará de mostrar cómo se trabaja desde ciertos puntos de vista, y el usuario se encargará de desarrollar su propia forma de construir la interfaz.
2. El Módulo que usaremos
Un módulo se puede importar en Python. Existen diferentes formas de crear módulos, y de importarlos. Un módulo puede ser un archivo .py, o todo un conjunto de archivos que interactúan con el sistema operativo y la máquina en general.
Por ejemplo el módulo time obtiene datos sobre la fecha, el módulo os obtiene datos sobre el sistema operativo.
Python ya viene con varios módulos integrados, sin embargo nosotros podemos buscar en internet y descargar otros más.
Para construir interfaz gráfica en Python se pueden utilizar varios módulos. Se pueden descargar módulos para crear la interfaz de la forma que más nos guste.
Para este manual, usaremos el módulo Tkinter, porque ya viene instalado en Python y es con el que hemos trabajado, y bastará para darse una idea de cómo se trabaja en Python con interfaz gráfica.
En algunas versiones de Linux no viene instalado el módulo Tkinter, entonces debemos escribir en la cónsola: sudo apt-get install python-tk
Mientras que la versión que uno se descarga para Windows ya lo trae.
3. El IDE (El software que usaremos para programar)
Bien, ahora necesitamos un IDE, que es donde programaremos. Yo personalmente he utilizado Eclipse, Netbeans, el que trae Python por defecto, uno que se llama Pycharm que es de pago (Lo cual en cierto modo representa un problema) y al final he dado con uno que en lo personal me agrada y se llama Pyscripter. La verdad me parece la alternativa más indicada para programar en Python (Tomando en cuenta que no realizaremos un super programa empresarial, si no simples prácticas)
En google pueden buscar y encontrarán versiones para varios sistemas operativos.
Si no, pueden utilizar cualquiera que gusten.
4. Importando el módulo
Para importar un módulo en Python escribimos
import nombredelmodulo
Otra forma de hacerlo es
from Tkinter import * # Importa el módulo
v0 = Tk() # Tk() Es la ventana principal v0.config(bg="black") # Le da color al fondo
v0.mainloop() # Es el evento que llama al inicio de nuestro programa. Siempre lo lleva la ventana principal.
Ejemplo 3:
Una forma de controlar el tamaño de la ventana sería el siguiente:
from Tkinter import * # Importa el módulo
v0 = Tk() # Tk() Es la ventana principal v0.config(bg="black") # Le da color al fondo v0.geometry("500x500") # Cambia el tamaño de la ventana
v0.mainloop() # Es el evento que llama al inicio de nuestro programa. Siempre lo lleva la ventana principal.
Ejemplo 4:
Bueno como habrán visto, declaramos una variable llamada v0, del tipo Tk().
Además de Tk(), podemos declarar más variables
Toplevel: Crea una nueva ventana Frame: Coloca los páneles para ordenar los elementos Canvas: Para dibujar y graficar funciones etc.. Button: Para colocar un botón Label: Coloca un texto Message: Coloca un texto Entry: Coloca una entrada de texto de una linea Text: Coloca una entrada de texto de varias lineas Listbox: Coloca una lista con elementos clickeables Menú: Coloca un menú que puede contener cascadas y elementos clickeables
Existe toda una mecánica para agregar elementos a una ventana. Además de todo esto se pueden colocar imágenes y otras cosas. Por el momento estos controles básicos son los que aprenderemos a utilizar:
Ejemplo 5:
Vamos a crear una ventana de tipo Toplevel. En Python ocurre algo curioso, todas las ventanas creadas se abren al mismo tiempo. Por eso cuando creamos una ventana del tipo Toplevel, debemos ocultarla. Veamos un ejemplo:
from Tkinter import * # Importa el módulo
v0 = Tk() # Tk() Es la ventana principal v0.config(bg="black") # Le da color al fondo v0.geometry("500x500") # Cambia el tamaño de la ventana
v1=Toplevel(v0) # Crea una ventana hija
v0.mainloop() # Es el evento que llama al inicio de nuestro programa. Siempre lo lleva la ventana principal.
from Tkinter import * # Importa el módulo
v0 = Tk() # Tk() Es la ventana principal v0.config(bg="black") # Le da color al fondo v0.geometry("500x500") # Cambia el tamaño de la ventana b1=Button(v0,text="ABRIR VENTANA V1") # Primer botón b1.pack() # El botón es cargado
v1=Toplevel(v0) # Crea una ventana hija
v1.withdraw() # Oculta la ventana v v0.mainloop() # Es el evento que llama al inicio de nuestro programa. Siempre lo lleva la ventana principal.
Ese botón no tiene ningún evento, además fue cargado con el método .pack. Lo podemos cargar con el método .grid
Son dos formas distintas de cargar un botón. En vez de la primera forma: b1=Button(v0,text="ABRIR VENTANA V1") # Primer botón b1.pack() # El botón es cargado
Pudimos haberlo escrito de esta otra forma: b1=Button(v0,text="ABRIR VENTANA V1").pack()
En una sola línea. O de esta otra forma: b1=Button(v0,text="ABRIR VENTANA V1") # Primer botón b1.grid(row=1,column=1) # El botón es cargado
Y esta otra forma: b1=Button(v0,text="ABRIR VENTANA V1").grid(row=1,column=1) # El botón es cargado
Hay diversas formas de cargar los botones y que se ajustan a nuestro gusto y forma de hacer las cosas.
Ahora vamos a mostrar la otra ventana.
Primero creamos una función llamada mostrar
def mostrar(ventana): ventana.deiconify()
El método deiconify muestra la ventana que había sido oculta por withdraw(). Además una función para ocultar podría ser
def ocultar(ventana): ventana.withdraw()
Con solo estas dos funciones ya podemos mostrar y ocultar la ventana 1. vamos a agregar otro botón más y todo junto queda de la siguiente forma:
from Tkinter import * # Importa el módulo
v0 = Tk() # Tk() Es la ventana principal v1=Toplevel(v0) # Crea una ventana hija
def mostrar(ventana): ventana.deiconify() def ocultar(ventana):ventana.withdraw() def ejecutar(f): v0.after(200,f)
v0.config(bg="black") # Le da color al fondo v0.geometry("500x500") # Cambia el tamaño de la ventana
b1=Button(v0,text="ABRIR VENTANA V1",command=lambda: ejecutar(mostrar(v1))) # Primer botón b1.grid(row=1,column=1) # El botón es cargado b2=Button(v0,text="OCULTAR VENTANA V1",command=lambda: ejecutar(ocultar(v1))) # Segundo botón b2.grid(row=1,column=2) # El botón es cargado
def mostrar(ventana): ventana.deiconify() # Muestra una ventana def ocultar(ventana):ventana.withdraw() # Oculta una ventana def ejecutar(f): v0.after(200,f) # Una forma alternativa de ejecutar una función
v0.config(bg="black") # Le da color al fondo v0.geometry("500x500") # Cambia el tamaño de la ventana
b1=Button(v0,text="ABRIR VENTANA V1",command=lambda: ejecutar(mostrar(v1))) # Primer botón b1.grid(row=1,column=1) # El botón es cargado b2=Button(v0,text="OCULTAR VENTANA V1",command=lambda: ejecutar(ocultar(v1))) # Segundo botón b2.grid(row=1,column=2) # El botón es cargado
v1.withdraw() # Oculta la ventana v 1 v0.mainloop() # Es el evento que llama al inicio de nuestro programa. Siempre lo lleva la ventana principal. Vemos que apareció: Una nueva función llamada ejecutar ¿v0.after? ¡¿Qué es eso?! ¿Porqué el command de los botones tiene lambda dos puntos ejecutar y la función dentro de mostrar?
Esto fue así, porque hice varias pruebas y esta fué la mejor forma que encontré para que todo funcionara bien (Se testeó la interfaz en Windows XP).
Otra cosa que noté es que la interfaz de vez en cuando no actúa de la misma forma en Windows que en las distros de Linux (Por ejemplo Ubuntu o Kubuntu).
Ya por ejemplo si yo quiero centrar una ventana de Python en windows, utilizo esta función:
def centrar(ventana): ventana.update_idletasks() w=ventana.winfo_width() h=ventana.winfo_height() extraW=ventana.winfo_screenwidth()-w extraH=ventana.winfo_screenheight()-h ventana.geometry("%dx%d%+d%+d" % (w,h,extraW/2,extraH/2))
Si escribimos el nombre de la ventana, entonces la centrará, pero en Windows, porque en Ubuntu desconfigura todo el tamaño de la ventana.
En cuánto a las preguntas de más arriba. La función llamada ejecutar, y lo de v0.after, es acerca de lo mismo. ¿Qué es lo que hace la ventana ejecutar?
Lo que hace es que pasados dos milisegundos en un momento dado del tiempo, ejecuta f. f es el nombre de una función que queremos ejecutar.
Por ejemplo abre una ventana, como se vió anteriormente.
Y para qué es el lambda? No estoy muy seguro pero es absolutamente necesario usarlo, además lambda permite que un botón ejecute dos eventos al mismo tiempo.
Ejemplo 7:
Por ejemplo si queremos mostrar una ventana y también imprimir hola, sería de la siguiente forma:
from Tkinter import * # Importa el módulo
v0 = Tk() # Tk() Es la ventana principal v1=Toplevel(v0) # Crea una ventana hija
v0.geometry("500x500") # Cambia el tamaño de la ventana
**b1=Button(v0,text="ABRIR VENTANA V1",command=lambda: ejecutar(mostrar(v1)) or imprimir("hola") or imprimir("tercera función"))
Primer botón
b1.grid(row=1,column=1) # El botón es cargado b2=Button(v0,text="OCULTAR VENTANA V1",command=lambda: ejecutar(ocultar(v1))) # Segundo botón b2.grid(row=1,column=2) # El botón es cargado**
v1.withdraw() # Oculta la ventana v 1 v0.mainloop() # Es el evento que llama al inicio de nuestro programa. Siempre lo lleva la ventana principal.
Con el lambda y los dos puntos, mezclado con la función ejecutar, podemos ejecutar varios eventos al mismo tiempo separados por or.
Ejemplo 9:
Ahora, no sé si lo habrán notado, pero cuando cerramos la ventana, tira error, pero cuando la ocultamos no nos da error. Yo la solución que le encontré a esto, fue quitando la opción de cerrar ventana, y colocando un botón salir en cada ventana. Para realizar eso se hace lo siguiente:
from Tkinter import * # Importa el módulo
v0 = Tk() # Tk() Es la ventana principal v1=Toplevel(v0) # Crea una ventana hija v1.protocol("WM_DELETE_WINDOW", "onexit") # Elimina la opción de salir para evitar el error
def mostrar(ventana): ventana.deiconify() # Muestra una ventana def ocultar(ventana):ventana.withdraw() # Oculta una ventana def ejecutar(f): v0.after(200,f) # Una forma de ejecutar las funciones
def imprimir(texto): print texto # Imprime un texto
v0.config(bg="black") # Le da color al fondo v0.geometry("500x500") # Cambia el tamaño de la ventana
**b1=Button(v0,text="ABRIR VENTANA V1",command=lambda: ejecutar(mostrar(v1)) or imprimir("hola") or imprimir("tercera función"))
Primer botón
b1.grid(row=1,column=1) # El botón es cargado b2=Button(v1,text="OCULTAR VENTANA V1",command=lambda: ejecutar(ocultar(v1))) # Segundo botón b2.grid(row=1,column=2) # El botón es cargado**
b3=Button(v0,text="SALIR",command=lambda: ejecutar(ocultar(v1))) b3.grid(row=1,column=2) # El botón es cargado
v1.withdraw() # Oculta la ventana v 1 v0.mainloop() # Es el evento que llama al inicio de nuestro programa. Siempre lo lleva la ventana principal.
Ejemplo 10:
Otro truco interesante es evitar que una ventana pueda redimencionarse (Cambiar el tamaño de una ventana). Con lo siguiente se puede realizar:
from Tkinter import * # Importa el módulo
v0 = Tk() # Tk() Es la ventana principal v1=Toplevel(v0) # Crea una ventana hija v1.protocol("WM_DELETE_WINDOW", "onexit") # Elimina la opción de salir para evitar el error v0.resizable(0,0) # Evita que la ventana se pueda cambiar de tamaño v1.resizable(0,0) # Evita que se le pueda cambiar de tamaño a la ventana
def mostrar(ventana): ventana.deiconify() # Muestra una ventana
Con una lectura de los manuales de Tkinter se deberían poder solucionar algunas de estas irregularidades, entre otras más que se podrían comentar más adelante.
7. ELEMENTOS PADRES Y ELEMENTOS HIJOS
Tomando en cuenta todos los primeros 6 puntos, ahora vamos a analizar la interfaz por el lado de lo que son los elementos hijos de otros, cuál es el padre de un elemento, etcétera. Generalmente cuando trabajamos con Tkinter, el elemento padre es el primer argumento que recibe un objeto gráfico. El elemento Tk() no tiene ningún padre. Si declaramos una variable
v0 = Tk()
Entonces v0 es un Tk(), que es la ventana principal, y entre paréntesis no recibe ningún argumento. Pero si queremos introducir un elemento dentro de v0, dicho elemento debe saber que su padre es v0.
En el siguiente ejemplo se crean dos ventanas, la ventana principal del tipo Tk() y una ventana hija del tipo Toplevel().
La ventana Toplevel() es hija de la ventana Tk() Luego creamos un botón en cada ventana. Lo que querría decir que uno de los botones tiene como padre a la ventana Tk() y el
otro botón tiene como padre a la ventana del tipo Toplevel()
Ejemplo 11:
A continuación se presenta el ejemplo
from Tkinter import *
v0=Tk() v1=Toplevel(v0)
def mostrar(ventana): ventana.deiconify() def ocultar(ventana):ventana.withdraw() def ejecutar(f): v0.after(200,f)
b1=Button(v0,text="TERMINAR APLICACIÓN",command=v0.destroy).pack() b2=Button(v1,text="OCULTAR VENTANA",command=lambda: ejecutar(ocultar(v1))).pack()
v0.mainloop()
test1=programa() test1.run()
Se implementa todo lo visto anteriormente pero a manera de objetos.
9. PROPIEDADES DE LOS CONTROLES (Parte 1)
Ya habíamos hablado de las ventanas Tk y Toplevel y de los controles Label, Button, Listbox, Scrollbar Entry, Text, Frame, Canvas, entre otros.
Pero, cómo se usan? Cómo se introduce un elemento en un Listbox? Cómo se le cambia el color de fondo y de letra a las cosas?
Label
Para el label se puede declarar una variable de tipo StringVar()
Ejemplo 13:
En este ejemplo, nos abre con raw_input un espacio para que escribamos algo. Luego simplemente imprimimos eso en un control de tipo Label, todo lo que tenemos que hacer es setear la variable de tipo StringVar(). De la siguiente manera:
from Tkinter import *
v0=Tk() mitexto=StringVar() label1=Label(v0,textvar=mitexto).pack()
escribir=raw_input("") mitexto.set(escribir)
v0.mainloop()
Como se puede ver en el ejemplo anterior, para darle valor a una variable del tipo StringVar() se escriba variable.set(texto).
Ejemplo 14: En el siguiente ejemplo veremos como se puede obtener valor de una variable de tipo StringVar(), utilizando variable.get()
from Tkinter import *
v0=Tk() v0.geometry("200x60")
def cambiar_stringvar(nuevotexto,stringvar): stringvar.set(nuevotexto)
mitexto=StringVar() textoentry=StringVar() entry1=Entry(v0,textvar=textoentry).pack() label1=Label(v0,textvar=mitexto).pack() b1=Button(v0,text="Escribir",command=lambda: cambiar_stringvar(textoentry.get(),mitexto)).pack()
v0.mainloop()
