DEV Community

Moprius
Moprius

Posted on

Webview em QML (Qt Modeling Language)

#qml #webview #website #qt

Introdução

O código a seguir é um exemplo de uma aplicação básica em QML (Qt Modeling Language) que cria uma janela de aplicação que incorpora um visualizador de web (WebEngineView) para exibir a página do Google. Ele inclui funcionalidades como um menu de contexto, ícone de bandeja do sistema (SystemTrayIcon), e um histórico de URLs visitadas. A aplicação também possui vários itens de menu para interações adicionais, como copiar, colar, cortar, selecionar tudo, atualizar, zoom in, zoom out, e abrir o URL em um navegador externo. Vamos as explicação do código

Código completo 

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtWebEngine 1.10
import Qt.labs.platform 1.1

ApplicationWindow {
    id: window
    visible: true
    width: 1024
    height: 768
    title: "Google"

    WebEngineView {
        id: webEngineView
        anchors.fill: parent
        url: "https://www.google.com"

        onUrlChanged: {
            historyModel.append({url: webEngineView.url.toString()})
        }
    }

    ListModel {
        id: historyModel
    }

    ListView {
        id: historyView
        width: parent.width
        height: 200
        model: historyModel
        delegate: Text {
            text: url
        }
        visible: false // Defina como true para visualizar o histórico
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.RightButton
        onPressed: {
            if (mouse.button == Qt.RightButton) {
                contextMenu.open(mouse.x, mouse.y)
            }
        }
    }

    Menu {
        id: contextMenu
        MenuItem {
            text: qsTr("Copy")
            onTriggered: webEngineView.triggerWebAction(WebEngineView.Copy)
        }
        MenuItem {
            text: qsTr("Paste")
            onTriggered: webEngineView.triggerWebAction(WebEngineView.Paste)
        }
        MenuItem {
            text: qsTr("Cut")
            onTriggered: webEngineView.triggerWebAction(WebEngineView.Cut)
        }
        MenuItem {
            text: qsTr("Select All")
            onTriggered: webEngineView.triggerWebAction(WebEngineView.SelectAll)
        }
        MenuItem {
            text: qsTr("Refresh")
            onTriggered: webEngineView.triggerWebAction(WebEngineView.Reload)
        }
        MenuItem {
            text: qsTr("Zoom In")
            onTriggered: { webEngineView.zoomFactor += 0.1; }
        }
        MenuItem {
            text: qsTr("Zoom Out")
            onTriggered: { webEngineView.zoomFactor -= 0.1; }
        }
        MenuItem {
            text: qsTr("Open in external browser")
            onTriggered: {
                Qt.openUrlExternally(webEngineView.url)
            }
        }
    }

 SystemTrayIcon {
    id: trayIcon
    visible: true
    icon.source: "./imagens/google.png" // No caso a pasta onde está a imagem do ícone

    menu: Menu {
        MenuItem {
            text: "Open"
            onTriggered: {
                window.show()
                window.raise()
                window.requestActivate()
            }
        }
        MenuItem {
            text: "Open Specific URL"
            onTriggered: {
                webEngineView.url = "http://www.google.com"
                window.show()
                window.raise()
                window.requestActivate()
            }
        }
        MenuItem {
            text: "Toggle History View"
            onTriggered: {
                historyView.visible = !historyView.visible
            }
        }
        MenuItem {
            text: "Settings"
            onTriggered: {
                // Implemente a lógica para abrir a janela de configurações
            }
        }
        MenuItem {
            text: "Exit"
            onTriggered: Qt.quit()
        }
    }

    onActivated: reason => {
        if (reason === SystemTrayIcon.Trigger) {
            if (window.visible) {
                window.hide()
            } else {
                window.show()
                window.raise()
                window.requestActivate()
            }
        }
    }
}

onClosing: {
    close.accepted = false;
    window.hide();
}

Component.onCompleted: {
    trayIcon.show()
}

}
Enter fullscreen mode Exit fullscreen mode

Explicação do Código 

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtWebEngine 1.10
import Qt.labs.platform 1.1
Enter fullscreen mode Exit fullscreen mode

Esses comandos importam os módulos necessários para a aplicação. QtQuick é usado para interfaces de usuário, QtQuick.Controls para controles padrão (como botões e menus), QtQuick.Layouts para layouts, QtWebEngine para exibir páginas web, e Qt.labs.platform para acessar funcionalidades específicas da plataforma.

