Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tkinter - p.1

Tkinter - p.1

GUI con Tkinter y Python

Diego Codevilla

May 01, 2022
Tweet

More Decks by Diego Codevilla

Other Decks in Programming

Transcript

  1. tkinter • Es un "toolkit" para desarrollar GUI (graphical user

    interface) o interfaz gráfica de usuario. • Es el GUI estándar de Python; se incluye con la mayoría de las distribuciones de Python. • Otros: wxPython, PyQt, Kivy, etc.
  2. tkinter ventana raíz ("top-level window") cuadro de texto ("Entry") check-box

    ("Checkbutton") botón ("Button") etiqueta / texto estático ("Label") Cuadro de diálogo ("MessageBox") • Algunos elementos comunes de una GUI (en azul, cómo se denominan en tkinter)
  3. tkinter • Los elementos que forman la interfaz con el

    usuario se llaman "Widgets" Los widgets básicos incluidos en tkinter: - Contenedores (pueden contener otros widgets): frame, labelframe, toplevel, paned window - Botones: button, radiobutton, checkbutton (checkbox), menubutton. - Texto: label, message, text - De entrada: scale, scrollbar, listbox, slider, spinbox, entry, optionmenu, text - Gráficos y dibujos: canvas
  4. tkinter También incluye: - Cuadros de diálogo: ◦ messagebox (confirmation,

    information, warning, error ◦ filedialog ◦ colorchooser (colour picker). - Exclusivos de "Themed Tk": combobox, progressbar y treeview
  5. tkinter - Para hacer una aplicación los pasos son: 1.

    pensar y hacer el boceto de lo que queremos hacer 2. import tkinter 3. Crear una ventana raíz 4. Crear los widgets 5. Ubicar los widgets en la ventana raíz 6. Ejecutar mainloop()
  6. Boceto 9 d.codevilla - CC-BY-SA - v1.0 / 2020-05 1.

    pensar y hacer el boceto de lo que queremos hacer 1.Escribimos un nombre... 2. ...presionamos el botón... 3. Saluda en un pop-up (un cuadro de diálogo, dialog-box o messagebox) Si el checkbox está marcado, le agrega :) al saludo...
  7. Boceto Button Entry Label Checkbutton 10 d.codevilla - CC-BY-SA -

    v1.0 / 2020-05 dividimos el boceto en filas (rows) y columnas (columns) para posicionar cada widget en una "celda" 1. pensar y hacer el boceto de lo que queremos hacer (marcar filas y columnas)
  8. Código # importamos los módulos que necesitamos: tkinter... import tkinter

    # ...y messagebox para el cuadro de mensaje from tkinter import messagebox 11 d.codevilla - CC-BY-SA - v1.0 / 2020-05 2. import tkinter
  9. Código # ventana principal (raíz / root) # va a

    contener el resto de los widgets top = tkinter.Tk() # le cambiamos el título top.title("Saludador") 12 d.codevilla - CC-BY-SA - v1.0 / 2020-05 3. Crear una ventana raíz
  10. Código # botón btnSaludar = tkinter.Button(top, text="Saludar") # texto estático

    (Label) lblAQuien = tkinter.Label(top, text = "¿A quién saludamos?") # entrada de texto (Entry) txtNombre = tkinter.Entry(top) # checkbutton chkSonrisa = tkinter.Checkbutton(top, text = "Agregar :)", height = 3) 13 d.codevilla - CC-BY-SA - v1.0 / 2020-05 4. Crear los widgets
  11. Código # posiciona cada widget en columna y la fila

    correspondiente # Label en fila 0, columna 0 (columnspan = 2 porque ocupa dos columnas) lblAQuien.grid(row=0, column=0, columnspan=2) # Entry en fila 1, columna 0 txtNombre.grid(row=1, column=0) # Botón en fila 1, columna 1 btnSaludar.grid(row=1, column=1) # Botón en fila 2, columna 0 (columnspan = 2 porque ocupa dos columnas) chkSonrisa.grid(row=2, column=0, columnspan=2) 14 d.codevilla - CC-BY-SA - v1.0 / 2020-05 5. Ubicar los widgets en la ventana raíz
  12. Código completo (v.1) # importamos los módulos que necesitamos: tkinter...

    import tkinter # ...y messagebox para el cuadro de mensaje from tkinter import messagebox # ventana principal (raíz / root) # va a contener el resto de los widgets top = tkinter.Tk() # le cambiamos el título top.title("Saludador") # botón btnSaludar = tkinter.Button(top, text="Saludar") 16 d.codevilla - CC-BY-SA - v1.0 / 2020-05
  13. Código completo (v.1) # texto estático (Label) lblAQuien = tkinter.Label(top,

    text = "¿A quién saludamos?") # entrada de texto (Entry) txtNombre = tkinter.Entry(top) # checkbutton chkSonrisa = tkinter.Checkbutton(top, text = "Agregar :)") # posiciona cada widget en columna y la fila correspondiente # Label en fila 0, columna 0 (columnspan = 2 porque ocupa dos columnas) lblAQuien.grid(row=0, column=0, columnspan=2) # Entry en fila 1, columna 0 txtNombre.grid(row=1, column=0) 17 d.codevilla - CC-BY-SA - v1.0 / 2020-05
  14. Código completo (v.1) # Botón en fila 1, columna 1

    btnSaludar.grid(row=1, column=1) # Botón en fila 2, columna 0 (columnspan = 2 porque ocupa dos columnas) chkSonrisa.grid(row=2, column=0, columnspan=2) # queda esperando eventos top.mainloop() 18 d.codevilla - CC-BY-SA - v1.0 / 2020-05 Si presionamos el botón… no sucede nada… :( Ejecutamos...
  15. Eventos 19 d.codevilla - CC-BY-SA - v1.0 / 2020-05 •

    Los programas con GUI se manejan con "eventos" (event-driven) • El orden de ejecución de las acciones depende del orden con que se accionen los diversos widgets • Cada widget puede tener varios eventos asociados (ej. presiono el botón, ingreso texto, muevo el mouse...) • Y se puede asociar un fragmento de código a cada evento (ej. mostrar un texto cuando se presione un botón determinado…)
  16. Eventos 20 d.codevilla - CC-BY-SA - v1.0 / 2020-05 Hay

    que vincular código que muestre el pop-up con un evento del botón # botón btnSaludar = tkinter.Button(top, text="Saludar") # botón btnSaludar = tkinter.Button(top, text="Saludar", command=btnSaludaCB) En la línea donde creamos el botón: Agregamos command y el nombre de la función que queremos que se ejecute cuando alguien haga click en el botón:
  17. Eventos 21 d.codevilla - CC-BY-SA - v1.0 / 2020-05 #

    callback del botón Saludar (btnSaludar) # esta función se ejecuta cuando se presiona el botón saludar def btnSaludaCB(): s = "Hola " + txtNombre.get() s = s + "!!!" messagebox.showinfo("Saludo", s) # botón btnSaludar = tkinter.Button(top, text="Saludar", command=btnSaludaCB) Y debemos escribir el código de esa función (btnSaludaCB) txtNombre es el nombre que del objeto Entry Con .get() obtenemos el texto que contiene (el texto que ingresó el usuario; un nombre en este caso) messagebox.showinfo() muestra un pop-up con el título y texto que le indicamos (título: "Saludo" y texto: lo que contiene el string s)
  18. Código completo (v.2) # importamos los módulos que necesitamos: tkinter...

    import tkinter # ...y messagebox para el cuadro de mensaje from tkinter import messagebox # callback del botón Saludar (btnSaludar) # esta función se ejecuta cuando se presiona el botón saludar def btnSaludaCB(): s = "Hola " + txtNombre.get() s = s + "!!!" messagebox.showinfo("Saludo", s) # ventana principal (raíz / root) # va a contener el resto de los widgets top = tkinter.Tk() 22 d.codevilla - CC-BY-SA - v1.0 / 2020-05
  19. Código completo (v.2) # le cambiamos el título top.title("Saludador") #

    botón btnSaludar = tkinter.Button(top, text="Saludar", command=btnSaludaCB) # texto estático (Label) lblAQuien = tkinter.Label(top, text = "¿A quién saludamos?") # entrada de texto (Entry) txtNombre = tkinter.Entry(top) # checkbutton chkSonrisa = tkinter.Checkbutton(top, text = "Agregar :)") 23 d.codevilla - CC-BY-SA - v1.0 / 2020-05
  20. Código completo (v.2) # posiciona cada widget en columna y

    la fila correspondiente # Label en fila 0, columna 0 (columnspan = 2 porque ocupa dos columnas) lblAQuien.grid(row=0, column=0, columnspan=2) # Entry en fila 1, columna 0 txtNombre.grid(row=1, column=0) # Botón en fila 1, columna 1 btnSaludar.grid(row=1, column=1) # Botón en fila 2, columna 0 (columnspan = 2 porque ocupa dos columnas) chkSonrisa.grid(row=2, column=0, columnspan=2) # queda esperando eventos top.mainloop() 24 d.codevilla - CC-BY-SA - v1.0 / 2020-05
  21. Código completo (v.2) Ejecutamos... El checkbox "Agregar :)" está marcado,

    pero no se agrega ":)" al saludo... ...hay que agregar código que "lea" el estado del checkbox...
  22. Variables de widget 26 • Podemos conocer y fijar el

    valor de un widget a través de una variable asociada • tkinter provee BooleanVar, DoubleVar, IntVar, StringVar • Para conocer el valor usamos .get() y para fijar el valor usamos .set() • y para ejecutar un procedimiento cuando la variable cambia: .bind() • Son necesarias para chekbox y radiobutton d.codevilla - CC-BY-SA - v1.0 / 2020-05
  23. Variables de widget 27 • Para asociar una variable a

    un widget: 1. La definimos 2. Cuando creamos el widget, indicamos el nombre de la variable d.codevilla - CC-BY-SA - v1.0 / 2020-05 # checkbutton chkSonrisa = tkinter.Checkbutton(top, text = "Agregar :)") En la línea donde creamos el checkbox: Definimos una variable IntVar (en este caso) y agregamos variable y el nombre de la variable que queremos asociar al checkbox flgSonrisa = tkinter.IntVar() # variable para saber si está marcado o no chkSonrisa = tkinter.Checkbutton(top, text = "Agregar :)",variable = flgSonrisa)
  24. # callback del botón Saludar (btnSaludar) # esta función se

    ejecuta cuando se presiona el botón saludar def btnSaludaCB(): s = "Hola " + txtNombre.get() if flgSonrisa.get() == 1: s = s + " :) " s = s + "!!!" messagebox.showinfo("Saludo", s) Y modificamos el código de la función callback del botón (btnSaludaCB) flgSonrisa es la variable que asociamos al checkbox. Con .get() obtenemos el valor de la variable: Si el checkbox está marcado devuelve 1, si no está marcado devuelve 0
  25. Código completo (v.3) # importamos los módulos que necesitamos: tkinter...

    import tkinter # ...y messagebox para el cuadro de mensaje from tkinter import messagebox # callback del botón Saludar (btnSaludar) # esta función se ejecuta cuando se presiona el botón saludar def btnSaludaCB(): s = "Hola " + txtNombre.get() if flgSonrisa.get() == 1: s = s + " :) " s = s + "!!!" messagebox.showinfo("Saludo", s) 29 d.codevilla - CC-BY-SA - v1.0 / 2020-05
  26. Código completo (v.3) # ventana principal (raíz / root) #

    va a contener el resto de los widgets top = tkinter.Tk() # le cambiamos el título top.title("Saludador") # botón btnSaludar = tkinter.Button(top, text="Saludar", command=btnSaludaCB) # texto estático (Label) lblAQuien = tkinter.Label(top, text = "¿A quién saludamos?") # entrada de texto (Entry) txtNombre = tkinter.Entry(top) # checkbutton flgSonrisa = tkinter.IntVar() # variable para saber si está marcado o no chkSonrisa = tkinter.Checkbutton(top, text = "Agregar :)",variable = flgSonrisa) 30 d.codevilla - CC-BY-SA - v1.0 / 2020-05
  27. Código completo (v.3) # posiciona cada widget en columna y

    la fila correspondiente # Label en fila 0, columna 0 (columnspan = 2 porque ocupa dos columnas) lblAQuien.grid(row=0, column=0, columnspan=2) # Entry en fila 1, columna 0 txtNombre.grid(row=1, column=0) # Botón en fila 1, columna 1 btnSaludar.grid(row=1, column=1) # Botón en fila 2, columna 0 (columnspan = 2 porque ocupa dos columnas) chkSonrisa.grid(row=2, column=0, columnspan=2) # queda esperando eventos top.mainloop() 31 d.codevilla - CC-BY-SA - v1.0 / 2020-05