Cargando

Ir a contenido


 


Python - Interfaces de Usuario, parte 2

En la segunda parte de este tutorial profundizaremos un poco más en la creación de interfaces de usuario con Python.


Escrito por el nov 18 2013 16:30 interfaces usuario de Python


Como pudimos ver en la primera parte del tutorial, crear una ventana es bastante sencillo, en esta segunda parte vamos a ir un poco más allá yendo más adentro en lo que dejamos como base y ampliando el código para crear algo con un grado de complejidad mayor.

Añadir un botón

Una vez que dejamos la ventana, dentro de esta deben existir más elementos y uno de los más básicos pero muy importante es el botón, para añadirlo vamos a agregar btn = wx.Button(win) en nuestro código, veamos:

import wx
app = wx.App()
win = wx.Frame(None)
btn = wx.Button(win)
win.Show()
app.MainLoop()

Como vemos es prácticamente el mismo código anterior sin embargo le incluimos la instrucción que agrega el botón, en la imagen podemos ver el resultado:


El resultado no es muy estético ya que el botón ocupa toda la ventana, pero no debemos desanimarnos, en la siguiente sección veremos cómo controlar esto para generar un resultado más agradable a la vista.

Etiquetas y posiciones

En la sección anterior nos dimos cuenta que a pesar que es muy sencillo agregar más elementos debemos poder distribuirlos para que a nivel gráfico sea coherente con lo que deseamos lograr, para ello podemos establecer etiquetas, tamaños y posiciones para los elementos dentro de la ventana.

Vamos a ver el siguiente código con su correspondiente resultado de forma que podamos analizar y entender el proceso de mejor forma.

import wx
app = wx.App()
win = wx.Frame(None, title="Simple Editor")
loadButton = wx.Button(win, label='Open')
saveButton = wx.Button(win, label='Save')
win.Show()
app.MainLoop()

Como observamos le colocamos un valor al título de la ventana, como un argumento para el constructor al momento de instanciar, luego creamos dos botones y a cada uno le agregamos una etiqueta o label, podemos ver el resultado, aunque puede que no sea lo que esperamos:





Efectivamente podemos ver que algo no se ve bien y es que uno de los botones no está visible, esto es debido a que no le especificamos su posición, por lo tanto está oculto bajo el otro botón.

Vamos a corregir esto con el siguiente código:

import wx
app = wx.App()
win = wx.Frame(None, title="Simple Editor", size=(410, 335))
win.Show()
loadButton = wx.Button(win, label='Open',
					 pos=(225, 5), size=(80, 25))
saveButton = wx.Button(win, label='Save',
					 pos=(315, 5), size=(80, 25))
filename = wx.TextCtrl(win, pos=(5, 5), size=(210, 25))
contents = wx.TextCtrl(win, pos=(5, 35), size=(390, 260),
					 style=wx.TE_MULTILINE | wx.HSCROLL)
app.MainLoop()

Con este código aparte de corregir el detalle con las posiciones de los botones, aprovechamos y agregamos unos controles de texto, veamos en la siguiente imagen como quedaría todo.





Ya las cosas tienen mejor forma, sin embargo ahora nos preguntamos, que haremos con esta ventana, pues en la siguiente sección vamos a definir algunas funcionalidades.

Manejo de eventos

Utilizando este tipo de enfoque para crear nuestros programas, también nos cambia un poco la visión de lo que hacemos, en este caso ya las acciones que ejecuta el programa las llamaremos eventos, estos eventos se disparan con acciones del usuario como por ejemplo hacer click en un botón, por ello hemos modificado un poco el código para incluir estos eventos:

loadButton.Bind(wx.EVT_BUTTON, load)

Esa línea nos hace una unión entre la función load y el elemento, en este caso un botón, entonces ya sabemos que primero debemos definir una función y luego asignarla en un evento ligado a un elemento.

Veamos el código final:

import wx
def load(event):
file = open(filename.GetValue())
contents.SetValue(file.read())
file.close()
def save(event):
file = open(filename.GetValue(), 'w')
file.write(contents.GetValue())
file.close()
app = wx.App()
win = wx.Frame(None, title="Simple Editor", size=(410, 335))
bkg = wx.Panel(win)
loadButton = wx.Button(bkg, label='Open')
loadButton.Bind(wx.EVT_BUTTON, load)
saveButton = wx.Button(bkg, label='Save')
saveButton.Bind(wx.EVT_BUTTON, save)
filename = wx.TextCtrl(bkg)
contents = wx.TextCtrl(bkg, style=wx.TE_MULTILINE | wx.HSCROLL)
hbox = wx.BoxSizer()
hbox.Add(filename, proportion=1, flag=wx.EXPAND)
hbox.Add(loadButton, proportion=0, flag=wx.LEFT, border=5)
hbox.Add(saveButton, proportion=0, flag=wx.LEFT, border=5)
vbox = wx.BoxSizer(wx.VERTICAL)
vbox.Add(hbox, proportion=0, flag=wx.EXPAND | wx.ALL, border=5)
vbox.Add(contents, proportion=1,
		 flag=wx.EXPAND | wx.LEFT | wx.BOTTOM | wx.RIGHT, border=5)
bkg.SetSizer(vbox)
win.Show()
app.MainLoop()

Este programa lo que hace es editar archivos de texto de una forma bastante básica, sin embargo nos hizo emplear bastantes funciones y aplicaciones.

Con esto finalizamos el tutorial, conociendo como utilizar un toolkit de interfaz de usuario, alentamos a que investiguen sobre los diferentes toolkits existentes, inclusive los que son exclusivos para un sistema operativo en particular, recordando que cada herramienta nos será útil en alguna ocasión.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado nov 18 2013 16:30
  •   Actualizado nov 19 2013 14:37
  •   Visitas 732
  •   Nivel
    Profesional



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse