Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

如何将WRT widget移植到Qt

From 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 01:19.
277 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×