Tutorial Introductorio al

IDE boa-constructor

Werner F. Bruhin

Tomado de Boa-Constructor V. 0.6.1

Traducido por: Daniel Beltrán R.

danbelt@gmail.com

Mayo 2009

Bogotá-Colombia

Contenido

1. Introducción

2. Creando una aplicación.

3. Usando el Diseñador para cambiar el título.

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 función al menú de archivo. (File Menu)

8. Creando una ventana emergente. (Dialog Window)

9. Creando una aplicación usando grillas. (Sizers)

8 Creando una Ventana Emergente 3

1 INTRODUCCIÓN

Esta sección presenta un breve tutorial que le permitirá familiarizarse con la aplicación de des-arrollo Boa-Constructor. Este tutorial lo llevará paso a paso a través del proceso de construcciónde un editor de texto sencillo. Déspues de trabajar a través de este tutorial, ud entenderá losuficiente para generar alguna aplicación wxpython con Boa-constructor.

Ud aprenderá como:

1. Crear una aplicación.

2. Crear marcos, menús y barras de estado.

3. Crear controles como botones, cuadros de texto y etiquetas.

4. Configurar los controles a sus necesidades.

5. Trabajar con ventanas emergentes.

6. Diseñar sus propias ventanas emergentes.

2 Creando una nueva aplicación.

Antes que todo vamos a dar una breve introducción a las herramientas de esta aplicación, paraque podamos entendernos más 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 módulos y paquetes para nuestras aplicaciones, es decir a partirde esta herramienta podremos dar inicio a nuestra aplicación en python.

El Inspector:

A partir de esta herramienta podremos acceder a las propiedades y eventos de nuestrosobjetos, asi como podremos acceder a los objetos mismos.

2 Creando una nueva aplicación. 5

El editor:

A mi modo de ver la parte más trabajada o por lo que podrás darte cuenta, pues en esteeditor es donde podrás accerder a el código fuente de la aplicación, asi como puedes correr laaplicación, e inclusive visualizar los errores en ejecución.

En algunas partes de este documento nos remitiremos a otras secciones o herramientas quenos serán útiles en el desarrollo del tutorial.

después de esta breve presentación, ahora si vamos con nuestra primera aplicación.

• Escoge un directorio donde almacenaras tu aplicación. Si es necesario crea este directorio.

• crearemos una nueva aplicación usando el botón de wx.app ubicado en la paleta, enla pestaña nuevo (New).

• Guarde los archivos App1.py y Frame.py en el directorio creado previamente estosarchivos aparecen como pestañas en el editor. Usted puede usar el botón guardar (Save)

ubicado en la barra de herramientas del editor. Note que los asteriscos (*) desaparecendel nombre cuando este es guardado. Este indica que los cambios no han sido guardadosen el archivo.

• Ahora tienes una aplicación, la cuál solo muestra un marco (Frame) en blanco. Usa ’RunApplication’ -> correr aplicación, para ejecutar nuestra aplicación.

2 Creando una nueva aplicación. 7

3 Usando el Diseñador para cambiar el Título.

• Seleccione la pestaña de Frame1 en el editor y verifique que está editando el marco(Frame).

• Inicie el diseñador, aplicando en el botón en la barra de herramientas.

• El marco se mostrará como un área de dibujo (inicialmente mostrará comotítulo ’Frame1’).

• Dos nuevos paneles o pestañas se habilitarán en el editor el panel ’Data’ y ’Sizer’.

• En el Inspector se mostrará una pestaña o panel de constructor ’Constr’. Este panel opestaña le permitirá editar el tamaño, posición, estilo, nombre de la variable asi como eltítulo del componente. Edite el campo llamado ’Title’ (Título). dando nombre almarco ’Editor de Texto’, cuando presione la tecla Enter podrá notar que el título delmarco (Frame) ha cambiado.

3 Usando el Diseñador para cambiar el Título. 9

• Ud tendrá que guardar los cambios usando el ’Post’ ó ’Enviar’ botón en el inspector oen la ventana del editor.

• El diseñador de la ventana se cerrará.

