= Introducción al Desarrollo de Aplicaciones con PyGTK = ''' Expositor: Alejandro Valdes (avaldes) ''' ''' Moderador: Sergio Infante Montero (neosergio) ''' '' Sabado 21 de Noviembre de 2009, 17:00 horas UTC '' '' irc.gnome.org #gnome-hispano '' ---- . ''neosergio'' {{{ Bueno empezamos Siendo las 17 horas UTC Hoy 21 de Noviembre del 2009 daremos inicio a las charlas mensuales IRC de GNOME Hispano http://es.gnome.org/Eventos/CharlasIRC/CharlaNoviembre2009 en esta oportunidad nos hace el honor con su presencia, Alejandro Valdes Para mayor referencia sobre Alejandro -> http://www.gnome.org/~avaldes/ quien nos ofrecera el tema: Introducción al Desarrollo de Aplicaciones con PyGTK sin mas preambulo avaldes tienes la palabra }}} . '''avaldes''' {{{ ok neosergio buenas a todos! en primer lugar agradezco la invitacion de neosergio para dar esta charla/taller este taller lo he realizado varias veces y esta es la primera ves que la realizo por IRC espero que resulte bien en el sitio http://es.gnome.org/Eventos/CharlasIRC/CharlaNoviembre2009 encontraran los recursos necesarios para poder desarrollar los ejemplos ademas de la presentacion que les suguiero vayan visualizando y ademas varios videos que muestran algunas cositas... :D bien, el objetivo de la charla es dar un vistazo al desarrollo de aplicaicones para GNOME utilizando PyGTK python + GTK no es mi idea que terminemos unos expertos, pero si que veamos lo interesante que puede resultar y conveniente tambien esta combinacion. primero algunos conceptos }}} . jza {{{ hola gnomers }}} . '''avaldes''' {{{ para quienes comienzan en el tema de la programacion debemos tener claro el termino de GUI podemos interactuar de varias formas con los ordenadores - medianate linea de comandos, que seguramente muchos de los presentess son fanáticos.. :D - y mediante un ambiente gráfico esta segunda forma de interactuar con el ordenador la realizamod mediante la interacción con elementos como venatans, botones, menus, etc. ya sea a través del ratón, teclado, etc.. la ejecución de nuestro programa va a depender de lo que nosostros hagamos con estos elementos (hacer click, pasar sobre una imagen, etc) ahora bien, estos elementos de nuestra interfaz grpafica tienen un nombre... ventanas, botones, barras de menu, etc.. son widget y nosotros como usuarios, interactuamos con ellos ahora bien, nace la pregunta de ¿como capturamos lo que el usuario realiza? ¿como sabe el programa que el usuario hizo un click sobre cierto boton? bien, esos eventos, producen señales una señal de un boton por ejemplo puede ser un Click esa señal la podemos capturar y hacer algo cuando ocurra y cuando ocurra, el programa deberá llamar a una función que realize algo esa función son los callbacks. entonces tenemos que las interfaces gráficas la componen widgets que generan señales y que esas señales al ser capturadas se manejas con los callbacks. otro concepto importante es el de la programación por eventos }}} . mib_5ov559 {{{ se puede explicar mejor sonre los callbacks }}} . '''avaldes''' {{{ claro. por ejemplo tienes un programa que tiene simplemente un boton cuando el programa este ejecutando el usuario hará click sobre ese boton cuando el programa "detecte" que ocurrió un click llamará a la función (trozo de código del programa) corrspondiente. y esa función realizará la acción que se necesita al hacer click sobre el boton por ejemplo, cerrar el programa. }}} . mib_5ov559 {{{ ok }}} . '''avaldes''' {{{ ok. }}} . mib_5ov559 {{{ bueno aclaro mis dudas }}} . '''avaldes''' {{{ vale. :D }}} . mib_5ov559 {{{ siempre es en programacion visual se utiliza los widgets }}} . '''avaldes''' {{{ la programacion por eventos. la principal caracteristica deeste paradigma de programacion es que el hilo de ejecución del programa depende de los eventos que el usuario realize vean el siguiente enlace como referencia http://es.wikipedia.org/wiki/Programaci%C3%B3n_dirigida_por_eventos en general un programa que funcione de esta forma entrará a un loop a la espera de la ocurrencia de los eventos. y cuando ocurra tal eventos, se le pasa el control a la función callback correspondiente. en la slide 6 de la prsentacion pueden ver tal esquema en primera orden }}} . ''neosergio'' {{{ presentacion y ejemplos : http://deb.utalca.cl/gnome-hispano2009.tar.bz2 }}} . '''avaldes''' {{{ se inicia todo lo relacionado con la interfaz y luego se ingresa al loop a la espera de los eventos. bien. ahora que ya tenemos claros algunos conceptos pasemos a ver algunas herramientas útiles para el desarrollo de aplicaicones el lenguaje de programación: en este caso python si alguien de los presentes ya ha programado con python sabrá las bondades que tiene el lenguaje y para quienes nos gustan las cosas mas bien de desarrollo rápido python es perfecto para desarrollar prototipos y en general para el desarrollo rápido de aplicaciones (RAD) vean el enlace de referencia: http://es.wikipedia.org/wiki/Desarrollo_r%C3%A1pido_de_aplicaciones nuestra primera herramienta, python pero necesitamos una libreria que nos permita crear nuestros widgets aqui aparece GTK http://www.gtk.org/ que es la libreria que utiliza GNOME para sus aplicaicones GTK está escrito en C pero nosotros vamos a desarrollar en python bueno, para utilizar GTK con python hacemos uso de pygtk que es un binding de GTK para python http://www.pygtk.org/ ahora bien como hay bindings de GTK para python tambien los hay para otros lenguajes vean la slides 9 ya tenemos el lenguaje y la libreria gráfica }}} . ''neosergio'' {{{ presentacion y ejemplos : http://deb.utalca.cl/gnome-hispano2009.tar.bz2 }}} . '''avaldes''' {{{ ¿como podemos diseñar interfaces gráficas rápidamente y facilmente? aqui aparece glade que es un aistente para diseñar GUIs }}} . marco {{{ :) }}} . '''avaldes''' {{{ podemos hacer todo el layout de nuestro programa y sin código y obtener una idea de como será nuestro programa ideal para quienes desarrollan prototipos y deben modificar el layout de un programa de manera rápida y sin tener que compilar para obtenerlo. glade, guarda información de la interfaz en archivos XML los cuales pueden ser cargados en tiempo de ejecución del programa http://deb.utalca.cl/ogv/glade.ogv este video muestra glade es ls version 3.x cuando inicia nos pide seleccionar el formato del proyecto luego explicare lo de gtkbuilder }}} . ''neosergio'' {{{ avaldes, una pregunta }}} . '''avaldes''' {{{ ok neosergio, dale }}} . ''neosergio'' {{{ Pregunta de JuNix: ¿que son bindings ? }}} . '''avaldes''' {{{ ok mencionamos mas atras que GTK esta escrito en C y podemos hacer uso de el directamente. en este caso vamos a utilizar otro lenguaje.. python que no puede acceder directamente a las librerias de C que no puede acceder directamente a las librerias de GTK para que puede hacerlo se utilizan modulos que en este caso para python se llama pygtk que nos permite, mediante python acceder a la GTK. ok? }}} . JuNix {{{ avaldes: no me quedo claro :-/ }}} . '''avaldes''' {{{ Es una adaptación de una biblioteca para ser usada en un lenguaje de programación distinto de aquél en el que ha sido escrita. }}} . R1chy {{{ un puente o algo por el estilo }}} . '''avaldes''' {{{ algo asi. }}} . JuNix {{{ JuNix: ok entendido :D conexion :) }}} . mib_bxdxns {{{ es como un elnace no es cierto }}} . '''avaldes''' {{{ si no existieran estos binding, no podrias utilizar alguas librerias }}} . famaya17 {{{ es un puente que conecta de una ciudad A - B en este caso de Python - C, :) }}} . '''avaldes''' {{{ JuNix, ok? bien, }}} . JuNix {{{ avaldes, ok gracias ;) }}} . b4ck7r4ck {{{ la rescritura de modulos y funciones en python? }}} . '''avaldes''' {{{ si están viendo el video de glade veran que se divide en tres partes a la izquierda, están los windget que podemos utilizar }}} . ''neosergio'' {{{ por favor intervenciones por interno, dejemos a avaldes continuar }}} . mib_5ov559 {{{ la unica forma de dividir son los widget }}} . '''avaldes''' {{{ en el centro, el espacio de trabajo, donde vamos ir creando nuestra interfaz y a la derecha, el arbol de widgets y propiedades hay algunos widget que nos permiten organizar a los demas es el caso de los contenedores podemos "meter" otros widget en su interior e ir organizando toda la aplciacion. ahora bien ya sabemos como crear la interfaz de nustro programa... con glade. pero como hacemos para mostrarla? vamos a ver luego en los ejemplos que nuestro programa, entre las lineas de codigo que contedrá hará referencia al archivo xml que generamos con glade obtendra sus widgets y los mostrara. la gran ventaja de hacerlo de esta forma es que logramos separa la lógica del programa de la apariencia o layout esto es, si eventualmente, modicicamos la organización de nuestra aplicacion con glade no será necesario modiciar código claro que debemos respetar los nombres de los widgets y no eliminar ninguno. con ejemplos esto les deberia quedar mas claro.. gtkbuilder gtkbuilder, nos permite hacer practicamente lo mismo que libglade sin embargo libglade tiene un problema. libglade, al no ser un proyecto del core de GNOME no va de la mano con la versiones de GTK por lo que eventualmente }}} . cfoch3 {{{ una pregunta... ¿qué es libglade? }}} . '''avaldes''' {{{ se podria liberar una version de GTK con algun widget nuevo por ejemplo y libglade no tenga esos cambios. como gtkbuilder es parte de GTK cualquier nuevo release de GTK contemplará ya los cambios en gtkbuilder. cfoch3, libglade es una libreria que nos permite leer los archivos que generamos con glade. y como podemos leer los archivos glade, podemos tambien acceder a los widget. por el momento, existe una comando gtk-builder-convert que es para convertir archivos de libglade a gtkbuilder. }}} . fmaq {{{ y en todo caso cual es la situación de gazpcho, otra herramienta para desarrollar guis con gtk? oops, gazpacho }}} . '''avaldes''' {{{ ahora, con este tema de gtkbuilder, seguro que hay mucho trabajo que realizar en las aplicaciones que utilizan libglade . fmaq, no he utilizado gazpacho. }}} . adrian0 {{{ :-) }}} . '''avaldes''' {{{ glade, como se ven en el video, nos permite seleccionar si el proyecto será guardado con soporte para libglade o gtkbuilder. }}} . marvil07 {{{ avaldes: hay un paquete debian para gtkbuilder? }}} . '''avaldes''' {{{ viene dentro de GTK python-gtk2 bien resumen. llevamos la siguientes herramientas: - lenguaje: python - libreria grafica: gtk - asistente de diseño: glade - carga dinámica de interfaz (libglade o gtkbuilder) ahora veremos otra herramienta devhelp http://deb.utalca.cl/ogv/devhelp.ogv cuando desarrollamos necesitamos tener acceso a documentación de las librerias de las APIs. devhelp es un programa que nos permite navegar en la documentación nos permite buscar y en el caso de la documentacion de GTK y pygtk }}} . user001 {{{ una consulta, devhelp puede variar si lo uso en xfce por ejemplo? }}} . '''avaldes''' {{{ nos muestra todo lo que debemos saber respecto a los widgets, sus señales y callbacks }}} . adrian0 {{{ habalando de API ¿que es exactamente una API? }}} . '''avaldes''' {{{ en el video vemos como buscamos la definicion del widget button adrian0, l adrian0, una API en general es la definicón de la funciones que nos proveen cierta libreria si quieres utilizar la libreria de nombre libreriaX existirá una API (interfaz de programacion de aplicaicion) que nos indicará como utilizar sus funciones.. adrian0, ok? }}} . adrian0 {{{ ok }}} . '''avaldes''' {{{ entonces... con devhelp }}} . b4ck7r4ck {{{ gtk==api? }}} . pagondel {{{ http://es.wikipedia.org/wiki/API_%28inform%C3%A1tica%29 8)! }}} . '''avaldes''' {{{ accedemos a la documentacion con devhelp. un elemento importante en GNOME por lo menos es el desarrollo de aplicaicones que mantengan cierto orden y coherencia que la distribución de los botones, el tamaño de los widgets, etc.. no difieran entre aplicaicones que se usan en GNOME para eso, existe HIG human interface guidelines que esun proyecto que recomeinda como deben crearse nustras aplicaicones en terminos de usabilidad. ahora bien, donde escribimos nuestros programas? eso es al gusto de cada uno algunos utilziaran VI }}} . joaquindlz {{{ http://library.gnome.org/devel/hig-book/stable/ }}} . '''avaldes''' {{{ otros algunas herramienats mas completas eso es a libre elección. geany es un editor muy potente que este taller vamos a utilzar. http://deb.utalca.cl/ogv/geany.ogv bien ya esta bueno de teoria. vamos a los ejemplos. voy a suponer que instalaros todo lo necesarios Paquetes: - glade - devhelp - python-gtk2-doc - geany - python - python-gtk2 - python-glade2 - python-gconf - python-pygraphviz - python-notify - python-gobject - python-vte - python-gtkmozembed el primer ejemplo http://deb.utalca.cl/ogv/python.ogv vamos a crear un pequeño programa en la terminal interactuando con el interprete de python. entonces habran una terminal y ejecuten python de esa manera podremos ejecutar comando inmediatamente con python la linea 1 import gtk llama a la libreria GTK para poder hacer uso de ella. similar al #include en C como ven el crear una ventana es muy rápido window = gtk.Window() luego a ese widget podemos configuarar algunas propiedades como son el tamaño por defecto el titulo la posicion tambien creamos un boton con una etiqueta (texto que ira dentro del boton) }}} . cfoch3 {{{ si quiero una imagen en vez de texto? }}} . '''avaldes''' {{{ y luego "metemos" el boton dentro de la window mostramos todos los widgets y luego entramos al loop gtk.main() si ejecutan ese programa les aparecera una ventana con el boton si hacen click en el nada sucede porque? por que no hemos capturado la señal click del boton. }}} . b4ck7r4ck {{{ no hay un evento programado }}} . '''avaldes''' {{{ exacto. }}} . fmaq {{{ eso es equivalente al ejemplo free1.py ;) }}} . mondini {{{ ¿no hay un archivo del fuente en vez de un video? }}} . '''avaldes''' {{{ veamo el sigueinte ejemplo http://deb.utalca.cl/ogv/free1.ogv mondini, http://es.gnome.org/Eventos/CharlasIRC/CharlaNoviembre2009 }}} . b4ck7r4ck {{{ fuentes : http://deb.utalca.cl/gnome-hispano2009.tar.bz2 }}} . '''avaldes''' {{{ ahi estan }}} . mondini {{{ gracias }}} . '''avaldes''' {{{ bien }}} . mondini {{{ disculpen, pero no me daba la conexion }}} . '''avaldes''' {{{ el siguiente ejemplo (free1.py) realiza exactamente lo mismo pero ahora ejecutamos el script con egany con geany presionamos F5 para ejecutar la graciade geany es que nos levanta una ventana para depuracion bien al siguiente ejemplo donde vamos a capturar las señales http://deb.utalca.cl/ogv/free2.ogv pongan atencion a las linesa 48 a 50 en esas lineas indicamos que para el widget window cuando ocurra el evento "delete-event", es decir cierren la ventana llama a la funcion callback on_delete_event si van a la linea 10 veran la funcion ahora bien que parametros podemos pasar a la funcion de retrollamada (callback) lo podemos ver en devhelp buscamos el widget y la funcion asociada a cada señal. si lo corremos vereos que cuando se presiona el boton "Freedon :D" aparece un texto en la terminal claro, hemos capturado la señal clicked y llamado a la funcion correspondiente. vamos al ejemplo con libglade free3.py (espero que vayan de la mano conmigo viendo los codigos..:D) en este ejemplo importamos el modulo que nos permitira usar libglade ver linea 2. en la linea 21 vemos como llamamos al archivo xml que contiene la defincion de la GUI free3.glade luego obtenemos los widgets glade_file.get_widget ("nombre_del_widget") y luego "conectamos" las señales. pueden ver la diferencia que en los ejemplos anteriores creamos "a mano"los widget ahora no }}} . JuNix {{{ alvaldes: el codigo queda reducido :) }}} . '''avaldes''' {{{ pueden ver entonces que podemos modificar la interfaz y no sería necesario modificar el codigo a menos que agreguemos otros widgets o elimines alguno }}} . joaquindlz {{{ JuNix: la lógica queda aparte :) }}} . '''avaldes''' {{{ o le camiemos nombre. joaquindlz, asi es. JuNix, :D }}} . JuNix {{{ avaldes: que interesante, gracias :) }}} . '''avaldes''' {{{ el ejmplo free4.py introduce el tema de las clases para quienes les gusta la programacion orientada a objetos. estimados amigos por tiempo.. no puedo seguir pero en la ultima slide de la presentacion hay informacion de ls lista de correo }}} . JuNix {{{ ¿ como se utiliza el operador self cuando es orientado a objetos ? }}} . '''avaldes''' {{{ donde pueden suscribirse y podemos ir comentando los ejemplos }}} . ''neosergio'' {{{ http://mail.gnome.org/mailman/listinfo/gnome-hispano-list - lista Gnome Hispano http://mail.gnome.org/mailman/listinfo/gnome-cl-list - lista Gnome Chile }}} . mondini {{{ avaldes: muy bueno, muchas gracias }}} . JuNix {{{ avaldes: muchas gracias, la charla estuvo muy bien explicada, felicitaciones y muchas gracias ;) :D }}} . ''neosergio'' {{{ avaldes excelente charla }}} . '''avaldes''' {{{ amigos, lamentono disponer de mas tiempo. }}} . malev {{{ avaldes, me gusto mucho la charla! muy buena introduccion! }}} . b4ck7r4ck {{{ gracias por compartir avaldes }}} . cfoch3 {{{ gracias }}} . '''avaldes''' {{{ gracias por su atencion y espero haberles aportado en algo. bien amigos... }}} . ''neosergio'' {{{ El log de la charla estara disponible en : http://es.gnome.org/Eventos/CharlasIRC/CharlaNoviembre2009 }}} . '''avaldes''' {{{ les dejo la invitacion a la lista podriamos hacer una segunda parte sin problemas... ya veremoscon neosergio .. :D }}} . ''neosergio'' {{{ muchas gracias avaldes y esperamos contar contigo para otra charla en los meses proximos }}} . '''avaldes''' {{{ buen amisgos.. los dejo... adios! }}} . ''neosergio'' {{{ gracias avaldes }}}