HTML+CSS+python+qtwebkit打造跨平台桌面应用(四)

目录

  • 引言与环境配置
  • 数据交互问题(这应该是最先想到,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("_myWindow", 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__ == "__main__":
import sys
app = QtGui.QApplication(sys.argv)
main = myWindow(app)
main.show()
sys.exit(app.exec_())
[/code]

HTML:

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

[/code]

自定义界面的最终实现

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

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

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

实例程序下载:ex_noborder

效果:(支持拖动、改变大小、最大化、普通大小、最小化、关闭)



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

你可能感兴趣的:(HTML+CSS+python+qtwebkit打造跨平台桌面应用(四))