linuxBean14.04(97)Qt4 Designerを使ってPythonのGUIを作る

前の関連記事:linuxBean14.04(96)Anaconda3のPyQtモジュールを使う


PyCharmとQt4 DesignerというGetting started with PyCharm and Qt 4 Designer | Random Codes - Elementz Tech Blogのチュートリアルを見つけたのでやってみます。PythonプロジェクトのインタープリタはLibreOffice5.0のものを使いQtはsites.pthでAnaconda3のパッケージを使えるようにしています。(linuxBean14.04(86)AnacondaのパッケージをLibreOfficeマクロで使う参照。)

Qt DesignerでGUIをデザインする


PyCharmとQt4 Designerという題の記事だったのでPyCharmの固有の機能を使うと思いきや、やってみると全然そんなことはありませんでした。

linuxBean14.04(96)Anaconda3のPyQtモジュールを使うで作成したランチャでQt Designerを起動しました。

まずは第5章 Qt Designerを使ってみよう | densan-labs.netを参考に簡単なGUIを作成します。


Dialog without Buttonsを選択してCreateボタンをクリック。


左に表示されているWidget BoxからPush Buttonをドラッグして作成されたDialogにドロップします。

ドロップしたボタンを右クリック→Change text。


「ここをクリック」という文字を入れました。

今度はText Editをドラッグしてこのボタンの下部にドロップしました。

さらにLabelをドラッグしてボタンの上部にドロップして右クリック→Change plain text。

「Hello World プログラム」にしました。


右に表示されているProperty EditorからwindowTitleを「HelloWorldウィンドウ」に変更しました。

メニューのForm→Preview。


これでGUIのデザインは完了です。

左上の保存ボタンをクリックします。

~/.config/libreoffice/4/user/Scripts/python/LB97フォルダにHelloWorld.uiというファイル名で保存しました。

これでQt Designerの使用は終わりです。

HelloWorld.uiファイルをGeanyで開くとxmlファイルであることがわかります。

PyCharmではこのuiファイルは開きませんね。

pyuic4でuiファイルをpyファイルに変換する


HelloWorld.uiのあるフォルダでTerminalを起動します。

pyuic4は~/anaconda3/binにインストールされているツールです。
pq@pq-VirtualBox:~/.config/libreoffice/4/user/Scripts/python/LB97$ pyuic4 -h
Usage: pyuic4 [options] <ui-file>

Options:
  --version             show program's version number and exit
  -h, --help            show this help message and exit
  -p, --preview         show a preview of the UI instead of generating code
  -o FILE, --output=FILE
                        write generated code to FILE instead of stdout
  -x, --execute         generate extra code to test and display the class
  -d, --debug           show debug output
  -i N, --indent=N      set indent width to N spaces, tab if N is 0 [default:
                        4]
  -w, --pyqt3-wrapper   generate a PyQt v3 style wrapper

  Code generation options:
    --from-imports      generate imports relative to '.'
    --resource-suffix=SUFFIX
                        append SUFFIX to the basename of resource files
                        [default: _rc]
pyuic4 HelloWorld.ui -o HelloWorld_gui.py

これでHelloWorld.uiがHelloWorld_gui.pyに変換されました。

今度はこれのUi_DialogクラスをインポートしてPythonスクリプトを書きます。

uiファイルを変換したモジュールをインポートしてGUIが動くようにする

import sys
from PyQt4 import QtCore, QtGui
from HelloWorld_gui import Ui_Dialog
class MyForm(QtGui.QMainWindow):
    def __init__(self, parent=None):
        QtGui.QWidget.__init__(self, parent)
        self.ui = Ui_Dialog()
        self.ui.setupUi(self)
        self.ui.pushButton.clicked.connect(self.helloworld)
    def helloworld(self):
        self.ui.textEdit.setText("Hello world")
if __name__ == "__main__":
    app = QtGui.QApplication(sys.argv)
    myapp = MyForm()
    myapp.show()
    sys.exit(app.exec_())
3行目でuiファイルを変換して作成したHelloWorld_gui.pyからUi_Dialogクラスをインポートしています。

このHelloWorld.pyを実行するとHelloWorldウィンドウが起動しボタンをクリックするとテキストボックスにHello worldと入力されました。


PyQtで使うシグナルとスロット


第5章 Qt Designerを使ってみよう | densan-labs.netではQt Designerでシグナルとスロットを設定しています。

C++のQtとPyQtのシグナルとスロットの設定は少し異なるようでその解説はPyQt4 | saito's memoがわかりやすいです。

オブジェクトの操作をしたときにシグナルを発するようにし、それをスロットで受け取ってなんらかの作業をするようにします。
        self.ui.pushButton.clicked.connect(self.helloworld)
これがシグナルとスロットの設定部分です。

シグナル発行オブジェクトがself.ui.pushButton、シグナル名がclicked、スロットがself.helloworldになります。

シグナル発行オブジェクト.シグナル名.connect(スロットオブジェクト)

スロットオブジェクトにはcallableなものならなんでもよいようです。

LibreOffice5のマクロモードで呼び出してみる


ついでにLibreOffice5のマクロモードで呼び出してみます。

HelloWorld_macro.py

もうHelloWorld_gui.pyの内容を取り込んでしまいました。

qt_designed()関数をLibreOfficeのマクロセレクタから実行すると先ほどと同様に動作しました。

ウィンドウを閉じずに再度同じマクロを実行するとLibreOfficeを強制終了させないといけなくなるのはlinuxBean14.04(96)Anaconda3のPyQtモジュールを使うでメッセージボックスを表示させた時と同じです。

異なる点はmyapp.show()までだけではウィンドウが表示されずapp.exec_()まで含めないといけない点です。

参考にしたサイト


Getting started with PyCharm and Qt 4 Designer | Random Codes - Elementz Tech Blog
Qt DesignerでデザインしたGUIをpyuic4でPythonに変換する例。

第5章 Qt Designerを使ってみよう | densan-labs.net
Qt Designerの使い方。

PyQt4 | saito's memo
PyQtでのシグナルとスロットの使い方の解説。

次の関連記事:linuxBean14.04(98)「linuxBean スクリプトの更新」でsource.list更新後のリポジトリの整理

PR

0 件のコメント:

コメントを投稿