用Qt开发简单的浏览器（二）

2012-05-24 22:47 htc开发阅读(829) 评论(0) 编辑收藏举报

一、功能改进

经过对QtWebKit的一些学习，对之前的浏览器进行一些改进：

1.增加分页显示多个网页的功能。每个分页都是一个QWebView控件，实现对多个网页的加载。

2.加入欢迎主页。学习如何创建Qt资源文件，从本地读取欢迎主页的HTML。

3.添加了前进Forward和后退Back按钮。

4.此外还明确了SIGNAL和SLOT的命名，SLOT都以handleXXX开头与SIGNAL区分开。

二、Qt资源文件

Qt可以很方便的通过资源文件来管理各种资源，就像在VS中创建资源文件一样。

项目结构如下：

在Qt Creator中创建四个资源文件html.qrc，script.qrc，style.qrc，resource.qrc分别对应html，

script，style和resource文件夹，用来存储网页、JS脚本、CSS样式文件和各种图片音频视频资源。

以html.qrc为例，添加html文件夹中的welcome.html，那么在程序中我们就可以用路径

qrc:/html/welcome.html来引用它。这里的欢迎页面引用了之前Chrome天气预报插件的

代码。

welcome.html

<html>

<head>	
	<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
	<link rel="stylesheet" type="text/css" href="qrc:/style/style.css"/>
	<script type="text/javascript" src="qrc:/script/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		function init() {			
			$("#loadingdiv").html("正在加载城市天气预报...");
			
			$.getJSON("http://m.weather.com.cn/data/101010100.html",
				function(data) {
					$("#loadingdiv").html("");
					var weatherinfo = data["weatherinfo"];  
					var datearray = ["", weatherinfo["date_y"], "第二天", "第三天", "第四天", "第五天", "第六天"];  
					$("#cityname").html(weatherinfo["city"] + "城市天气预报");  
					for (i = 1; i <= 6; i++) {  
						var divid = "#div" + i;              
						$(divid).append(datearray[i]).append("<br>");  
						var imgurl = "http://m.weather.com.cn/weather_img/" + weatherinfo["img"+(i*2-1)] + ".gif";                 
						$(divid).append('<img src="' + imgurl + '"/>').append("<br>");  
						$(divid).append(weatherinfo["temp" + i]).append("<br>");  
						$(divid).append(weatherinfo["weather" + i]);                 
					}
				}
			);			
		}
	</script>
</head>

<body onload="init()">
	<h1>Welcome!!!</h1>
	
	<div id="weatherreportdiv">
		<div id="loadingdiv"></div>
		<div id="cityname"></div>  
		<hr></hr>
		<div id="div1" class="weatherdiv"></div>  
		<div id="div2" class="weatherdiv"></div>  
		<div id="div3" class="weatherdiv"></div>  
		<div id="div4" class="weatherdiv"></div>  
		<div id="div5" class="weatherdiv"></div>  
		<div id="div6" class="weatherdiv"></div>  
	</div>

</body>

</html>

style.css

h1 {
	text-align: center;
}

#weatherreportdiv {
	height: 300px;
	width: 700px;
	text-align: center;  
    font-size: 20px;  
    font-weight: bold;  
    margin: 5px;  
}

#cityname {  
    text-align: center;  
    font-size: 20px;  
    font-weight: bold;  
    margin: 5px;  
}  
 
.weatherdiv {  
    float: left;  
    width: 15%;  
    margin: 5px;  
}

管理资源就是这么简单，下面来看改进后的代码。

三、源码实现

在AddressBar中新加一个SLOT函数handleAddressChanged，处理当分页切换时URL的变化。

addressbar.h

#ifndef ADDRESSBAR_H
#define ADDRESSBAR_H

#include <QWidget>
#include <QLineEdit>
#include <QPushButton>
#include <QHBoxLayout>
#include <QUrl>
#include <QString>

