SlideShare ist ein Scribd-Unternehmen logo
1 von 10
Downloaden Sie, um offline zu lesen
Python+GTK+Glade




Python + GTK +Glade

      Tabla de Contenidos

      Hola Mundo!
      Creando nuestra interfaz
      Conectando señales
      Uso del Treeview
      Ventanas de diálogo
      Guardando datos
      Terminando la aplicación




                              Ing. Carlos Zager Fernández
                             Corvus / Latinux de Venezuela
                                 czager@corvus.com.ve
Python+GTK+Glade

                            Lo primero que debemos hacer es crear en Glade una
                           ●

Tabla de Contenidos        ventana muy sencilla que contenga un Label al cual le
                           vamos a poner el mensaje “Hola mundo!”. También
Hola Mundo!                debemos asegurarnos que la ventana sea visible.
Creando nuestra interfaz   Salvamos el proyecto con el nombre que deseemos (ejm:
Conectando señales         “hola.glade”).
Uso del Treeview           ●Debemos crear un archivo de código Python que se

Ventanas de diálogo        encargará de controlar nuestra interfaz. Para ello
Guardando datos            creemos con el editor de nuestra preferencia un archivo
Terminando la aplicación   con el siguiente contenido.

                           import pygtk
                           pygtk.require('2.0')
                           import gtk
                           from gtk import glade
                           glade.XML('hola.glade')
                           gtk.main()


                           #python hola.py

                            Deberíamos ver una ventana muy parecida a la que
                           ●


                           está de muestra. Fíjese que no responde a ningún
                           evento, por lo que debe mandarle una señal de kill al
                           programa para finalizarlo.
Python+GTK+Glade

                            Ya sabemos crear una ventana. Procedamos a diseñar
                           ●

Tabla de Contenidos        nuestra interfaz. Para ello vamos de nuevo a Glade y
                           creamos una ventana.
Hola Mundo!                ●Agreguemosle un Vbox de tamaño 3 y lo rellenamos de

Creando nuestra interfaz   la siguiente manera:
Conectando señales
                           1.MenuBar
Uso del Treeview
                             ● Eliminamos los MenuItems Edit y View
Ventanas de diálogo
                           2.Horizontal Button Box
Guardando datos
                             ● Tamaño 2
Terminando la aplicación
                             ● Lo alineamos a la izquierda

                             ● Le desactivamos el expandir

                             ● Le agregamos dos botones tipo stock:add,remove


                           3.Scrolled Window
                             ● TreeView


                                 Activamos Rules Hint
                               


                                 Colocamos Search Column en 1
                               


                                 Lo renombramos como tree
                               



                            Con esto ya hemos creado la base de nuestra interfaz
                           ●


                           y al igual que en el ejemplo anterior podemos hacer un
                           simple archivo de Python para probarla. Deberíamos
                           ver algo parecido a la imagen de ejemplo
                           ●Recuerde que no hemos conectado ningun evento


                           todavía, así que no espere ver nada atractivo ya que
                           los botones no van a hacer nada cuando los clickee
                           Recordatorio: si no ve nada...probablemente es que se le olvido
                           activar la visibilidad de la ventana
Python+GTK+Glade


                          Ahora que tenemos nuestra interfaz, necesitamos darle
Tabla de Contenidos
                          funcionalidad a la misma. Para ello necesitamos conectar
                          los eventos a funciones que nosotros implementemos.
Hola Mundo!
Creando nuestra interfaz
                         Procedemos a abrir nuestra interfaz en Glade y hacemos
Conectando señales
                         lo siguiente:
Uso del Treeview
                           ➔ En el arbol de inspección seleccionamos el MenuItem
Ventanas de diálogo
                              New y le asignamos a la señal “activate” el valor
Guardando datos
                              “new”
