HTML+CSS+python+qtwebkit打造跨平台桌面应用（四）

来源：互联网发布：淘宝账号怎样手机申诉编辑：程序博客网时间：2024/06/04 18:28

引言与环境配置
数据交互问题（这应该是最先想到，html使用js控制的，如何跟python交互数据呢）
文件编码问题，为了国际化、通用化，要用unicode否则汉字不能正常显示
界面问题，具体如何制作界面，如何实现无边框等
框架问题，有没有更通用性的框架，比如将其包装成MVC模式

无边框界面需要解决的问题

之前我们其实已经实现界面了，可以在界面上用HTML+CSS实现一切我们想要的，但是为了让程序更加个性化，我们需要自己定义程序的边框（支持拖动、改变大小、最大化、最小化、关闭）

无边框界面：最大化、最小化、关闭

最大化、最小化是类QtWebKit.QWebView中内置的方法
关闭程序是类QtGui.QApplication中内置的方法

最大化：showMaximized()
最小化：showMinimized()
普通大小：showNormal()
关闭：quit()

无边框界面：示例程序1 （实现最大化、最小化、关闭）

python：

[code lang="c"]
# -*- coding:utf-8 -*-

from PyQt4 import QtGui, QtWebKit, QtCore

class myWindow(QtWebKit.QWebView):
def __init__(self,app, parent=None):
super(myWindow, self).__init__(parent)
self.resize(400, 200)
self.setWindowFlags(QtCore.Qt.FramelessWindowHint)
self.page().mainFrame().addToJavaScriptWindowObject(&quot;_myWindow&quot;, self)
self.load(QtCore.QUrl('index.html'))
self.app = app

#最大化显示
@QtCore.pyqtSlot()
def showMaxsize(self):
print 1
self.showMaximized()

#最小化显示
@QtCore.pyqtSlot()
def showMinsize(self):
self.showMinimized()

#普通大小显示
@QtCore.pyqtSlot()
def showNormalsize(self):
self.showNormal()

#退出程序
@QtCore.pyqtSlot()
def appClose(self):
app.quit()

if __name__ == &quot;__main__&quot;:
import sys
app = QtGui.QApplication(sys.argv)
main = myWindow(app)
main.show()
sys.exit(app.exec_())
[/code]

HTML：

[code lang="c"]
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.11.2.js&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&quot;#max&quot;).click(function(){
_myWindow.showMaxsize();
});
$(&quot;#normal&quot;).click(function(){
_myWindow.showNormalsize();
});
$(&quot;#min&quot;).click(function(){
_myWindow.showMinsize();
});
$(&quot;#close&quot;).click(function(){
_myWindow.appClose();
});
});
&lt;/script&gt;
&lt;body&gt;
&lt;div class = &quot;box&quot;&gt;
&lt;span id=&quot;max&quot;&gt;最大化&lt;/span&gt;&lt;span id=&quot;normal&quot;&gt;普通大小&lt;/span&gt;
&lt;span id=&quot;min&quot;&gt;最小化&lt;/span&gt;&lt;span id=&quot;close&quot;&gt;关闭&lt;/span&gt;
&lt;/div&gt;
&lt;h1&gt;QtWebKit + Border&lt;/h1&gt;
&lt;/body&gt;

[/code]

自定义界面的最终实现

解决了基本功能，下面来实现拖动和改变大小

拖动很好实现，缩放比较复杂，这里先说一下缩放
缩放的实现方式就是将程序化为九宫格，分为：中、左、右、上、下、左上、右上、左下、右下
然后为设置鼠标移动到不同区域的鼠标图标和改变大小的方式，其实拖动和缩放可以集成在相同的文件中，下面直接给出插件
实现原理：用到了qt的事件模型的一个强大的功能，就是一个QObject对象能够监视发送其他QObject对象的事件，在事件到达之前对其进行处理，相当于“代理”

这里还需要用CSS和javascript进行修正。原因是这样的，因为我们采用了qtwebkit，而网页都有自己的鼠标指针，这会覆盖掉我们在pyqt中实现的改变鼠标样式的功能，所以需要用javascript进行修正。

实例程序下载：ex_noborder

效果：（支持拖动、改变大小、最大化、普通大小、最小化、关闭）

查看原文：http://blog.wxameng.com/cross-platform-app-with-html-css-python-qt-4/

0 0

HTML+CSS+python+qtwebkit打造跨平台桌面应用（四）

目录

无边框界面需要解决的问题

无边框界面：最大化、最小化、关闭

无边框界面：示例程序1 （实现最大化、最小化、关闭）

自定义界面的最终实现