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

2010年7月 7日 (水)

友愛その4。

続きます。

 1.シーンに実体を残さない PPG にします
 2.パラメータの値に変化があったらアクションを起こすようにします
 3.パラメータ をワクで囲みます
 4.パラメータを横並びにします
 5.パラメータの表示形式を、ドロップダウンメニューにします
 6.ボタン の大きさを変えます

前回で2まで終わりました。3以降行きましょう。



パラメータをワクで囲みます。ジャンルごとにワクで囲ったりすると、見た目がすっきりして良いです。 このワクのことを PPGLayout 的には Group と呼ぶようです。

PPGLayout.AddItem の呪文を唱える部分を、以下のように AddGroup と EndGroup で囲みます。

//    さっき作ったPPGLayout に、すでに作成してあるパラメータを登場させる
//    AddItem メソッドで、作成済みのパラメータ名、UI に登場させる時の名前を指定。

//    AddGroup と EndGroup で囲うことによって、ワクが描かれる
oLayout.AddGroup ( "ぬるん" );
  oLayout.AddItem ( "Icon", "愛根" );
  oLayout.AddItem ( "Size",  "砕図" );
oLayout.EndGroup ( );



すると、こんな風になります。
Ui_41

愛根と砕図のパラメータのまわりに、「ぬるん」 というラベルのついたワクが描かれました。 このワクが Group です。AddGroup の呪文によって召還します。その後は EndGroup の呪文を唱えてワクの終了を明示してあげないとダメです。

ちなみに2行目と3行目、つまり囲われた部分は行頭に空白を入れてありますが、別に必須ではありません。 AddGroup と EndGroup の影響範囲が視覚的にわかりやすいかな、と思ってやっているだけです。



次にこのように書くと、

oLayout.AddGroup ( "ぬるん" );
  oLayout.AddItem ( "Icon", "愛根" );

oLayout.EndGroup ( );

oLayout.AddGroup ( "ぬるる~ん" );
  oLayout.AddItem ( "Size",  "砕図" );
oLayout.EndGroup ( );



当然このようになります。
Ui_42


ボタンまで含めてももちろん桶です。

oLayout.AddGroup ( "ぬ ら り ひ ょ ー ん (゚∀゚)" );
  oLayout.AddItem ( "Icon", "愛根" );
  oLayout.AddItem ( "Size",  "砕図" );

  oLayout.AddButton ( "Set",  "切吐" );
oLayout.EndGroup ( );

Ui_43





次。横並び行きます。 現在は愛根と砕図それぞれが1行を占有しています。 この2つを1行の中に詰め込みます。

oLayout.AddGroup ( "ぬらぬらりん" );
  oLayout.AddRow ( );
    oLayout.AddItem ( "Icon", "愛根" );
    oLayout.AddItem ( "Size",  "砕図" );
  oLayout.EndRow ( );
oLayout.EndGroup ( );

また新しい呪文が出てきました。 AddRowEndRow です。 Row ってのは 「行」 のことですね。 AddRow と EndRow に囲まれた部分は、「1行」になるわけです。


こうなります。
Ui_44

AddGroup とは違い、AddRow も EndRow もカッコの中で指定できるオプションはありません。 この呪文は囲んだ部分を1行に押し込めろと言っているだけなので、オプションもクソもありません。



もちろん3つでも4つでも押し込められます。

oLayout.AddGroup ( "ぬらぬらりん" );
  oLayout.AddRow ( );
     oLayout.AddItem ( "Icon", "愛根" );
    oLayout.AddItem ( "Size",  "砕図" );

    oLayout.AddButton ( "Set",  "切吐" );
  oLayout.EndRow ( );
oLayout.EndGroup ( );

このように AddButton の呪文も Row の包囲網に入れてしまえば、
Ui_45
このように1行に3つ並びます。



しかし、よく見てみると、愛根と砕図のスライダが消えて、手打ちフィールドしかない状態になっています。 これは、ウインドウのサイズに対していっぱいいっぱいで、スライダを入れる余裕がないからです。こういうとき、XSI 様は勝手にスライダを省略します。

ウインドウをヨコに広げてやれば、スライダは復活します。
Ui_46