Terminando la aplicación
                           ➔ Lo mismo hacemos para Open,Save,Save As,Quit y


                              About.
                           ➔ Ahora necesitamos las señales que van a permitir


                              crear o eliminar una tarea. Para ello asociamos en los
                              botones Add y Remove las señales “clicked” con los
                              valores “add” y “remove” respectivamente.
                           ➔ También debemos asociar la señal        “destroy” de la
                              ventana principal con el valor “quit” (la misma que
                              asociamos al MenuItem “Quit”). Esta se encuentra en
                              el submenu GtkObject de las señales.

                           Ahora debemos hacer que las señales sean atendidas por
                           funciones de Python
Python+GTK+Glade

                           Para darle funcionalidad a los eventos nos vamos al
Tabla de Contenidos        codigo de Python y debería quedar algo como esto...
Hola Mundo!                import pygtk
                           pygtk.require('2.0')
Creando nuestra interfaz
                           import gtk,gobject
Conectando señales         from gtk import glade
Uso del Treeview
Ventanas de diálogo        class gui:
                                def __init__(self):
Guardando datos
                                      self.glade=glade.XML('gui.glade')
Terminando la aplicación              self.glade.signal_autoconnect({
                                            'quit':self.quit,
                                            'about':self.about,
                                            'add':self.add,
                                            'remove':self.remove,
                                            'open':self.open,
                                            'new':self.new,
                                            'save_as':self.save_as,
                                            'save':self.save,
                                      })

                                def quit(self,b):
                                     gtk.main_quit()

                                def add(self,b):
                                     #Aqui agregariamos una nueva tarea
                                     pass

                                ...

                           gui()
                           gtk.main()
Python+GTK+Glade

                         Un TreeView es una estructura de la librería GTK que
Tabla de Contenidos      nos permite tener un objeto que despliega su contenido
                         como una lista de objetos divididos por columnas o como
Hola Mundo!              un arbol
Creando nuestra interfaz
Conectando señales       En este caso estamos interesados en mostrar los objetos
Uso del Treeview         en forma de lista. Para ello necesitamos añadir el
Ventanas de diálogo      siguiente código al final de la funcion __init__
Guardando datos
Terminando la aplicación  ...
                                self.tree=self.glade.get_widget('tree')

                                self.model=gtk.TreeStore(gobject.TYPE_STRING,
                                           gobject.TYPE_STRING, gobject.TYPE_STRING)

                                cellp = gtk.CellRendererText()
                                col1=gtk.TreeViewColumn('Estado',cellp)
                                col1.add_attribute(cellp,'background',0)

                                cellt = gtk.CellRendererText()
                                col2=gtk.TreeViewColumn('Tarea',cellt)
                                col2.add_attribute(cellt,'text',1)

                                self.tree.append_column(col1)
                                self.tree.append_column(col2)

                                self.tree.set_model(self.model)
                          ...
                         Si ejecutamos el código ahora se debería ver algo como
                         la imagen
Python+GTK+Glade

                           Vamos a ver como trabajar con diálogos, para ello
Tabla de Contenidos
                           debemos diseñar nuestro diálogo en Glade y queremos
                           que se vea como el de la imagen.
Hola Mundo!
Creando nuestra interfaz
                           Lo hacemos con Dialog Box, Vbox, 2 Botones stock
Conectando señales
                           (Cancel,Ok), Text Entry, Text View y 2 Label. Al final
Uso del Treeview
                           renombramos el diálogo como dialogo
Ventanas de diálogo
Guardando datos
                           Una vez que tenemos nuestro diálogo listo, debemos de
Terminando la aplicación
                           tener una manera de ejecutarlo. Cambiemos la funcion
                           “add” por:
                           ...
                                 def add(self,b):
                                      code=glade.XML('gui.glade','dialogo')
                                      dialogo=code.get_widget('dialogo')
                                      dialogo.show()

                           ...

                           Hasta aqui ya podemos probar, si ejecutamos el código
                           podemos ver que al hacer click en nuestro botón “add”
                           se levanta este diálogo que acabamos de crear.

                           Pero esto así solo no es de mucha utilidad, así que
                           vamos a ver como podemos utilizar el diálogo para
                           guardar los datos del usuario en la lista
