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:
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.
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:
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:
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:
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.
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.
