Descripción: Traducción de manual de manejo básico del IDE de Boa Constructor para Python....
Tutorial Introductorio al IDE boa-constructor Werner F. Bruhin Tomado de Boa-Constructor V. 0.6.1 Traducido por: Daniel Beltrán R.
[email protected] Mayo 2009 Bogotá-Colombia
8 Creando una Ventana Emergente
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)
3
1 INTRODUCCIÓN Esta sección presenta un breve tutorial que le permitirá familiarizarse con la aplicación de desarrollo 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 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.
ubicado en la paleta, en
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
en el inspector o
•
Ud tendrá que guardar los cambios usando el ’Post’ ó ’Enviar’ botón 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 componentes.
•
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 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 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 colecciones’.
•
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 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.
. Presione este botón
13
4 Agregando Una Barra de Estado (Status Bar)
.
•
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 descripció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 permitirá 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 realizados en la ventana del editor de colecciones.
Editando ítems de el editor de colecciones:
. Presionelo para ver los cambios
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 seleccionado 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 componente actual (El ítem de menú ’Acerca de...’). Ud debe tener ahora un manejador denominado 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 subcomponente ’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 mostrarán 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 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’. Seleccione 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 disponibles. 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-TextControl 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 ’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 código fuente.
•
Ejecute la aplicación. """""imagen ejecutando"""""""
•
El campo del editor de texto establecerá su tamaño automáticamente 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á 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 dezplazados 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 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 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 aplicació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 utilizando 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 pestañ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 aparecerá. 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 seleccionada 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 aplicació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 incorporada 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.
