Web Plugin Example

Setting up Communications

There are two ways of interacting with the content in a Web page. The first way involves the use of QWebElement to read and modify the page content and structure; this is useful for certain types of application, as demonstrated by the DOM Traversal Example and the Simple Selector Example.

The second way is to add Qt objects to the page, connecting their signals to JavaScript functions, and executing the object's slots directly from JavaScript in the page. We explore this approach in this example.

To perform this communication, we require an updated CSVView widget from the Simple Web Plugin Example that can emit a signal whenever a row is selected, a JavaScript function to modify elements on the page, and some glue code to make the connection.

On the page, the plugin is declared like this:

 <object type="text/csv;header=present;charset=utf8"
         data="qrc:/data/accounts.csv"
         width="100%" height="300">
 </object>

As in the previous example, the <object> definition includes information about the data to be displayed, its location, and the dimensions of the plugin in the page.

Later in the document, we include a table that we will update with data from the CSVView widget:

 <table>
 <tr>
   <th>Name:</th>
   <td id="customers_name"></td>
 </tr><tr>
   <th>Address:</th>
   <td id="customers_address"></td>
 </tr><tr>
   <th>Quantity:</th>
   <td id="customers_quantity"></td>
 </tr>
 </table>

The CSVView widget is similar to the previous version. However, we wish to obtain and export individual rows of data, so we define the rowSelected() signal and exportRow() slot to perform this task.

 class CSVView : public QTableView
 {
     Q_OBJECT

 public:
     CSVView(const QString &mimeType, QWidget *parent = 0);

 signals:
     void rowSelected(const QString &name, const QString &address,
                      const QString &quantity);

 public slots:
     void updateModel();

 private slots:
     void exportRow(const QModelIndex &current);

 private:
     void addRow(bool firstLine, QStandardItemModel *model,
                 const QList<QStandardItem *> &items);

     QString mimeType;
 };

Since we wish to obtain one row of data at a time, the constructor includes code to restrict how the user can interact with the view:

 CSVView::CSVView(const QString &mimeType, QWidget *parent)
     : QTableView(parent)
 {
     this->mimeType = mimeType;
 }

The exportRow() slot provides a convenient mechanism for obtaining and emitting the values found on the current row of the table:

 void CSVView::exportRow(const QModelIndex &current)
 {
     QString name = model()->index(current.row(), 0).data().toString();
     QString address = model()->index(current.row(), 1).data().toString();
     QString quantity = model()->index(current.row(), 2).data().toString();

     emit rowSelected(name, address, quantity);
 }

This slot is connected to a signal belonging to the view's selection model: currentChanged(). This can be seen by examining the updateModel() function in the source code.

exportRow() emits the rowSelected() signal, passing strings containing the name, address and quantity in the current table row. To see how this data is passed to the Web page, we need to look at the CSVFactory class.

 QObject *CSVFactory::create(const QString &mimeType, const QUrl &url,
                             const QStringList &argumentNames,
                             const QStringList &argumentValues) const
 {
     if (mimeType != "text/csv")
         return 0;

     QHash<QString, QString> arguments;
     for (int i = 0; i < argumentNames.count(); ++i)
         arguments[argumentNames[i]] = argumentValues[i];

     CSVView *view = new CSVView(arguments["type"]);

     QWebFrame *frame = webView->page()->mainFrame();
     frame->addToJavaScriptWindowObject("view", view);
     frame->evaluateJavaScript("view.rowSelected.connect(fillInTable);\n");

 view.rowSelected.connect(fillInTable);

     QNetworkRequest request(url);
     QNetworkReply *reply = manager->get(request);
     connect(reply, SIGNAL(finished()), view, SLOT(updateModel()));
     connect(reply, SIGNAL(finished()), reply, SLOT(deleteLater()));

     return view;
 }

 <script type="text/javascript">
 function fillInTable(name, address, quantity)
 {
     var nameElement = document.getElementById("customers_name");
     var addressElement = document.getElementById("customers_address");
     var quantityElement = document.getElementById("customers_quantity");

     nameElement.innerHTML = name;
     addressElement.innerHTML = address;
     quantityElement.innerHTML = quantity;
 }
 </script>