Interfaces gráficas II

Continuando con el método .GRID(), es posible estblecer la alineación que va a tener cada widget dentro de la grilla, esto se logra a través de la propiedad STICKY del método .GRID(), dicha propiedad admite las coordenadas N, S, E, W, NE, NW, SE y SW. Por sus siglas en inglés norte, sur, este, oeste, noreste, noroeste, sureste y suroeste. Veamos el siguiente ejemplo:

from tkinter import *

raiz=Tk()
raiz.title('Uso de grid')
raiz.geometry('800x600')
raiz.config(bg='dark grey')
#declaración frame
frame_raiz=Frame(raiz,width=800,height=600,borderwidth=1,relief='solid',bg='light gray')
frame_raiz.pack(expand=True,fill=BOTH,padx=2,pady=2)

#Nombre
lblEtiquetaNombre = Label(frame_raiz,text='Nombre:',bg='light gray')
lblEtiquetaNombre.grid(row=0,column=0,sticky=E)
tbCuadroNombre=Entry(frame_raiz)
tbCuadroNombre.grid(row=0,column=1,sticky=W)

#Apellido
lblEtiquetaApellido = Label(frame_raiz,text='Apellido:',bg='light gray')
lblEtiquetaApellido.grid(row=1,column=0,sticky=E)
tbCuadroApellido=Entry(frame_raiz)
tbCuadroApellido.grid(row=1,column=1,sticky=W)

#Dirección
lblEtiquetaDirección = Label(frame_raiz,text='Dirección de domicilio:',bg='light gray')
lblEtiquetaDirección.grid(row=2,column=0,sticky=E)
tbCuadroDireccion=Entry(frame_raiz)
tbCuadroDireccion.grid(row=2,column=1,sticky=W)

raiz.mainloop()

Resultado:

Como podemos comprobar ahora los elementos de tipo etiqueta estan "pegados" al este del formulario, es decir, a la derecha, y los elementos tipo cata de texto lo están a la izquierda o al oeste. También existe otra propiedad interesante para darle formato a los formularios que son las propiedades PADX y PADX, siendo éstas la distancia en el eje x e y del borde del widget al contenedor. Esto a los efectos de mejorar la legibilidad y estética del formulario. Veamos el siguiente ejemplo:


Podemos comprobar que ha mejorado muchísimo la presentación y diseño del formulario con el uso de la propiedad PADX y PADY. Otro dato interesante es que los widgets de caja de texto igualmente son configurables a través del método .CONFIG(), veamos algunas posibles combinaciones, que aunque poco estéticas, sirven para ilustrar su uso.

from tkinter import *

raiz=Tk()
raiz.title('Uso de grid')
raiz.geometry('800x600')
raiz.config(bg='dark grey')
#declaración frame
frame_raiz=Frame(raiz,width=800,height=600,borderwidth=1,relief='solid',bg='light gray')
frame_raiz.pack(expand=True,fill=BOTH,padx=2,pady=2)

#Nombre
lblEtiquetaNombre = Label(frame_raiz,text='Nombre:',bg='light gray')
lblEtiquetaNombre.grid(row=0,column=0,sticky=E,padx=2,pady=2)
tbCuadroNombre=Entry(frame_raiz)
tbCuadroNombre.grid(row=0,column=1,sticky=W,padx=2,pady=2)
tbCuadroNombre.config(fg='red',justify='left')

#Apellido
lblEtiquetaApellido = Label(frame_raiz,text='Apellido:',bg='light gray')
lblEtiquetaApellido.grid(row=1,column=0,sticky=E,padx=2,pady=2)
tbCuadroApellido=Entry(frame_raiz)
tbCuadroApellido.grid(row=1,column=1,sticky=W,padx=2,pady=2)
tbCuadroApellido.config(fg='green',justify='center')

