Mi Primera Aplicacion Grafica En Python

Mi primera aplicación gráfica en Python
Bueno, realmente ésta no es mi primera aplicación gráfica en Python, pero de alguna manera tenía
que llamar a este minitutorial (no lo considero tampoco un tutorial completo al 100% pues he ido un
poco rápido en su escritura) pero si que espero que sea de utilidad para todos aquellos que quieran
empezar con el desarrollo grafico.
En este breve minitutorialveremos como crear una pequeña aplicación gráfica para dar de alta
repositorios PPA (MiPPA) y puede servir de base para desarrollos mayores. Como IDE de
desarrollo utilizo SPE (Stani's Python Editor) que puedes instalar con:
$ sudo apt-get install spe
Pero seguramente sea facilmente extrapolar lo aquí comentado a cualquier otro IDE. Bien,
Empezamos.
Arranca el entorno grafico de SPE y directamenteabrimos ya el asistente grafico para crear el
esqueleto de la interface: Tools – Design a gui with wxGlade...

Si te fijas se abren varias ventanas. WxGlade es una aplicación que nos permitira construir
visualmente la interface grafica de nuestra aplicación (se basa en la tecnica de arrastrar y soltar
componente de la paleta de control) y una vez que tengamos el interface definido es capaza deautogenerar el codigo fuente correspondiente para el manejo de esa interface. De las 3 ventanas
nuevas que se abren distinguimos:
•

La paleta de controles visuales. Muestra los diferentes elementos que podemos usar en la
creacion de la interface grafica: botones, cajas de texto, paneles, etc...

Tambien esta la ventana de propiedades. Que son los valores que podemos cambiar de un control
cuando lotenemos seleccionado. Y por ultimo la ventana de arbol, que nos muestra la estructura
jerarquica de controles visualmente de la pantalla o formulario que actualmente estemos diseñando.
Desde esta ventana en arbol podremos seleccionar facilmente un control que tengamos añadido para
editar sus propiedades o borrarlo por ejemplo.
La idea basicamente sera ir arrastrando los controles que queramosusar a la ventana de diseño para
ir construyendo nuestra ventana. Empecemos con el primer control que aparece en la esquina
superior izquierda, es el Frame. Al hacer click sobre el creamos lo que sera la ventana principal de
nuestra aplicación.

Selecciona “wxFrame” y si lo deseas indica ya un nombre para la clase. Con el nombre de la clase
podremos acceder luego a las propiedades del elemento desdeel codigo fuente, asi que es
recomendable utilizar nombres que luego podamos identificar facilmente.
Bien al añadir el frame se crea la vista de diseño de la ventana:

Es a esta ventana a la que podemos ir arrastrando componentes de la paleta de control hasta ir
creando la interface como mas nos apetezca. En cualquier instante podemos tambien ver como va
quedando la ventana (modo Preview) siseleccionamos este Frame y en la vista de propiedades de la
misma pulsamos sobre el boton Preview:

Asi podemos ir viendo su aspecto actual:

Si te fijas, el titulo de la ventana ha cambiado, Eso es precisamente porque ya he editado una de sus
propiedades “title”, que permite indicar el titulo de la ventana.

Pues como comentaba, tienes que ir “dando forma” a la ventana, añadiendo los elementos quequieras usar y ajustando individualmente sus propiedades.
Para que los elementos queden bien alineados, es conveniente que utilices un control llamado “grid
sizer” y que crea una especie de rejilla (o tabla) sobre los que puedes situar el resto de elementos:

Es hora de ir metiendo elementos, yo he añadido una etiqueta (Label), una caja de texto y un boton:

Ejemplo, Añadiendo el boton configurocomo propiedad “Label” el nombre:

En cualquier momento podemos ver como va quedando la jerarquia o seleccionar elementos desde
la vista de arbol:

Si necesitas cambiar el nombre de la clase, lo puedes hacer desde la vista de propiedades, aquí por
ejemplo selecciono el control de texto y lo renombro a “PPA” para que luego sea mas facil de usar
desde el codigo.

Vale, pues con esto y la vista...