Python+GTK+Glade
                           Lo primero va a ser volver a Glade y colocar las señales y
Tabla de Contenidos        los nombres a los widgets para luego poder consultarlos.

Hola Mundo!                Añadimos a las señales “clicked” de los botones los valores
Creando nuestra interfaz   cancel y ok. Y renombramos el TextArea como titulo y el
Conectando señales         TextView como descripcion.
Uso del Treeview
Ventanas de diálogo        Luego debemos conectar estas señales a funciones en
Guardando datos            nuestro código. Quedaría asi:
Terminando la aplicación
                           ...
                                 def add(self,b):
                                      code=glade.XML('gui.glade','dialogo')
                                      dialogo=code.get_widget('dialogo')
                                      code.signal_autoconnect({
                                           'ok': lambda x: self.add_data(code),
                                           'cancel':lambda x:dialogo.destroy()
                                      })
                                      dialogo.show()

                                 def add_data(self,code):
                                      dialogo=code.get_widget('dialogo')
                                      titulo=code.get_widget('titulo')
                                      descripcion=code.get_widget('descripcion')
                                      t1=titulo.get_text()
                                      buf=descripcion.get_buffer()
                                      start=buf.get_start_iter()
                                      end=buf.get_end_iter()
                                      t2=buf.get_text(start,end,True)
                                      self.model.append(None,['red',t1,t2])
                                      dialogo.destroy()
                           ...
Python+GTK+Glade


                         Bueno ya en este punto tenemos cierta funcionalidad,
Tabla de Contenidos
                         obviamente falta mucho para que la aplicación este
                         completa pero el resto es mecánico. Por ejemplo habría
Hola Mundo!
Creando nuestra interfaz que hacer la funcionalidad de borrar, el diálogo “Acerca
                         de”, etc.
Conectando señales
Uso del Treeview
                         Ahora vamos a imaginarnos que todo esto está hecho y
Ventanas de diálogo
                         que queremos que nuestra aplicación pueda guardar y
Guardando datos
Terminando la aplicación cargar los datos para poder ser usados luego.
                          Para ello vamos a utilizar el módulo “csv” de Python para
                          exportar los datos como archivos divididos por coma.

                          Sería algo así...


                           ...
                                 def save(self,b):
                                   import csv
                                   writer = csv.writer(open(“~/.to-dos”, “w”))
                                   writer.writerows(self.model)

                                 def open(self,b):
                                   import csv
                                   reader = csv.reader(open(“~/.to-dos”, quot;rquot;))
                                   for row in reader:
                                         self.model.append(None,row)
                           ...
Python+GTK+Glade

                           Bueno hasta ahora todo ha sido muy sencillo...
Tabla de Contenidos
                           Pero debemos tomar en cuenta que no se ha hecho
Hola Mundo!
                           ninguna clase de verificicación, ni se levantan ventanas
Creando nuestra interfaz
                           de diálogo de advertencia, de error, etc
Conectando señales
Uso del Treeview
                           Falta mucho para que esta aplicación este completa,
Ventanas de diálogo
                           pero por algún lado hay que empezar...
Guardando datos
Terminando la aplicación
                           Ahora veamos como se vería esta aplicación un poco
                           mas completa...

Weitere ähnliche Inhalte

Was ist angesagt? (8)

Programación con Pygame IV
Programación con Pygame IVProgramación con Pygame IV
Programación con Pygame IV
 
Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6Introducción al desarrollo Web: Frontend con Angular 6
Introducción al desarrollo Web: Frontend con Angular 6
 
Ejemplo de un codigo a través de un lenguaje de programacion llamado java
Ejemplo de un codigo a través de un lenguaje de programacion llamado javaEjemplo de un codigo a través de un lenguaje de programacion llamado java
Ejemplo de un codigo a través de un lenguaje de programacion llamado java
 
Ewcc1
Ewcc1Ewcc1
Ewcc1
 
