×
Namespaces

Variants
Actions

如何将WRT widget移植到Qt

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

代码示例
兼容于
平台:
Symbian

文章
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.hwrtwidgetwindow.cpp会自动添加到项目中。

Port wrt to qt 1.png


接下来编辑文件 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

This page was last modified on 11 October 2012, at 04:19.
144 page views in the last 30 days.