如何将WRT widget移植到Qt

Comments

(no comments yet)

Log in or Join to leave comments.

文章信息

---

代码示例

源文件: Media:Wrtportingdemo.zip

---

文章

由 max.chen 在 27 Dec 2010 创建

最后由 hamishwillee 在 11 Oct 2012 编辑

介绍

本文介绍了如何将 Web Runtime (WRT) widgets移植到Qt平台。Qt开发环境的搭建请参考Nokia Qt SDK开发环境使用。

创建一个基于QWebView控件的Qt应用

1. 启动 Qt Creator IDE.
2. 依此选择 File > New File or Project... > Projects > Qt C++ Project> Mobile Qt Application.
3. 点击 Choose。
4. 填入项目名称和路径。
5. 点击 Next。
6. 接下来，根据需要选择你的应用所支持的平台。
7. 点击 Next。
8. 然后，选择屏幕旋转的方式。 这里需要注意的一点是，如果你的应用需要网络连接，请选上下面的Enable network access选项。
9. 点击 Next。
10. 根据需要，选择版本控制。
11. 点击 Finish。

首先我们将webkit模块的加载到我们的项目中：

QT += webkit

现在就可以编辑代码了！

首先，要在项目中添加一个类WRTWidgetWindow。依此选择 File > New File or Project... > Files and Classes > C++> C++ Class. 在类名中填入WRTWidgetWindow， 并在基类下拉选项中选择QMainWindow。这样文件 wrtwidgetwindow.h和wrtwidgetwindow.cpp会自动添加到项目中。

接下来编辑文件 wrtwidgetwindow.h :

#ifndef WRTWIDGETWINDOW_H
#define WRTWIDGETWINDOW_H
 
#include <QtCore/QPointer>
#include <QtGui/QMainWindow>
 
class QWebView;
 
class WRTWidgetWindow : public QMainWindow
{
    Q_OBJECT
 
public:
    WRTWidgetWindow(QWidget *parent = 0);
    ~WRTWidgetWindow();
 
private:
    void setupUI();
    QWebView* createWebView();
 
private:
    QPointer<QWebView> webView;
};
 
#endif // WRTWIDGETWINDOW_H

上面的类WRTWidgetWindow继承自QMainWindow，代表了应用的主窗口。 WRTWidgetWindow包含了QWebView控件。QWebView用来在Qt应用中显示web内容（HTML, CSS, JavaScript）。

接下来，编辑(wrtwidgetwindow.cpp)：

#include "wrtwidgetwindow.h"
 
#include <QtGui/QFrame>
#include <QtGui/QVBoxLayout>
#include <QtWebKit/QWebView>
 
WRTWidgetWindow::WRTWidgetWindow(QWidget *parent)
    : QMainWindow(parent)
{
    setupUI();
}
 
WRTWidgetWindow::~WRTWidgetWindow()
{
    webView->deleteLater();
}
 
void WRTWidgetWindow::setupUI()
{
    QFrame* cw = new QFrame(this);
    setCentralWidget(cw);
 
    QVBoxLayout* layout = new QVBoxLayout(cw);
    cw->setLayout(layout);
 
    webView = createWebView();
    layout->addWidget(webView);
}
 
QWebView* WRTWidgetWindow::createWebView()
{
    QWebView* view = new QWebView(this);
    return view;
}

最后，双击打开文件 main.cpp ， 并做一些修改：

#include <QtGui/QApplication>
 
#include "wrtwidgetwindow.h"
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    WRTWidgetWindow window;
    window.show();
 
    return app.exec();
}

现在，可以编译运行这个应用了。当然现在的QWebView中的内容还是空的。

显示web内容

现在，向这个Qt应用中加入WRT widget 内容。 将HTML, CSS, JavaScript和其他资源文件拷贝到你的Qt项目文件中。尽量保留原来的WRT widget的目录结构，这样可以避免找不到引用文件。 常见的WRT widget的目录一般是这样的：

html/   (HTML files)
style/  (CSS files)
js/ (JavaScript files)
gfx/    (graphics)

为了便于在Qt应用中使用web内容，需要在项目中添加一个资源文件。选择File > New File or Project... > Qt > Qt Resource file，点击Choose...， 然后填入资源文件的名字和路径。点击Next，确保这个文件加入到当前的项目中。最后点击Finish。一个.pro 文件会自动加到你的项目中。然后将以下web内容相关的文件加入到资源文件中：

在这个例子中我只用到了两个文件：

<RCC>
    <qresource prefix="/">
        <file>res/sample.html</file>
        <file>res/js/sample.js</file>
    </qresource>
</RCC>

现在，web文件仅仅是加入到Qt项目中，但是他们还没有被现实出来。为了在HTML文件中能够访问这些资源文件，需要在原来引用的地方加上"qrc:/"前缀。

在 wrtwidgetwindow.cpp 文件中加入如下加载HTML文件的代码：

QWebView* WRTWidgetWindow::createWebView()
{
    QWebView* view = new QWebView(this);
    view->load(QUrl("qrc:/res/sample.html"));
    return view;
}

代码已经全部修改完毕。重新编译你的Qt应用(Build > Rebuild Project)。 最后运行这个Qt应用(Build > Run 或者 Ctrl+R)。 现在，就可以在QWebKit中看到这个HTML文件了。

源代码： File:Wrtportingdemo.zip