#Dirección
lblEtiquetaDirección = Label(frame_raiz,text='Dirección de domicilio:',bg='light gray')
lblEtiquetaDirección.grid(row=2,column=0,sticky=E,padx=2,pady=2)
tbCuadroDireccion=Entry(frame_raiz)
tbCuadroDireccion.grid(row=2,column=1,sticky=W,padx=2,pady=2)
tbCuadroDireccion.config(fg='blue',justify='right')

raiz.mainloop()

Resultado:


Otra propiedad importante del método .CONFIG, usado en las cajas de texto de contraseñas es la posibildad de que se muestren caracteres diferentes a los escritos, como por ejemplo asterisco (*) en lugar de los dígitos en el caso de ingrerso de contraseñas por seguridad. Esto se logra con el uso de la propiedad SHOW. Veamos el siguiente ejemplo:


from tkinter import *

raiz=Tk()
raiz.title('Uso de grid')
raiz.geometry('800x600')
raiz.config(bg='dark grey')
#declaración frame
frame_raiz=Frame(raiz,width=800,height=600,borderwidth=1,relief='solid',bg='light gray')
frame_raiz.pack(expand=True,fill=BOTH,padx=2,pady=2)

#Nombre
lblEtiquetaNombre = Label(frame_raiz,text='Nombre:',bg='light gray')
lblEtiquetaNombre.grid(row=0,column=0,sticky=E,padx=2,pady=2)
tbCuadroNombre=Entry(frame_raiz)
tbCuadroNombre.grid(row=0,column=1,sticky=W,padx=2,pady=2)

#Apellido
lblEtiquetaApellido = Label(frame_raiz,text='Apellido:',bg='light gray')
lblEtiquetaApellido.grid(row=1,column=0,sticky=E,padx=2,pady=2)
tbCuadroApellido=Entry(frame_raiz)
tbCuadroApellido.grid(row=1,column=1,sticky=W,padx=2,pady=2)

#Dirección
lblEtiquetaDirección = Label(frame_raiz,text='Dirección de domicilio:',bg='light gray')
lblEtiquetaDirección.grid(row=2,column=0,sticky=E,padx=2,pady=2)
tbCuadroDireccion=Entry(frame_raiz)
tbCuadroDireccion.grid(row=2,column=1,sticky=W,padx=2,pady=2)

#Password
lblPass = Label(frame_raiz,text='Contraseña',bg='light gray')
lblPass.grid(row=3,column=0,sticky=E,padx=2,pady=2)
tbPass=Entry(frame_raiz)
tbPass.grid(row=3,column=1,sticky=W,padx=2,pady=2)
tbPass.config(show='*')
raiz.mainloop()


Resultado:


En este caso hemos configurado la caja de texto de contraseña para que muestre asteriscos en lugar de los dígitos tecleados por el usuario.

Text

Los widgets tipo TEXT permiten introducir textos largos.



Veamos el siguiente ejemplo:

from tkinter import *

raiz=Tk()
raiz.title('Uso de grid')
raiz.geometry('800x600')
raiz.config(bg='dark grey')
#declaración frame
frame_raiz=Frame(raiz,width=800,height=600,borderwidth=1,relief='solid',bg='light gray')
frame_raiz.pack(expand=True,fill=BOTH,padx=2,pady=2)

#Nombre
lblNombre = Label(frame_raiz,text='Nombre:',bg='light gray')
lblNombre.grid(row=0,column=0,sticky=E,padx=2,pady=2)
tbNombre=Entry(frame_raiz,width=30)
tbNombre.grid(row=0,column=1,sticky=W,padx=2,pady=2)

#Apellido
lblApellido = Label(frame_raiz,text='Apellido:',bg='light gray')
lblApellido.grid(row=1,column=0,sticky=E,padx=2,pady=2)
tbApellido=Entry(frame_raiz,width=30)
tbApellido.grid(row=1,column=1,sticky=W,padx=2,pady=2)

