Manejo de Interfaz Gráfica de Usuario en Python

Por Miguel Alberto Sediles Di Quinzio. @nefisco

Justificación:

Este tutorial explica cómo realizar una interfaz gráfica (GUI) básica en python, la utilidad de esto como es casi evidente es que permite el desarrollo de aplicaciones de escritorio para todo usuario, mas allá de un script sencillo, permitiéndonos también desarrollar programas y aplicaciones más complejos y sin embargo accesibles a los demás.

Preparación:

Para este tutorial debemos tener previamente instalado Python 2.7, que es la versión del lenguaje que utilizaremos y el WxPython 2.8 que hasta la fecha es el ultimo han sacado, es compatible con Python 2.6 y Python 2.7.
Y si lo deseamos algún otro editor de Python aparte del que trae incorporado, en mi caso use el Active Python.

Elaboración:

A continuación explicare el código para realizar la interfaz, en este ejemplo realizare una interfaz de calculadora simple.
Import wx

Se realiza un import del modulo wx que es donde se contienen todos los comandos y funciones para el desarrollo de interfaces gráficas, la podremos usar una vez instalado el WxPython.

app = wx.App()    


Creamos una variable app que será una instancia de la clase aplicación, al final veremos su utilidad.
Ahora crearemos el frame principal:

window = wx.Frame(None, title = 'Calculadora Basica en Python 
by Nefisco', pos = (100,100), size = (420,400))


window es el nombre de mi frame, es una instancia d ela clase wx.Frame, espera un padre que como en este caso no tiene, ponemos None, un titulo, una posición inicial y un tamaño, todo esto lo ajustamos a nuestro gusto.

Los Botones:

suma = wx.Button(window, label = '+',
     pos = (100 - 60 - 15, 230), size = (60,25))

resta = wx.Button(window, label = '-',
     pos = (200 - 60 - 15, 230), size = (60,25))

multiplica = wx.Button(window, label = '*',
     pos = (300 - 60 - 15, 230), size = (60,25))

divide = wx.Button(window, label = '/',
     pos = (400 - 60 - 15, 230), size = (60,25))


Estos son los botones que usaremos, son instancias de la clase wx.Button, esperan un contenedor, el frame window en este caso, label es la lo que mostraran en la interfaz, para el ejemplo simplemente le asigne los operadores matemáticos, para que el usuario sepa cual usar, dependiendo de su gusto, pos es la posición donde se encontraran centro del frame y por ultimo size que es su tamaño, espera solamente ancho y alto (whidth y heigth).
Los Campos de Texto:

valor1 = wx.TextCtrl(window, pos = (10, 30), 
size = (400 - 120 - 15 - 10, 25), style=wx.TE_PROCESS_ENTER)

valor2 = wx.TextCtrl(window,  pos = (10, 100), 
size = (400 - 120 - 15 - 10, 25), style=wx.TE_PROCESS_ENTER)

resultado = wx.TextCtrl(window,  pos = (10, 170), 
size = (400 - 120 - 15 - 10, 25),style=wx.TE_PROCESS_ENTER)


Son bastante parecidos a los botones solo que heredan de wx.TextCTRl, en posición esperan una coordenada X y otra coordenada Y, en size las dimensiones que tendrán, además tienen un estilo, wx. TE_PROCESS_ENTER, esto es para que el usuario pueda escribir los números, hay varios estilos como los solo lectura o los tipo contraseñas, que ocultan los caracteres escritos.

Las Etiquetas:

label1 = wx.StaticText(window,label='Valor 1',
size = (400 - 120 - 15 - 10, 25),pos = (10, 10))

label2 = wx.StaticText(window,label='Valor 2',
size = (400 - 120 - 15 - 10, 25),pos = (10, 80))

label3 = wx.StaticText(window,label='Resultado',
size = (400 - 120 - 15 - 10, 25),pos = (10, 150))

label4 = wx.StaticText(window,label='Made By Nefisco',
size = (400 - 120 - 15 - 10, 25),pos = (10, 300))


Mas simples que los campos de texto, simplemente son instancias de la clase wx.StaticText, esperan a un contenedor, window en este caso, un tamaño igual que los campos de texto y una posición igualmente en coordenadas X y Y, en label se asigna el texto que se desea mostrar en ellos

window.Show()


esto hace que se muestre nuestro frame, que ya contiene todos los elementos que le quisimos agregar

app.MainLoop()


Y por ultimo hacemos que la aplicación que creamos sea un bucle principal, de tal manera que tenga prioridad con la interfaz y la mantenga visible hasta que deseemos cerrarla nosotros mismos, esto evita que se sierre automáticamente, como pasa con los scripts una vez que terminaron su programación
El Código Completo:

import wx

app = wx.App()

#frame
window = wx.Frame(None, title = 'Calculadora Básica en Python 
by Nefisco', pos = (100,100), size = (420,400))

#botones
suma = wx.Button(window, label = '+',
  pos = (100 - 60 - 15, 230), size = (60,25))

resta = wx.Button(window, label = '-',
  pos = (200 - 60 - 15, 230), size = (60,25))

multiplica = wx.Button(window, label = '*',
  pos = (300 - 60 - 15, 230), size = (60,25))

divide = wx.Button(window, label = '/',
  pos = (400 - 60 - 15, 230), size = (60,25))

#text box
valor1 = wx.TextCtrl(window, pos = (10, 30), 
size = (400 - 120 - 15 - 10, 25), style=wx.TE_PROCESS_ENTER)

valor2 = wx.TextCtrl(window,  pos = (10, 100), 
size = (400 - 120 - 15 - 10, 25), style=wx.TE_PROCESS_ENTER)

resultado = wx.TextCtrl(window,  pos = (10, 170), 
size = (400 - 120 - 15 - 10, 25),style=wx.TE_PROCESS_ENTER)

#labels

label1 = wx.StaticText(window,label='Valor 1',
size = (400 - 120 - 15 - 10, 25),pos = (10, 10))


label2 = wx.StaticText(window,label='Valor 2',
size = (400 - 120 - 15 - 10, 25),pos = (10, 80))


label3 = wx.StaticText(window,label='Resultado',
size = (400 - 120 - 15 - 10, 25),pos = (10, 150))

label4 = wx.StaticText(window,label='Made By Nefisco',
size = (400 - 120 - 15 - 10, 25),pos = (10, 300))

window.Show()
app.MainLoop()


Aqui les dejo unas imágenes de el código completo en ActivePython y la interfaz en ejecución




Ideas a Futuro:

En el próximo tutorial enseñare como manejar y agregar eventos a la interfaz para que la aplicación este completa y funcional

Si tienen alguna duda o sugerencia sobre el tutotial pueden escribirme a mi twitter @Nefisco o a mi correo.

  1. yucazos ha publicado esto
Short URL for this post: http://tmblr.co/ZbaP8xBRG4LX
blog comments powered by Disqus