組み合わせる – License, About, Close

この例では、これまでの３つの小さなスクリプトを組み合わせてプログラムを一つ作成します。プログラム名はcombineです。ソースを含む必要な資料は、以下のリンクからダウンロードできます。 http://akabaila.pcug.org.au/pyside-data/ と http://akabaila.pcug.org.au/pyside-data/combine/

まず最初に Qt Designer を使ってフォームを設計し、 combine.ui ファイルを作成します。メニューバーに File アイテムを追加し、そのサブメニューに Show GPL 、 About 、 Close を追加します。Qt Designer付属の接続ツール シグナル/スロットエディタ を使い、ドロップダウンメニューから、Sender:action_CloseとSignlal：triggered、 Receiver：MainWindowとSlot：close()を選択します。

Qtでは、クリックやアクションによって発生する シグナル に、関連付けたいアクションを接続します。シグナルの受信側は スロット と呼びます。通常、GUIの設計は付属の標準シグナルを使って行います。 triggered はこうした標準シグナルの一つです。

シグナルはスロットと接続されます。この例題ではシグナルと、プログラムを終了するMainWindowのcloseスロットを接続していますが、PySideではシグナルとPythonメソッドとの接続もできます。

フォームをcombine.uiとして保存した後、以下のようにPythonで読める形式に変換します。

pyside-uic combine.ui > ui_combine.py

このui_combine.pyはPythonだけでなく、人間も読解できます。以下のコードでこのプログラムの使い方を学びましょう。

#!/usr/bin/env python
# combine.py - combination of ShowGPL, About, Close scripts
import sys
import platform
import PySide
from PySide.QtGui import QApplication, QMainWindow, QTextEdit,\
QPushButton, QMessageBox
__version__ = '0.0.1'
from ui_combine import Ui_MainWindow
class MainWindow(QMainWindow, Ui_MainWindow):
def __init__(self, parent=None):
super(MainWindow, self).__init__(parent)
self.setupUi(self)
if __name__ == '__main__':
app = QApplication(sys.argv)
frame = MainWindow()
frame.show()
app.exec_()

約15行ほどの、これから何度も使うことになるお決まりの内容です。勉強のためにプログラムを実行して動作確認をしましょう。プログラムではすべてのメニューアイテムのトリガーをテストできますが、今のところ機能しているのはCloseだけです。次のステップでは、残りのメニューアイテムのコードを追加していきます。

#!/usr/bin/env python
# combine.py - combination of ShowGPL, About, Close scripts
# Copyright note omitted.
import sys
import platform
import PySide
from PySide.QtGui import QApplication, QMainWindow, QTextEdit,\
QPushButton, QMessageBox
__version__ = '0.0.2'
from ui_combine import Ui_MainWindow
class MainWindow(QMainWindow, Ui_MainWindow):
def __init__(self, parent=None):
super(MainWindow, self).__init__(parent)
self.setupUi(self)
self.actionShow_GPL.triggered.connect(self.showGPL)
self.action_About.triggered.connect(self.about)
def showGPL(self):
'''Read and display GPL licence.'''
self.textEdit.setText(open('COPYING.txt').read())
def about(self):
'''Popup a box with about message.'''
QMessageBox.about(self, "About PyQt, Platform and the like",
""" About this program v %s
Copyright � 2010 Joe Bloggs.
All rights reserved in accordance with
GPL v2 or later - NO WARRANTIES!
This application can be used for
displaying OS and platform details.
Python %s - PySide version %s - Qt version %s on %s""" % \
(__version__, platform.python_version(), PySide.__version__,\
PySide.QtCore.__version__, platform.system()))
if __name__ == '__main__':
app = QApplication(sys.argv)
frame = MainWindow()
frame.show()
app.exec_()

about と showGPL メソッドを追加して、次の構文でシグナルと接続します。

self.actionShow_GPL.triggered.connect(self.showGPL)
self.action_About.triggered.connect(self.about)

これでプログラムの機能は完全になりました。やりましたね。では次の仕事にとりかかりましょう。我々のＧＵＩはまだ見た目がぱっとしません。優れたＧＵＩはメニューの代替手段となる、ボタンやアイコンツールバーを持っているものです。またマウスポインタがアイコン上に移動したときに、機能のヒントやMainWindowフォームのタスクバー上にメッセージを表示すれば一段と素敵になるでしょう。

以上の機能の作成が次の仕事です。

チュートリアルではこれから、アイコン、ポップアップヒント、ステータスバーヒントを備えたツールバーの作成メソッドに取り掛かります。まず必要なのはアイコンです。車輪の再発明をしないように利用可能なアイコンセットを使いましょう。無料の「タンゴのアイコンセット」を以下からダウンロードします。 http://tango.freedesktop.org/Tango_Icon_Library

これはライセンス制約のない、大規模なアイコンのコレクションです。必要とする以上のアイコンがあるので tango_select という名前の小さなライブラリを作り、必要なアイコンをまとめておくとよいでしょう。QtDesignerでcombine.uiを作ったように、テキストエディタ（windowsならNotepad, KDEならkate、Gnomeではgedit）で リソースソースファイル combine.qrcを作ります。一見、黒魔術のようなXMLですが、コピーして簡単に変更できるシンプルな形式です。では中身を見てみましょう。

