3

Estou criando um navegador simples usando QtWebkit e adicionei nele o "suporte" para Notification Web API usando o QWebPage::setFeaturePermission.

Um exemplo:

function notifyMe() {
    if (Notification.permission === "granted") {
        var notification = new Notification("Hi there!");
    } else if (Notification.permission !== "denied") {
        Notification.requestPermission(function(permission) {
            if (permission === "granted") {
                var notification = new Notification("Hi there!");
            }
        });
    }
}

<button onclick="notifyMe();">Notify me</button>

Código:

QObject::connect(page,
    SIGNAL(featurePermissionRequested(QWebFrame*, QWebPage::Feature)), this,
    SLOT(featurePermissionRequested(QWebFrame*,QWebPage::Feature))
);

...

void Form::featurePermissionRequested(QWebFrame* frame, QWebPage::Feature feature) {
    switch (feature) {
        case QWebPage::Notifications:
            qDebug() << "Notification";
            page->setFeaturePermission(frame, feature, QWebPage::PermissionGrantedByUser);
        break;
        case QWebPage::Geolocation:
            qDebug() << "GEO";
        break;
        default:
            qDebug() << "Unknown feature";
    }
}

Sempre que eu clico no botão "Notify me" aparece a seguinte mensagem no Desktop:

Desktop Notification

Ou seja funciona perfeitamente, porém gostaria de saber se é possível "customizar" as "notifications" no Qt?

Em outras palavras, gostaria que elas fossem similares ao do GoogleChrome ou Firefox, algo como isto:

Web Notification

3
  • mas você não pode customizar usando o JS mesmo? Vê lá na própria página da mozilla tem como customizar, icones, corpo, etc
    – Adir Kuhn
    3/03/2015 às 19:15
  • @AdirKuhn Acho que você não entendeu o "customizar". O QWebPage usa o QSystemTrayIcon para gerar as notificações, o que eu quero é substituir o QSystemTrayIcon por um QWidget customizado. Pois mesmo que eu altere o icone no Notification ainda sim o QT usa o QSystemTrayIcon como na imagem: i.stack.imgur.com/oxiZT.png Eu não quero usar QSystemTrayIcon, quero que seja uma janela bonitinha, parecida com está: i.stack.imgur.com/S62wY.png
    – Syzoth
    3/03/2015 às 19:27
  • Conseguiu? Fiquei curioso, kkkkkk
    – Adir Kuhn
    5/03/2015 às 16:11

1 Resposta 1

1

Para customizar o Notifications Web API no QtWebkit será necessário usar o "Webkit plugins", ou seja, criar um plugin e colocar no diretório qtdir/plugins/webkit.

Nota: Para criar os plugins será necessário usar o "header" <QtWebKit/QWebKitPlatformPlugin>

