Etiqueta, cuadro de texto, y, boton

Una label o etiqueta, nos va a permitir mostrar texto, pero, no se puede borrar ni arrastrar, es un texto estático.

Vamos a crear un nuevo programa, con las siguientes líneas, que hemos usado antes, donde nos traemos la biblioteca tkinter, creamos una variable e igualamos a Tk(), damos un tamaño, y, empaquetamos.

Creamos una variable, igualamos a la clase label, que tiene dos argumentos, que es contenedor, que es donde vamos a colocar la etiqueta, en este caso, podemos ponerla en raíz o en frame1, el siguiente argumento es opciones, que puede tener muchas, como argumento contenedor, ponemos la frame1, como argumento opciones, ponemos text, e igualamos entre comillas dobles al texto a poner.

Antes de poder ejecutar este ejemplo tendremos que declarar este widget dándole una ubicación, si no lo hacemos, nuestra etiqueta no aparecerá, existe, pero no se ve, podemos hacerlo de tres formas, que es usando pack, grid o place, vamos a hacerlo con pack().

Ejecutamos y vemos la etiqueta.

Pero, vemos que la interfaz se ha ajustado a la etiqueta, pues, en vez de pack() vamos a usar place, que tiene dos argumento “x” e “y”, donde indicamos la posición, como sigue:

Vemos como ahora respeta las dimensiones de la ventana, y, el titulo ha sido posicionado.

x=120 es la distancia que hay en pixeles, desde el lado izquierdo hasta el texto, e, y=120 es la distancia que hay desde el borde superior hasta el texto.

Para añadir un color al texto, después del texto, ponemos coma, usamos “fg” e igualamos a un color.

Para cambiar el tipo de letra, usamos font, que tiene dos argumentos, que es el tipo de letra entre comillas dobles, y, el tamaño, como sigue:

Si solo ponemos el tamaño, y, no el tipo de letra aumenta el tamaño de la letra manteniendo el tipo de letra.

Tenemos el método cget que nos permite obtener el valor pasado a un widget, como puede ser el color de fondo (background), el tipo de borde (relief), o, el texto (text).

Vamos a añadir una línea para que imprima el texto de la etiqueta, como sigue:

Pulsamos F5, y, además de presentar la interfaz, vemos en la ventana de terminal el texto de la etiqueta.

Pero, no es la mejor forma de trabajar con widgets, ya que tenemos que estar indicando la posición de cada widget, cosa que puede ser complicada, entonces, en vez de place, podemos usar grid, tiene dos argumentos que son row (fila) y column (columna), tanto la fila como la columna empiezan a contar desde cero, quiere decir que la primera fila, y, la primera columna es 0.

Vamos a sustituir place, por grid, como argumento row, ponemos 0, y, como argumento column, también, ponemos 0.

Cuadro de texto

Para insertar un cuadro de texto, debemos de usar la clase entry, creamos una variable, e, igualamos a Entry, abrimos y cerramos paréntesis.

En la siguiente línea, ponemos el nombre de la variable, ponemos grid, como argumento row, ponemos 0, porque se va a colocar en la misma fila que la etiqueta, como argumento column, ponemos 1, para que aparezca a continuación de label.

Pulsamos F5, y, vemos la etiqueta junto con el cuadro de texto.

Voy a agregar un color de fondo (bg), además voy a deshabilitar el cuadro de texto.

Si en vez de “bg” usamos “fg”, damos color al texto del cuadro de texto, como sigue:

 Si queremos que el cuadro de texto no este habilitado, usamos state e igualamos a disabled.

He cambiado el texto de etiqueta a Nombre, y, he quitado Font.

Añadimos una etiqueta más, la colocamos en la fila 1, columna 0, y, un cuadro de texto, que colocamos en la fila 1 y columna 1.

Ejecutamos y vemos como debajo de etiqueta aparece etiqueta2 junto con el cuadro de texto.

Al cambiar fila de etiqueta2 a 0, columna a 2, fila de texto2 lo cambiamos a 0, y, como columna, ponemos 3, aparecerán uno al lado de otro.

Volvemos a dejar los valores anteriores.

Lo siguiente va a ser justificar las etiquetas a la derecha, para ello, en cada etiqueta, añadimos una línea, usamos config, dentro de config, usamos justify e igualamos a right.