Realidad Aumentada 02 interfaz t apir
Realidad Aumentada 02 interfaz t apirRealidad Aumentada 02 interfaz t apir
Realidad Aumentada 02 interfaz t apir
 
1. tutorial unity3d introducción
1.  tutorial unity3d introducción1.  tutorial unity3d introducción
1. tutorial unity3d introducción
 
Polymer de un vistazo
Polymer de un vistazoPolymer de un vistazo
Polymer de un vistazo
 
Servlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTMLServlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTML
 

Ähnlich wie Taller Python Gtk Glade

Interfaces Usuario 3
Interfaces Usuario 3Interfaces Usuario 3
Interfaces Usuario 3
Milaly
 
Manual Swing-Java-PostgreSQL
Manual Swing-Java-PostgreSQLManual Swing-Java-PostgreSQL
Manual Swing-Java-PostgreSQL
pablo
 
Tutorial 1 android
Tutorial 1 androidTutorial 1 android
Tutorial 1 android
libidinosa
 

Ähnlich wie Taller Python Gtk Glade (20)

Interfaces de usuario con PyGTK
Interfaces de usuario con PyGTKInterfaces de usuario con PyGTK
Interfaces de usuario con PyGTK
 
2/9 Curso JEE5, Soa, Web Services, ESB y XML
2/9 Curso JEE5, Soa, Web Services, ESB y XML2/9 Curso JEE5, Soa, Web Services, ESB y XML
2/9 Curso JEE5, Soa, Web Services, ESB y XML
 
Manual de netbeans_7(2)(2)(2)
Manual de netbeans_7(2)(2)(2)Manual de netbeans_7(2)(2)(2)
Manual de netbeans_7(2)(2)(2)
 
Vbr Awt 01
Vbr Awt 01Vbr Awt 01
Vbr Awt 01
 
Programación i
Programación iProgramación i
Programación i
 
Interfaces Usuario 3
Interfaces Usuario 3Interfaces Usuario 3
Interfaces Usuario 3
 
Primeros Pasos en PyQt4
Primeros Pasos en PyQt4Primeros Pasos en PyQt4
Primeros Pasos en PyQt4
 
Netbeans
NetbeansNetbeans
Netbeans
 
INFOSAN Objetos en javascript
INFOSAN Objetos en javascriptINFOSAN Objetos en javascript
INFOSAN Objetos en javascript
 
Manual Swing-Java-PostgreSQL
Manual Swing-Java-PostgreSQLManual Swing-Java-PostgreSQL
Manual Swing-Java-PostgreSQL
 
ventanas swing en java
ventanas swing en javaventanas swing en java
ventanas swing en java
 
Swing
SwingSwing
Swing
 
Swing
SwingSwing
Swing
 
Swing
SwingSwing
Swing
 
Android
AndroidAndroid
Android
 
Swing
SwingSwing
Swing
 
Tutorial 1 android
Tutorial 1 androidTutorial 1 android
Tutorial 1 android
 
Introducción a git y git hub
Introducción a git y git hubIntroducción a git y git hub
Introducción a git y git hub
 
Code bloks tutorial_terminado
Code bloks tutorial_terminadoCode bloks tutorial_terminado
Code bloks tutorial_terminado
 
Code bloks tutorial_terminado
Code bloks tutorial_terminadoCode bloks tutorial_terminado
Code bloks tutorial_terminado
 

Mehr von campus party

¿Qué es SCADA y cómo me afecta su (in)seguridad?
¿Qué es SCADA y cómo me afecta su (in)seguridad? ¿Qué es SCADA y cómo me afecta su (in)seguridad?
¿Qué es SCADA y cómo me afecta su (in)seguridad?
campus party
 
Producción del largometraje pequeñas voces
Producción del largometraje pequeñas vocesProducción del largometraje pequeñas voces
Producción del largometraje pequeñas voces
campus party
 
