Tutorial Introductorio al

IDE boa-constructor
Werner F. Bruhin
Tomado de Boa-Constructor V. 0.6.1
Traducido por: Daniel Beltrn R.
danbelt@gmail.com
Mayo 2009
Bogot-Colombia
Contenido
1. Introduccin
2. Creando una aplicacin.
3. Usando el Diseador para cambiar el ttulo.
4. Agregar una barra de estado. (Status Bar)
5. Agregando una barra de men. (Men Bar)
6. Agregando un cuadro de texto. (Text Control)
7. Agregando una funcin al men de archivo. (File Menu)
8. Creando una ventana emergente. (Dialog Window)
9. Creando una aplicacin usando grillas. (Sizers)
8 Creando una Ventana Emergente 3
1 INTRODUCCIN
Esta seccin presenta un breve tutorial que le permitir familiarizarse con la aplicacin de des-
arrollo Boa-Constructor. Este tutorial lo llevar paso a paso a travs del proceso de construccin
de un editor de texto sencillo. Dspues de trabajar a travs de este tutorial, ud entender lo
suciente para generar alguna aplicacin wxpython con Boa-constructor.
Ud aprender como:
1. Crear una aplicacin.
2. Crear marcos, mens y barras de estado.
3. Crear controles como botones, cuadros de texto y etiquetas.
4. Congurar los controles a sus necesidades.
5. Trabajar con ventanas emergentes.
6. Disear sus propias ventanas emergentes.
2 Creando una nueva aplicacin.
Antes que todo vamos a dar una breve introduccin a las herramientas de esta aplicacin, para
que podamos entendernos ms adelante.
La paleta de opciones es:
A partir de esta herramienta accederemos a los objetos como botones, cuadros de texto,
marcos y hasta podemos crear mdulos y paquetes para nuestras aplicaciones, es decir a partir
de esta herramienta podremos dar inicio a nuestra aplicacin en python.
El Inspector:
A partir de esta herramienta podremos acceder a las propiedades y eventos de nuestros
objetos, asi como podremos acceder a los objetos mismos.
2 Creando una nueva aplicacin. 5
El editor:
A mi modo de ver la parte ms trabajada o por lo que podrs darte cuenta, pues en este
editor es donde podrs accerder a el cdigo fuente de la aplicacin, asi como puedes correr la
aplicacin, e inclusive visualizar los errores en ejecucin.
En algunas partes de este documento nos remitiremos a otras secciones o herramientas que
nos sern tiles en el desarrollo del tutorial.
despus de esta breve presentacin, ahora si vamos con nuestra primera aplicacin.
Escoge un directorio donde almacenaras tu aplicacin. Si es necesario crea este directorio.
crearemos una nueva aplicacin usando el botn de wx.app ubicado en la paleta, en
la pestaa nuevo (New).
Guarde los archivos App1.py y Frame.py en el directorio creado previamente estos
archivos aparecen como pestaas en el editor. Usted puede usar el botn guardar (Save)
ubicado en la barra de herramientas del editor. Note que los asteriscos (*) desaparecen
del nombre cuando este es guardado. Este indica que los cambios no han sido guardados
en el archivo.
Ahora tienes una aplicacin, la cul solo muestra un marco (Frame) en blanco. Usa Run
Application -> correr aplicacin, para ejecutar nuestra aplicacin.
2 Creando una nueva aplicacin. 7
3 Usando el Diseador para cambiar el Ttulo.
Seleccione la pestaa de Frame1 en el editor y verique que est editando el marco
(Frame).
Inicie el diseador, aplicando en el botn en la barra de herramientas.
El marco se mostrar como un rea de dibujo (inicialmente mostrar como
ttulo Frame1).
Dos nuevos paneles o pestaas se habilitarn en el editor el panel Data y Sizer.
En el Inspector se mostrar una pestaa o panel de constructor Constr. Este panel o
pestaa le permitir editar el tamao, posicin, estilo, nombre de la variable asi como el
ttulo del componente. Edite el campo llamado Title (Ttulo). dando nombre al
marco Editor de Texto, cuando presione la tecla Enter podr notar que el ttulo del
marco (Frame) ha cambiado.
3 Usando el Diseador para cambiar el Ttulo. 9
Ud tendr que guardar los cambios usando el Post Enviar botn en el inspector o
en la ventana del editor.
El diseador de la ventana se cerrar.
Podr notar que el cdigo fuente ha cambiado actualizandose y reejandose en el ttulo.
El editor le mostrar que el cdigo fuente ha cambiado por medio de un asterisco (*) en
las pestaas del proyecto, por ende deber guardar los cambios con el botn ubicado en el
editor, para cada pestaa que se ha modicado.
4 Agregando Una Barra de Estado (Status Bar)
El primer componente que agregaremos a la aplicacin ser una barra de estado (Status Bar), la
cul se usar para dar informacin sobre la aplicacin cuando este se este ejecutando. Usaremos
la barra de estado para indicarle al usuario que esta sucediendo cuando ocurran acciones lentas,
dando mensajes de ayuda o algn otro tipo de mensajes que desees mostrar.
Selecciona la pestaa correspondiente al marco (Frame) y comienza la edicin con
El marco se mostrar como un rea de dibujo.
En la paleta selecciona la pestaa Containers/Layout. Esta pestaa contiene diversos
componentes que usaremos en nuestros marcos, la barra de estado es uno de esos compo-
nentes.
Mueva el ratn sobre los botones. Un mensaje de ayuda se mostrar sobre cada uno de
ellos, seleccione aquel que sea wx.StatusBar.
Ahora mueva el puntero sobre el marco a disear. Presione el botn izquierdo del ratn
en el rea de diseo en el marco, este crear una barra de estado en el marco.
La lnea de estado en el inspector mostrar en la pestaa Constr en la izquierda del ele-
mento statusbar1, y en la derecha mostrar la clase wx.Widget de la que deriva el
objeto, en este caso wx.StatusBar.
En el Inspector seleccione la pestaa o panel de Propiedades - Properties. Este panel
servir para congurar las propiedades de la barra de estado.
Aplique en la casilla de Fields - Campos. Esta casilla le mostrar un botn
con +++ , Aplique el botn. Este abrir el Collection Editor - Editor de colec-
ciones.
4 Agregando Una Barra de Estado (Status Bar) 11
Este editor de colecciones es una herramienta, la cul ser usada para agregar mltiples
sub-componentes a componentes donde sea requerido. Agreguemos un campo a la barra
de estado, sin embargo ud podr agregar mltiples campos.
Presione el botn Nuevo en el Editor de Colecciones. Este crear un nuevo campo
dentro de la barra de estado. Este llegar a ser el campo actual en el inspector.
Edite el texto de este campo. Cambie el nombre de Fields0 a Estado.
El editor de colecciones posee en sus herramientas la de refrescar . Presione este botn
para ver el cambio en el inspector.
Cierre el editor de colecciones. Seleccione la ventana del diseador. Aplique sobre esta
ventana hasta que se encuentre sobre el marco principal.
Seleccione la pestaa de propiedades en el inspector.
Edite la popiedad Status Bar - Barra de Estado. este le desplegar una nueva barra
de estado. Seleccione la barra de estado creada, esta ser necesaria para manejar el marco
principal, por ejemplo la posicin del borde superior de la pantalla y su tamao.
Actualice el codigo fuente con los cambios efectuados usando el botn enviar .
Guarde el codigo fuente usando el botn guardar en la barra de herramientas del editor.
4 Agregando Una Barra de Estado (Status Bar) 13
5 Agregando Una Barra de Men.
El siguiente componente que agregaremos a la aplicacin ser una barra de men. Un men es
un componente comn en las ventanas. Nuestro men contendr dos entradas. Archivo y
Ayuda. Seleccionanado alguno de estos se desplegar un men. El usuario podr seleccionar una
opcin del men seleccionado.
Seleccione el marco o Frame1 en las pestaas del editor para comenzar la edicin del
mismo.
Inicie el diseador, aplicando sobre el botn en la barra de herramientas del editor.
El diseador agregar en el editor dos nuevas pestaas, estas sern Data y Sizer.
En la paleta seleccione la pestaa Utilities (Data) - Utilidades (Datos). El men
desplegable (wx.menu) es uno de estos componentes en esta pestaa.
Mueva el ratn sobre los botones. Algunos tips de ayuda aparecern con una breve des-
cripcin de estos componentes, aplique sobre el wx.menu.
El botn debe cambiar indicando que ha sido presionado,. La paleta contiene una casilla
sobre la parte superior que indicar el componente seleccionado, en este caso deber ser
wx.menu.
Seleccionando:
Las pestaas que se agregan al editor:
Ahora aplique sobre la pestaa Data en el editor.
El men no ser visible en el marco principal Frame1. Sin embargo estar en el visor de
la pestaa Data.
Repita el procedimiento , es decir agregue otro men, ya que necesitaremos dos opciones
de men en el visor Data, denominados menu1 y menu2. Seleccione menu1 usando el
ratn. El inspector ahora le mostrar el nombre y ttulo para menu1.
Edite el nombre del primer wx.menu y denominelo menArchivo. Denomine el segundo
wx.menu como menAyuda. Cambie los ttulos a Archivo y Ayuda respectivamente.
Aplique dos veces en el menuAyuda en el visor de datos o pestaa Data. Este
abrir el editor de colecciones Collection Editor.este editor de colecciones le per-
mitir agregar tems a nuestros mens.
Presione el botn Nuevo en el editor de colecciones. Este crear un nuevo tem en el
men, el cul se desplegar. Este ser el tem actual para analizar con el inspector.
Edite el campo Label - Etiqueta. Cambie el nombre de Items0 a Acerca De... y se
5 Agregando Una Barra de Men. 15
recomienda cambiar el Itemid de ITEMS0 a ACERCA.
Edite el campo Help String a Informacin general acerca de editor de textos.
El editor de colecciones contiene el botn refrescar . Presionelo para ver los cambios
realizados en la ventana del editor de colecciones.
Editando tems de el editor de colecciones:
Refrescando con el editor de colecciones:
En el inspector, seleccione la pestaa de eventos Evts. Este es un panel que le permitir
congurar los eventos de los objetos. Necesitaremos congurar la accin que ocurrir
cuando se seleccione el tem Acerca De... de nuestro men. Cuando este tem sea selec-
cionado y el evento llamado EVT_MENU se generar y se enviar a nuestro programa.
Vamos a agregarle un mtodo a este evento.
El lado izquierdo del panel de eventos en el inspector, muestra los grupos de eventos que
estn permitidos. Para el menu de los tmes, estos son solamente un nico evento en el
grupo de EVT_MENU en MenuEvent. Aplique dos veces en este evento utilizando el
ratn.
Sobre el panel de eventos se mostrarn los manejadores en su aplicacin con el compo-
nente actual (El tem de men Acerca de...). Ud debe tener ahora un manejador deno-
minado OnMenuAcercaDe. Este es el nombre del mtodo el cul se invocar cuando la
opcin Acerca De... sea seleccionado del men de ayuda.
Note el nombre del manejador. Boa Constructor generar el nombre de esta manera. El
evento es la ltima parte del men. El componente es la parte media y este es el subcom-
ponente Acerca De del componente menuAyuda. Finalmente, Boa Constructor sigue la
5 Agregando Una Barra de Men. 17
convencin de prejos en todos los manejadores de eventos con la palabra reservada On.
Cierre el editor de colecciones.
Ahora realizaremos los mismos pasos para el men de archivo.
Desde el visor de datos en el editor, aplique dos veces sobre el tem menuArchivo para
abrir el editor de colecciones.
Agregue cinco 5 tems.
Seleccione cada tem y etiquetelo como Abrir, Guardar, Guardar Como, Cerrar,
Salir, y otra vez debera recomderdar cambiar el ItemId. Ingrese algn texto de ayuda
para cada tem del men. Presione el botn refrescar en el editor de colecciones y se mos-
trarn las nuevas etiquetas.
Seleccione un evento para cada tem del men, recuerde que esto se hace mediante el ins-
pector.
Cierre el editor de colecciones.
Ahora vamos a crear una barra de men
En la paleta, seleccione la pestaa Utilities (Data) - Utilidades (Datos). En este panel
o pestaa seleccione el componente de barra de men MenuBar.
Mueva el cursor sobre el visor de datos en el editor. aplique con el botn izquierdo en
esta pestaa y agregue la barra de men denominada menuBar1 a la aplicacin.
Aplique dos veces en el tem de menuBar1 para abrir el editor de colecciones.
Agregue dos 2 tems a la barra de menu usando el editor de colecciones.
Seleccione Menus(), en el inspector, edite el campo de Menu.
Este es un men desplegable "Pop-up", con tres tems, el constructor de wx.Menu() y
otros dos menus, seleccione el tem self.menuArchivo y cambie el ttulo a Archivo. Este
ser el primer men de menuArchivo, en la barra de men.
En el editor de colecciones seleccione el segundo tem. Repita los pasos a el enlace
Menus1 para el men desplegable de Ayuda, con la etiqueta Ayuda.
Seleccione el marco principal, Frame1 en el diseador. El marco deber activarse en el
inspector.
Seleccione el panel de propiedades Props en el inspector. Edite el campo MenuBar.
Este ser un men "Pop-up". Seleccione su nueva barra de men self.menuBar1. Esta
propiedad dene cul barra de men estar con el marco.
""""imagen"""
Guarde los cambios usando el botn enviar para cerrar el diseador, y deje que Boa
genere el codigo fuente.
Guarde el codigo fuente generado en el archivo correspondiente al marco principal.
Ejecute la aplicacin.
Ahora deber ver los mens y las barras de estado.
Cuando seleccione la opcin de men, el texto de ayuda deber aparecer en la barra de
estado.
5 Agregando Una Barra de Men. 19
6 Agregando un texto de control
El siguiente paso ser agregar una casilla de control "Aquella utilizada para ingresar datos".
Este control se denomina wx.TextCtrl.
Abra el diseador para editar el marco principal.
En la paleta, seleccione la pestaa o panel Controles Bsicos - Basic Controls. Selec-
cione el wx.TextControl.
Mueva el ratn a la ventana del diseador, por defecto el tamao del control tomar el
rea libre. por ejemplo entre la barra de estado y la barra de men.
Por defecto la entrada en el wx.TextControl es una lnea sencilla. Vamos a indicarle al
control, que queremos que sea una entrada de varias lneas de datos. Para hacer esto
posible editamos la propiedad Style en el inspector.
Editamos el estilo y cambiamos el estilo a wx.TE_MULTILINE. Usted puede editar este
espacio, o seleccionar aplicando a la izquierda del estilo, Boa le mostrar los estilos dispo-
nibles. Cambie los estilos que quiera usar a True aplicando sobre ellos.
El campo de estilo contiene cdigo vlido de python. Para cambiar dos estilos lgicos
usted debe separar con un | . Ya puede ver todos los estilos disponibles para el wx-Text-
Control en la ayuda wxPython en lnea para la clase wx.TextControl.
"""""Dibujo"""""
Renombre el campo del texto. Por defecto el nombre es textCtrl1. Cambielo a editor-
Texto.
En el panel de constructor este se llama valor - Value. Este campo contiene el valor
por defecto del control. Deje en blanco este campo.
Guarde sus cambios en el cdigo fuente.
Ejecute la aplicacin.
"""""imagen ejecutando"""""""
El campo del editor de texto establecer su tamao automticamente en el espacio dispo-
nible.
Si usted redimensiona el marco, el control lo har.
Note que wxWidgets le provee con un scrollbar - barra de dezplazamiento. Este campo
estar automticamente, si usted ingresa lineas ms largas que la ventana de nuestro
editor.
Otra funcin que tiene por defecto esta aplicacin ser la de cortar y pegar.
7 Agregando Una Funcionalidad Al Men De Archivo
Lo siguiente que realizaremos ser interactuar con el usuario, al implementar una funcionalidad
al men creado previamente. Los dialogos son utilizados para obtener entradas inmediatas del
usuario. Los dialogos son aplicaciones modales, por ejemplo usted no podr usar otra ventana o
marco hasta que la actual sea cerrada.
Los dialogos son ubicados directa mente en el cdigo fuente. Estos no pueden ser dez-
plazados en el diseador. Estos son colocados con el editor. En el cdigo fuente de
Frame1.py, vaya al manejador del evento. Este mtodo es denominado OnMenuArchivoA-
brirMenu. Vamos a asignarle la ventana de dialogo que permite abrir un archivo. Coloque
el cursor antes de event.skip(). Y vamos a insertar nuestro cdigo all.
Presione "alt-t" y seleccione wx.FileDialog desde el men desplegable y Boa Constructor
pegar el cdigo base directamente en el manejador del evento del mtodo (Recuerde que
mtodo es la funcin que se realizar como activar un botn).
Note que el cdigo dlg.Destroy(), es muy importante para destruir los dilogos!
En la seccin del cdigo fuente debe aparecer algo como:

def OnMenuArchivoAbrirMenu(self, event):

dlg = wx.FileDialog(self, "Choose a le", ".", "", "*.*", wx.OPEN)
try:
if dlg.ShowModal() == wx.ID_OK:
lename = dlg.GetPath()
#Your code
nally:
dlg.Destroy()
event.skip()

Este cdigo base crear el dialogo que interactuar con el usuario. Cuando el dilogo
halla nalizado este ser destruido.
Las palabras #Your code marcan la posicin donde insertaremos nuestro cdigo. Para
este caso, nuestro cdigo solo ser efectivo cuando el dilogo retorne wx.ID_OK, por
ejemplo cuando el usuario aplique en el botn brir. El wx.TextCtrl posee un mtodo el
cul usaremos para cargar un archivo en nuestra ventana del editor de texto, para esto
usaremos el mtodo LoadFile.
Usted puede eliminar el evento event.skip() pues no necesitamos llamar otro evento en
este caso. Usted debera llamar este evento cuando otro evento de manejadores deba ser
ejecutado a la vez.
Este es necesario cuando se genera el cdigo por que de otra manera Python se quejara
pues encontrara un mtodo sin cuerpo alguno.
Como parte de la funcionalidad de nuestra aplicacin debemos permitir el acceso al
nombre del archivo y que la opcin de Abrir pueda abrir el archivo, entonces agregamos
la lnea self.FileName=lename.
La lnea self.SetTitle((Editor De Texto - %s % lename) cambiar el ttulo a mostrar
agregando el nombre del archivo.
A continuacin veremos como queda el nuevo cdigo:

def OnMenuArchivoAbrirMenu(self, event):

dlg = wx.FileDialog(self, "Choose a le", ".", "", "*.*", wx.OPEN)
try:
if dlg.ShowModal() == wx.ID_OK:
lename = dlg.GetPath()
#Your code
self.textEditor.LoadFile(lename)
self.FileName=lename
self.SetTitle((Editor de Texto - %s) % lename)
nally:
7 Agregando Una Funcionalidad Al Men De Archivo 21
dlg.Destroy()

Debemos repetir el ejercicio para la opcin Guardar Como.... Ingrese una archivo de
dialogo en el cuerpo de nArchivoGuardarComoMenu.
Este es un dilogo de guardar archivo. Cambie el segundo parmetro del visor "prompt"
wx.FileDialog a "Guardar Como", cambie el estilo, en el parmetro 6 a wx.SAVE. El
mtodo para guardar el archivo se llama SaveFile.
De nuevo guardaremos el valor del nombre del archivo usando la opcin Guardar.
A continuacin mostrar el cdigo:

def OnMenuArchivoGuardarComoMenu(self, event):

dlg = wx.FileDialog(self, "Guardar Como", ".", "", "*.*", wx.SAVE)
try:
if dlg.ShowModal() == wx.ID_OK:
lename = dlg.GetPath()
#Your code
self.textEditor.SaveFile(lename)
self.FileName=lename
self.SetTitle((Editor de Texto - %s) % lename)
nally:
dlg.Destroy()
event.skip()

Lo siguiente que realizaremos ser la implementacin de la opcin Cerrar. en este

mtodo utilizaremos el control clear en el textEditor, limpiaremos la variable FileName y
reiniciaremos el ttulo.

def OnMenuArchivoCerrarMenu(self, event):

self.FileName = None
self.textEditor.Clear()
self.SetTitle(Editor De Texto)

Lo siguiente ser implementar la opcin Salir. Este mtodo necesita terminar la aplica-
cin. Todas las aplicaciones wx.Python son nalizadas con el botn de cerrar en el nivel
superior de la ventana. En nuestro caso solo tenemos la ventana Marco1 "Frame1". Al
terminar la aplicacin invocaremos el mtodo Close() para el marco1 "Frame1".

def OnMenuArchivoSalirMenu(self, event):

self.Close()

Lo siguiente a implementar ser la opcin de guardar. Este men guardar el archivo uti-
lizando el nombre actual del mismo, el cul se guardar en la variable self.FileName.
Cuando no exista un nombre actual, la variable self.FileName deber actuar como la
opcin guardar como.
La variable FileName debe ser creada cuando el marco1 "Frame1" sea construdo.
Debemos agregarla al constructor. Usted puede agregarle este cdigo a su aplicacin al
nal del constructor por defecto (_init_).

def _init_(self, parent):

self._init_ctrls(parent)
self.FileName=None

Ahora estamos seguros de implementar la funcin Guardar. Vericaremos si el archivo

tiene un nombre actualmente. Si este se encuentra podremos guardar el contenido del
archivo con ese nombre. De otra forma, debemos acudir al mtodo Guardar Como.

def OnMenuArchivoGuardarMenu(self, event):

if self.FileName == None:
return self.OnArchivoGuadarComoMenu(event)
else:
self.textEditor.SaveFile(self.FileName)

Ahora tenemos implementadas las funcionalidades de nuestro editor de texto. Podemos

abrir, editar, y guardar archivos.
Su editor debe verse similar al que se mostrar a continuacin.
El archivo App.py fue abierto
Luego la opcin Archivo/Guardar Como... fue seleccionada
""""""""""""""""imagen Editor Texto"""""""""""""""
7 Agregando Una Funcionalidad Al Men De Archivo 23
8 Creando una Ventana Emergente
Las ventanas emergentes son utilizadas para interactuar y capturar informacin del usuario. En
las secciones previas usamos ventanas preconstruidas wx.FileDialog. Ahora vamos a desarrollar
nuestra propia ventana emergente de la opcin de men Acerca de....
El dialogo que crearemos requerir una nueva ventana. Este no es un componente de el
marco1 - Frame1. Este dialogo aparecer en nuestra aplicacin como un archivo python
independiente. Seleccione el mdulo de aplicacin App1 en el editor. Seleccione la pes-
taa o panel Application.
En la paleta, seleccione el panel Nuevo - New. Seleccione el botn wx.Dialog. Este
crear un nuevo archivo fuente Dialog1.py, y automticamente agregar este cdigo
fuente al mdulo de la aplicacin que hemos realizado hasta ahora.
Seleccione el panel Frame1. Vamos a escribir el,cdigo paar la opcin de men Acerca
De..., la cul ser usada al mostrar la ventana de dilogo. Esta opcin es implementada
por el mtodo OnAyudaAcercaDeMenu. El cdigo es el siguiente:

