Anda di halaman 1dari 25

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
8 Creando una Ventana Emergente 3

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

2 Creando una nueva aplicación.

Antes que todo vamos a dar una breve introducción a las herramientas de esta aplicación, para
que 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 partir
de 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 nuestros


objetos, asi como podremos acceder a los objetos mismos.
El editor:

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.

• 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, en


la pestaña nuevo (New).

• Guarde los archivos App1.py y Frame.py en el directorio creado previamente estos


archivos 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 (*) desaparecen
del nombre cuando este es guardado. Este indica que los cambios no han sido guardados
en el archivo.

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

• 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á como


tí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 o


pestaña le permitirá editar el tamaño, posición, estilo, nombre de la variable asi como el
título del componente. Edite el campo llamado ’Title’ (Título). dando nombre al
marco ’Editor de Texto’, cuando presione la tecla Enter podrá notar que el título del
marco (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 o
en 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 (*) en
las pestañas del proyecto, por ende deberá guardar los cambios con el botón ubicado en el
editor, para cada pestaña que se ha modificado.
4 Agregando Una Barra de Estado (Status Bar) 11

4 Agregando Una Barra de Estado (Status Bar)


El primer componente que agregaremos a la aplicación será una barra de estado (Status Bar), la
cuál se usará para dar información sobre la aplicación 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 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 diversos
componentes 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 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.

• Presione el botón ’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 botón
para ver el cambio en el inspector.

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

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

• Edite el nombre del primer wx.menu y denominelo menúArchivo. Denomine el segundo


wx.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’. Este


abrirá 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 el


menú, 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


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

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

• Ahora vamos a crear una barra de menú


• En la paleta, seleccione la pestaña ’Utilities (Data)’ - ’Utilidades (Datos)’. En este panel
o 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 en
esta 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() y
otros dos menus, seleccione el ítem self.menuArchivo y cambie el título 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 diseñador. 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 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 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 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 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 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 al
control, que queremos que sea una entrada de varias líneas 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 código válido de python. Para cambiar dos estilos lógicos
usted 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 valor
por 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 campo
estará automáticamente, si usted ingresa lineas más largas que la ventana de nuestro
editor.
• Otra función que tiene por defecto esta aplicación 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 código fuente. Estos no pueden ser dez-
plazados en el diseñador. Estos son colocados con el editor. En el código fuente de
Frame1.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. Coloque
el 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 Constructor
pegará el código base directamente en el manejador del evento del método (Recuerde que
mé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álogo
halla finalizado este será destruido.
• Las palabras ’#Your code’ marcan la posición donde insertaremos nuestro código. Para
este caso, nuestro código solo será efectivo cuando el diálogo retorne wx.ID_OK, por
ejemplo cuando el usuario aplique en el botón Ábrir’. El wx.TextCtrl posee un método el
cuál usaremos para cargar un archivo en nuestra ventana del editor de texto, para esto
usaremos el método ’LoadFile’.
• Usted puede eliminar el evento ’event.skip()’ pues no necesitamos llamar otro evento en
este caso. Usted debería llamar este evento cuando otro evento de manejadores deba ser
ejecutado a la vez.
• Este es necesario cuando se genera el código por que de otra manera Python se quejaría
pues encontraría un método sin cuerpo alguno.
• Como parte de la funcionalidad de nuestra aplicación debemos permitir el acceso al
nombre del archivo y que la opción de ’Abrir’ pueda abrir el archivo, entonces agregamos
la línea ’self.FileName=filename’.
• La línea ’self.SetTitle((’Editor De Texto - %s’ % filename)’ cambiará el título a mostrar
agregando 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 code
self.textEditor.LoadFile(filename)
self.FileName=filename
self.SetTitle((’Editor de Texto - %s’) % filename)
finally:
dlg.Destroy()
–––––––––––––––––––––––––––––––––––————————————
• Debemos repetir el ejercicio para la opción ’Guardar Como...’. Ingrese una archivo de
dialogo 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. El
mé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 code
self.textEditor.SaveFile(filename)
self.FileName=filename
self.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 este
método utilizaremos el control clear en el textEditor, limpiaremos la variable FileName y
reiniciaremos el título.
––––––––––––––––––––––––––––––———————–
def OnMenuArchivoCerrarMenu(self, event):
self.FileName = None
self.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 nivel
superior de la ventana. En nuestro caso solo tenemos la ventana Marco1 "Frame1". Al
terminar 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 la
opció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 al
final 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 archivo
tiene un nombre actualmente. Si este se encuentra podremos guardar el contenido del
archivo con ese nombre. De otra forma, debemos acudir al método ’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 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.

• 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 el
diseñador para crear este control.
• En el inspector edite el campo ’Label’ - ’Etiqueta’. Cambie el valor a ’Notas - Editor De
Texto’. 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 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 tamaño razopnablemente. Nótese que puede cambiar el tamaño y la fuente con
esta propiedad.
8 Creando una Ventana Emergente 25

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

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.

Anda mungkin juga menyukai