• Podrá notar que el código fuente ha cambiado actualizandose y reflejandose en el título.

• El editor le mostrará que el código fuente ha cambiado por medio de un asterisco (*) enlas pestañas del proyecto, por ende deberá guardar los cambios con el botón ubicado en eleditor, para cada pestaña que se ha modificado.

4 Agregando Una Barra de Estado (Status Bar)

El primer componente que agregaremos a la aplicación será una barra de estado (Status Bar), lacuál se usará para dar información sobre la aplicación cuando este se este ejecutando. Usaremosla barra de estado para indicarle al usuario que esta sucediendo cuando ocurran acciones lentas,dando mensajes de ayuda o algún otro tipo de mensajes que desees mostrar.

• Selecciona la pestaña correspondiente al marco (Frame) y comienza la edición con

• El marco se mostrará como un área de dibujo.

• En la paleta selecciona la pestaña ’Containers/Layout’. Esta pestaña contiene diversoscomponentes que usaremos en nuestros marcos, la barra de estado es uno de esos compo-nentes.

• Mueva el ratón sobre los botones. Un mensaje de ayuda se mostrará sobre cada uno deellos, seleccione aquel que sea wx.StatusBar.

• Ahora mueva el puntero sobre el marco a diseñar. Presione el botón izquierdo del ratónen el área de diseño en el marco, este creará una barra de estado en el marco.

• La línea de estado en el inspector mostrará en la pestaña ’Constr’ en la izquierda del ele-mento ’statusbar1’, y en la derecha mostrará la clase wx.Widget de la que deriva elobjeto, en este caso ’wx.StatusBar’.

• En el Inspector seleccione la pestaña o panel de ’Propiedades’ - ’Properties’. Este panelservirá para configurar las propiedades de la barra de estado.

• Aplique en la casilla de ’Fields’ - ’Campos’. Esta casilla le mostrará un botóncon ’+++’ , Aplique el botón. 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 cuál será usada para agregar múltiplessub-componentes a componentes donde sea requerido. Agreguemos un campo a la barrade estado, sin embargo ud podrá agregar múltiples campos.

• Presione el botón ’Nuevo’ en el ’Editor de Colecciones’. Este creará un nuevo campodentro 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 botónpara ver el cambio en el inspector.

• Cierre el editor de colecciones. Seleccione la ventana del diseñador. Aplique sobre estaventana hasta que se encuentre sobre el marco principal.

• Seleccione la pestaña de propiedades en el inspector.

• Edite la popiedad ’Status Bar’ - ’ Barra de Estado’. este le desplegará una nueva barrade estado. Seleccione la barra de estado creada, esta será necesaria para manejar el marcoprincipal, por ejemplo la posición del borde superior de la pantalla y su tamaño.

• Actualice el codigo fuente con los cambios efectuados usando el botón enviar .

• Guarde el codigo fuente usando el botón 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 aplicación será una barra de menú. Un menú esun componente común en las ventanas. Nuestro menú contendrá dos entradas. Archivo yAyuda. Seleccionanado alguno de estos se desplegará un menú. El usuario podrá seleccionar unaopción del menú seleccionado.

• Seleccione el marco o ’Frame1’ en las pestañas del editor para comenzar la edición delmismo.

• Inicie el diseñador, aplicando sobre el botón en la barra de herramientas del editor.

• El diseñador agregará en el editor dos nuevas pestañas, estas serán ’Data’ y ’Sizer’.En la paleta seleccione la pestaña ’Utilities (Data)’ - ’Utilidades (Datos)’. El menúdesplegable (wx.menu) es uno de estos componentes en esta pestaña.

• Mueva el ratón sobre los botones. Algunos tips de ayuda aparecerán con una breve des-cripción de estos componentes, aplique sobre el wx.menu.

• El botón debe cambiar indicando que ha sido presionado,. La paleta contiene una casillasobre la parte superior que indicará el componente seleccionado, en este caso deberá serwx.menu.

Seleccionando:

Las pestañas que se agregan al editor:

• Ahora aplique sobre la pestaña ’Data’ en el editor.

• El menú no será visible en el marco principal ’Frame1’. Sin embargo estará en el visor dela pestaña ’Data’.