Conferencia: Aplicaciones y el reto del desarrollo móvil
Conferencia: Aplicaciones y el reto del desarrollo móvilConferencia: Aplicaciones y el reto del desarrollo móvil
Conferencia: Aplicaciones y el reto del desarrollo móvil
campus party
 
Como sería un viaje a la velocidad de la luz - Miguel Ángel Contreras
Como sería un viaje a la velocidad de la luz - Miguel Ángel ContrerasComo sería un viaje a la velocidad de la luz - Miguel Ángel Contreras
Como sería un viaje a la velocidad de la luz - Miguel Ángel Contreras
campus party
 
X taller bluevialiminal
X taller bluevialiminalX taller bluevialiminal
X taller bluevialiminal
campus party
 
X liminal buevia 2 (dllo.)-taller
X liminal buevia 2 (dllo.)-tallerX liminal buevia 2 (dllo.)-taller
X liminal buevia 2 (dllo.)-taller
campus party
 
X elalgoritmodelamemoria maria juliana soto (social media) (1) 1
X elalgoritmodelamemoria maria juliana soto (social media) (1) 1X elalgoritmodelamemoria maria juliana soto (social media) (1) 1
X elalgoritmodelamemoria maria juliana soto (social media) (1) 1
campus party
 
Creación transmediática y comunidades en práctica
Creación transmediática y comunidades en prácticaCreación transmediática y comunidades en práctica
Creación transmediática y comunidades en práctica
campus party
 
Implementación de Cloud Computing con Software Libre y medidas de seguridad p...
Implementación de Cloud Computing con Software Libre y medidas de seguridad p...Implementación de Cloud Computing con Software Libre y medidas de seguridad p...
Implementación de Cloud Computing con Software Libre y medidas de seguridad p...
campus party
 

Mehr von campus party (20)

Titulo
Titulo Titulo
Titulo
 
¿Qué es SCADA y cómo me afecta su (in)seguridad?
¿Qué es SCADA y cómo me afecta su (in)seguridad? ¿Qué es SCADA y cómo me afecta su (in)seguridad?
¿Qué es SCADA y cómo me afecta su (in)seguridad?
 
Producción del largometraje pequeñas voces
Producción del largometraje pequeñas vocesProducción del largometraje pequeñas voces
Producción del largometraje pequeñas voces
 
Conferencia: Aplicaciones y el reto del desarrollo móvil
Conferencia: Aplicaciones y el reto del desarrollo móvilConferencia: Aplicaciones y el reto del desarrollo móvil
Conferencia: Aplicaciones y el reto del desarrollo móvil
 
Liminal Bluevia 1
Liminal Bluevia 1Liminal Bluevia 1
Liminal Bluevia 1
 
Como sería un viaje a la velocidad de la luz - Miguel Ángel Contreras
Como sería un viaje a la velocidad de la luz - Miguel Ángel ContrerasComo sería un viaje a la velocidad de la luz - Miguel Ángel Contreras
Como sería un viaje a la velocidad de la luz - Miguel Ángel Contreras
 
Como sería un viaje a la velocidad de la luz - Miguel Ángel Contreras
Como sería un viaje a la velocidad de la luz - Miguel Ángel ContrerasComo sería un viaje a la velocidad de la luz - Miguel Ángel Contreras
Como sería un viaje a la velocidad de la luz - Miguel Ángel Contreras
 
X taller bluevialiminal
X taller bluevialiminalX taller bluevialiminal
X taller bluevialiminal
 
X liminal buevia 2 (dllo.)-taller
X liminal buevia 2 (dllo.)-tallerX liminal buevia 2 (dllo.)-taller
X liminal buevia 2 (dllo.)-taller
 
X elalgoritmodelamemoria maria juliana soto (social media) (1) 1
X elalgoritmodelamemoria maria juliana soto (social media) (1) 1X elalgoritmodelamemoria maria juliana soto (social media) (1) 1
X elalgoritmodelamemoria maria juliana soto (social media) (1) 1
 