def OnMenuAyudaAcercaDeMenu(self, event):

dlg = Dialog1.Dialog1(self)
try:
dlg.ShowModal()
nally:
dlg.Destroy()

Este cdigo se reere al mdulo de Dialog1. Antes de que el cdigo trabaje, debemos
importar el mdulo de Dialog1. Por convencin, debemos importar el mdulo al inicio del
cdigo fuente. Agregando la lnea import Dialog1 al archivo Frame1.py despus de la
lnea import wx.

import wx
import Dialog1

Guardando el rbol de archivos fuente. Usted podr ejecutar la aplicacin ahora. Cuando
seleccione la opcin Acerca De... en el men de ayuda, su nueva ventana de dilogo apa-
recer. Ntese que esta ventana es modal, es decir debe cerrarla para poder acceder al
resto de la aplicacin. Salga de la aplicacin y retorne a Boa Constructor.
Ahora agregaremos algunos campos al dilogo. Para este ejercicio necesitaremos una
imagen. Para demostrarlo utilizaremos una llamada Boa.jpg. Copie la imagen seleccio-
nada al directorio donde esta guardando la aplicacin.
Seleccione el panel Dialog1.py inicie el diseador aplicando sobre el botn
Lo primero ser agregar la etiqueta al dilogo. En la paleta seleccione Basic Controls -
Controles Bsicos. Desde este panel seleccione el control wx.StaticText. Aplique sobre el
diseador para crear este control.
En el inspector edite el campo Label - Etiqueta. Cambie el valor a Notas - Editor De
Texto. Ntese que la etiqueta en el diseador se acomodar al tamao de la ventana.
Usaremos la propiedad de Style - estilo para congurar la alineacin del texto contenido
en esta etiqueta. Cambie esta propiedad a wx.ALING_CENTRE o seleccione este estilo
antes aplicando en el selector a la izquierda de Style - Estilo.
Seleccione el panel de Propiedades en el inspector. Edite el campo Font - Fuente.
Cambie el tamao razopnablemente. Ntese que puede cambiar el tamao y la fuente con
esta propiedad.
En la ventana del diseador aparecer su etiqueta con los marcadores en las esquinas.
aplicando y reteniendo con el botn izquierdo sobre estos puede redimensionar la caja.
As mismo realizando lo mismo pero sobre el centro puede desplazar la etiqueta.
Agregue otra etiqueta bajo la anterior. cambie el texto por Esta es la primera aplica-
cin. En el inspector seleccione el panel Propierties - Propiedades. Edite el valor
de color de fondo - BackGroundColor. Seleccione un color a su gusto.
Lo siguiente ser agregar la imagen. Desde Basic Controls - Controles Bsicos en al
paleta seleccione el control wx.StaticBitmap. Coloquelo despus de la segunda etiqueta
en su dilogo. En el inspector seleccione el panel Constructor . Edite el campo Bitmap.
Este le desplegar una ventana de seleccin para que incorpore la imagen deseada.
Finalmente agregue un botn al dilogo. En la paleta seleccione el panel Buttons -
Botones. Seleccione un botn bsico wx.Button. Colquelo despus de la imagen incor-
porada en el dilogo. Cambie el valor de la etiqueta del bton pro Cerrar. Seleccione lso
eventos en el panel correspondiente en el inspector. Adicione el manejador de eventos
EVT_BUTTON.
Nota: Seleccione primero el grupo de eventos, luego el evento.
Estos son todos los controles que agregaremos al dilogo. Acomodelos de la forma ms
correcta segn su criterio.
Seleccione Dialog1 en el diseador y cambie el ttulo po Acerca De Notas.
Presione el botn enviar para actualizar los cambios en el cdigo fuente.
Finalmente debe,os implementar algn mtodo para el botn de cerrar. En el editor
seleccione el cdigo fuente de Dialog1. Vaya al mtodo ONButton1Menu y adicione:

def OnButton1Button(self, event):

self.Close()

Guarde y ejecute la aplicacin. El dilogo se debe ver algo as.

imagen nal
Felicidades: Usted ha construido su primera aplicacin usando Boa Constructor. Su editor est
completo. En este tutorial ha utilizado algunos componentes de Boa.
Resumiendo usted ha aprendido a:
Crear una aplicacin.
Crear marcos, barras de men y barras de estado.
Crear controles como botones, campos de entrada de datos y etiquetas.
Congurar los controles a sus requerimientos.
Trabajar con dilogos comunes.
Disear sus Propios dilogos.
8 Creando una Ventana Emergente 25