吉里吉里2/吉里吉里Z用UIウィジェット実装kwidgets

ゆんゆん探偵 @yunyundetective

吉里吉里2でTJSベースのGUIアプリを作るためのウィジェットセットkwidgetsを吉里吉里2のSVNレポジトリにコミットしました。

ゆんゆん探偵 @yunyundetective

kwidgetsまともなマニュアルが無くて、そのままでは導入も難しいので、キーポイントを少しずつ解説してあとでtogetterにでもまとめようと思う。

ゆんゆん探偵 @yunyundetective

ちなみに対象となるのは吉里吉里でTJSを使って1からウィンドウやレイヤを構築するプログラミングが出来ること。そこに関する知識はあるのを前提ってことで。

ゆんゆん探偵 @yunyundetective

kwidgets講座そのいち。KWindowとKWidget。kwidegetsでは、吉里吉里のWindow/Layerに変わって、それらを継承したKWindow/KWidgetと言う2つのクラスをベースにプログラミングをする。(続く)。

ゆんゆん探偵 @yunyundetective

吉里吉里ではLayerのコンストラクト時に「所属ウィンドウと親レイヤ」を指定してやる方式になっているけど、KWidgetではここのアーキテクチャが違って、「所属ウィンドウ」のみ指定してコンストラクトして、あとから任意のレイアウトウィジェットにアタッチするようになってる。(続く)

ゆんゆん探偵 @yunyundetective

ウィジェット間には、吉里吉里のLayer構造と同等の入れ子になった階層構造が構築される。この階層構造はKWidget間だけでは無く、KWindowにまで波及する。KWidget、あとメニュークラスであるKMenuに対して、KWindowをルートにした親子関係が構築される。(続く)

ゆんゆん探偵 @yunyundetective

任意のウィジェットには任意の「名前」を付けられる。名前をつけたウィジェットは、その祖先ウィジェットから、その名前を使ってプロパティっぽくアクセスできる。階層の奥深くに「status」という名前のウィジェットがあれば、階層トップのウィンドウから「status」の名前で見える(続く)

ゆんゆん探偵 @yunyundetective

この特性により、ウィジェットのレイアウトと言う「物理的レイアウト」を変更しても、ウィジェットのな前と言う「論理的レイアウト」を変更しない限り、プログラム的には透過にアクセスできることになる。論理的意味を変えずに適当にさくさくレイアウトを変更できるという事(続く)

ゆんゆん探偵 @yunyundetective

KWidgetの子としてLayerを格納する事はできるけど、Layerの子としてKWidgetを格納する事はできない。あくまでKWidgetの階層構造が基本になる。KWindowの下にはprimaryWidgetの名前で、管理用のルートウィジェットが最初から登録されてる(続く)

ゆんゆん探偵 @yunyundetective

KWidget継承クラスは大きく、末尾に「Layout」の名前がつくレイアウトウィジェットと、valueプロパティを持つ操作系ウィジェットに分けられる。primaryWidgetはこの「レイアウトウィジェット」の方に分類できる。(続く)

ゆんゆん探偵 @yunyundetective

レイアウトウィジェット、文字通りウィジェットをレイアウトするためのウィジェット。新しいウィジェットを、add関数でアタッチし、remove関数でデタッチする。remove関数はデフォルト引数 doInvalidate=trueを持っているので通常emoveと同時に削除。(続く)

ゆんゆん探偵 @yunyundetective

レイアウトウィジェットは色々ある。表組みでレイアウトするKGridLayoutや、タブで配置するKTabLayout、スクロールバーも子が一個しか無いKScrollLayoutと言う形式で実装してる。これらレイアウトウィジェットを駆使してUIの形を作るのが基本。ひとまずここまで。

ゆんゆん探偵 @yunyundetective

おお、kwidgetsのクラスダイアグラムだ。 http://t.co/B59Xd7re ＞俺の日記 - 吉里吉里他 kwidgetがすごいらしい

ゆんゆん探偵 @yunyundetective

kwidgets講座その２。値持ちのウィジェットについて。講座その１で解説したように、kwidetsのウィジェット群は、大きく分類して、ウィジェットを任意の位置に配置するための「レイアウトウィジェット」と、値持ちの「操作ウィジェット」群に大別できる（続く）。

ゆんゆん探偵 @yunyundetective

値持ちの操作ウィジェットとは、すなわちマウス操作で実際にアプリを触るユーザーが値をいじるためのウィジェット、つまりはボタンやスライダー、テキストインプットなどのウィジェットがこのカテゴリに入る。(続く)

ゆんゆん探偵 @yunyundetective

値持ちのウィジェットは通常 value と言う読み書き可能なプロパティで外部からその値にアクセス出来るように実装されている。value持ちのウィジェットは大抵、KWidgetを継承したKValueWidgetの継承クラスだが、一部に例外もある。(続く）

ゆんゆん探偵 @yunyundetective

KSliderのような値持ちウィジェットの値をvalueプロパティを使って更新すると、画面上のスライダーの見た目が実際に変わる。また、valueプロパティを使ってその時点での見た目に対応したウィジェットの値を読み出すことも出来る。(続く)

ゆんゆん探偵 @yunyundetective

では、アプリの値持ちウィジェットをユーザーが操作してウィジェットの値が更新された場合、その情報はどうやってアプリ側に通知されるのか？ この場合、値の更新と同時に KWidget.onValueModified() 関数が呼ばれる。(続く)

ゆんゆん探偵 @yunyundetective

形式は onValueModified(newValue, oldValue) 。更新後の新しい値と、更新前の古い値が引数となって呼ばれる。oldValueは通常は見る必要は無いので、省略する事も多い(続く)

ゆんゆん探偵 @yunyundetective

ウィジェットの継承クラスでonValueModified()を実装してトラップしてもいいし、TJSでは関数がファーストクラスオブジェクトなので、 widget.onValueModifeid = function(value) {} みたいなプロトタイピング形式でもいい(続く)。

ゆんゆん探偵 @yunyundetective

で、ここからが肝心なところ。KWidget.onValueModified() のデフォルト実装はどういう動作をするのか？ デフォルト動作では、親ウィジェットの onChildValueModified()を呼ぶようになっている(続く)

ゆんゆん探偵 @yunyundetective

形式は KWidget.onChildValueModified(child, newValue, oldValue) 更新のあったウィジェットと、更新前後の値が引数。childのnameプロパティでウィジェットの名前が取得出来るので、子の更新を親で一元的に管理出来る。（続く）

ゆんゆん探偵 @yunyundetective

で、KWidget.onChildValueModfiied()のデフォルト実装がまた「親のonChildValueModified()を呼び出す」ようになっている。つまりどこでもトラップしなければ、ウィジェットの値の更新はどんどんウィジェットツリーの根っこへ伝播して行く(続く)

ゆんゆん探偵 @yunyundetective

ウィジェットツリーの根っこは常に KWindow で収束する。つまり、KWindow.onChildValueModified() を実装すれば、（メニューも含めて）ウィンドウ中のすべてのウィジェットの更新をそこでトラップ出来ることになる。(続く)

ゆんゆん探偵 @yunyundetective

てことで、典型的なkwidgetsアプリの実装では、KWindow.onChildValueModified() の実装により、各種操作ウィジェットの値の変更をトラップして管理するようになっている。とりあえずここまで。