Theremin Alfredo Vargas
Theremin Alfredo Vargas Theremin Alfredo Vargas
Theremin Alfredo Vargas
 
Sonido y cine Ricardo Escallon
Sonido y cine Ricardo Escallon Sonido y cine Ricardo Escallon
Sonido y cine Ricardo Escallon
 
Photoshop para fotógrafos. Del cuarto oscuro al cuarto digital - Andrés Bautista
Photoshop para fotógrafos. Del cuarto oscuro al cuarto digital - Andrés BautistaPhotoshop para fotógrafos. Del cuarto oscuro al cuarto digital - Andrés Bautista
Photoshop para fotógrafos. Del cuarto oscuro al cuarto digital - Andrés Bautista
 
Photoshop para fotógrafos. Del cuarto oscuro al cuarto digital - Andrés Fonseca
Photoshop para fotógrafos. Del cuarto oscuro al cuarto digital - Andrés FonsecaPhotoshop para fotógrafos. Del cuarto oscuro al cuarto digital - Andrés Fonseca
Photoshop para fotógrafos. Del cuarto oscuro al cuarto digital - Andrés Fonseca
 
Aseguramiento de Vulnerabilidades Web con tecnologías OWASP
Aseguramiento de Vulnerabilidades Web con tecnologías OWASPAseguramiento de Vulnerabilidades Web con tecnologías OWASP
Aseguramiento de Vulnerabilidades Web con tecnologías OWASP
 
Mundos virtuales inmersivos y social shopping
Mundos virtuales inmersivos y social shopping Mundos virtuales inmersivos y social shopping
Mundos virtuales inmersivos y social shopping
 
Creación transmediática y comunidades en práctica
Creación transmediática y comunidades en prácticaCreación transmediática y comunidades en práctica
Creación transmediática y comunidades en práctica
 
Android+Arduino
Android+ArduinoAndroid+Arduino
Android+Arduino
 
Implementación de Cloud Computing con Software Libre y medidas de seguridad p...
Implementación de Cloud Computing con Software Libre y medidas de seguridad p...Implementación de Cloud Computing con Software Libre y medidas de seguridad p...
Implementación de Cloud Computing con Software Libre y medidas de seguridad p...
 
Linux en caja
Linux en cajaLinux en caja
Linux en caja
 

Kürzlich hochgeladen

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Kürzlich hochgeladen (12)

investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 

