PyQt 5 Mostar Página Web

Qt versión 5 incluye un modulo llamado Qt WebEngine el cual nos permite mostrar contenido web dentro de nuestra aplicación, en versiones anteriores a la 5.7 existía un modulo llamado  Qt WebKit que realizaba esta tarea, este modulo ya nos esta presente en la biblioteca, siendo Qt WebEngine su reemplazo más moderno y eficiente.

Mostrar página web con PyQt 5

La GUI es simple primero tenemos un QLineText donde podemos ingresar la URL de la página web que deseamos visitar, a la derecha de él, vemos el QPushButton que nos permite navegar a la página ingresada, en medio vemos el QWebEngineView, widget encargado de mostrar la web correspondiente, finalmente en la parte inferior vemos un QProgressBar que nos servirá para monitorear el porcentaje de carga de la página.

class Example(QWidget):
    def __init__(self):
        super().__init__()
        self.resize(640, 320)
        self.setWindowTitle('PyQt-5 WebEngine')

        page = "https://www.google.com"

        self.url = QLineEdit(page)
        self.url.setPlaceholderText(page)

        self.go = QPushButton("Ir")
        self.go.clicked.connect(self.btnIrClicked)

        self.nav_bar = QHBoxLayout()
        self.nav_bar.addWidget(self.url)
        self.nav_bar.addWidget(self.go)

        self.web_view = QWebEngineView()
        self.web_view.loadProgress.connect(self.webLoading)

        self.progress = QProgressBar()
        self.progress.setValue(0)

        root = QVBoxLayout()
        root.addLayout(self.nav_bar)
        root.addWidget(self.web_view)
        root.addWidget(self.progress)

        self.setLayout(root)

Al presionar el botón Ir se ejecuta el siguiente código, si deseas saber más de como manejar eventos en PyQt5.

def btnIrClicked(self, event):
    url = QUrl(self.url.text())
    self.web_view.page().load(url)

web_view es un objeto de la clase QWebEngineView usamos el método load para cargar la página web indicada por la URL introducida necesitamos pasarle un objeto QUrl.

Para mostrar el progreso de carga respondemos al evento loadProgress el cual notifica el progreso de carga, lo establecemos en el QProgressBar con su método setValue donde event representa el porcentaje de carga.

def webLoading(self, event):
    self.progress.setValue(event)

Este módulo es muy poderoso podemos interactuar con JavaScript, personalizar el comportamiento de los widgets, cargar archivos HTML locales, acceder y controlar el historial de navegación y mucho más.

Este es un pequeño código de ejemplo donde usamos el método setHtml para establecer el contenido del QWebEngineView.

html = """
<!DOCTYPE HTML>
    <html>
        <head>
            <title>Example Local HTML</title>
        </head>
        <body>
            Este es un archivo <code>HTML</code> local.
        </body>
    </html>
"""

self.web_view = QWebEngineView()
self.web_view.setHtml(html)

Es todo por ahora en próximos tutoriales profundizaremos más en este módulo.

Código fuente en GitHub: Mostrar Página Web

Comentarios

Temas relacionados

Entradas populares de este blog

tkinter Grid

Controles y Contenedores JavaFX 8 - I

Conectar SQL Server con Java

tkinter Canvas