También, podíamos usar el método sticky dentro de grid, donde debemos de indicar donde posicionar el texto, que puede ser el punto cardinal norte (n), el punto cardinal sur (s), el punto cardinal este (e), y, el punto cardinal oeste (w), lo normal es que usemos los puntos cardinales norte y sur, es decir, alinear a la derecha o a la izquierda.

Estos puntos cardinales tienen puntos intermedios, que son noreste (ne), sureste (se), suroeste (sw), y, noroeste (nw).

Estos comandos que usamos para el cuadro de texto, lo podemos usar también para etiquetas.

Vemos que la etiqueta y el cuadro de texto aparecen demasiado juntos, lo mismo pasa con los bordes, queremos dejar una separación entre la etiqueta y el cuadro de texto, y, con los bordes, para ello, debemos de usar pady, espacio en vertical, que especifican (en píxeles) los márgenes externos e internos de un elemento, voy a dejar una separación entre etiqueta, y, etiqueta2, para ello, en la línea de grid de etiqueta, añadimos pady e igualamos a 5.

Ahora, voy a dejar una separación entre la etiqueta y el cuadro de texto, para ello, agrego padx, espacio en horizontal, e igual, por ejemplo, a 10.

Añado la misma línea a etiqueta2.

Ahora, voy a añadir padx a texto y texto2 con el valor de 5, para separar dichos cuadros del contorno.

Voy a añadir una etiqueta y un cuadro de texto más.

Ya podemos introducir datos en los cuadros de textos.

Botones                                                         

Los botones pueden contener texto o imágenes y se les puede asociar funciones o métodos, cuando hacemos clic en dicho botón llama a dicho método o función, solo puede utilizarse un tipo de fuente, pero, puede ocupar varias líneas, veamos cómo crear un botón.

Vamos a ver un ejemplo simple, nos traemos tkinter, creamos una modulo, e, imprimimos Excelente.

Creamos una variable e igualamos a Tk().

Creamos una variable, igualamos a Button, abrimos paréntesis, como primer argumento ponemos la variable raíz, que es donde se va a colocar el botón, como segundo argumento ponemos text, y, entre comillas dobles, ponemos el texto a ver, como tercer argumento ponemos command e igualamos al módulo creado, quiere decir que cuando hagamos clic en el botón, ejecutara el módulo “aa”, y, empaquetamos.

Pulsamos F5, hacemos clic en el botón, y, vemos que en la ventana de terminal aparece Excelente.

Volvemos al ejemplo anterior.

Creamos una variable, igualamos a Button, abrimos paréntesis, ponemos la variable raíz, que es donde se va a colocar el botón, ponemos text, y, entre comillas dobles, ponemos un texto.

Empaquetamos.

Pulsamos F5 y vemos el botón.

Dentro de pack, agrego pady e igual a 20, para crear una separación entre el ultimo cuadro de texto.

Antes de crear la variable botón, voy a crear un módulo, y, voy a deshabilitar los cuadros de texto, cuando hagamos clic en el botón, para ello, usamos state de config, y, añadimos commad igual al nombre del módulo creado, como sigue:

Pulsamos F5, introducimos datos, hacemos clic en el botón, y, vemos como los cuadros de textos quedan deshabilitados.

Para pasar de un cuadro a otro podemos pulsar la tecla de tabular.

Ahora, quiero que al pulsar el botón ponga como nombre José Luis, sin teclear nada, para ello, vamos a crear una variable llamada nombre y le asigno como tipo de datos StringVar(), que contiene una cadena de datos donde podemos establecer el valor del texto y recuperarlo, podemos pasar esta variable al parámetro textvariable para un widget como Entry.

Vamos al módulo creado (bb), y, añadimos una primera línea, donde ponemos el nombre de la variable creada, ponemos set, este método asigna un valor a una variable, entre paréntesis, y, entre comillas dobles, ponemos José Luis.

Vamos a la línea texto=Entry(frame1), ponemos coma, ponemos textvariable e igualamos a la variable nombre, quiere decir que va a poner el nombre de la variable nombre.

Pulsamos F5 y al pulsar en el botón vemos como pone José Luis y se deshabilita.

Vamos a justificar el nombre al centro, para ello, añadimos justify a config, e, igualamos a center.

Miguel Angel Franco