Eric4-IDE Tutorial¶

1. Introduccion¶

Eric 4 es un Entorno Integrado de Desarrollo para el lenguaje de programación Python. Está escrito utilizando los enlaces Python PyQt para Qt GUI toolkit y el widget de edición QScintilla.

El propósito de este tutorial es mostrar, paso a paso el uso basico. ERIC4 se empleó para el desarrollo de la interfaz gráfica de Signal Chain,por ello en este tutorial se va a explicar la forma de trabajo con esta IDE implementando como ejemplo un web browser.

Qt designer es usado para organizar 3 widgets en la ventana principal (main window) un QlineEdit que se utiliza para escribir la URL, un QpushButton para iniciar la navegación a la URL, y un QwebView que muestra el contenido HTML. A continuacion se detalla como un navegador web puede ser implementado en Python, PyQt y Qt escribiendo una pequeña cantidad de código. Eric4 se encargará de hacer el trabajo.

El proposito de este tutorial es explicar de manera rapida como:

• Inicar un nuevo proyecto.
• Añadir el paquete de python.
• Añadir un form(intefaz gráfica de usuario).
• Añadir una clase que tenga el control dentro del form(La interfaz grafica) .
• Añadir algunas señales y slots.
• Añadir el main class para ejecutar el proyecto.

Este tutorial no es:

• Una explicación en profundidad de toda la herramienta, botones, menus, tabs,layouts,etc disponibles. En eric 4 todo esta organizado de una manera logica agradable visualmente al usuario. Solo con practicar y desarrollar un poco con la herramienta el desarrollador deberia tener una idea general de como se trabaja. La vista del proyecto(Proyect Viewer) esta a la izquierda del main window, y contiene varios tabs.
• Un tutorial de python.
• Un tutorial de Qt.

2. Crear un Proyecto¶

Para ejecutar eric4 lo hacemos desde un terminal escribiendo eric o desde el Dash de Ubuntu escribiendo eric. Para crear un proyecto en eric4 en la barra de menu ubicamos la opción Project y le hacemos un click y luego seleccionamos la opción 'New'. Una ventana de 'new project' aparece, seleccionamos algunas opciones del proyecto como se muestra en la figura. Lo mas importante es donde va a estar ubicado el proyecto, el lenguaje de programación, el tipo de proyecto y el main script. En nuestro caso el Main Script se llama nanobrowser.py.

Despues de dar 'Ok' un nuevo dialogo aparece preguntando si deseamos añadir archivos al proyecto. Clik no y otra ventana de dialogo aparece preguntando que version de control queremos usar. Seleccionamos 'none' and click ok.

3. Adicion del main window¶

Necesitamos crear el main window (ventana principal) para la interfaz de usuario del browser. Para obtener este recurso en el project, tenemos que añadir a new form(archivo con extensión .ui). Pero primero, necesitamos crear un new package para controlar la interfaz de usuario, nos ubicamos primero en el tab source en el Project Viewer dentro de este en el espacio en blanco de la ventana click derecho y seleccionamos la opcion 'New Package..'.

Escribimos 'ui' como nombre del paquete.

Ahora vamos a crear el archivo .ui. Nos ubicamos en el tag 'Forms' en el project viewer y click derecho dentro de la ventana en blanco del tag Forms. Seleccionamos la opcion 'New form' en el menu que aparece, seleccionamos el tipo 'main window' en el dialogo que aparece y los grabamos en el folder ui creado recientemente. Le llamamos mainwindow.ui.

Qt designer, la herramienta estandar de Qt para el diseño de formas, es ejecutado por eric4. Siempre es posible ejecutarlo haciendo doble click in cualquier archivo con extension .ui en el project viewer. Qt designer muestra un main window vacio, ahora añadiremos los 3 widgets que necesitamos.

Primero añadimos el QlineEdit widget( lo obtenemos desde el widget box, lo seleccionamos y lo arrastramos dentro del mainwindow). Podemos cambiar el nombre por defecto por algo como “txtUrl”. Segundo, añadimos el QpushButton, de igual forma lo seleccionamos y arrastramos ubicandolo al lado derecho del txtUrl widget. Le cambiamos el nombre por 'btnNavigate'. Estos cambios se realizan en la parte derecha del Qt Designer en el cuado object inspector.

La adición de widgets a una forma Qt es bastante sencilla. La única cosa que he encontrado de alguna manera difícil es entender cómo organizar los widgets de diseños. La mejor forma considero para organizarlos lo mejor posible es invertir algo de tiempo practicando con los diferentes layouts. Para este tutorial, como solo hay 3 widgets es sencillo. En este punto, le asignamos a los 2 widgets horizontal layout para esto,seleccionamos los 2 widgets click derecho en uno de ellos. Luego seleccionamos Lay out horizontally. Los dos widgets entonces serám rodeadas por una linea roja(lo que significa que estan en un mismo layout).

