在Web页中嵌入QT对象

最新推荐文章于 2024-07-17 15:11:20 发布

davidsu33

最新推荐文章于 2024-07-17 15:11:20 发布

阅读量3k

点赞数 2

分类专栏： Qt qtwebkit 文章标签： QWebKit Html页嵌入QT对象

本文链接：https://blog.csdn.net/davidsu33/article/details/40123351

版权

Qt 同时被 2 个专栏收录

71 篇文章 2 订阅

订阅专栏

qtwebkit

12 篇文章 0 订阅

订阅专栏

根据最近读的QT高级编程，原来QT是可以在HTML中嵌入对象的，确实很厉害。于是自己动手写了一个Demo，中途出现了一点点问题，js执行有问题，看来要提交javascript了，我感觉python也应该适当提高提高了。下面要重点提一下我犯的错误。

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 8.0">
<TITLE></TITLE>
</HEAD>
<BODY>

<!-- 添加界面元素 -->
<object type="application/x-qt-plugin" classid="QLabel" objectName="title" pos="0, 0" text="<strong><em><font size=32><center>计算矩阵</center></font></em></strong>">
Qt's Plugin Load Failed</object>

<object type="application/x-qt-plugin" classid="MatrixWidget" objectName="leftOper" <strong>id="leftMatrix"</strong> pos="0, 200" size="300, 300">Qt's Plugin Load Failed</object>
<object type="application/x-qt-plugin" classid="QLabel" objectName="plusSymbol" pos="310, 510" text="<strong><em><font size=32><center>+</center></font></em></strong>">
Qt's Plugin Load Failed</object>
<object type="application/x-qt-plugin" classid="MatrixWidget" objectName="rightOper" <strong>id="rightMatrix"</strong> pos="330, 520" size="300, 300">Qt's Plugin Load Failed</object>
<object type="application/x-qt-plugin" classid="QLabel" objectName="equalSymbol" pos="350, 530" text="<strong><em><font size=32><center>=</center></font></em></strong>">
Qt's Plugin Load Failed</object>
<object type="application/x-qt-plugin" classid="MatrixWidget" objectName="result" <strong>id="resultMatrix"</strong> pos="330, 520" size="300, 300">Qt's Plugin Load Failed</object>
<object type="application/x-qt-plugin" classid="QPushButton"<strong> id="btnCalc"</strong> pos="350, 550" size="50, 25" text="计算"></object>

<!-- 脚本执行部分 -->
<script>
    function calcResult() {
        //rowCount和columnCount是属性，不是slots不能以调用的形式来书写，不能带()
        for (var i = 0; i < leftMatrix.rowCount; ++i) {
            for (var j = 0; j < leftMatrix.columnCount; ++j) {
                var value = Number(leftMatrix.getValueAt(i, j)) + Number(rightMatrix.getValueAt(i, j));
                resultMatrix.setValueAt(i, j, value);
            }
        }
    }

//    var rowIndex = 0;
//    var columnIndex = 1;
//    var varvarlue = leftMatrix.getValueAt(rowIndex, columnIndex) + rightMatrix.getValueAt(rowIndex, columnIndex);

//    btnCalc.text = "开始计算";
    leftMatrix.setValueAt(0, 1, "1");
    leftMatrix.setValueAt(0, 0, 500);
    rightMatrix.setValueAt(0, 1, "5");
    //resultMatrix.setValueAt(1, 1, Number(varvarlue));

    calcResult();
//     leftMatrix.itemChanged.connect(calcResult);
//     rightMatrix.itemChanged.connect(calcResult);
    btnCalc.clicked.connect(calcResult);
</script>

</BODY>
</HTML>

1.在html中增加对象的时候，要指明object的ID，ID是在javascript中使用的，特别想提醒的就是在嵌入QT对象的时候尽量保证你编写的属性名称和QT属性机制中的属性

对应起来这样在组装对象的时候就变得非常简单了，因为QT的属性机制是支持动态设置的，可以直接根据属性的名称来设置属性，所以这里就可以排上用上了，这个机制

其实跟QT的Script机制是一样一样的。

2.脚本中属性的调用和QT公开槽函数的调用是不一样的。属性调用的时候不需要加()，我写的脚本一直执行不成功就是因为在rowCount和columnCount后面增加了()而导致的。

3.JS与QT信号的连接，连接方式： JS中的id名称.信号名称.connect(JS的函数)

4.对于object的解析，可以扩展QWebPage，并重写

createPlugin( const QString &classid, const QUrl &url, const QStringList &paramNames, const QStringList &paramValues )接口。

可以看看我这部分代码，如下：

#include "webpage.h"
#include "matrixwidget.h"
#include <QtUiTools/QUiLoader>

WebPage::WebPage(QObject *parent)
	: QWebPage(parent)
{

}

WebPage::~WebPage()
{

}

//根据classid来选择加载
QObject * WebPage::createPlugin( const QString &classid, const QUrl &url, const QStringList ¶mNames, const QStringList ¶mValues )
{
	QWidget *widget = NULL;
	QUiLoader uiLoader;
	if (uiLoader.availableWidgets().indexOf(classid) != -1)
	{
		widget = uiLoader.createWidget(classid, view());
	}
	else if(classid == "MatrixWidget")
	{
		widget = new MatrixWidget(view());
	}

	if (widget)
	{
		//getPropertyValue(paramNames, "height");
		//paramNames.indexOf("height");
		//保证paramName和QT属性机制中的属性保持一致即可自动设置数据
		for (int i=0; i<paramNames.size(); ++i)
		{
			widget->setProperty(paramNames[i].toLocal8Bit(), QVariant(paramValues[i]));
		}
	}

	return widget;
}

QVariant WebPage::getPropertyValue( const QStringList ¶mNames, const QString& propertyName )
{
	return QVariant();
}

全部代码可以在我的资源中下载：

http://download.csdn.net/download/davidsu33/8042983