class AddressBar : public QWidget
{
    Q_OBJECT
public:
    explicit AddressBar(QWidget *parent = 0);    
    
signals:
    void go(const QUrl&);
    void back();
    void forward();
    void newPage();
    
public slots:
    void handleGoToSite();
    void handleAddressChanged(const QUrl&);

private:
    QLineEdit *addressEdit;
    QPushButton *newButton;
    QPushButton *backButton;
    QPushButton *forwardButton;
    QPushButton *goButton;
    QHBoxLayout *layout;
};

#endif // ADDRESSBAR_H

addressbar.cpp

#include "addressbar.h"

AddressBar::AddressBar(QWidget *parent) :
    QWidget(parent)
{
    // 1.Create widget
    addressEdit = new QLineEdit;
    newButton = new QPushButton("New");
    backButton = new QPushButton("Back");
    forwardButton = new QPushButton("Forward");
    goButton = new QPushButton("Go");

    // 2.Set property

    // 3.Connect signal and slot
    connect(goButton, SIGNAL(clicked()), this, SLOT(handleGoToSite()));
    connect(addressEdit, SIGNAL(returnPressed()), this, SLOT(handleGoToSite()));
    connect(backButton, SIGNAL(clicked()), this, SIGNAL(back()));
    connect(forwardButton, SIGNAL(clicked()), this, SIGNAL(forward()));
    connect(newButton, SIGNAL(clicked()), this, SIGNAL(newPage()));

    // 4.Add to layout
    layout = new QHBoxLayout;
    layout->addWidget(newButton);
    layout->addWidget(backButton);
    layout->addWidget(forwardButton);
    layout->addWidget(addressEdit);
    layout->addWidget(goButton);
    this->setLayout(layout);
}

void AddressBar::handleGoToSite()
{
    QString address = addressEdit->text();
    emit go(QUrl(address));
}

void AddressBar::handleAddressChanged(const QUrl &url)
{
    addressEdit->setText(url.toString());
}

新建了TabPage继承了QTabWidget，管理所有分页。

tabpage.h

#ifndef TABPAGE_H
#define TABPAGE_H

#include <QTabWidget>
#include <QList>
#include "htmlview.h"

class TabPage : public QTabWidget
{
    Q_OBJECT
public:
    explicit TabPage(QWidget *parent = 0);
    ~TabPage();
    
signals:
    void urlChanged(const QUrl&);
    
public slots:
    void handleNewTab();
    void handleLoadNewPage(const QUrl&);
    void handleBack();
    void handleForward();

private slots:
    void handleTabChanged(int);
    void handleTabClosed(int);
    void handleLinkClicked(const QUrl&);

private:    
    QList<QWebView*> viewList;
};

#endif // TABPAGE_H

tabpage.cpp

#include "tabpage.h"
#include <QtDebug>

TabPage::TabPage(QWidget *parent) :
    QTabWidget(parent)
{
    // Set property
    this->setTabsClosable(true);

    // Connect built-in signal to customized one to convert index to url
    connect(this, SIGNAL(currentChanged(int)), SLOT(handleTabChanged(int)));
    connect(this, SIGNAL(tabCloseRequested(int)), this, SLOT(handleTabClosed(int)));

    // Create new tab for home page
    this->handleNewTab();
}

TabPage::~TabPage()
{    
}

void TabPage::handleNewTab()
{
    HtmlView *view = new HtmlView;
    view->load(QUrl("qrc:/html/welcome.html"));
    //view->page()->setForwardUnsupportedContent(true);
    view->page()->setLinkDelegationPolicy(QWebPage::DelegateAllLinks);

    // Monitor linkClicked signal    
    connect(view, SIGNAL(linkClicked(const QUrl&)), this, SLOT(handleLinkClicked(const QUrl&)));    

    // Add and activate this new tab
    int index = this->addTab(view, "Welcome");
    this->setCurrentIndex(index);

    viewList.append(view);
}

void TabPage::handleLoadNewPage(const QUrl &url)
{
    qDebug() << "loadNewPage: " << url.toString();
    HtmlView *view = (HtmlView*) this->currentWidget();
    view->load(url);
}