• Repita el procedimiento , es decir agregue otro menú, ya que necesitaremos dos opcionesde menú en el visor ’Data’, denominados menu1 y menu2. Seleccione menu1 usando elratón. El inspector ahora le mostrará el nombre y título para menu1.

• Edite el nombre del primer wx.menu y denominelo menúArchivo. Denomine el segundowx.menu como menúAyuda. Cambie los títulos a ’Archivo’ y ’Ayuda’ respectivamente.

• Aplique dos veces en el menuAyuda en el visor de datos o pestaña ’Data’. Esteabrirá el editor de colecciones ’Collection Editor’.este editor de colecciones le per-mitirá agregar ítems a nuestros menús.

• Presione el botón ’Nuevo’ en el editor de colecciones. Este creará un nuevo ítem en elmenú, el cuál 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 ’Información general acerca de editor de textos’.

• El editor de colecciones contiene el botón refrescar . Presionelo para ver los cambiosrealizados 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 pestaña de eventos ’Evts’. Este es un panel que le permitiráconfigurar los eventos de los objetos. Necesitaremos configurar la acción 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 método a este evento.

• El lado izquierdo del panel de eventos en el inspector, muestra los grupos de eventos queestán permitidos. Para el menu de los ítmes, estos son solamente un único evento en elgrupo de EVT_MENU en ’MenuEvent’. Aplique dos veces en este evento utilizando elratón.

• Sobre el panel de eventos se mostrarán los manejadores en su aplicación 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 método el cuál se invocará cuando laopción ’Acerca De...’ sea seleccionado del menú de ayuda.

• Note el nombre del manejador. Boa Constructor generará el nombre de esta manera. Elevento 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

convención de prefijos 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’ paraabrir el editor de colecciones.

• Agregue cinco «5» ítems.

• Seleccione cada ítem y etiquetelo como ’Abrir’, ’Guardar’, ’Guardar Como’, ’Cerrar’,’Salir’, y otra vez debería recomderdar cambiar el ItemId. Ingrese algún texto de ayudapara cada ítem del menú. Presione el botón refrescar en el editor de colecciones y se mos-trarán 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 pestaña ’Utilities (Data)’ - ’Utilidades (Datos)’. En este panelo pestaña seleccione el componente de barra de menú ’MenuBar’.

• Mueva el cursor sobre el visor de datos en el editor. aplique con el botón izquierdo enesta pestaña y agregue la barra de menú denominada ’menuBar1’ a la aplicación.

• 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() yotros dos menus, seleccione el ítem self.menuArchivo y cambie el título a ’Archivo’. Esteserá el primer menú de ’menuArchivo’, en la barra de menú.

• En el editor de colecciones seleccione el segundo ítem. Repita los pasos a el enlaceMenus1 para el menú desplegable de Ayuda, con la etiqueta ’Ayuda’.

• Seleccione el marco principal, Frame1 en el diseñador. El marco deberá activarse en elinspector.

• 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. Estapropiedad define cuál barra de menú estará con el marco.

""""imagen"""

• Guarde los cambios usando el botón enviar para cerrar el diseñador, y deje que Boagenere el codigo fuente.

• Guarde el codigo fuente generado en el archivo correspondiente al marco principal.

• Ejecute la aplicación.

• Ahora deberá ver los menús y las barras de estado.

• Cuando seleccione la opción de menú, el texto de ayuda deberá aparecer en la barra deestado.

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 diseñador para editar el marco principal.

• En la paleta, seleccione la pestaña o panel ’Controles Básicos’ - ’Basic Controls’. Selec-cione el wx.TextControl.

• Mueva el ratón a la ventana del diseñador, por defecto el tamaño 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 línea sencilla. Vamos a indicarle alcontrol, que queremos que sea una entrada de varias líneas de datos. Para hacer estoposible editamos la propiedad ’Style’ en el inspector.

• Editamos el estilo y cambiamos el estilo a wx.TE_MULTILINE. Usted puede editar esteespacio, 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 código válido de python. Para cambiar dos estilos lógicosusted debe separar con un ’|’ . Ya puede ver todos los estilos disponibles para el wx-Text-Control en la ayuda wxPython en línea 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 valorpor defecto del control. Deje en blanco este campo.