Criando um plugin Webkit:

  • Crie um projeto no QtCreator
  • No arquivo .pro (exemplo src.pro) adicione isto:

    TARGET = $$qtLibraryTarget(meupluginwebkit)
    TEMPLATE = lib
    CONFIG += plugin
    
    HEADERS += $$[QT_INSTALL_HEADERS]/QtWebKit/qwebkitplatformplugin.h \
        meupluginwebkit.h
    
    SOURCES += \
        meupluginwebkit.cpp
    
    DESTDIR = $$PWD/bin-plugin
    OBJECTS_DIR = $$PWD/build-plugin
    MOC_DIR = $$PWD/build-plugin
    RCC_DIR = $$PWD/build-plugin
    UI_DIR = $$PWD/build-plugin
    
  • Crie o arquivo meupluginwebkit.h na pasta do projeto

    #ifndef MEUPLUGINWEBKIT_H
    #define MEUPLUGINWEBKIT_H
    
    #include <QtWebKit/QWebKitPlatformPlugin>
    
    class meupluginwebkit : public QObject, public QWebKitPlatformPlugin
    {
        Q_OBJECT
        Q_INTERFACES(QWebKitPlatformPlugin)
    
    #if QT_VERSION >= 0x050000
        Q_PLUGIN_METADATA(IID "org.qtwebkit.QtWebKit.QtWebPlugin")
    #endif
    
    public:
        explicit meupluginwebkit();
        ~meupluginwebkit();
    
        bool supportsExtension(Extension ext) const;
        QObject* createExtension(Extension ext) const;
    };
    
    #endif // MEUPLUGINWEBKIT_H
    
  • Crie o arquivo meupluginwebkit.cpp na pasta do projeto

    #include "meupluginwebkit.h"
    #include "notification/notification.h"
    
    meupluginwebkit::meupluginwebkit()
    {
    }
    
    meupluginwebkit::~meupluginwebkit()
    {
    }
    
    bool meupluginwebkit::supportsExtension(Extension ext) const
    {
        return ext == Notifications;
    }
    
    QObject* meupluginwebkit::createExtension(Extension ext) const
    {
        switch (ext) {
            case Notifications:
                return new Notification();
    
            default:
                return 0;
        }
    }
    
    //Para QT-4.8
    #if QT_VERSION < 0x050000
    Q_EXPORT_PLUGIN2(webkitplugin, meupluginwebkit);
    #endif
    
  • Crie dentro da pasta do projeto uma pasta chamada notification

  • Na pasta notification adicion adicione os arquivos:

    notification.h

    #ifndef NOTIFICATION_H
    #define NOTIFICATION_H
    
    #include <QtWebKit/QWebKitPlatformPlugin>
    
    class Notification : public QWebNotificationPresenter
    {
        Q_OBJECT
    
    public:
        explicit Notification();
        ~Notification();
    
        void showNotification(const QWebNotificationData* data);
    
    signals:
        void notificationClosed();
        void notificationClicked();
    };
    
    #endif // NOTIFICATION_H
    

    notification.cpp

    #include "notification.h"
    #include <QDebug>
    
    Notification::Notification() : QWebNotificationPresenter()
    {
        qDebug() << "Create: Notification";
    }
    
    Notification::~Notification()
    {
        qDebug() << "Delete: this (Notification)";
    }
    
    void Notification::showNotification(const QWebNotificationData* data)
    {
        qDebug() << "titulo:" << data->title();
        qDebug() << "icone:" << data->iconUrl();
        qDebug() << "mensagem:" << data->message();
        qDebug() << "pagina que chamou a notificação:" << data->openerPageUrl();
    }
    

No exemplo eu usei qDebug apenas para entendimento de como capturar os dados, para criar a sua notificação customizada, provavelmente você terá que usar QWidget

  • Crie na pasta notification o arquivo notification.pri:

    QT += network
    
    HEADERS += \
        $$PWD/notification.h
    
    SOURCES += \
        $$PWD/notification.cpp
    
  • Inclua o notification.pri no src.pro:

    include($$PWD/notification/notification.pri)
    

Compilando o src.pro:

  • Abra o projeto src.pro no QtCreator (se não estiver aberto)
  • Clique no botão Build (o desenho do martelo, ou use Ctrl+B) - Nota: Não clique no botão "Run" (o desenho do botão "play" verde), não use Ctrl+R)
  • Feche o projeto src.pro
  • Abra a pasta aonde se encontra o arquivo src.pro
  • Abra a pasta bin-plugin
  • Copie o arquivo meupluginwebkit.dll para QtDir/plugins/webkit/meupluginwebkit.dll (exexemplo com mingw: C:/qt/qt5.4/mingw/plugin/webkit/meupluginwebkit.dll)
  • Se a pasta webkit não existir, então crie ela.
  • Abra o seu projeto que está usando QWebView e teste o JavaScript que usa Notification Web API.

Quando você rodar o projeto que usa o QWebView, ele automaticamente irá carregar a dll da pasta webkit, portanto não será necessário nenhum outro tipo de configuração e isto irá subistituir o sistema de notificação padrão do QtWebkit (que no caso no Windows usa o SystemTrayIcon) pelo seu widget customizado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .