« 友愛その5。 | トップページ | 友愛その7。 »

2010年7月10日 (土)

友愛その6。

続いてます。


AddGroup と AddRow の呪文を組み合わせれば、それなりに複雑な配置の UI にすることもできますよ、というだけのサンプルです。



var oProp = XSIFactory.CreateObject ( "CustomProperty" );
oProp.name = "hoge";
oProp.AddParameter2 ( "Icon",  siInt4,  1,  0,  10 );
oProp.AddParameter2 ( "Size",  siDouble,  1,  0.01,  100 );
oProp.AddParameter2 ( "Hage",  siDouble,  1,  0.01,  100 );

var oLayout = oProp.PPGLayout;

oLayout.AddRow( );

    oLayout.AddGroup( "", false, 20 );
        var oItem = oLayout.AddButton ( "Set",  "切吐" );
        oItem.SetAttribute( siUICX, 75 );
        oItem.SetAttribute( siUICY, 200 );
    oLayout.EndGroup( );

    oLayout.AddGroup( "", false, 80 );

        oLayout.AddGroup( );
            oLayout.AddGroup( );
                oLayout.AddGroup( );
                    var aItems = Array( "None", 0, "Null", 1, "Rings", 2,
                                        "Arrow Rings", 3, "Box", 4, "Circle", 5,
                                        "Square", 6, "Diamond", 7, "Pyramid", 8,
                                        "Pointed Box", 9, "Arrow", 10);
                    var oItem = oLayout.AddEnumControl ( "Icon", aItems, "愛根", siControlCombo );
                oLayout.EndGroup( );
             oLayout.EndGroup( );
             oLayout.AddItem ( "Size",  "砕図" );
        oLayout.EndGroup( );

        oLayout.AddRow( );
            oLayout.AddGroup( "", false, 25 );
                var oItem = oLayout.AddButton ( "Button2",  "牡丹 2" );
                oItem.SetAttribute( siUICX, 60 );
                oItem.SetAttribute( siUICY, 50 );
            oLayout.EndGroup( );
            oLayout.AddGroup( "", false, 40 );
                var oItem = oLayout.AddButton ( "Button3",  "牡丹 3" );
                oItem.SetAttribute( siUICX, 80 );
                oItem.SetAttribute( siUICY, 15 );
                var oItem = oLayout.AddButton ( "Button4",  "牡丹 4" );
                oItem.SetAttribute( siUICX, 80 );
                oItem.SetAttribute( siUICY, 15 );
                var oItem = oLayout.AddButton ( "Button5",  "牡丹 5" );
                oItem.SetAttribute( siUICX, 80 );
                oItem.SetAttribute( siUICY, 15 );
            oLayout.EndGroup( );
            oLayout.AddGroup( "", false, 35 );
                var oItem = oLayout.AddButton ( "Button6",  "牡丹 6" );
                oItem.SetAttribute( siUICX, 70 );
                oItem.SetAttribute( siUICY, 50 );
            oLayout.EndGroup( );
        oLayout.EndRow( );

        oLayout.AddRow( );
            var oItem = oLayout.AddButton ( "Button7",  "牡丹 7" );
            oItem.SetAttribute( siUICX, 40 );
            var oItem = oLayout.AddButton ( "Button8",  "牡丹 8" );
            oItem.SetAttribute( siUICX, 40 );
            oLayout.AddItem ( "Hage",  "はげはげ" );
        oLayout.EndRow( );

    oLayout.EndGroup( );

oLayout.EndRow( );

InspectObj ( oProp );


結果はこれ。
Ui_61


左側にウインドウのタテいっぱいの長さのボタンがあり、右側はタテ並びとヨコ並びが混ざってます。 このように、左右非対称とでも言うか、左はタテいっぱいだけど右は色々詰め込みたい、みたいな場合は、AddRow と AddGroup を駆使すればできますよ、というだけの話です。

具体的には、なんのことはない、不可視の Group を AddRow でヨコに並べているだけです。


上のソースで、赤字の部分は左側のボタン部分の不可視 Group です。

oLayout.AddGroup( "", false, 20 );

このように、ラベル無し、ワクの描画無し、占有面積は 20% と指定しています。
そして EndGroup で閉じられるまでには、ボタン 「切吐」 しか出てこない。

そして緑字の部分が、上記のボタン以外の全部です。

oLayout.AddGroup( "", false, 80 );
このように始まり、以下に残りの部分全てが記述されています。占有面積は 80%。

図で表すと、
Ui_62
このようになっているということですね。
左のタテ長ボタンで1つの不可視 Group を使い切っています(赤ワク)。
右はいっぱいパラメータやボタンが並んでいますが、すべて1つの不可視 Group の中に入っています(緑ワク)。

なので右の緑ワクの中でも全く同じことを入れ子構造にしているだけで、
Ui_63
こういう Group 構造になっているわけです。

緑の Group の中には3つの黄色 Group がある。
黄色 Group の真ん中のやつは、Group 内にさらに3つの青 Group がある。
そしてこの青Group 達は AddRow によってヨコ並びにさせられている。
3つの青 Group のうち中央のやつ(牡丹 3, 4, 5 )をタテ並びにしたかったので、こうしたわけです。

それに対して、3つめの黄色 Group (一番下)では、全てのボタンやパラメータが1列しかないので、さらに下位の Group を作る必要はない。なので AddRow でパラメータやボタンを直接並べただけ。Group を並べているのではないです。


うーむ、わかりますかね。わかりにくいですよね。でもまあ、そういうことなんです。




すき間を埋めて見やすくするために使うこともあります。
例えば、

var oProp = XSIFactory.CreateObject ( "CustomProperty" );
oProp.name = "hoge";
oProp.AddParameter2 ( "HogeHoge",  siBool,  1 );
oProp.AddParameter2 ( "HageHage",  siInt4,  5 );
oProp.AddParameter2 ( "HegeHege",  siString,  "へげへげ~");

var oLayout = oProp.PPGLayout;

oLayout.AddItem ( "HogeHoge", "ほげほげ" );

oLayout.AddRow( );
    oLayout.AddItem ( "HageHage", "はげはげ" );
    oLayout.AddItem ( "HegeHege", "へげへげ" );
oLayout.EndRow( );

InspectObj ( oProp );

これの結果は
Ui_64
こうなるんですが、最初の ほげほげ のチェックボックスが、パラメータ名からすごく離れていて見づらいじゃないですか。

なので、

var oProp = XSIFactory.CreateObject ( "CustomProperty" );
oProp.name = "hoge";
oProp.AddParameter2 ( "HogeHoge",  siBool,  1 );
oProp.AddParameter2 ( "HageHage",  siInt4,  5 );
oProp.AddParameter2 ( "HegeHege",  siString,  "へげへげ~");

var oLayout = oProp.PPGLayout;

oLayout.AddRow( );
    oLayout.AddGroup( "", false, 30 );
        oLayout.AddItem ( "HogeHoge", "ほげほげ" );
    oLayout.EndGroup( );
    oLayout.AddGroup( "", false, 70 );
    oLayout.EndGroup( );
oLayout.EndRow( );

oLayout.AddRow( );
    oLayout.AddItem ( "HageHage", "はげはげ" );
    oLayout.AddItem ( "HegeHege", "へげへげ" );
oLayout.EndRow( );

InspectObj ( oProp );

このようにすると、
Ui_65
チェックボックスが近くなって、ちょっと見やすくなりました。

赤字の Group と 緑字の Group を、青字の AddRow で並べてやっただけですね。
そして緑字の Group は、中身が何にもありません。AddRow の呪文の後、次の行ですぐに EndRow の呪文で閉じられてしまいます。空の Group です。

こういうことですね。
Ui_66
赤のワクは 30% 占有。 緑のワクは何も中身がなくて、かつ 70% 占有。
結果、ほげほげのパラメータ名とチェックボックスの位置が近くなったということです。


とかなんとか。
ごきげんよう。



.

|

« 友愛その5。 | トップページ | 友愛その7。 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: 友愛その6。:

« 友愛その5。 | トップページ | 友愛その7。 »