miércoles, 13 de agosto de 2008

Tutorial de VisualWx (Lección 2)

5 comentarios

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.

martes, 12 de agosto de 2008

Tutorial de VisualWx

5 comentarios
Buscando y buscando nunca encontré un tutorial de VisualWx en español que me enseñara como hacer diferentes cosas, es por eso que me di a la tarea de crear uno propio.

Si eres un iniciado en la programación y te topaste con Python porque de una u otra forma te enteraste de su potencia y facilidad y además te untaste un poco de este lenguaje aprendiendo a trabajar algunas cosas básicas como el print, el for, el if, etc; pero quieres hacer algo más “común” como un form con botones, cajas de texto, entre otras; has llegado al lugar indicado.

Este tutorial pretende ser una guía básica para aquellos que apenas se inician en el maravilloso mundo de Python y que aún desconocen que se puede programar de forma visual.

Requisitos para no perdernos en este tutorial:

  • Saber qué es Python

  • Conocimiento básico de Python (print, if, else, elif, for, while) con esto es suficiente para empezar.

  • Conexión a internet (así sea lenta como la mía) o algún lugar de donde te puedas descargar el Python y otras herramientas; sino, buscate un amigo que te los pase.

  • GANAS DE APRENDER COMO LO ESTOY HACIENDO YO.


Nota aclaratoria:

No soy un experto en programación y mucho menos en Python, por lo tanto algunas de las cosas que enseñaré seguramente se podrán hacer de una mejora forma, de lo “poco o mucho” que ahora sé, se debe a mis pasión de autodidacta y a lo que me han enseñado en la lista de python (gran lista, con grandes amigos dispuestos a enseñarte).

Este tutorial se desarrollará bajo la plataforma win2 con VisualWx y luego adecuré, creo que mismo pero bajo linux (Ubuntu) y con Boa-Constructor.


Recomendaciones:

Suscribete a la lista de Python para que puedas aprender mucho más (http://listas.aditel.org/listinfo/python-es).

Bueno sin más carreta, como dijo el gallo, directo al grano....


LECCIÓN 1

Para iniciar esta lección debemos hacernos a las herramientas esenciales que vamos a utilizar durante el tutorial. Seguramente más adelante necesitaremos otras, a su debido tiempo las descargaremos.

Lo primero es lo primero, el Python, que para la fecha en que se inicia este tutorial va en la versión 2.5.2.

Lo descargamos de la página oficial de Python: http://www.python.org/download/

Una vez descargado procedemos a instalarlo, no es una cosa del otro mundo, doble clic

y clic en el botón Next, hasta que aparezca el botón Finish.

Clic en el botón Finish y listo, tenemos Python instalado.

Vamos a probar la instalación de Python. Existen dos formas, python viene con su propio IDLE o GUI así que es por este lado por donde iniciamos:
  1. Clic en el botón inicio.

  2. Todos los programas

  3. Python 2.5

  4. Clic en IDLE (Python GUI)

Nos aparecerá una ventana como esta:

Y aquí todo el rollo que tuviste que haber leído en algún lado: la versión, fecha de compilación, etc.

El otro método para acceder es a través del MS-DOS, si es pantallita negra de win2.

Para ello debemos hacer algo antes de abrir, para poder ejecutar el Python desde cualquier directorio:

  1. Inicio

  2. Panel de control

  3. Sistema

  4. Ficha Opciones Avanzadas.

  5. Clic en Variables de Entorno.

  6. Clic en la variable PATH

  7. Clic en Modificar

  8. Allí en valor de la variable agregamos al inicio de la línea C:\python25;

  9. Clic en Aceptar

  10. Nuevamente clic en Aceptar

  11. Y por último clic en .... Aceptar

  12. Cerramos todas las ventanas

  13. Clic en Inicio

  14. Clic en Ejecutar

  15. Digitamos cmd y presionamos la tecla enter

  16. Ya estando en el símbolo del sistema o DOS como lo quieras llamar digitas python y presionas enter.



Te aparecerá entonces algo como esto:


Cerramos y procedemos a instalar otras herramientas.

Ya tenemos el Python instalado y hemos verificado que se ejecute tanto desde el menú de win2 como desde símbolo del sistema, ahora lo que nos queda es instalar las herramientas que nos servirán para dibujar los forms, botones y otros.

Comenzaremos por instalar las wxPython que es un juego de herramientas GUI para Python, que permiten crear aplicaciones con interfaces gráficas. Funciona como un módulo de extensión que encapsula la biblioteca gráfica wxWidgets.

Esta versión va en la 2.8.8.1 y la encuentras en http://www.wxpython.org/download.php#binaries, si deseas también te puedes bajar la los doc-demos que traen buena documentación y buenos ejemplos para aprender cosillas.

Descargas e instalas.

Por último y ya para arrancar a diseñar instalamos el VisualWx que para esta época va por la 0.87.6.0. Misma historia, descargas http://visualwx.altervista.org/ e instalas.

Es con este último programa con el que trabajaremos en este tutorial.