Skip to content

Nuestra primera aplicación en python y qt4 [2]. Creando la interfaz.

noviembre 24, 2011

Una vez tengamos el software necesario, vamos a diseñar la interfaz grafica.

Para ello, abrimos Qt Designer. Lo primero que nos aparece es una ventana para seleccionar el tipo de aplicación que queremos hacer. Seleccionamos MainWindow y seguimos adelante.

Con lo que el resultado es este:

Lo siguiente que vamos a hacer es cambiar el tamaño de nuestra ventana, lo que podemos hacer en el editor de propiedades (parte derecha de la ventana), cambiando las propiedades width y height dentro de Geometry. Yo he puesto un tamaño de 640×480. También eliminamos la barra de estado y la de menú pulsando el botón derecho sobre ellas y seleccionando “Remove Menu Bar” o  “Remove Status Bar” respectivamente.

A continuación vamos a widget box y empezamos a arrastrar y soltar en nuestra ventana todos los que queramos utilizar.
Utilizaremos los siguientes widgets:
  • ComboBox para la selección del tipo de operación (ingreso, gasto) y donde se realiza (banco, hucha…)
  • DateEdit para la selección de fecha.
  • Text Edit para la inserción manual de datos (comentarios, cantidad…)
  • Table Widget para la tabla donde se representarán los datos
  • Push Button para los botones
  • Label para el resto de textos.

Eliminamos el texto de los botones en el editor de propiedades. Añadimos 3 label para representar la suma de las cantidades (Arriba a la derecha), cambiamos su propiedad ‘text’ a “0 €” y retocamos la fuente a nuestro gusto.

Los nombres que he dado a los widgets son estos:
Ademas, a la ventana le ponemos el nombre Hucha.
En conjunto quedaria asi:
Ahora añadimos las opciones dentro de los combobox y la tabla. Para ello, boton derecho -> edit Items :
En la ventana que aparece añadimos las opciones que queramos:
En el caso de la tabla, añadimos las siguientes columnas:
Tipo/Lugar/Comentarios/Fecha/Cantidad
Ahora cambiamos los iconos de los botones. Como siempre, en el editor de propiedades:
Con lo que la ventana final queda asi:
Mas adelante es probable que añadamos mas cosas, pero con eso nos vale de momento.
Guardamos la imagen con el nombre hucha.ui, y abrimos la terminal.
Nos dirigimos a la carpeta donde hayamos guardado hucha.ui .Por ejemplo, si esta en ~/Documentos/python/Hucha escribimos en la terminal

 cd ~/Documentos/python/Hucha

Y ahora utilizamos otro de los programas que instalamos, pyuic4, para traducir el archivo .ui a otro .py:

pyuic4 hucha.ui>hucha_ui.py

Asi de facil, jeje.
Por ultimo abrimos spyder ( o el editor que hayamos elegido) y creamos un nuevo archivo (que guardas en la misma carpeta) de nombre hucha.py. Ese va a ser nuestro archivo principal.
De momento lo que queremos que haga es mostrar la ventana, nada mas.

# -*- coding: utf-8 -*-

import sys

from PyQt4 import QtCore, QtGui, Qt

from hucha_ui import Ui_Hucha

class MyForm(QtGui.QMainWindow):

def __init__(self, parent=None):

locale=unicode(QtCore.QLocale.system().name())

QtGui.QWidget.__init__(self, parent)

self.ui = Ui_Hucha()

self.ui.setupUi(self)

if __name__ == “__main__”:

app = QtGui.QApplication(sys.argv)

myapp = MyForm()

myapp.show()

sys.exit(app.exec_())

Ya solo hace falta ver si todo ha salido bien. Si estás en spyder, pulsa F5 para ejecutar el programa. Si estás desde otro IDE, busca algún boton para ejecutarlo. Si has utilizado un editor de textos normal, o no te apetece utilzar el IDE, abre la terminal en la carpeta Hucha y escribe:

python hucha.py

Si todo ha salido bien, el programa debería empezar a funcionar:

El próximo día, iremos añadiendo nuevas funciones a nuestro programa, como añadir datos, conectarlos con una tabla sqlite…

Saludos!

Anuncios
3 comentarios
  1. Mauricio Pastorino permalink

    Tal vez le interese leer ésta entrada que involucra la suya: http://unsimpleprogramador.wordpress.com/2012/02/13/gestor-financiero-con-python-y-pyqt4/

    Mauricio

  2. Como he comentado en tu blog, ¡muchas gracias Mauricio! Seguiré tu blog con atención 😉

Trackbacks & Pingbacks

  1. Gestor financiero con Python y Pyqt4 « Un simple programador

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: