2013年5月7日火曜日

QtDesignerによるUI作成

ゴールデンウィークで一回お休みしました。
今回はQtでのUI作成を取り上げてみたいと思います。
MayaにQtが採用された時には、
これまでツール作成時の労力の半分を占めていたUI作成が
もうなくなるぜヒヤッホーイと思ったものですが、
現在のところ完全に取って代わっている様子は無いようです。
実際にUIを作成し、いろいろ調べたところ
全てのコントロールに対応しているわけではないこと
少々ですが、見た目のスクリプトでの直接記述との違い等が判りました。
検索した結果と自分で試した結果を総合すると、対応できているコントロールは


QtWidget          MELcommand
PushButton        button
RadioButton       radioButton
CheckBox          checkBox
ComboBox          optionMenu
LineEdit          textField
TextEdit          scrollField
ListView          textScrollList
HorizontalSlider  intSlider
VerticalSlider    intSlider
Label             text
ProgressBar       progressBar
HorizontalLine    separator
VerticalLine      separator
TabWidget         tabLayout
MainWindow        window

以上に限られているようです。
今後対応が増えるとのアナウンスもありましたが
Mayaバージョンアップ時に触れられていないのでしばらくはこのまま?

まず試しに既存のツールを置き換えてみようかということで
いつものウェイト読み書きツールであります。
現在のUIがこう。
QtDesignerを起動します、場所はMayaがインストールされているbinフォルダです。
新規フォームでmainWindowを選択

ウィジェットボックスからTabWidgetをドラッグ&ドロップ
何も選択されていない状態でツールバーの格子状に並べるをクリック。
するとタブレイアウトとウィンドウがグループ付けされてタブがウィンドウにフィットします。
ウィジェットボックスからボタン、テキスト、テキストフィールド等をドロップし、
それらをすべて選択して、ツールバーの垂直に並べるをクリック。
するとmelのcolumnLayoutのように縦に整列され、グループ化されるので
大きさや位置を調整します。
次に、レイアウトやコントロールの名称やラベルを設定します。
プロパティエディタのオブジェクトネームやテキストで
コントロールの名称やラベルを設定します。
全てのウィジェットの名称を設定する必要はありませんが
コマンド実行時に参照されるコントロールのオブジェクトネームは必須です。
リネームが完了したら次はボタンにコマンドを付け加えます。

ボタンを選択し、プロパティエディタの緑十字ボタンをクリック
プルダウンメニューから文字列を選択し
ダイアログに"+command"と入力します。
今回はpythonなので、コマンドフラグの前に"+"をつけます。
melの場合は"-"を付け足します。
コマンド内容をシングル、ダブルクォートでくくって文字列とするのを忘れずに。
これでQtでの作業は完了、適切な場所と名称(今回はqtWeightTrade.ui)で保存します。

呼び出すpythonファイルの編集をします。

レイアウトやコントロールの定義部分を全削除。
loadUIコマンドで.uiファイルを呼び出し、showWindowコマンドで表示するだけになります。
下線部は各自が.uiファイルを保存したパスに書き換えてください。
テスト実行時にmelコマンドのインポートエラーが出てしまい。
ファイル先頭部分と実行の記述を書き換えました。
ここら辺はまだまだpythonの勉強不足です。

実行させたものがこちら
melで直接記述したものと微妙に異なってしまいます。
プロパティを細かく詰めてゆけばあるいは同一になるやもしれませんが
どうやらQtはUIを作るツールというものではなく、
UI作成に強いプログラム開発ツールのようです。
細かくUIを設定したい時より、とりあえずUIが欲しいけれど
コントローラが多くて手書きは面倒な時などに役立つのかもしれません。

ysWeightTrade2.py

qtWeightTrade.ui

0 件のコメント:

コメントを投稿