• Guarde sus cambios en el código fuente.

• Ejecute la aplicación."""""imagen ejecutando"""""""

• El campo del editor de texto establecerá su tamaño automáticamente 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 campoestará automáticamente, si usted ingresa lineas más largas que la ventana de nuestroeditor.

• Otra función que tiene por defecto esta aplicación 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 funcionalidadal menú creado previamente. Los dialogos son utilizados para obtener entradas inmediatas delusuario. Los dialogos son aplicaciones modales, por ejemplo usted no podrá usar otra ventana omarco hasta que la actual sea cerrada.

• Los dialogos son ubicados directa mente en el código fuente. Estos no pueden ser dez-plazados en el diseñador. Estos son colocados con el editor. En el código fuente deFrame1.py, vaya al manejador del evento. Este método es denominado OnMenuArchivoA-brirMenu. Vamos a asignarle la ventana de dialogo que permite abrir un archivo. Coloqueel cursor antes de ’event.skip()’. Y vamos a insertar nuestro código allí.

• Presione "alt-t" y seleccione ’wx.FileDialog’ desde el menú desplegable y Boa Constructorpegará el código base directamente en el manejador del evento del método (Recuerde quemétodo es la función que se realizará como activar un botón).

• Note que el código ’dlg.Destroy()’, es muy importante para destruir los diálogos!

• En la sección del código fuente debe aparecer algo como:–––––––––––––––––––———————————————————————–def OnMenuArchivoAbrirMenu(self, event):

dlg = wx.FileDialog(self, "Choose a file", ".", "", "*.*", wx.OPEN)try:

if dlg.ShowModal() == wx.ID_OK:filename = dlg.GetPath()#Your code

finally:dlg.Destroy()

event.skip()

–––––––––––––––––––––––––––––––––––———————————————

• Este código base creará el dialogo que interactuará con el usuario. Cuando el diálogohalla finalizado este será destruido.

• Las palabras ’#Your code’ marcan la posición donde insertaremos nuestro código. Paraeste caso, nuestro código solo será efectivo cuando el diálogo retorne wx.ID_OK, porejemplo cuando el usuario aplique en el botón Ábrir’. El wx.TextCtrl posee un método elcuál usaremos para cargar un archivo en nuestra ventana del editor de texto, para estousaremos el método ’LoadFile’.

• Usted puede eliminar el evento ’event.skip()’ pues no necesitamos llamar otro evento eneste caso. Usted debería llamar este evento cuando otro evento de manejadores deba serejecutado a la vez.

• Este es necesario cuando se genera el código por que de otra manera Python se quejaríapues encontraría un método sin cuerpo alguno.

• Como parte de la funcionalidad de nuestra aplicación debemos permitir el acceso alnombre del archivo y que la opción de ’Abrir’ pueda abrir el archivo, entonces agregamosla línea ’self.FileName=filename’.

• La línea ’self.SetTitle((’Editor De Texto - %s’ % filename)’ cambiará el título a mostraragregando el nombre del archivo.

• A continuación veremos como queda el nuevo código:–––––––––––––––––————————————————————

def OnMenuArchivoAbrirMenu(self, event):dlg = wx.FileDialog(self, "Choose a file", ".", "", "*.*", wx.OPEN)try:

if dlg.ShowModal() == wx.ID_OK:filename = dlg.GetPath()#Your codeself.textEditor.LoadFile(filename)self.FileName=filenameself.SetTitle((’Editor de Texto - %s’) % filename)

finally:

7 Agregando Una Funcionalidad Al Menú De Archivo 21

dlg.Destroy()

–––––––––––––––––––––––––––––––––––————————————

• Debemos repetir el ejercicio para la opción ’Guardar Como...’. Ingrese una archivo dedialogo en el cuerpo de ÓnArchivoGuardarComoMenu’.

• Este es un diálogo de guardar archivo. Cambie el segundo parámetro del visor "prompt"wx.FileDialog a "Guardar Como", cambie el estilo, en el parámetro 6 a wx.SAVE. Elmétodo para guardar el archivo se llama SaveFile.

• De nuevo guardaremos el valor del nombre del archivo usando la opción ’Guardar’.

• A continuación mostraré el código:–––––––––––––––––––——————————————————–

def OnMenuArchivoGuardarComoMenu(self, event):dlg = wx.FileDialog(self, "Guardar Como", ".", "", "*.*", wx.SAVE)try:

if dlg.ShowModal() == wx.ID_OK:filename = dlg.GetPath()#Your codeself.textEditor.SaveFile(filename)self.FileName=filenameself.SetTitle((’Editor de Texto - %s’) % filename)

finally:dlg.Destroy()

event.skip()

–––––––––––––––––––––––––––––––––––——————————–

• Lo siguiente que realizaremos será la implementación de la opción ’Cerrar’. en estemétodo utilizaremos el control clear en el textEditor, limpiaremos la variable FileName yreiniciaremos el título.

––––––––––––––––––––––––––––––———————–def OnMenuArchivoCerrarMenu(self, event):

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

–––––––––––––––––––––––––––––––——————–

• Lo siguiente será implementar la opción ’Salir’. Este método necesita terminar la aplica-ción. Todas las aplicaciones wx.Python son finalizadas con el botón de cerrar en el nivelsuperior de la ventana. En nuestro caso solo tenemos la ventana Marco1 "Frame1". Alterminar la aplicación invocaremos el método Close() para el marco1 "Frame1".

–––––––––––––––––––––––––––––––————–def OnMenuArchivoSalirMenu(self, event):

self.Close()

–––––––––––––––––––––––––––––––—–———

• Lo siguiente a implementar será la opción de guardar. Este menú guardará el archivo uti-lizando el nombre actual del mismo, el cuál se guardará en la variable self.FileName.

• Cuando no exista un nombre actual, la variable self.FileName deberá actuar como laopción ’guardar como’.

• La variable FileName debe ser creada cuando el marco1 "Frame1" sea construído.Debemos agregarla al constructor. Usted puede agregarle este código a su aplicación alfinal del constructor por defecto (_init_).

––––––––––––––––––––––––––––def _init_(self, parent):

self._init_ctrls(parent)self.FileName=None

––––––––––––––––––––––––––––

• Ahora estamos seguros de implementar la función ’Guardar’. Verificaremos si el archivotiene un nombre actualmente. Si este se encuentra podremos guardar el contenido delarchivo con ese nombre. De otra forma, debemos acudir al método ’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. Podemosabrir, editar, y guardar archivos.

• Su editor debe verse similar al que se mostrará a continuación.

• El archivo App.py fue abierto

• Luego la opción ’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 información del usuario. Enlas secciones previas usamos ventanas preconstruidas wx.FileDialog. Ahora vamos a desarrollarnuestra propia ventana emergente de la opción de menú ’Acerca de...’.

• El dialogo que crearemos requerirá una nueva ventana. Este no es un componente de elmarco1 - Frame1. Este dialogo aparecerá en nuestra aplicación como un archivo pythonindependiente. Seleccione el módulo de aplicación ’App1’ en el editor. Seleccione la pes-taña o panel ’Application’.

• En la paleta, seleccione el panel ’Nuevo’ - ’New’. Seleccione el botón ’wx.Dialog’. Estecreará un nuevo archivo fuente Dialog1.py, y automáticamente agregará este códigofuente al módulo de la aplicación que hemos realizado hasta ahora.

• Seleccione el panel Frame1. Vamos a escribir el,código paar la opción de menú ’AcercaDe...’, la cuál será usada al mostrar la ventana de diálogo. Esta opción es implementadapor el método ’OnAyudaAcercaDeMenu’. El código es el siguiente:

—————————————————————–def OnMenuAyudaAcercaDeMenu(self, event):

dlg = Dialog1.Dialog1(self)try:

dlg.ShowModal()finally:

dlg.Destroy()———————————————————————

• Este código se refiere al módulo de Dialog1. Antes de que el código trabaje, debemosimportar el módulo de Dialog1. Por convención, debemos importar el módulo al inicio delcódigo fuente. Agregando la línea ’import Dialog1’ al archivo Frame1.py después de lalínea ’import wx’.

——————————————–import wximport Dialog1——————————————–

• Guardando el árbol de archivos fuente. Usted podrá ejecutar la aplicación ahora. Cuandoseleccione la opción ’Acerca De...’ en el menú de ayuda, su nueva ventana de diálogo apa-recerá. Nótese que esta ventana es modal, es decir debe cerrarla para poder acceder alresto de la aplicación. Salga de la aplicación y retorne a Boa Constructor.

• Ahora agregaremos algunos campos al diálogo. Para este ejercicio necesitaremos unaimagen. Para demostrarlo utilizaremos una llamada Boa.jpg. Copie la imagen seleccio-nada al directorio donde esta guardando la aplicación.

• Seleccione el panel Dialog1.py inicie el diseñador aplicando sobre el botón

• Lo primero será agregar la etiqueta al diálogo. En la paleta seleccione ’Basic Controls’ -’Controles Básicos’. Desde este panel seleccione el control wx.StaticText. Aplique sobre eldiseñador para crear este control.

• En el inspector edite el campo ’Label’ - ’Etiqueta’. Cambie el valor a ’Notas - Editor DeTexto’. Nótese que la etiqueta en el diseñador se acomodará al tamaño de la ventana.

• Usaremos la propiedad de Style - estilo para configurar la alineación del texto contenidoen esta etiqueta. Cambie esta propiedad a ’wx.ALING_CENTRE’ o seleccione este estiloantes 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 tamaño razopnablemente. Nótese que puede cambiar el tamaño y la fuente conesta propiedad.

• En la ventana del diseñador aparecerá su etiqueta con los marcadores en las esquinas.aplicando y reteniendo con el botón 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-ción’. En el inspector seleccione el panel ’Propierties’ - ’Propiedades’. Edite el valorde ’color de fondo’ - ’BackGroundColor’. Seleccione un color a su gusto.

• Lo siguiente será agregar la imagen. Desde ’Basic Controls’ - ’Controles Básicos’ en alpaleta seleccione el control wx.StaticBitmap. Coloquelo después de la segunda etiquetaen su diálogo. En el inspector seleccione el panel ’Constructor’ . Edite el campo Bitmap.Este le desplegará una ventana de selección para que incorpore la imagen deseada.

• Finalmente agregue un botón al diálogo. En la paleta seleccione el panel ’Buttons’ -’Botones’. Seleccione un botón básico wx.Button. Colóquelo después de la imagen incor-porada en el diálogo. Cambie el valor de la etiqueta del bóton pro ’Cerrar’. Seleccione lsoeventos en el panel correspondiente en el inspector. Adicione el manejador de eventosEVT_BUTTON.

• Nota: Seleccione primero el grupo de eventos, luego el evento.

• Estos son todos los controles que agregaremos al diálogo. Acomodelos de la forma máscorrecta según su criterio.

• Seleccione Dialog1 en el diseñador y cambie el título po ’Acerca De Notas’.

• Presione el botón enviar para actualizar los cambios en el código fuente.

• Finalmente debe,os implementar algún método para el botón de cerrar. En el editorseleccione el código fuente de Dialog1. Vaya al método ’ONButton1Menu’ y adicione:

——————————————————def OnButton1Button(self, event):

self.Close()——————————————————

• Guarde y ejecute la aplicación. El diálogo se debe ver algo así.” ” ” ” ”imagen final” ” ” ” ’

Felicidades: Usted ha construido su primera aplicación usando Boa Constructor. Su editor estácompleto. En este tutorial ha utilizado algunos componentes de Boa.

Resumiendo usted ha aprendido a:

• Crear una aplicación.

• Crear marcos, barras de menú y barras de estado.

• Crear controles como botones, campos de entrada de datos y etiquetas.

• Configurar los controles a sus requerimientos.

• Trabajar con diálogos comunes.

• Diseñar sus Propios diálogos.

8 Creando una Ventana Emergente 25