Documentos de Académico
Documentos de Profesional
Documentos de Cultura
IDE boa-constructor
Werner F. Bruhin
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)
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ón
de un editor de texto sencillo. Déspues de trabajar a través de este tutorial, ud entenderá lo
suficiente 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. 5
Antes que todo vamos a dar una breve introducción a las herramientas de esta aplicación, para
que podamos entendernos más adelante.
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 partir
de esta herramienta podremos dar inicio a nuestra aplicación en python.
El Inspector:
A mi modo de ver la parte más trabajada o por lo que podrás darte cuenta, pues en este
editor es donde podrás accerder a el código fuente de la aplicación, asi como puedes correr la
aplicación, e inclusive visualizar los errores en ejecución.
En algunas partes de este documento nos remitiremos a otras secciones o herramientas que
nos serán útiles en el desarrollo del tutorial.
después de esta breve presentación, ahora si vamos con nuestra primera aplicación.
• Ahora tienes una aplicación, la cuál solo muestra un marco (Frame) en blanco. Usa ’Run
Application’ -> 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.
• Mueva el ratón 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 diseñar. Presione el botón izquierdo del ratón
en 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 el
objeto, en este caso ’wx.StatusBar’.
• En el Inspector seleccione la pestaña o panel de ’Propiedades’ - ’Properties’. Este panel
servirá para configurar las propiedades de la barra de estado.
• Aplique en la casilla de ’Fields’ - ’Campos’. Esta casilla le mostrará un botón
con ’+++’ , Aplique el botón. Este abrirá el ’Collection Editor’ - ’Editor de colec-
ciones’.
• Este editor de colecciones es una herramienta, la cuál será usada para agregar múltiples
sub-componentes a componentes donde sea requerido. Agreguemos un campo a la barra
de estado, sin embargo ud podrá agregar múltiples campos.
• Cierre el editor de colecciones. Seleccione la ventana del diseñador. Aplique sobre esta
ventana 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 barra
de estado. Seleccione la barra de estado creada, esta será necesaria para manejar el marco
principal, por ejemplo la posición del borde superior de la pantalla y su tamaño.
4 Agregando Una Barra de Estado (Status Bar) 13
• 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.
5 Agregando Una Barra de Menú.
El siguiente componente que agregaremos a la aplicación será una barra de menú. Un menú es
un componente común en las ventanas. Nuestro menú contendrá dos entradas. Archivo y
Ayuda. Seleccionanado alguno de estos se desplegará un menú. El usuario podrá seleccionar una
opción del menú seleccionado.
• Seleccione el marco o ’Frame1’ en las pestañas del editor para comenzar la edición del
mismo.
• 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 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:
• El menú no será visible en el marco principal ’Frame1’. Sin embargo estará en el visor de
la pestaña ’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
ratón. El inspector ahora le mostrará el nombre y título para menu1.
• El editor de colecciones contiene el botón refrescar . Presionelo para ver los cambios
realizados en la ventana del editor de colecciones.
• El lado izquierdo del panel de eventos en el inspector, muestra los grupos de eventos que
están 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
rató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 la
opción ’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
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’ 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 debería recomderdar cambiar el ItemId. Ingrese algún texto de ayuda
para 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.
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 continuación.
• El archivo App.py fue abierto
• Luego la opción ’Archivo/Guardar Como...’ fue seleccionada
""""""""""""""""imagen Editor Texto"""""""""""""""
8 Creando una Ventana Emergente
Las ventanas emergentes son utilizadas para interactuar y capturar información del usuario. En
las secciones previas usamos ventanas preconstruidas wx.FileDialog. Ahora vamos a desarrollar
nuestra 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 el
marco1 - Frame1. Este dialogo aparecerá en nuestra aplicación como un archivo python
independiente. 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’. Este
creará un nuevo archivo fuente Dialog1.py, y automáticamente agregará este código
fuente 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ú ’Acerca
De...’, la cuál será usada al mostrar la ventana de diálogo. Esta opción es implementada
por 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, debemos
importar el módulo de Dialog1. Por convención, debemos importar el módulo al inicio del
código fuente. Agregando la línea ’import Dialog1’ al archivo Frame1.py después de la
línea ’import wx’.
——————————————–
import wx
import Dialog1
——————————————–
• Guardando el árbol de archivos fuente. Usted podrá ejecutar la aplicación ahora. Cuando
seleccione 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 al
resto 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 una
imagen. Para demostrarlo utilizaremos una llamada Boa.jpg. Copie la imagen seleccio-
nada al directorio donde esta guardando la aplicación.
• 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 valor
de ’color de fondo’ - ’BackGroundColor’. Seleccione un color a su gusto.
• Lo siguiente será agregar la imagen. Desde ’Basic Controls’ - ’Controles Básicos’ en al
paleta seleccione el control wx.StaticBitmap. Coloquelo después de la segunda etiqueta
en 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 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 diálogo. Acomodelos de la forma más
correcta 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 editor
seleccione 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.