zoukankan      html  css  js  c++  java
  • CS001497 Add data to a web page with JavaScript, WebKit, and Qt

    CS001497 - Add data to a web page with JavaScript, WebKit, and Qt - Nokia Developer Wiki

    CS001497 - Add data to a web page with JavaScript, WebKit, and Qt


    Jump to: navigation,
    search



    Overview

    This snippet demonstrates how you can add data to a web page with Qt via WebKit. We will use the article CS001496 - Gather data from web page with JavaScript, WebKit, and Qt as base for this snippet.

    Preconditions

    Code

    Every time you see

    /* ... */

    there's code omitted from the source file for the sake of emphasising the code added to this snippet compared to the snippet this is based on.

    js/add-data.js

    This code will be injected from Qt to the web page and it'll add user input to the web page as a new paragraph.

    /**
      * Adds text p element with text content
      * after p element with id paragraph.
      */
    Qt_QWET_add = function(string) {
      var p = document.getElementById("paragraph");
      var s = p.nextSibling;
      while(s.name != "" &&
            s.name == "p") {
        s = s.nextSibling;
      }
      var n = document.createElement("p");
      n.appendChild(document.createTextNode(string));
      var parent = s.parentNode;
      parent.insertBefore(n, s);
    };
    Qt_QWET_add("%1");

    Add the file to the resource file and include the resource file in your project file as explained in CS001503 - Using resources in Qt.

    src/qwet.h

    The only things added to the header file in comparison to CS001496 - Gather data from web page with JavaScript, WebKit, and Qt are:

    • QLineEdit _text - for text input
    • QString _addJS - for injected JavaScript
    • addButtonClicked slot
    • escapeCharacters - helper method which escapes user input so that it can be used in generated JavaScript.
    class QWET : public QMainWindow
    {
        /* ... */
     
    private slots:
        /* ... */
        void addButtonClicked();
    private:
        /* ... */
        QPointer<QLineEdit> _text;
     
        QString _addJS;
        /* ... */
        QString escapeCharacters(const QString& string);
    };
     
    #endif // QWET_H

    src/qwet.cpp

    Things which have changed compared to CS001496 - Gather data from web page with JavaScript, WebKit, and Qt:

    • addition of another button to click to add data from Qt
    • creation of QHBoxLayout to add the input widgets in
    • the addButtonClickedSlot slot implementation
    • escapeCharacters implementation
    /* ... */
    void QWET::setupUI()
    {
        /* ... */
     
        /** Create a text input. */
        _text = new QLineEdit(this);
     
        /** Add the add text button. */
        QPushButton* addButton = new QPushButton("Add text.");
        connect(addButton, SIGNAL(clicked()),
                this, SLOT(addButtonClicked()));
     
        /**
          * Add the input widgets to own layout and add it to
          * main layout.
          */
        QHBoxLayout* input = new QHBoxLayout(this);
        input->addWidget(_text);
        input->addWidget(addButton);
        _layout->addLayout(input);
    }
     
    /**
      * This slot adds a p element with content to the web page.
      */
    void QWET::addButtonClicked()
    {
        /** First time the add button is clicked, _addJS will be empty. */
        if(this->_addJS.isEmpty()) {
            /** Read the java script to be executed to a string. */
            this->_addJS = this->readFileToQString(QString(":/js/add-data.js"));
        }
        else {
            /** Second time we can reuse the same function again. */
            this->_addJS = QString("Qt_QWET_add(\"%1\");");
        }
        /** We'll have to escape the characters from the user input
          * so that we won't break the JavaScript we are generating. */
        QString string = this->escapeCharacters(this->_text->text());
        QString js = this->_addJS.arg(string);
        /** Run the java script on the web page. */
        this->_webView->page()->mainFrame()->evaluateJavaScript(js);
    }
     
    /* ... */
     
    /**
      * Escapes the string from things which
      * aren't wanted to the JavaScript.
      */
    QString QWET::escapeCharacters(const QString& string)
    {
        QString rValue = QString(string);
        /** Assign \\ to backSlash */
        QString backSlash = QString(QChar(0x5c)).append(QChar(0x5c));
        /** Replace \ with \\ */
        rValue = rValue.replace('\\', backSlash);
        /** Assing \" to quote. */
        QString quote = QString(QChar(0x5c)).append(QChar(0x22));
        /** Replace " with \" */
        rValue = rValue.replace('"', quote);
        return rValue;
    }

    Postconditions

    You've now created this:

    QWET N900.png

    Complementary material

    See also

  • 相关阅读:
    【2020-04-03】多注意一下自己闲下来的思绪
    vue 去哪网项目 学习笔记(一)
    数据分析相关的内容
    vue 自学项目笔记
    vue 所有的指令
    vue 自学笔记(5) 列表渲染
    vue 自学笔记(4): 样式绑定与条件渲染
    vue 自学笔记(三) 计算属性与侦听器
    自学vue笔记 (二) : 实例与生命周期
    杜教BM模板
  • 原文地址:https://www.cnblogs.com/lexus/p/2441976.html
Copyright © 2011-2022 走看看