U5 Interfaz gráfica Unidad 5 Interfaz Gráfica de Usuarios (GUI) Informática III – ISM – UNL 2018 Motivación Durante todo el cursado los programas que hemos realizado se utilizan mediante ingreso de texto por teclado en una consola (es decir, un interprete de comandos). Esto hace poco “amigable” e interactivo a nuestros desarrollos, más aún que actualmente tenemos tantos dispositivos con posibilidades gráficas como laptops, celulares, tablets, etc. Por lo tanto daremos una introducción a la programación de interfaces gráficas, usando en Python el módulo wxPython. GUI para Python GUI proviene de Graphical User Interface, que podríamos traducir a “Interfaz Gráfica de Usuario” en español, es decir, una forma de programar que nos permita desarrollar usando elementos gráficos estándar como ventanas, menúes, botones, grillas, etc. Cada lenguaje tiene sus propios GUIs, en el caso de Python podemos nombrar a Tkinter (nativo en Python) wxPython, Qt, GTK, entre los más conocidos. En este cursado aprenderemos wxPython. wxPython wxPython es un módulo para Python de la librería wxWidgets (escrita para C++) creado en 1996. El principal desarrollador de wxPython es Robin Dunn, quien en 1995 necesitaba mostrar un desarrollo gráfico en una máquina Unix (HP-UX) , pero su jefe también quería mostrarlo en Windows 3.1. wxPython es cross platform, es decir, puede usarse el mismo código para desarrollar en Windows, Mac y Unix. Nota: una guía de instalación de wxPython en Thonny puede encontrarse en este link. Ejemplo de wxPython Veamos el siguiente ejemplo: Ejemplo de wxPython Veamos el siguiente ejemplo: Importar el módulo wxPython Esto importa el módulo que tiene todas las funciones de wxPython. Todas las funciones de wxPython que usemos de ahora en adelante deberán comenzar con wx. Ejemplo de wxPython Veamos el siguiente ejemplo: Se crea la aplicación gráfica Si o si, todas las aplicaciones que desarrollemos de ahora en adelante con wxPython deben tener creado un objeto wx.App() que representa la aplicación gráfica. Ejemplo de wxPython Veamos el siguiente ejemplo: Se crea la ventana gráfica (wx.Frame) y se le da un título wx.Frame es la ventana gráfica, un tipo de “contenedor” (container) ya que es el objeto base que contendrá a los demás objetos (botones, menués, grillas, etc.). En otras palabras un objeto Frame es el “padre” (parent) de los otros objetos que crearemos. En este caso, el parent de frame no existe (es None) ya que es la ventana principal (o sea, no depende de nadie para inicializarse). Ejemplo de wxPython Veamos el siguiente ejemplo: Se muestra la ventana Al objeto frame debemos mostrarlo en pantalla usando el método Show() Si no lo hacemos, al ejecutarlo no veremos la ventana, aunque esté creada correctamente. Ejemplo de wxPython Veamos el siguiente ejemplo: Inicia la ejecución de la aplicación gráfica Finalmente ejecutamos un bucle infinito (si! y antes se enseñó que no debieran existir…). MainLoop (o “bucle principal”) nos permite ejecutar la aplicación hasta que la misma se cierre Mientras tanto, permite capturar todos los eventos de la ventana, como por ejemplo cuando se hace clic en el botón cerrar. El objeto wx.Frame Como vimos en el ejemplo, Frame es el objeto que representa una ventana y forma parte de los contenedores. wx.Frame posee una barra de título, bordes y un área central contenedora. Barra de titulo Borde Área contenedora El objeto wx.Frame Tamaño de la ventana: Se puede aplicar un tamaño específico de ventana mediante el método SetSize(ancho,alto), donde alto y ancho son los valores en píxeles. Por defecto el tamaño es 400x250 Posición de la ventana: También se puede configurar en qué posición de nuestra pantalla posicionar inicialmente la ventana con SetPosition((x,y)). Donde x e y son las posiciones de la esquina superior izquierda de la ventana. Por defecto (0,0). El objeto wx.Frame Posición de la ventana: frame.SetPosition((0,0)) frame.SetPosition((500,0)) - Centrado en pantalla: frame.Centre() Crear objetos de wx.Frame Usar una variable de tipo wx.Frame nos permite hacer ventanas y aplicaciones rápidamente, pero necesitamos cosas más complejas, como eventos, por ejemplo. Para eso debemos crear nuestra propia clase ventana, extendiendo de la clase wx.Frame: import wx class MiVentana(wx.Frame): def __init__(self,parent,id,name): wx.Frame.__init__(self,parent,id,name) Crear objetos de wx.Frame class es una palabra reservada que nos permite crear una ventana customizada, pero usando las propiedades genéricas de wx.Frame. Cuando se crea una nueva ventana se ejecuta automáticamente el método __init__() por eso lo escribimos ejecutando el método __init__() de la clase (wx.Frame). Una vez que definimos MiVentana, decimos que esta clase es “hija” de la clase wx.Frame. Análogamente decimos que wx.Frame es “padre” de MiVentana. Crear objetos de wx.Frame Dentro de la clase MiVentana el objeto self sirve para referenciar las propiedades de la ventana misma (self). Por ejemplo, si queremos cambiar el tamaño, hacemos: self.SetSize(300,500) Además, cada función creada dentro de la clases MiVentana, deberá llevar como primer parámetro la palabra self: class MiVentana(wx.Frame): … def CargarTitulo(self,titulo): self.SetTitle(titulo) Crear objetos de wx.Frame Este es un ejemplo de una clase derivada de wx.Frame Menú principal El menú principal de una ventana es el que vemos en la barra de título. wxPython nos permite crear esta barra de menú mediante el componente wx.MenuBar. Cada menú dentro de la barra puede crearse mediante wx.Menu. Y los items de cada menú mediante wx.MenuItem. Luego de creados cada item debe ser agregado a su correspondiente menú, y cada menú a la barra. Veamos un ejemplo: Menú principal Menú principal wxFormBuilder Programar ventanas desde el código si bien permite mayor control, hace más difícil de diseñar un programa con ventanas. Para diseñar visualmente las ventanas usaremos un software que nos permitirá crear las ventanas y luego exportar el código generado a nuestra IDE (Thonny). Este tipo de software se denominan RAD por Rapid Application Development (Desarrollo Rápido de Aplicaciones). Este software es wxFormBuilder (link) cuyo tutorial para instalar en su máquina pueden encontrarlo en el PDF de instalación de wxPython y Pyo. En este cursado cubriremos el uso de wxFormBuilder, pero también se pueden usar otras alternativas como wxGlade o DialogBlocks (free trial). wxFormBuilder Selección de componentes Componentes del proyecto Visualización gráfica/ Visualización código Propiedades y eventos de los componentes Ejemplo de uso de wxFormBuilder A continuación se mostrarán los pasos necesarios para hacer una aplicación con wxFormBuilder y wxPython. Vamos a generar una ventana con un botón y al hacer clic en el mismo, se mostrará un mensaje La salida debería ser la siguiente: Ejemplo de uso de wxFormBuilder El primer paso es crear el Proyecto Se ingresa un nombre en “name” y en “path” se hace clic en […] para elegir donde se guarda en la PC Ejemplo de uso de wxFormBuilder (1) Ahora agregaremos wx.Frame a nuestro (2) En Component Palette proyecto Elegimos la pestaña “Forms” y luego “Frame” Le damos el nombre (“name”), que será el nombre de variable y el titulo (“title”) Ejemplo de uso de wxFormBuilder La Paleta de Componentes (“Component Palette”) permite seleccionar los componentes visuales para hacer una aplicación con wxPython Cada pestaña es una categoría: Common (Comunes) tiene los componentes más usados en general, botones, menú de selección, texto estático, checks, imágenes, etc. Additional (adicionales) tiene componentes menos usados, pero útiles como buscador de archivos, colores, hiperlinks. Data (datos) posee los componentes para mostrar información, como grillas. Ejemplo de uso de wxFormBuilder Cada pestaña es una categoría: Containers (contenedores) son los componentes que permiten tener otros componentes, como paneles y separadores. Menu/Toolbar (menú y barra de herramientas) como los que vimos, pero permite otras configuraciones de menú con botones e imágenes. Layout: permiten ordenar automáticamente los componentes mediante los “sizers”. Forms: frames y ventanas de diálogos. Ejemplo de uso de wxFormBuilder Una vez creada la Ventana tenemos que posicionar un botón para hacer clic. Para ese paso vamos a la pestaña “Common” y seleccionamos “wxButton”. Probablemente veamos un mensaje de error como este: El mensaje nos indica que tenemos que agregar un “sizer” para que el objeto creado se posicione correctamente en la ventana. Ejemplo de uso de wxFormBuilder Podemos encontrar los sizers en la pestaña “Layout”, donde veremos las siguientes opciones: wxBoxSizer es el que más se usa y nos permite elegir ordenar los componentes dentro de la ventana en sentido horizontal o vertical. wxGridSizer permite ordenar los componentes en una grilla de filas y columnas de igual tamaño. wxFlexGridSizer es igual al wxGridSizer, pero las columnas o filas pueden variar de tamaño. wxGridBagSizer similar a wxGridSizer , pero permite cambiar el tamaño por celdas. Ejemplo de uso de wxFormBuilder (1) Agregamos el sizer (2) En Component Palette A la ventana Elegimos la pestaña “Layout” y luego “wxBoxSizer” (3) Le damos el nombre (“name”) y la orientación “orient” wxVERTICAL, de manera que los items ubiquen uno debajo del otro. Ejemplo de uso de wxFormBuilder (1) dentro del sizer (2) En Component Palette ubicamos el botón elegimos la pestaña “Common” y luego “wxButton” (3) Le damos el nombre (“name”) y un mensaje para mostrar en la opción