Qt WebKit可以做什么(三)——开发包含丰富web内容的本地应用
2011-09-29 09:57
645 查看
者: Dawei Cheng 程大伟 (Intel) (10 篇文章) 日期: 六月 9, 2010 在 10:42 上午
这一篇我们来看看如何在Qt WebKit 中使用web开发的工具去开发包含web内容的本地。
注:本系列文章重在分享一下开发过程,至于webkit如何去解释HTML的DOM tree 以及如何去rendering HTML 和JavaScript 可以参考
http://webkit.org/。
在分享开发过程之前,首先还是看一下这个web应用的架构。
![](http://software.intel.com/file/27242)
1. 开发环境:
Based on QtWebKit browser engine
Developed with HTML, CSS and JavaScript
Used by Qt Creator for Windows
other IDEs, such as Visual Studio or Eclipse, as well.
2. 新建项目:
Start the Qt Creator IDE.
Select File > New File or Project... > Projects > Qt4 Gui Application.
Give the project a name and set its location.
Check the QtWebKit module and click Next.
click Finish.
3. 修改代码: 此时在creator左边edit栏目里会看到project的源代码。打开头文件widgetwindow.h,做如下修改:
#ifndef WIDGETWINDOW_H
#define WIDGETWINDOW_H
#include <QtCore/QPointer>
#include <QtGui/QMainWindow>
class QWebView;
class WidgetWindow : public QMainWindow
{
Q_OBJECT
public:
WidgetWindow(QWidget *parent = 0);
~WidgetWindow();
private:
void setupUI();
//声明用来显示web应用的函数
QWebView* createWebView();
private:
QPointer<QWebView> webView;
};
#endif // WIDGETWINDOW_H
4. 显示web内容
在Qt project中创建web应用所需要的HTML, CSS和JavaScript文件,且假设其分别在html/, style/, 和 scripe/文件夹里。文件夹视图如下:如果想了解更多关于web开发,请点此进入:http://zh.html.net/tutorials/html/
html/ (HTML files)
style/ (CSS files)
script/ (JavaScript files)
Create the resource file。 Qt中是通过qrc文件来实现对web内容文件的链接的。一下是qrc文件 helloqtwebkit.qrc的内容。
<?xml version="1.0" encoding="utf-8"?>
<RCC version="1.0">
<qresource>
<!-- HTML files -->
<file>html/index.html</file>
<!-- CSS files -->
<file>style/general.css</file>
<!-- JavaScript files -->
<file>script/basic.js</file>
</RCC>
打开HTML文件,将HTML文件代码粘贴如下: 这是一个很简单的helloDemo。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
/* add ‘qrc:/’ in the front of css/js files address */
<link rel="StyleSheet" href="qrc:/style/general.css" type="text/css" />
<script type="text/javascript" src="qrc:/script/basic.js" charset="utf-8"></script>
<title>Hello Qt WebKit</title>
</head>
<body onLoad="javascript:init();">
<input type=submit value="Hello Qt WebKit! "
<div id="output">
</div>
</body>
5. 函数实现。 打开函数文件 widgetwindow.cpp, 实现之前声明的createwebview函数。
/* display the web application by rendering html file */
QWebView* WidgetWindow::createWebView()
{
QWebView* view = new QWebView(this);
/* load the html file location to Qurl */
view->load(QUrl("qrc:/html/index.html"));
return view;
}
6. 至此,工作全部完成。build the application. 将会出现期待已久的JavaScript的hello按钮。
![](http://software.intel.com/file/28103)
这一篇主要讲解了如何使用HTML CSS 和JavaScript在Qt webkit引擎上开发web应用。
本篇的源代码可以在此下载: 1QtWebHello.zip http://software.intel.com/file/28104
下一篇我们将了解如何将Qt本地的Object 和JavaScript进行交互。这对web开发非常有用。
分类:
其他,
移动技术,
英特尔® 软件网络 2.0
标签:Qt,
qtwebkit,
webkit,
web开发
这一篇我们来看看如何在Qt WebKit 中使用web开发的工具去开发包含web内容的本地。
注:本系列文章重在分享一下开发过程,至于webkit如何去解释HTML的DOM tree 以及如何去rendering HTML 和JavaScript 可以参考
http://webkit.org/。
在分享开发过程之前,首先还是看一下这个web应用的架构。
1. 开发环境:
Based on QtWebKit browser engine
Developed with HTML, CSS and JavaScript
Used by Qt Creator for Windows
other IDEs, such as Visual Studio or Eclipse, as well.
2. 新建项目:
Start the Qt Creator IDE.
Select File > New File or Project... > Projects > Qt4 Gui Application.
Give the project a name and set its location.
Check the QtWebKit module and click Next.
click Finish.
3. 修改代码: 此时在creator左边edit栏目里会看到project的源代码。打开头文件widgetwindow.h,做如下修改:
#ifndef WIDGETWINDOW_H
#define WIDGETWINDOW_H
#include <QtCore/QPointer>
#include <QtGui/QMainWindow>
class QWebView;
class WidgetWindow : public QMainWindow
{
Q_OBJECT
public:
WidgetWindow(QWidget *parent = 0);
~WidgetWindow();
private:
void setupUI();
//声明用来显示web应用的函数
QWebView* createWebView();
private:
QPointer<QWebView> webView;
};
#endif // WIDGETWINDOW_H
4. 显示web内容
在Qt project中创建web应用所需要的HTML, CSS和JavaScript文件,且假设其分别在html/, style/, 和 scripe/文件夹里。文件夹视图如下:如果想了解更多关于web开发,请点此进入:http://zh.html.net/tutorials/html/
html/ (HTML files)
style/ (CSS files)
script/ (JavaScript files)
Create the resource file。 Qt中是通过qrc文件来实现对web内容文件的链接的。一下是qrc文件 helloqtwebkit.qrc的内容。
<?xml version="1.0" encoding="utf-8"?>
<RCC version="1.0">
<qresource>
<!-- HTML files -->
<file>html/index.html</file>
<!-- CSS files -->
<file>style/general.css</file>
<!-- JavaScript files -->
<file>script/basic.js</file>
</RCC>
打开HTML文件,将HTML文件代码粘贴如下: 这是一个很简单的helloDemo。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
/* add ‘qrc:/’ in the front of css/js files address */
<link rel="StyleSheet" href="qrc:/style/general.css" type="text/css" />
<script type="text/javascript" src="qrc:/script/basic.js" charset="utf-8"></script>
<title>Hello Qt WebKit</title>
</head>
<body onLoad="javascript:init();">
<input type=submit value="Hello Qt WebKit! "
<div id="output">
</div>
</body>
5. 函数实现。 打开函数文件 widgetwindow.cpp, 实现之前声明的createwebview函数。
/* display the web application by rendering html file */
QWebView* WidgetWindow::createWebView()
{
QWebView* view = new QWebView(this);
/* load the html file location to Qurl */
view->load(QUrl("qrc:/html/index.html"));
return view;
}
6. 至此,工作全部完成。build the application. 将会出现期待已久的JavaScript的hello按钮。
这一篇主要讲解了如何使用HTML CSS 和JavaScript在Qt webkit引擎上开发web应用。
本篇的源代码可以在此下载: 1QtWebHello.zip http://software.intel.com/file/28104
下一篇我们将了解如何将Qt本地的Object 和JavaScript进行交互。这对web开发非常有用。
分类:
其他,
移动技术,
英特尔® 软件网络 2.0
标签:Qt,
qtwebkit,
webkit,
web开发
相关文章推荐
- Qt WebKit可以做什么(三)——开发包含丰富web内容的本地应用
- Qt WebKit可以做什么(三)——开发包含丰富web内容的本地应用
- Qt WebKit可以做什么(三)——开发包含丰富web内容的本地应用
- Qt WebKit可以做什么(三)——开发包含丰富web内容的本地应用
- Web设计师和开发人员可以自由应用的27 个创意设计图标
- Java Web开发-简单的Java Web项目(含访问本地MySQL)-应用例程
- 用Qt开发Web和本地混合的应用
- 用Qt开发Web和本地混合的应用
- web前端之dojo实际应用及开发五:丰富的用户界面(附有源码)
- JBoss4 应用服务器Web开发人员参考手册(8):提供静态内容服务
- 希望小站的服务器早日恢复,先把个人小站做成没什么美工但可以练下web应用程序开发的技术
- chrome Native Client 让你可以使用 C 以及 C++ 语言开发 Web 应用
- spring.jar是包含有完整发布的单个jar 包,spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容,因为只有在开发环境下才会用到 spring-mock.jar来进行辅助测试,正式应用系统中是用不得这些类的
- 用Qt开发Web和本地混合的应用
- 利用QT进行web与本地混合应用开发
- 用Qt开发Web和本地混合的应用
- JavaWeb开发之深入分析请求转发和重定向的应用场景以及请求包含 (跟着龙哥学JavaWeb)
- Web设计师和开发人员可以自由应用的27 个创意设计图标
- ngrok 服务可以分配给你一个域名让你本地的web项目提供给外网访问__个人微信开发笔记
- 利用QT进行web与本地混合应用开发