ApplicationWindow {
    id: window
    visible: true
    width: 1024
    height: 768
    title: "Google"
Enter fullscreen mode Exit fullscreen mode

ApplicationWindow define a janela principal da aplicação, com uma largura de 1024 pixels, altura de 768 pixels, e o título "Google".

WebEngineView {
    id: webEngineView
    anchors.fill: parent
    url: "https://www.google.com"

    onUrlChanged: {
        historyModel.append({url: webEngineView.url.toString()})
    }
}
Enter fullscreen mode Exit fullscreen mode

WebEngineView é o componente que carrega e exibe a página web. Quando o URL muda, a nova URL é adicionada ao modelo de histórico (historyModel).

ListModel {
    id: historyModel
}

ListView {
    id: historyView
    width: parent.width
    height: 200
    model: historyModel
    delegate: Text {
        text: url
    }
    visible: false // Defina como true para visualizar o histórico
}
Enter fullscreen mode Exit fullscreen mode

ListModel armazena as URLs visitadas. ListView exibe esse histórico, mas está inicialmente invisível (visible: false).

MouseArea {
    anchors.fill: parent
    acceptedButtons: Qt.RightButton
    onPressed: {
        if (mouse.button == Qt.RightButton) {
            contextMenu.open(mouse.x, mouse.y)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

MouseArea detecta cliques do mouse. Se o botão direito do mouse for pressionado, o menu de contexto (contextMenu) é aberto na posição do clique.

Menu {
    id: contextMenu
    MenuItem {
        text: qsTr("Copy")
        onTriggered: webEngineView.triggerWebAction(WebEngineView.Copy)
    }
    MenuItem {
        text: qsTr("Paste")
        onTriggered: webEngineView.triggerWebAction(WebEngineView.Paste)
    }
    MenuItem {
        text: qsTr("Cut")
        onTriggered: webEngineView.triggerWebAction(WebEngineView.Cut)
    }
    MenuItem {
        text: qsTr("Select All")
        onTriggered: webEngineView.triggerWebAction(WebEngineView.SelectAll)
    }
    MenuItem {
        text: qsTr("Refresh")
        onTriggered: webEngineView.triggerWebAction(WebEngineView.Reload)
    }
    MenuItem {
        text: qsTr("Zoom In")
        onTriggered: { webEngineView.zoomFactor += 0.1; }
    }
    MenuItem {
        text: qsTr("Zoom Out")
        onTriggered: { webEngineView.zoomFactor -= 0.1; }
    }
    MenuItem {
        text: qsTr("Open in external browser")
        onTriggered: {
            Qt.openUrlExternally(webEngineView.url)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Menu define um menu de contexto com várias opções, como copiar, colar, cortar, selecionar tudo, atualizar, zoom in, zoom out, e abrir o URL em um navegador externo.

SystemTrayIcon {
    id: trayIcon
    visible: true
    icon.source: "./imagens/google.png" // No caso a pasta onde está a imagem do ícone

    menu: Menu {
        MenuItem {
            text: "Open"
            onTriggered: {
                window.show()
                window.raise()
                window.requestActivate()
            }
        }
        MenuItem {
            text: "Open Specific URL"
            onTriggered: {
                webEngineView.url = "http://www.google.com"
                window.show()
                window.raise()
                window.requestActivate()
            }
        }
        MenuItem {
            text: "Toggle History View"
            onTriggered: {
                historyView.visible = !historyView.visible
            }
        }
        MenuItem {
            text: "Settings"
            onTriggered: {
                // Implemente a lógica para abrir a janela de configurações
            }
        }
        MenuItem {
            text: "Exit"
            onTriggered: Qt.quit()
        }
    }

    onActivated: reason => {
        if (reason === SystemTrayIcon.Trigger) {
            if (window.visible) {
                window.hide()
            } else {
                window.show()
                window.raise()
                window.requestActivate()
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

SystemTrayIcon cria um ícone na bandeja do sistema com um menu. As opções do menu permitem abrir a aplicação, abrir um URL específico, alternar a visualização do histórico, abrir configurações e sair da aplicação. A aplicação pode ser minimizada para a bandeja do sistema e restaurada a partir dela.

onClosing: {
    close.accepted = false;
    window.hide();
}

Component.onCompleted: {
    trayIcon.show()
}
Enter fullscreen mode Exit fullscreen mode

Esses manipuladores de evento garantem que a aplicação não seja completamente fechada ao clicar em fechar, mas sim escondida. Component.onCompleted exibe o ícone na bandeja quando a aplicação é iniciada.

Conclusão

O código exemplifica uma aplicação QML que utiliza WebEngineView para carregar o Google, inclui um menu de contexto para várias operações, e um ícone de bandeja do sistema para facilitar o acesso e controle da aplicação. Os elementos chave como MouseArea e SystemTrayIcon melhoram a usabilidade, permitindo que os usuários interajam com a aplicação de maneira intuitiva e eficiente. Este exemplo é uma boa base para criar aplicativos web integrados com funcionalidades de interface de usuário ricas e interativas.

Top comments (0)

Read next

seoakbarali profile image

Foody Lover (Sweet Dishes)

akbarali seo -

01yym profile image

Access Service on my Computer from public domain

01yym -

01yym profile image

run python on WSL

01yym -

choir241 profile image

My thoughts on Pieces

Richard Choi -