#Dirección
lblDireccion = Label(frame_raiz,text='Dirección de domicilio:',bg='light gray')
lblDireccion.grid(row=2,column=0,sticky=E,padx=2,pady=2)
tbDireccion=Entry(frame_raiz,width=30)
tbDireccion.grid(row=2,column=1,sticky=W,padx=2,pady=2)

#Comentarios
lblComentarios = Label(frame_raiz,text='Comentarios:',bg='light gray')
lblComentarios.grid(row=3,column=0,sticky=NE,padx=2,pady=2)
textComentarios=Text(frame_raiz,width=50,height=10)
textComentarios.grid(row=3,column=1,sticky=W,padx=2,pady=2)

#Password
lblPass = Label(frame_raiz,text='Contraseña',bg='light gray')
lblPass.grid(row=4,column=0,sticky=E,padx=2,pady=2)
tbPass=Entry(frame_raiz,width=30)
tbPass.grid(row=4,column=1,sticky=W,padx=2,pady=2)
tbPass.config(show='*')
raiz.mainloop()

Resultado:


Como se puede ver se ha mejorado un poco la estética del formulario ampliando el ancho de las cajas de texto, ademas se ha definido el tamaño del widget TEXT ya que por defecto muestra una caja de texto enorme en comparación con el ejemplo que estamos usando. Sin embargo podemos notar que este widget no tiene un scrollbar o barra de desplazamiento, comunmente usada en los cuadros de texto con multiples líneas. Para agregar un scrollbar se hace necesario el siguiente procedimiento:

from tkinter import *

raiz=Tk()
raiz.title('Uso de grid')
raiz.geometry('800x600')
raiz.config(bg='dark grey')
#declaración frame
frame_raiz=Frame(raiz,width=800,height=600,borderwidth=1,relief='solid',bg='light gray')
frame_raiz.pack(expand=True,fill=BOTH,padx=2,pady=2)

#Nombre
lblNombre = Label(frame_raiz,text='Nombre:',bg='light gray')
lblNombre.grid(row=0,column=0,sticky=E,padx=2,pady=2)
tbNombre=Entry(frame_raiz,width=30)
tbNombre.grid(row=0,column=1,sticky=W,padx=2,pady=2)

#Apellido
lblApellido = Label(frame_raiz,text='Apellido:',bg='light gray')
lblApellido.grid(row=1,column=0,sticky=E,padx=2,pady=2)
tbApellido=Entry(frame_raiz,width=30)
tbApellido.grid(row=1,column=1,sticky=W,padx=2,pady=2)

#Dirección
lblDireccion = Label(frame_raiz,text='Dirección de domicilio:',bg='light gray')
lblDireccion.grid(row=2,column=0,sticky=E,padx=2,pady=2)
tbDireccion=Entry(frame_raiz,width=30)
tbDireccion.grid(row=2,column=1,sticky=W,padx=2,pady=2)

#Comentarios
lblComentarios = Label(frame_raiz,text='Comentarios:',bg='light gray')
lblComentarios.grid(row=3,column=0,sticky=NW,padx=0,pady=2)
textComentarios=Text(frame_raiz,width=50,height=10)
textComentarios.grid(row=3,column=1,sticky=W,padx=2,pady=2)

#Scroll comentarios
scrollComentarios=Scrollbar(frame_raiz,command=textComentarios.yview)
scrollComentarios.grid(row=3,column=2,sticky='NSE',padx=0,pady=2)
textComentarios.config(yscrollcommand=scrollComentarios.set)

#Password
lblPass = Label(frame_raiz,text='Contraseña',bg='light gray')
lblPass.grid(row=4,column=0,sticky=E,padx=2,pady=2)
tbPass=Entry(frame_raiz,width=30)
tbPass.grid(row=4,column=1,sticky=W,padx=2,pady=2)
tbPass.config(show='*')
raiz.mainloop()

Resultado:


Button