Taller Python Gtk Glade

  • 1. Python+GTK+Glade Python + GTK +Glade Tabla de Contenidos Hola Mundo! Creando nuestra interfaz Conectando señales Uso del Treeview Ventanas de diálogo Guardando datos Terminando la aplicación Ing. Carlos Zager Fernández Corvus / Latinux de Venezuela czager@corvus.com.ve
  • 2. Python+GTK+Glade Lo primero que debemos hacer es crear en Glade una ● Tabla de Contenidos ventana muy sencilla que contenga un Label al cual le vamos a poner el mensaje “Hola mundo!”. También Hola Mundo! debemos asegurarnos que la ventana sea visible. Creando nuestra interfaz Salvamos el proyecto con el nombre que deseemos (ejm: Conectando señales “hola.glade”). Uso del Treeview ●Debemos crear un archivo de código Python que se Ventanas de diálogo encargará de controlar nuestra interfaz. Para ello Guardando datos creemos con el editor de nuestra preferencia un archivo Terminando la aplicación con el siguiente contenido. import pygtk pygtk.require('2.0') import gtk from gtk import glade glade.XML('hola.glade') gtk.main() #python hola.py Deberíamos ver una ventana muy parecida a la que ● está de muestra. Fíjese que no responde a ningún evento, por lo que debe mandarle una señal de kill al programa para finalizarlo.
  • 3. Python+GTK+Glade Ya sabemos crear una ventana. Procedamos a diseñar ● Tabla de Contenidos nuestra interfaz. Para ello vamos de nuevo a Glade y creamos una ventana. Hola Mundo! ●Agreguemosle un Vbox de tamaño 3 y lo rellenamos de Creando nuestra interfaz la siguiente manera: Conectando señales 1.MenuBar Uso del Treeview ● Eliminamos los MenuItems Edit y View Ventanas de diálogo 2.Horizontal Button Box Guardando datos ● Tamaño 2 Terminando la aplicación ● Lo alineamos a la izquierda ● Le desactivamos el expandir ● Le agregamos dos botones tipo stock:add,remove 3.Scrolled Window ● TreeView Activamos Rules Hint  Colocamos Search Column en 1  Lo renombramos como tree  Con esto ya hemos creado la base de nuestra interfaz ● y al igual que en el ejemplo anterior podemos hacer un simple archivo de Python para probarla. Deberíamos ver algo parecido a la imagen de ejemplo ●Recuerde que no hemos conectado ningun evento todavía, así que no espere ver nada atractivo ya que los botones no van a hacer nada cuando los clickee Recordatorio: si no ve nada...probablemente es que se le olvido activar la visibilidad de la ventana
  • 4. Python+GTK+Glade Ahora que tenemos nuestra interfaz, necesitamos darle Tabla de Contenidos funcionalidad a la misma. Para ello necesitamos conectar los eventos a funciones que nosotros implementemos. Hola Mundo! Creando nuestra interfaz Procedemos a abrir nuestra interfaz en Glade y hacemos Conectando señales lo siguiente: Uso del Treeview ➔ En el arbol de inspección seleccionamos el MenuItem Ventanas de diálogo New y le asignamos a la señal “activate” el valor Guardando datos “new” Terminando la aplicación ➔ Lo mismo hacemos para Open,Save,Save As,Quit y About. ➔ Ahora necesitamos las señales que van a permitir crear o eliminar una tarea. Para ello asociamos en los botones Add y Remove las señales “clicked” con los valores “add” y “remove” respectivamente. ➔ También debemos asociar la señal “destroy” de la ventana principal con el valor “quit” (la misma que asociamos al MenuItem “Quit”). Esta se encuentra en el submenu GtkObject de las señales. Ahora debemos hacer que las señales sean atendidas por funciones de Python
  • 5. Python+GTK+Glade Para darle funcionalidad a los eventos nos vamos al Tabla de Contenidos codigo de Python y debería quedar algo como esto... Hola Mundo! import pygtk pygtk.require('2.0') Creando nuestra interfaz import gtk,gobject Conectando señales from gtk import glade Uso del Treeview Ventanas de diálogo class gui: def __init__(self): Guardando datos self.glade=glade.XML('gui.glade') Terminando la aplicación self.glade.signal_autoconnect({ 'quit':self.quit, 'about':self.about, 'add':self.add, 'remove':self.remove, 'open':self.open, 'new':self.new, 'save_as':self.save_as, 'save':self.save, }) def quit(self,b): gtk.main_quit() def add(self,b): #Aqui agregariamos una nueva tarea pass ... gui() gtk.main()
  • 6. Python+GTK+Glade Un TreeView es una estructura de la librería GTK que Tabla de Contenidos nos permite tener un objeto que despliega su contenido como una lista de objetos divididos por columnas o como Hola Mundo! un arbol Creando nuestra interfaz Conectando señales En este caso estamos interesados en mostrar los objetos Uso del Treeview en forma de lista. Para ello necesitamos añadir el Ventanas de diálogo siguiente código al final de la funcion __init__ Guardando datos Terminando la aplicación ... self.tree=self.glade.get_widget('tree') self.model=gtk.TreeStore(gobject.TYPE_STRING, gobject.TYPE_STRING, gobject.TYPE_STRING) cellp = gtk.CellRendererText() col1=gtk.TreeViewColumn('Estado',cellp) col1.add_attribute(cellp,'background',0) cellt = gtk.CellRendererText() col2=gtk.TreeViewColumn('Tarea',cellt) col2.add_attribute(cellt,'text',1) self.tree.append_column(col1) self.tree.append_column(col2) self.tree.set_model(self.model) ... Si ejecutamos el código ahora se debería ver algo como la imagen
  • 7. Python+GTK+Glade Vamos a ver como trabajar con diálogos, para ello Tabla de Contenidos debemos diseñar nuestro diálogo en Glade y queremos que se vea como el de la imagen. Hola Mundo! Creando nuestra interfaz Lo hacemos con Dialog Box, Vbox, 2 Botones stock Conectando señales (Cancel,Ok), Text Entry, Text View y 2 Label. Al final Uso del Treeview renombramos el diálogo como dialogo Ventanas de diálogo Guardando datos Una vez que tenemos nuestro diálogo listo, debemos de Terminando la aplicación tener una manera de ejecutarlo. Cambiemos la funcion “add” por: ... def add(self,b): code=glade.XML('gui.glade','dialogo') dialogo=code.get_widget('dialogo') dialogo.show() ... Hasta aqui ya podemos probar, si ejecutamos el código podemos ver que al hacer click en nuestro botón “add” se levanta este diálogo que acabamos de crear. Pero esto así solo no es de mucha utilidad, así que vamos a ver como podemos utilizar el diálogo para guardar los datos del usuario en la lista
  • 8. Python+GTK+Glade Lo primero va a ser volver a Glade y colocar las señales y Tabla de Contenidos los nombres a los widgets para luego poder consultarlos. Hola Mundo! Añadimos a las señales “clicked” de los botones los valores Creando nuestra interfaz cancel y ok. Y renombramos el TextArea como titulo y el Conectando señales TextView como descripcion. Uso del Treeview Ventanas de diálogo Luego debemos conectar estas señales a funciones en Guardando datos nuestro código. Quedaría asi: Terminando la aplicación ... def add(self,b): code=glade.XML('gui.glade','dialogo') dialogo=code.get_widget('dialogo') code.signal_autoconnect({ 'ok': lambda x: self.add_data(code), 'cancel':lambda x:dialogo.destroy() }) dialogo.show() def add_data(self,code): dialogo=code.get_widget('dialogo') titulo=code.get_widget('titulo') descripcion=code.get_widget('descripcion') t1=titulo.get_text() buf=descripcion.get_buffer() start=buf.get_start_iter() end=buf.get_end_iter() t2=buf.get_text(start,end,True) self.model.append(None,['red',t1,t2]) dialogo.destroy() ...
  • 9. Python+GTK+Glade Bueno ya en este punto tenemos cierta funcionalidad, Tabla de Contenidos obviamente falta mucho para que la aplicación este completa pero el resto es mecánico. Por ejemplo habría Hola Mundo! Creando nuestra interfaz que hacer la funcionalidad de borrar, el diálogo “Acerca de”, etc. Conectando señales Uso del Treeview Ahora vamos a imaginarnos que todo esto está hecho y Ventanas de diálogo que queremos que nuestra aplicación pueda guardar y Guardando datos Terminando la aplicación cargar los datos para poder ser usados luego. Para ello vamos a utilizar el módulo “csv” de Python para exportar los datos como archivos divididos por coma. Sería algo así... ... def save(self,b): import csv writer = csv.writer(open(“~/.to-dos”, “w”)) writer.writerows(self.model) def open(self,b): import csv reader = csv.reader(open(“~/.to-dos”, quot;rquot;)) for row in reader: self.model.append(None,row) ...
  • 10. Python+GTK+Glade Bueno hasta ahora todo ha sido muy sencillo... Tabla de Contenidos Pero debemos tomar en cuenta que no se ha hecho Hola Mundo! ninguna clase de verificicación, ni se levantan ventanas Creando nuestra interfaz de diálogo de advertencia, de error, etc Conectando señales Uso del Treeview Falta mucho para que esta aplicación este completa, Ventanas de diálogo pero por algún lado hay que empezar... Guardando datos Terminando la aplicación Ahora veamos como se vería esta aplicación un poco mas completa...