将 HTML5 GUI 事件连接到 Qt 应用程序答案

【问题标题】：Connecting HTML5 GUI events to Qt application将 HTML5 GUI 事件连接到 Qt 应用程序
【发布时间】：2014-01-25 09:43:13
【问题描述】：

我现有的 Qt 应用程序有一个“传统”的 GUI，包括带有 QtWidgets 的面板。我现在想添加一个 GUI 面板，该面板将涉及拖动 2D 贝塞尔曲线点，以及各种类型的图形反馈。

我对新 GUI 的首选是 HTML5、JavaScript 和 SVG。使用诸如D3.js 或Ractive.js 之类的库。与开发 QtWidget（实现 QGraphicsScene）相比，我可以更轻松地开发此 GUI - 加上 HTML5 路线，我将能够在应用程序的在线版本中重用代码。

尽管有Qt's website saying that I can develop my whole UI with HTML5，但我找不到任何示例说明如何在 C++ 端从用户操作接收事件或信号 - 或者如何将 C++ 方法公开给 WebView 中的 JavaScript 对象。

通过在 C++ 端实现 Web 服务器并使用来自 JavaScript 的 AJAX 请求返回父应用程序，我可以在 Web UI 和应用程序之间进行通信吗？

【问题讨论】：

您是否看过 Qt 中的图形视图/场景框架以及 Qt Creator 中可用的示例？因为有一个例子完全符合你的要求。只需浏览 Qt 中包含的精彩示例 - 它们非常值得。
谢谢，是的，我有并且我同意它肯定可以达到我的需要。无需争论 JS/SVG 编码优于 Qt/QGraphicsScene 编码的优点，就我个人而言，我更喜欢 HTML5 路线，这也将在未来提供更多选择。我已经编辑了我的问题以澄清这一点以及事实 - 正如你所指出的 - QGraphicsScene 是明显的 Qt 选择。

【解决方案1】：

看来我需要的是QWebFrame 的addToJavaScriptWindowObject 方法，它使Qt 对象可用于JavaScript，并公开其属性和方法。

Form Extractor Example 就是一个正在使用的例子。

【讨论】：

【解决方案2】：

如果像我这样的其他人在 Qt 5.X 天偶然发现这个问题，QtWebKit 已被弃用。

现在，我们必须使用基于 Chromium 的渲染引擎 QtWebEngine 和 QtWebChannel 来与 Qt 和 HTML-Js 来回通信。

Qt documentation 中有一些很好的例子，一如既往。

【讨论】：