<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file alias="quit.png">select_tango/32x32/actions/system-log-out.png</file>
<file alias="about.png">select_tango/32x32/apps/preferences-system-session.png</file>
<file alias="showgpl.png">select_tango/32x32/apps/help-browser.png</file>
</qresource>
</RCC>

たとえば quit アクションのアイコンは、その別名である quit.png としてプログラム中で参照されます。そして実際にはタンゴコレクションの system-log-out.png アイコンが使用されます。では次にcombine.uiと同様に、combine.qrcをコンパイルします。

pyside-rcc combine.qrc -o qrc_combine.py

qrc_combine.pyファイルは以下のようにプログラムにインポートされます。

#!/usr/bin/env python
# combine.py - combination of ShowGPL, About, Close scripts
# Copyright notice removed to save space.
import sys
import platform
import PySide
from PySide.QtGui import QApplication, QMainWindow, QTextEdit, QPushButton,\
QMessageBox, QIcon
__version__ = '0.0.3'
from ui_combine import Ui_MainWindow
import qrc_combine
class MainWindow(QMainWindow, Ui_MainWindow):
def __init__(self, parent=None):
super(MainWindow, self).__init__(parent)
self.setupUi(self)
self.actionShow_GPL.triggered.connect(self.showGPL)
self.action_About.triggered.connect(self.about)
iconToolBar = self.addToolBar("iconBar.png")
#------------------------------------------------------
# Add icons to appear in tool bar - step 1
self.actionShow_GPL.setIcon(QIcon(":/showgpl.png"))
self.action_About.setIcon(QIcon(":/about.png"))
self.action_Close.setIcon(QIcon(":/quit.png"))
#------------------------------------------------------
# Show a tip on the Status Bar - step 2
self.actionShow_GPL.setStatusTip("Show GPL Licence")
self.action_About.setStatusTip("Pop up the About dialog.")
self.action_Close.setStatusTip("Close the program.")
#------------------------------------------------------
iconToolBar.addAction(self.actionShow_GPL)
iconToolBar.addAction(self.action_About)
iconToolBar.addAction(self.action_Close)
def showGPL(self):
'''Read and display GPL licence.'''
self.textEdit.setText(open('COPYING.txt').read())
def about(self):
'''Popup a box with about message.'''
QMessageBox.about(self, "About PyQt, Platform and the like",
""" About this program v %s
Copyright � 2010 Joe Bloggs.
All rights reserved in accordance with
GPL v2 or later - NO WARRANTIES!
This application can be used for
displaying OS and platform details.
Python %s - PySide version %s - Qt version %s on %s""" % \
(__version__, platform.python_version(), PySide.__version__,\
PySide.QtCore.__version__, platform.system()))
if __name__ == '__main__':
app = QApplication(sys.argv)
frame = MainWindow()
frame.show()
app.exec_()

ステップ1ではアイコン画像をアクションに追加しています。

#------------------------------------------------------
# Add icons to appear in tool bar - step 1
self.actionShow_GPL.setIcon(QIcon(":/showgpl.png"))
self.action_About.setIcon(QIcon(":/about.png"))
self.action_Close.setIcon(QIcon(":/quit.png"))
#------------------------------------------------------

同じように、ステップ2ではヒントのテキストをプログラムに追加しています。

#------------------------------------------------------
# Show a tip on the Status Bar - step 2
self.actionShow_GPL.setStatusTip("Show GPL Licence")
self.action_About.setStatusTip("Pop up the About dialog.")
self.action_Close.setStatusTip("Close the program.")
#------------------------------------------------------

古くから言うように「百聞は一見に如かず」です。完成したcombine.pyのＧＵＩの画像は、以下の外部リポジトリから表示可能です。

http://akabaila.pcug.org.au/pyside-images/combine-v0.0.3.png
勉強のために、ステップ1とステップ2のコードの両方を削除してプログラムを実行し、動作を観察してみましょう。今度はステップ1を元に戻して再度プログラムを実行してみましょう。次にステップ2を元に戻します。ステップ1と2を削除するとGUIはアイコンのない地味な見た目になります。
http://akabaila.pcug.org.au/pyside-images/combine-v0.0.3-noIcons.png

ヒント：行を削除するには先頭にハッシュ文字を追加してコメントアウトします。必要に応じて後からハッシュ文字を削除してください

一番必要なのは 楽しむこと です！

チュートリアルのクラスで聞いた話です。ある講師が苦情を訴えに来た初年度の学生の母親に説明しました。「息子さんは、このコースを修了するのに十分な知識が足りなかっただけなんです。彼には一度Pysideを教えました。そして二度目にもです。三度目にはすべてを徹底的に教えました。それで、この私でさえPysideが分かったというのに、息子さんはまだ分からないのですよ！」

PysideによるGUIプログラミングをよく理解できているといいんですがーすくなくとも私は :)

Return to PySideSimplicissimus