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

8 Creando una Ventana Emergente

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)

1 INTRODUCCIN
Esta seccin presenta un breve tutorial que le permitir familiarizarse con la aplicacin de desarrollo 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.

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.

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 la pestaa nuevo (New). ubicado en la paleta, en

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.

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.

Ud tendr que guardar los cambios usando el Post Enviar botn en la ventana del editor.

en el inspector o

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)

11

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

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 elemento 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 colecciones.

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 para ver el cambio en el inspector.

. Presione este botn

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.

4 Agregando Una Barra de Estado (Status Bar)

13

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.

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

5 Agregando Una Barra de Men.

15

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 permitir 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

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 realizados en la ventana del editor de colecciones.

. Presionelo para ver los cambios

Editando tems de el editor de colecciones:

5 Agregando Una Barra de Men.

17

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 seleccionado 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 componente actual (El tem de men Acerca de...). Ud debe tener ahora un manejador denominado 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 subcomponente Acerca De del componente menuAyuda. Finalmente, Boa Constructor sigue la

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 mostrarn las nuevas etiquetas. Seleccione un evento para cada tem del men, recuerde que esto se hace mediante el inspector. 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.

5 Agregando Una Barra de Men.

19

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.

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. Seleccione 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 disponibles. 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-TextControl 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 editorTexto. 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 disponible. 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

21

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

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 aplicacin. 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 utilizando 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):

7 Agregando Una Funcionalidad Al Men De Archivo

23

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"""""""""""""""

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 pestaa 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 aparecer. 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 seleccionada 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.

8 Creando una Ventana Emergente

25

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 aplicacin. 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 incorporada 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.