Los widgets tipo Button son los clásicos botones de las interfaces gráficas. Su función básica es ejecutar comportamientos o disparar eventos cuando el usuario los pulse. Para que funciones es necesario establecer el nombre de una funcion que se va a ejecutar cuando se haga click en el botón, esto se hace al definir el botón mediante el parámetro COMMAND. En dicha función se le va a asignar a las cajas de texto los valores de sus respectivas variables a través del método SET. Es importante destacar que a la inversa, es decir para oibtener el valor de un texto de un widget tipo caja de texto, se utiliza el método GET, que se verá mas adelante. Como nota adicional vamos a establecer que los campos del formulario se llenen automáticamente al presionar el botón, para ello es necesario asociar una variable a la caja de texto al momento de definir el widget de caja de texto mediante el parámetro TEXTVARIABLE. Por último es necesario definir las variables que se van a asociar a las cajas de texto previa asociación con dichos widgets mediante la instanciación de la clase STRINGVAR().

Veamos el siguiente ejemplo:

from tkinter import *

raiz=Tk()
raiz.title('Diseño de formularios')
raiz.geometry('800x600')
raiz.config(bg='dark grey')
#declaración frame
frame_raiz=Frame(raiz,width=800,height=600,borderwidth=1,relief='solid',bg='light gray')
frame_raiz.pack(expand=True,fill=BOTH,padx=2,pady=2)

strNombre=StringVar()
strApellido=StringVar()
strDireccion=StringVar()

#Nombre
lblNombre = Label(frame_raiz,text='Nombre:',bg='light gray')
lblNombre.grid(row=0,column=0,sticky=E,padx=2,pady=2)
tbNombre=Entry(frame_raiz,width=30,textvariable=strNombre)
tbNombre.grid(row=0,column=1,sticky=W,padx=2,pady=2)

#Apellido
lblApellido = Label(frame_raiz,text='Apellido:',bg='light gray')
lblApellido.grid(row=1,column=0,sticky=E,padx=2,pady=2)
tbApellido=Entry(frame_raiz,width=30,textvariable=strApellido)
tbApellido.grid(row=1,column=1,sticky=W,padx=2,pady=2)

#Dirección
lblDireccion = Label(frame_raiz,text='Dirección de domicilio:',bg='light gray')
lblDireccion.grid(row=2,column=0,sticky=E,padx=2,pady=2)
tbDireccion=Entry(frame_raiz,width=30,textvariable=strDireccion)
tbDireccion.grid(row=2,column=1,sticky=W,padx=2,pady=2)

#Comentarios
lblComentarios = Label(frame_raiz,text='Comentarios:',bg='light gray')
lblComentarios.grid(row=3,column=0,sticky=NW,padx=0,pady=2)
textComentarios=Text(frame_raiz,width=50,height=10)
textComentarios.grid(row=3,column=1,sticky=W,padx=2,pady=2)

#Scroll comentarios
scrollComentarios=Scrollbar(frame_raiz,command=textComentarios.yview)
scrollComentarios.grid(row=3,column=2,sticky='NSE',padx=0,pady=2)
textComentarios.config(yscrollcommand=scrollComentarios.set)

#Password
lblPass = Label(frame_raiz,text='Contraseña',bg='light gray')
lblPass.grid(row=4,column=0,sticky=E,padx=2,pady=2)
tbPass=Entry(frame_raiz,width=30)
tbPass.grid(row=4,column=1,sticky=W,padx=2,pady=2)
tbPass.config(show='*')

def enviarDatos():
    strNombre.set('César')
    strApellido.set('Gamboa')
    strDireccion.set('Mi casa')
   

#Boton enviar
btnEnviar=Button(frame_raiz, text='Enviar',command=enviarDatos)
btnEnviar.grid(row=5,column=1,pady=20)

raiz.mainloop()
raiz.mainloop()

Resultado luego de hacer click en el botón:





Comentarios

Entradas populares