Tutorial de VisualWx (Lección 2)

LECCION 2

Después de instalar todas las herramientas procederemos a familiarizarnos con el entorno de VisualWx.

VisualWx nos permite hacer junto con Python lo que tu imaginación te permita, VisualWx es un GUI parecido a Delphi y Visual Basic.

Cuando ingresamos a VisualWx (Inicio – Todos los programas - VisualWx) obtenemos la siguiente pantalla:

Como es típico de la mayoría de los programas de desarrollo, tenemos el menú principal, seguido de una barra de herramientas, en la parte izquierda la lista de componentes y scripts, junto con sus propiedades en la parte inferior; al centro el área de trabajo donde se cargan los forms y otras herramientas gráficas y en la parte derecha el Poject con los forms, menús, componentes, etc.

Después de esta brevísima y a vuelo de pájaro ilustración sobre VisualWx, vamos a hacer nuestro primer programa, el “desconocido” jeje, hola mundo.

Para cada proyecto o programa nuevo que iniciemos, crearemos una carpeta. Para nuestro primer ejemplo vamos a crear una denominada saludito no importa donde la ubiques.

Abrimos VisualWx (por si no lo tienes abierto), damos clic en el menú File y hacemos clic en la opción New Project. Nos debe aparecer una ventana como al siguiente:

En esta venta “Templates” seleccionamos WX_SDI_Python, buscamos la carpeta que acabamos de crear y digitamos el nombre del proyecto, que para nuestro ejemplo se va a llamar saludo.

Esto nos ha creado un form vacío, si te fijas en la parte superior derecha, debajo de la carpeta Design aparece MyFrame.pfr

Dale doble clic para que aparezca el form en el área de diseño.

En el centro de VisualWx o área de diseño tienes dos pestañas, Design que te permite ubicar los componentes (cajas de texto, botones, etc) sobre el form y Python que te permite editar el código fuente o crear tus funciones.

Cuando das doble clic un form de color gris oscuro aparece en la ventana de diseño, vamos a cambiar el color de fondo del form, para ello nos dirigimos a la pestaña de propiedades que está ubicada en la parte inferior izquierda y que nos muestra en este momento todas las propiedades del form que tenemos en la pestaña de diseño.

Ubicate en la palabra default de la propiedad BackColor, doble clic.

Aparece entonces una nueva ventana que nos permite seleccionar un color.

Yo he elegido el Window background, selecciona el que más te guste; ensaya todos los botones.

Ahora a esa ventana le vamos a dar un título, para ello en la misma ficha de propiedades, hacia abajo se encuentra la opción Title, debes dar doble clic justo al frente de esta propiedad.

Se te abre una ventana con una caja de texto, escribes el título [cualquiera], yo le he puesto Ventana saludona y das clic en Ok. Debe aparecer ya el título en la barra de la ventana.

Para ver lo que llevamos hasta ahora podemos hacer clic en el menú Build y seleccionar la opción Run o simplemente presionar la tecla F5, se te pedirá guardar los cambios, aceptas (si quieres claro) y listo se ejecuta, mostrando algo como esto.

Cerramos la ventana en ejecución o la del DOS y volvemos al VisualWx.

Qué te parece, nos hemos ahorrado algunas líneas al tratar de construir una ventana en Python y mira lo bien que nos está quedando, bueno, continuamos.

Vamos a agregar un botón.

Para agregar el botón debemos hacer doble clic en la carpeta Control que se encuentra ubicada en la ficha Componentes en la parte superior izquierda.

Las carpetas que se encuentran ubicadas en esta ficha muestran todos los componentes gráficos de wxPython que actualmente están disponibles con esta versión.

Hacemos doble clic en Button, al hacer esto el botón aparecerá en nuestro formulario, lo movemos hasta la parte inferior del form, lo ampliamos un poco y procedemos a darle algunas propiedades.

En la ficha propiedades, al final, aparece Text, cambiamos la palabra Control por Púlsame, para ello hacemos doble clic en Control y procedemos al cambio. Como habrás notado ya la palabra Púlsame aparece en el botón; ahora cambiamos la fuente, en la misma ficha de propiedades aparece Font, cambiamos default font por Arial 12, por último le vamos a dar un nombre a nuestro componente. Buscamo la propiedad Name y cambiamos su contenido por bt_pulsar.

Observa que al tener un nuevo componente, éste se ubica debajo de su respectivo form, en este caso MyFrame, en la ficha Project.

Ya me dio sueño, mañana termino.

He vuelto...

Ahora vamos a ubicar una etiqueta de texto que mostrará el mensaje “Hola Mundo”; para ello hacemos doble clic en Static Text de la carpeta Control de la ficha Component. Un pequeño rectángulo blanco aparece en el form, de igual forma aparece una etiqueta debajo de MyFrame algo como st4c o similar.

Vamos a cambiar las propiedades de este componente.

Teniendo seleccionado el componente (clic en el recuadro o clic en la etiqueta st4c de la parte superior derecha de la ficha project) hacemos clic en la propiedad Name y cambiamos el texto st4c por st_mensaje, luego si quiere cambias la fuente dando doble clic y seleccionando el tipo de fuente y su tamaño, lo mismo con el color que lo cambias desde ForeColor; por último ve hasta la propiedad Text y digita “Hola Mundo” (sin las comillas).

Cambia el tamaño y la ubicación del recuadro en el form.

Como lo que quermos hacer es que cuando se pulse el botón aparezca el mensaje entonces éste inicialmente debe estar invisible. Para cambiar esta propiedad selecciona nuevamente la etiqueta que muestra ya el mensaje, y dando doble clic a la propiedad visible ésta debe cambiar a false.

Lo que nos queda es programar el botón.

Para programar el botón debemos primero hacer clic sobre éste, seleccionar la ficha events (que aparece en la parte izquierda); cuando haces clic allí aparecen varias opciones identificadas o separadas por diferentes letras: B E W V C

Hacemos clic en el botón E (Component Events), clic en el cuadrito en blanco que se encuentra en la línea EVT_BUTTON y damos un nombre a la función, yo por ejemplo le he puesto pulsado.

Ahora, en la parte central de la pantalla, bajo el form, existen dos pestañas la de diseño y la de código, para ir a modificar este código y hacer nuestra función hacemos clic en la ficha denominada Python.

Se muestra entonces el código fuente de lo que hasta ahora hemos construido (sin darnos cuenta casi).

Buscamos nuestra función que aparece definida por el nombre que hemos puesto anteriormente a evento del botón (para mi caso pulsado) y allí dentro escribimos:

def pulsado(self,event): #init function

#add your code here

self.st_mensaje.Show(True)

return #end function

self.st_mensaje.Show(True) hará que al pulsar el botón la propiedad Visible False que cambiamos ahora se vuelva True, mostrando el mensaje en el Form.

Ejecutemos, corramos, el programa; recuerda que lo podemos hacer con presionando F5.

Como lo dije anteriormente, me imagino muchas formas de hacer el Hola Mundo desde VisualWx, esta es solo una de tantas, lo puedes mejorar de la forma que quieras, todo está en tu tiempo para cacharrear y tu imaginación.

Descarga las lecciones 1 y 2 aquí
Descarga el código fuente de la lección 2 aquí

Hasta la próxima lección.