Programacin I

Universidad de Cuenca

1
Ing. Jorge Maldonado.

CAPTULO 10 INTERFACES GRFICAS

Objetivos de hoy:

Crear un programa paso a paso

CAPTULO 10 INTERFACES GRFICAS

Introduccin:
Vamos a desarrollar un programa que nos permita gestionar el ingreso y
listado de los datos de personas utilizando interfaces grficas. Los datos de
las personas deben almacenarse en un archivo de texto y recuperarse a
partir de este para mostrar el listado de datos.

CAPTULO 10 INTERFACES GRFICAS

Para construir la aplicacin vamos a tener en consideracin los siguientes
pasos generales:
1.- Disear la interface del programa y las ventanas con sus elementos
utilizando Qt Designer
2.- Generar por medio de un script (pyuic4) los archivos con extensin .py
que luego podrn ser importados a un editor de Pyhton (Ejem. Netbeans)
3.- Integrar las interfaces creadas en un solo programa y ejecutarlas en
Netbeans.

CAPTULO 10 INTERFACES GRFICAS

Qt
Designer

Paso 1

Paso 2
Script

Netbeans

Paso 3

CAPTULO 10 INTERFACES GRFICAS

Abrimos Qt Designer y generamos 3 ventanas:
1.- Ventana Principal
2.- Ventana Ingreso
3.- Ventana Listado

CAPTULO 10 INTERFACES GRFICAS

Al abrirse Qt Designer seleccionaremos Main Window y damos click en el
botn Create:

CAPTULO 10 INTERFACES GRFICAS

La ventana deber quedar de la siguiente manera:
Menu
Toolbar

Textlabel

CAPTULO 10 INTERFACES GRFICAS

En esta venta se ha usado:
1.- Men: deber crear las
siguientes opciones:
2.- Toolbar

Contiene 3 opciones que

corresponden a Ingresar datos,
Listar datos y Acerca de. Para
generar las opciones del toolbar
hay que agregar las acciones en
el actioneditor.
9

CAPTULO 10 INTERFACES GRFICAS

3.- Textlabel
En este se a modificado la propiedad pixmap para agregar una
imagen. Tambin se ha modificado la propiedad font para cambiar
el tamao y aspecto de la letra.

Guardamos la ventana principal como Principal.ui

10

CAPTULO 10 INTERFACES GRFICAS

De esta forma se ha generado la ventana principal. Vamos a crear 3
ventanas adicionales:
1.- Ingresar datos: agregar los label y los textedit dentro de un tabWidget
2.- Listar datos: agregar un listWidget que mostrar los datos dentro de un
tabWidget
3.- Acerca de: agregar los label necesarios para generar la apariencia
deseada
Las nuevas ventanas las vamos a crear como Widget y no como
MainWindow.

11

CAPTULO 10 INTERFACES GRFICAS

Nombre Formulario: FormIngreso
Archivo: Wingresar.ui

Nombre Formulario:Formlistado
Archivo: Wlistar.ui

Nombre Formulario: FormAcercade

Archivo: Wacerca.ui

12

CAPTULO 10 INTERFACES GRFICAS

Generamos los archivos .py mediante la linea de comando, para esto
debemos ubicar en donde se encuentra guardados los archivos generados
en el Qt Designer.

El path de es c:\pruebas
13

CAPTULO 10 INTERFACES GRFICAS

Abrimos el editor de comandos.

14

CAPTULO 10 INTERFACES GRFICAS

Nos movemos hacia la carpeta que contiene los archivos .ui y generamos
los scripts con el comando pyuic4.

15

CAPTULO 10 INTERFACES GRFICAS

Creamos un nuevo proyecto en Netbeans, al que denominaremos
interfaces. Creamos un nuevo mdulo llamado programa.py

Ahora importamos los 4 archivos generados con los scripts desde la lnea
de comando a nuestro proyecto.

16

CAPTULO 10 INTERFACES GRFICAS

El rbol de directorios deber quedar as:

Ahora vamos a generar el cdigo necesario para invocar a la ventana

principal.

17

CAPTULO 10 INTERFACES GRFICAS

Abrimos el archivo programa .py y escribimos lo siguiente:

18

CAPTULO 10 INTERFACES GRFICAS

Al ejecutarlo se mostrar lo siguiente:

19

CAPTULO 10 INTERFACES GRFICAS

Ahora procederemos a escribir el cdigo necesario para llamar a las dems
ventanas desde programa.py:
Importamos los mdulos a utilizar en el
programa.

En estas secciones de cdigo se crean como

clases cada una de las ventanas importadas
para ser posteriormente instanciadas a partir
de estas clases y se creen los objetos
correspondientes.

20

CAPTULO 10 INTERFACES GRFICAS

Creamos las seales y los slots correspondientes para que al hacer click
sobre los items del men se abran las ventanas asociadas. Esto se debe
programar en el archivo programa.py dentro
de la clase
ventanaprincipal como parte de sus mtodos.

21

CAPTULO 10 INTERFACES GRFICAS

Esta parte enlaza el item del men de la ventana principal
(actionIngresar_Datos) a su respectivo mtodo (ingreso_datos) que se
encarga de llamar a la ventana.

22

CAPTULO 10 INTERFACES GRFICAS

Ahora generamos las seales y los slots para los botones del toolbar.

Archivo principalpy.py

23

CAPTULO 10 INTERFACES GRFICAS

Nuestro programa quedar de esta manera:

24

CAPTULO 10 INTERFACES GRFICAS

Ahora hay que dar funcionalidad al programa, vamos a programar los botones
de la ventana que se abre cuando se desea ingresar los datos. Editamos el
archivo programa.py, ahora ubicamos la clase ventanaingresar y escribimos
lo siguiente:

25

CAPTULO 10 INTERFACES GRFICAS

Hacemos lo mismo para el listado de datos . Editamos el archivo programa.py,
ahora ubicamos la clase ventanalistar y escribimos lo siguiente:

26