でも、ヨコに広げないとスライダが出てこないのも嫌ですよね。デフォルトのウインドウの広さのままスライダも入れたい場合は、ひとつのパラメータが占有する面積を制限してやったり、ラベル(パラメータの表示上の名前)を短くしたり、ラベルを表示オフにしたり、ラベルが表示されるために最低限必要な面積をデフォルトよりも小さくしてあげたり、色んな工夫が必要です。この工夫こそが UI 作りの肝であり、見易いかどうか、使い易いかどうかを決定付けることになります。たぶん。逆にスライダは要らねえ俺は手打ちだけがいいんだゴルァという場合も多いですね。

この辺の制御はいずれまとめて説明することになるでしょう。いずれまとめて説明しないことになるかも知れません。 わかりません。


もういっちょ例を挙げます。

AddGroup と AddRow の順番を入れ替えて、1行の中に複数の Group を入れることも、もちろんできます。

oLayout.AddRow ( );
  oLayout.AddGroup ( "スキスキダーリン" );
    oLayout.AddItem ( "Icon", "愛根" );
    oLayout.AddItem ( "Size",  "砕図" );

  oLayout.EndGroup ( );

  oLayout.AddGroup ( "頭はピッコピコよ" );

    oLayout.AddButton ( "Set",  "切吐" );

  oLayout.EndGroup ( );
oLayout.EndRow ( );
 

一番外側に、AddRow と EndRow の呪文があります。つまりその範囲内は全て1行に押し込められます。 そしてその範囲内には、2つの AddGroup - EndGroup のセットがあります。

こうなります。
Ui_47
Group が2つ、横並びになりました。



今度は、AddGroup で指定するラベル(Gorup の名前)を "" という風にクォーテーション2連発=つまり中身の文字列が無い という状態にしてみます。

oLayout.AddRow ( );
  oLayout.AddGroup ( "" );
    oLayout.AddItem ( "Icon", "愛根" );
    oLayout.AddItem ( "Size",  "砕図" );

  oLayout.EndGroup ( );
      
  oLayout.AddGroup ( "" );

    oLayout.AddButton ( "Set",  "切吐" );

  oLayout.EndGroup ( );
oLayout.EndRow ( );


こうなります。
Ui_48b
ワクのみが出現し、名前の無い Group になりました。



次は、AddGroup のカッコの中で、false というオプションを入れてみます。

oLayout.AddRow ( );

  oLayout.AddGroup ( "",false );
    oLayout.AddItem ( "Icon", "愛根" );
    oLayout.AddItem ( "Size",  "砕図" );

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

    oLayout.AddButton ( "Set",  "切吐" );

  oLayout.EndGroup ( );
oLayout.EndRow ( );



すると、
Ui_48c
このように、ワクも無くなりました。

AddGroup のオプションの1つめは Group の名前ですが、2つめのオプションは 「ワクを描くか描かないか」 です。 何も指定しなければデフォルトの true が適用されて、ワクが描かれます。 false を指定してやると、ワクを描きません。

ただし、AddGroup ( "ぬぬぬぬるん" , false ) のように、「 Group のラベルは指定しているけど、ワクは描かないでね」 という指定はできません。 できませんと言うより、false が無視されます。 ラベルを指定した時点で必ずワクは描かれてしまいます。 ワク無しにしたければ、ラベルも無しにしなければいけないということです。 仕様ですねこれは。



今度は、AddGroup の3つめのオプションを指定してやります。

oLayout.AddRow ( );
  oLayout.AddGroup ( "どうしてダーリン あなたを" , true, 70);
    oLayout.AddItem ( "Icon", "愛根" );
    oLayout.AddItem ( "Size",  "砕図" );

  oLayout.EndGroup ( );
      
  oLayout.AddGroup ( "信じてたのに", true, 30 );

    oLayout.AddButton ( "Set",  "切吐" );

  oLayout.EndGroup ( );
oLayout.EndRow ( );

それぞれの Group で 7030 を指定しています。

こうなります。
Ui_49

3つめのオプションは、その Group がウインドウの横幅のうち何%を占めるかという指定です。 この場合、最初の Group は 70% 使え、2つ目の Group は 30% 使えと指定しているので、左側の Group の方がより広く、右側の Gorup は狭くなっているのがわかると思います。

この辺は、AddGroup のヘルプを見れば全部載ってます。



このように、色んなオプションを駆使して望みの UI を作っていくのであります。これこそがスクリプト書きの楽しみです。 メインルーチンなんてどうでもいいです。




それではごきげんよう。

あれっ また最後まで行けなかったよ?

ごきげんよう。





.

|

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

コメント

コメントを書く



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




トラックバック


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

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