Necesitamos añadir otro widget, un QWebView. Despues de seleccionar la opcion desde el widget box y ubicarlo en el mainwindow. Click derecho en algun lugar libre del mainwindow(sin seleccionar ninguno de los 3 widgets) y seleccionamos 'Layout/lay out in a grid'.

Ahora deberiamos ver los widgets ubicados de manera agradable, llenando todos los espacios vacios con la habilidad de reajustarse al tamaño del mainwindow. Esta es una de las virtudes del layout ya no hay que preocuparse de la distribucion de los items cuando el tamaño del mainwindwow cambie.

Finalmente grabamos los cambios y cerramos el Qt designer para regresar al eric4.

3. Generación del Código Python¶

Ahora necesitamos tener algo de codigo python para empezar a trabajar. Pero todavia no escribiremos codigo. Todo lo que tenemos hasta ahora en el project es un archivo con extension .ui. Pero el interprete de python necesita codigo de python para trabajar con el , y con eric4 podemos generar el código python desde el archivo .ui compilando. Si regresamos y observamos el project viewer, Forms tab, hacemos click derecho en el mainwindow.ui luego seleccionamos la opcion 'Compile Form'.

El archivo .ui es compilado y como salida nos genera el archivo con el codigo python. Nos ubicamos en la vista Source del project view, y aparecerá un nuevo archivo (Ui_MainWindow.py) con el código python. Si necesitamos hacer algunos cambios en el archivo ui(Generalmente usando Qt designer), tenemos que recompilar el form, y todo los cambios que hayamos realizado se perderan. En su lugar, vamos a generar otra clase que a su vez se extiende desde Ui_MainWindow.

Ahora una vez mas hacemos click derecho en el arhivo mainwindow.ui, esta vez seleccionamos la opcion 'Generate dialog code...'. Se mostrara una ventana para indicar:
Nombre de la nueva clas y especificar donde se grabara.
Seleccionar que señales o eventos queremos añadir de acuerdo a los widgets añadidos.

Necesitamos indicar un nombre para esta nueva clase: click en la opcion 'New' y en la ventana que aparece , escribe MainWindow como el nombre de la clase y el mainwindow.py como nombre del archivo. Para guardar el archivo, utilizamos el folder ui. Para las señales, seleccionamos el on_btnNavigate_released para el widget btnNavigate.

Eric 4 ha creado una nueva clase para nosotros. De acuerdo a lo que le indicamos, se llama MainWindow. Lo abrimo desde eric4, en el tab source en la carpeta ui haciendo doble click en el archivo. Observamos que tiene su constructor por defecto y un metodo como se muestra.

@pyqtSignature("")
    def on_btnNavigate_released(self):
        """
        Slot documentation goes here.
        """
        # TODO: not implemented yet
        raise NotImplementedError

En este punto podemos apreciar las siguientes cosas:
* Eric4 ha precedido a la definición del método con @pyqtSignature ( ""). El objetivo principal de este es hacer hincapié en el tipo de variables que el método recibe como parámetros. En este caso, como no hay parámetros que sean necesarios, no se especifica el tipo en la llamada pyqtSignature.
* Hay una entrada para comentarios vacia. Este es el lugar para añadir comentarios para este método.
* El método fue creado por eric4 pero no hace ninguna operación solo una llamada a la exception.

Ahora es tiempo de escribir el codigo que realizara la tarea. Que queremos que haga el boton navegar. Usualmente, el usuario de este navegador escribira una url en el txtUrl widget, y luego se hara click en el btnNavigate, esperando visualizar la url de nuesta preferencia en el QWebView Widget.
Escribimos el siguiente codigo.

@pyqtSignature("")
def on_btnNavigate_released(self):
    """
    Public slot invoked when the user clicks the Navigate Button .
    """
    self.webView.setUrl(QUrl(self.txtUrl.text()))

Ahora lo que tenemos que hacer es invocar al método setUrl de el objeto webView(En lugar de QWebView), pasandole el parámetros de la clase QUrl creada desde el contenido de el widget txtUrl. Para realizar esta tarea, tenemos que importar QUrl en el mainwindow.py de la siguiente forma:

from PyQt4.QtCore import pyqtSignature, QUrl

Antes de que lanzemos el navegador, necesitamos implemetar el main script. Cuando creamos el project escribimos como main script del project nanobrowser.py. Vamos a crearlo para ello click en 'File/New' menu item y una nueva pagina se muestra en el editor escribimos las siguientes lineas de codigo.

from PyQt4 import QtCore, QtGui
from ui.mainwindow import MainWindow

if __name__ == "__main__":
    import sys
    app = QtGui.QApplication(sys.argv)
    ui = MainWindow()
    ui.show()
    sys.exit(app.exec_())

Grabamos el archivo como nanobrowser.py.

AHora ya tenemos un web browser operativo. Podemos ejecutar el projet desde el Start menu (o presionando Shift+f2) . Podemos escribir 'http://eric-ide.python-projects.org/' in the txtURL widget y click en el boton navigate. En caso salga una consolo llamada run project dale ok y despues deberia aparecer nuestra pequeño navegador.