void TabPage::handleBack()
{
    HtmlView *view = (HtmlView*) this->currentWidget();
    view->back();
    emit urlChanged(view->url());
}

void TabPage::handleForward()
{
    HtmlView *view = (HtmlView*) this->currentWidget();
    view->forward();
    emit urlChanged(view->url());
}

void TabPage::handleTabChanged(int index)
{
    if (index > viewList.length() - 1)
        return;

    // index is the new tab index
    QWebView* view = viewList[index];
    emit urlChanged(view->url());
}

void TabPage::handleTabClosed(int index)
{
    if (index > viewList.length() - 1)
        return;

    this->removeTab(index);
    QWebView* view = viewList[index];
    viewList.removeAt(index);

    delete view;
}

void TabPage::handleLinkClicked(const QUrl& url)
{
    qDebug() << "handleLinkClicked: " << url.toString();
    HtmlView *view = (HtmlView*) this->currentWidget();
    view->load(url);
    emit urlChanged(url);
}

接下来是MainWindow，改动很小。

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QWidget>
#include <QLineEdit>
#include <QPushButton>
#include <QGridLayout>
#include <QtWebKit>
#include <QMainWindow>
#include "addressbar.h"
#include "htmlview.h"
#include "tabpage.h"

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT
    
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
    
private:
    Ui::MainWindow *ui;    
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    //ui->setupUi(this);
    // 0.Global setting
    QWebSettings* defaultSettings = QWebSettings::globalSettings();
    // We use JavaScript, so set it to be enabled.
    defaultSettings->setAttribute(QWebSettings::JavascriptEnabled, true);
    // Plug-ins must be set to be enabled to use plug-ins.
    defaultSettings->setAttribute(QWebSettings::PluginsEnabled,true);
    defaultSettings->setAttribute(QWebSettings::LocalContentCanAccessRemoteUrls,true);
    defaultSettings->setObjectCacheCapacities(0, 0, 0);

    // 1.Create widget
    QWidget *centralWidget = new QWidget(this);
    AddressBar *bar = new AddressBar;    
    TabPage *tab = new TabPage;

    // 2.Set property
    this->setCentralWidget(centralWidget);
    this->setWindowTitle("My Browser v1.0");
    this->resize(800, 600);

    // 3.Connect widget        
    QObject::connect(bar, SIGNAL(newPage()),tab, SLOT(handleNewTab()));
    QObject::connect(bar, SIGNAL(back()),tab, SLOT(handleBack()));
    QObject::connect(bar, SIGNAL(forward()),tab, SLOT(handleForward()));
    QObject::connect(bar, SIGNAL(go(QUrl)), tab, SLOT(handleLoadNewPage(QUrl)));
    QObject::connect(tab, SIGNAL(urlChanged(QUrl)), bar, SLOT(handleAddressChanged(QUrl)));

    // 4.Add widget to layout
    QGridLayout *layout = new QGridLayout;
    layout->addWidget(bar, 0, 0, 1, 10);
    layout->addWidget(tab, 1, 0, 1, 10);
    centralWidget->setLayout(layout);
}

MainWindow::~MainWindow()
{
    //delete ui;
}

四、关键问题

1.需要为QWebView中的QWebPage设置才能使页面内链接可以正常跳转。

view->page()->setLinkDelegationPolicy(QWebPage::DelegateAllLinks);

2.需要为AJAX调用设置：

QWebSettings* defaultSettings = QWebSettings::globalSettings();
    // We use JavaScript, so set it to be enabled.
    defaultSettings->setAttribute(QWebSettings::JavascriptEnabled, true);
    // Plug-ins must be set to be enabled to use plug-ins.
    defaultSettings->setAttribute(QWebSettings::PluginsEnabled,true);
    defaultSettings->setAttribute(QWebSettings::LocalContentCanAccessRemoteUrls,true);
    defaultSettings->setObjectCacheCapacities(0, 0, 0);

五、最终效果

1.程序开始运行，进入欢迎页面。

2.多页面浏览

刷新页面返回顶部

htc开发

用Qt开发简单的浏览器（二）

About