ダイアログ中の要素は、多くの場合列または行に沿って配列されます。単一の列だ けを必要としている場合には簡単ですが、複数の列を作成する場合はより多くの作業が必要になります。
単一の列配置を作成する最も簡単な方法は、フォームの代わりにローカラム (RowColumn) ウィジェットを使用するものです。ローカラムは、ほとんどのウィジェットを子に持つことが可能であり、 また、異なるウィジェット型を同じローカラムの子にすることもできます。 ローカラムの配置方向が垂直の場合は単一の列が作成され、水平方向の場合は単一の行が作成されます。そ れぞれの結果を図 20-1 に示します。
図 20-1 は、間隔設定方法リソースが「密」に設定されている場合の、ローカラムウィジェットのデフォルト動作を 示したものです。「密」な配置では、常に 1 つの列または行が作成されます。列配置の場合では、すべてのウィジェットは異なる高さを持つことができ ますが、同じ幅に強制されます。行配置の場合では、すべてのウィジェットは異なる幅を持つことができま すが、同じ高さに強制されます。
間隔設定方法を「列」に設定すると、図 20-2 に示すように、すべてのウィジェットの幅と高さは同じになります。
ダイアログはサイズ変更が可能であるため、サイズ変更の際の構成要素の動作は常 に重要です。サイズ変更に対しての一般的な記述がある資料は存在しません。したがって、実際に操作を行 いながらサイズ変更の一般的な規則を見つけていく必要があります。 間隔設定方法が「密」に設定されている垂直ローカラムは、図 20-3 に示すように動作します。
可能な場合には、ローカラムウィジェット内のすべての子が表示されます。すべて の子を表示できるほどローカラムが大きくない場合には、収まらない子は表示されません。特殊な場合を除 いては、子ウィジェットが部分的にしか表示されないということはありません。
ローカラムウィジェットを使用して、図 20-4 に示すように、ウィジェットを複数の列に配置することができます。
ただし、この配置には制限があります。複数の列を使用するために、間隔設定方法 を「列」に設定しなければなりません。この設定を行うと、すべての子は強制的に同じサイズにされます。 この場合、テキストボックスの 1 つが 2 行分の高さであるため、すべてのテキストボックスはそのサイズと同じでなければなりません。その結果、 空間が無駄に使用されるうえ、ユーザーを混乱させることにもなりかねません。図 20-5 に、改良を加えた配置を示します。
この例は、各行の高さが異なるため、ローカラムを使用することはできません。こ のような場合には、フォームを使用してください。
ここでは、複雑な列配置を作成するための手順を説明します。最初の例は、ラベル とテキストフィールドウィジェットを 1 つずつ含んでいる、1 行 2 列の配置です。特に記載のない限り、本章で使用されるすべてのアタッチメントのオフセットはゼロとしま す。
初めてフォームを作成し、その子を追加すると、Motif はフォームの左側に各ウィジェットの左側を接続する形で、子を下方向に配置します。最初のウィジェット の上部は、フォームの上部に接続されており、後に続く各ウィジェットの上部は上のウィジェットの下部に 接続されます。したがって、ラベルおよびテキストフィールドを含むフォームを作成すると、図 20-6 のように配置されます。
この例で使用されるフォームでは、水平および垂直間隔が 5 ピクセルに設定されています。
図 20-7 から図 20-11 に、この配置を 2 列配置に変更するための手順を示します。
まず、 テキストフィールドを図 20-7 に示すような位置に移動します。
次に、図 20-8 に示すように、ラベルの上下とテキストフィールドの上下を揃えます。
図 20-9 に示すように、テキストフィールドの上および右側をフォームの上および右側に接続します。
図 20-10 に示すように、ラベルの右側とテキストフィールドの左側を接続します。
最後に、図 20-11 に示すように、テキストフィールドの左側の位置を 25 % に設定します。
ラベルの右側がテキストフィールドの左側に接続されているにも関わらず、位置を 設定してテキストフィールドの左側を固定することは不自然に見えるかもしれません。むしろ、テキストフ ィールドの左側を固定して、ラベルの右側へ接続する方が自然に思えるでしょう。しかし、この方法では、 フォームでは認められない循環アタッチメントが生じることになってしまいます。位置に使用された 25 % という値は、この段階では任意の値です。全ウィジェットの幅が確定するまでは、最終の位置を指定するこ とはできません。
上記の手順を複数の行に応用するには、単に同じ手順を繰り返してください。ただ し、最初の行の左端および右端の位置 (ラベルの左側とテキストフィールドの右側) は、フォームの両側へのアタッチメントによって設定されていますが、後に続く各行の左端と右端の位置は 、上にある行にウィジェットを揃えることによって設定されている、ということが異なります。
図 20-12 は、図 20-5 で示されているダイアログの初期状態を示します。図 20-5 に示すダイアログでは、左の列は 3 個のラベルと 1 個のプッシュボタンで構成されており、右の列は 3 個のテキストフィールドと 1 個のテキストウィジェットで構成されています。
まず、ダイアログを構成するウィジェットにリソースを設定します。つまりラベル およびプッシュボタンにラベルテキストを、複数行テキストウィジェットに行数および編集モードを設定す ることができます。
これらのリソースは、この段階で設定しなくてもかまいません。後で設定すること もできます。しかし、この段階でリソースを設定すると、ダイアログが表示される方法、および、意図した とおりの動作が行われるかどうかを早く確認することができます。
リソースを設定し、図 20-13 に示す配置を作成します。
ここで、図 20-7 から図 20-11 に示した手順を列の各行に対して適用します。まず、テキストとテキストフィールドウィジェットを図 20-14 に示すような位置に移動します。
次に、図 20-15 に示すように、ラベルとプッシュボタンの上下を、対応するテキストまたはテキストフィールドウィジェッ トの上下に揃えます。
図 20-9 に示すように、5 ピクセルのオフセットを使用して、最初の行のテキストフィールドウィジェットをフォームの上および右側 に接続します。その他の各テキストフィールドおよびテキストウィジェットの上部は、5 ピクセルのオフセットを使用して、上にあるウィジェットの下部に接続します。
次に、テキストウィジェットを一番上のウィジェットに揃えます。右側の配置につ いては、各テキストウィジェットの右側を上にあるウィジェットの右側に揃えます (または、0 ピクセルのオフセットを使用して接続します)。あるいは、下から上にテキストウィジェットを選択して「 グループ整列方法」を使用します。左側に対しては、50 % などの任意の位置を設定します。
次に、各ラベルとプッシュボタンの左側を、上のウィジェットの左側に揃えます。 下から上にウィジェットを選択して「グループ整列方法」を使用することができます。この時点での配置は 、図 20-16 のようになります。
図 20-17 に示すように、各ラベルおよびプッシュボタンの右側を、対応するテキストまたはテキストフィールドウィ ジェットの左側に接続します。
最後の手順として、テキストウィジェットの左側の位置を調整します。これは、あ る程度の試行錯誤を必要とします。パーセント (%) が大きすぎる、または小さすぎる場合には、フォームは必要以上に広くなり、画面スペースを無駄に使用す ることになります。図 20-18 にいくつかの例を示します。
さまざまな位置の値を試す際には、値を変更するたびに (サイズ変更方針のリソース設定によっては) フォームが大きくなることに注意してください。これは、フォームが作成された後に変更された制約に対し て、フォームが対応しきれないためです。アプリケーションで実際にどのようにフォームが表示されるかを 確認するためには、フォームをリセットします。
複数列の配置に使用されるアタッチメント、整列方法、および位置の調整は複雑に 思われるかもしれませんが、この調整方法は柔軟性が高く、変更も可能です。特に、ダイアログに対しての 新しい行の追加は比較的簡単に行うことができます。
ダイアログの一番下に新しい行を追加するには、デザインに新しいウィジェットを 追加し、上にある行と同様にアタッチメントを設定します。ただし、ダイアログの中程に新しい行を追加す る場合は、作業がやや複雑になります。
最初の手順として、新しい行のためのスペースを空けます。各行は 1 つ上の行にのみ接続されており、左の列のウィジェットは右の列のウィジェットの上下に接続されているた め、右の列のウィジェットをドラッグするだけで、ダイアログの下部全体を移動させることができます。し かし、これはすべてのアタッチメントを切り離してしまうため、後で接続し直す必要があります。ただし、 他のウィジェットから設定されたアタッチメントには影響はありません。図 20-19 に、テキストウィジェットを下へ移動した場合の結果を示します。
この時点で、新しい行のウィジェットを追加し、必要に応じてリソースを設定し、< A HREF="advancedlayout.html#12748" CLASS="XRef">図 20-20 に示すように適当な位置に移動させることができます。
次に、図 20-21 に示すようにウィジェットが 2 つの列になるように位置を揃えます。
最後に、各テキストまたはテキストフィールドを 1 つ上にあるものに接続し、図 20-22 のようにテキストまたはテキストフィールドウィジェットの左側の位置を設定します。
新しいラベルは少し狭くなっているため、テキストウィジェットの左側の位置を 55% に設定してダイアログをリセットします。すると、図 20-23 に示されるような結果になります。
一部が 2 列からなるダイアログは、一般的によく使用されます。項目が多すぎて 2 列配置では列が高くなりすぎてしまう場合は、4 列配置に変更することができます。
たとえば、図 20-23 の例の 4 番目および 5 番目の行を、それぞれ別の 2 つの列 (3 と 4) に移動することができます。最初の手順では、図 20-24 に示すように、行とその上にある行を揃えるためのアタッチメントを切り離します。
次に、新しい列のために右側のスペースを空ける必要があります。そこで、最終的 にフォームでアタッチメントを持つ可能性がある最初の 3 行の位置を設定します。図 20-25 に、この結果を示します。位置の変更が行われると、フォームの幅が広くなるため、位置の変更後にはフォ ームをリセットする必要があります。
同様に、図 20-26 のように下の 2 行の位置を設定します。フォームが一時的にも一貫性のない状態にならないように、順序通り位置の設定を 行う必要があります。間違った順序で操作を実行した場合は、「Bailed out of synchronization」(端の同期の打ち切り) というメッセージが表示されます。このエラーメッセージは無視してかまいませんが、操作を続行する前に メッセージボックスを消去してください。また、位置の変更後にはフォームを忘れずにリセットしてくださ い。
この時点で、一番上のテキストウィジェットをフォームの上および右側に接続して 、右側の 2 列を正しい位置に移動することができます。結果は図 20-27 のようになります。
これで、配置はほぼ終了しました。列 2 の右側は、現在 50 % の位置にあります。この位置を、50 % の位置にある列 3 の左側へのアタッチメントに置き換えます。図 20-28 に、最終的な配置を示します。
フォームはシェルの子なので、内側の端周辺にマージンラインを描きます。しかし 、フォームの端に沿って拡張するフォームの子ウィジェットによって、このマージンラインの一部が隠され てしまいます (図 20-29)。
この問題を解決するには、マージンに重なるウィジェットのオフセットを小さく設 定して、フォームに接続するという方法が最も簡単です。しかし、この方法でも図 20-30 に示すようにサイズ変更動作に問題が生じる可能性があります。
この問題を解決するためには、2 通りの方法があります。これらは両方ともデザインに別のウィジェットを取り込む必要があります。
図 20-30 に示す単純なアタッチメントの問題は、 フォームのサイズが変更されると同時にボタンのサイズ変更も行われるために、予想外の外観が生じてしま うことです。代替方法としては、目に見えないウィジェットを導入します。このウィジェットもまたフォー ムと一緒にサイズが変更されますが、目に見えないため違和感はありません。使用するウィジェットは、「 種類」リソースを「線なし」に設定したセパレータガジェットが最も効果的です。見えないウィジェットを 図 20-30 の例に追加したウィジェット階層およびアタッチメントを、図 20-31 に示します。
セパレータの下部は、マージンラインを隠さないようにオフセットを小さくしたフ ォームの下部に接続されます。セパレータの上部は、オフセット 0 でプッシュボタンの下部に接続されます。セパレータはフォームと一緒に縦方向にサイズ変更されますが、 他の構成要素のサイズは変わりません。
フォーム配置エディタは、セパレータ (および一定サイズ以下の他のウィジェット) の高さと幅を強調表示するため、マウスを使用してアタッチメントを設定することができます。これにより 左下角のマージンが隠されているように見えますが、実際は隠されていません。
また、第 2 のセパレータを使用して、内部にあるテキストフィールドウィジェットの右側がフォームの右側を隠さない ようにすることもできます (あるいは、両方に同じセパレータを使用することができます)。しかし、図 20-30 に示されているようなアタッチメントでの水平方向のサイズ変更動作は、ほとんどの場合に問題を発生させ ません (テキストフィールドウィジェットは、フォームと一緒に水平にサイズ変更します)。
もうひとつの方法では、第 2 のフォームを見えないウィジェットとして使用します。この方法は、 フォームがシェルの直接の子である場合に限り、マージンラインを描くことを利用しています。シェルの子 ではない中間のフォームはマージンラインを描かないため、その子を端まで拡張してもラインを隠してしま うという問題は発生しません。中間のフォームを使用すると、4 辺すべてについてマージンが隠れてしまうという問題を防ぐことができます。
図 20-32 は、この方法を用いた場合のウィジェット階層と適切なアタッチメントを示します。子フォームは、マージ ンが見えるように、オフセットを小さくして親フォームの 4 辺すべてに接続されています。
マージンの幅と高さを 5 ピクセルなどの比較的小さな値に設定すると、親フォームの代わりとして、ブリテンボードを使用すること ができます。シェルはその子がブリテンボード (またはフォームなど、ブリテンボードの子孫) であると見なすため、この位置にフレームなどの異なる種類のコンテナウィジェットを使用しないでくださ い。
ユーザーがフォームをサイズ変更した際に引き起こされる動作は、アタッチメント と位置の設定の方法によって異なります。一般に、ダイアログは、ユーザーがそれを大きくすると、より多 くの重要な情報が表示されるようにデザインします。たとえば、ダイアログがスクロールリストを含んでい る場合、ユーザーがウィンドウを高くすると、リストの可視部分が長くなるようにします。一方、ラベルや ボタンなどのウィジェットは、別の情報を持っていないため、ウィンドウと一緒に大きくする必要はありま せん。
実際には、どのフォーム配置もサイズ変更動作、ウィジェット内でのサイズ変更 (フォント変更など) に対しての反応の信頼性、実装の容易さおよび保守の容易さとの間で妥協せざるをえません。本節では、望 ましいサイズ変更動作を持つフォームを作成するためのガイドラインを示します。
フォーム内のウィジェットは、左右両側に制約がある場合には、フォームが横に広 がると同時に横に広がります。また、 フォーム内のウィジェットの上下両端に制約がある場合には、 フォームが縦に長くなると内部のウィジェットも同時に縦に長くなります。
ダイアログを配置する最も簡単な方法は、フォームの左上角から右下角に向かって 作業を進めることです。この場合、各ウィジェットの上および左側を、前のウィジェットの下および右側に 接続します。この方法を実行すると、ウィジェットはフォームのサイズ変更時に、そのサイズの変更を行い ません。フォーム内のウィジェットを的確にサイズ変更させるためには、少し高度な知識が必要です。
ローカラムウィジェットを使用した水平方向のサイズ変更の例は、「ローカラムのサイズ変更動作」ですでに紹介してあります。本章の残りの部分では、その他 の方法を実例を挙げて説明します。
フォームの幅を 2 個だけのウィジェットが占めるように配置することは、比較的単純です。ここで必要とされるのは、フォー ムがサイズ変更された場合に生じる余分な幅をどちらのウィジェットに与えるか、あるいは両方のウィジェ ットで共有するかを指定することだけです。
図 20-33 に例を示します。 widget 1 は、その左側でフォームに接続されていますが、右側は自由です。そのため、本来の幅を持ち、テキストラ ベルの表示が可能です。widget 2 は、左側を widget 1 に、右側をフォームに接続されています。したがって、そのサイズは widget 1 が占有していないフォームの幅の部分を占めるように変化します。つまり、widget 2 は余ったスペースを使用します。
フォームをリセットする場合、 フォームは両方のウィジェットを収めるための独自の幅を設定し、図 20-33 に示すような初期状態を生成します。
2 個のウィジェット間のアタッチメントは、図 20-34 では逆になっています。つまり、widget 1 の右側が widget 2 の左側に接続されています。この結果、widget 2 のサイズは変化せず、widget 1 が残りの幅をすべて得ることになります。
2 個のウィジェット間の右から左へのアタッチメントは、同じ場所に左から右へのアタッチメントを新たに加 えるだけで反転することができます。ユーザーが新しいアタッチメントを追加すると、配置エディタはこの 状況を検出して古いアタッチメントを取り除きます。しかし、ここで示している例では、上記の動作を行う と循環エラーメッセージが表示されます。これは、変更されるべきアタッチメントが 2 つ存在するためです。循環アタッチメントを取り除くためには、2 個のウィジェットの上部を揃えているアタッチメントも入れ替える必要があります。両方のウィジェットと も同じ高さであるため、この入れ替えによって配置の外観が変化することはありません。
余分なスペースを 2 個のウィジェット間で等分するためには、均等配置の使用が必要です。widget 1 に位置を設定して widget 2 に接続する、widget 2 に位置を設定して widget 1 に接続する、あるいは両方に位置を設定するという 3 通りの方法があります。これらの設定方法は、循環アタッチメントが起こらない限り有効です。図 20-35 に 3 通りの例を示します。
図 20-35 では、位置は約 50 % に設定されており、2 個のウィジェットはほぼ均等にフォームの幅を分割します。異なるパーセントを使用すると、どちらかのウ ィジェットのサイズを他方よりも大きくすることができます。この例の場合、余分なスペースはウィジェッ トの初期サイズに比例して分割されます。サイズ変更をして幅を小さくした場合のフォームの初期状態と動 作は、すべてのクラスに共通しています。
3 個のウィジェットを使用する場合には、配置方法も多くなります。余分なスペースを 3 個のウィジェットのどれか 1 つに与える、あるいは 3 個で分割することができます。図 20-36 は、余分なスペースすべてが 3 個のウィジェット中のひとつに与えられるという簡単な例を示しています。どの場合においても、両端が接 続されているウィジェットが、フォームと一緒にサイズ変更を行うことに注意してください。
3 個のウィジェット間でスペースを分割する場合は、図 20-37 に示すように、単純な均等配置を使用することができます。
2 個のウィジェットの場合も、異なるパーセントを使用して、1 つのウィジェットを他のウィジェットよりも優先することができます。
アタッチメントと位置の組み合せを使用して、1 つのウィジェットのサイズを変更せずに他の 2 個のウィジェットのサイズを変更する、という配置を作成することができます。図 20-38 にいくつかの例を示します。
これまでのすべての例では、フォームの幅を分割するウィジェットの高さはすべて 同じでした。このため、ほとんど制約なくウィジェットの上下におけるアタッチメントを調整し、容易に循 環アタッチメントを回避することができました。しかし、ウィジェットの高さが異なる場合は、循環アタッ チメントの回避はやや難しくなります。
図 20-39 に示すような階層において、図 20-33 の右優先配置と同様に、右のテキストウィジェットに利用可能スペースを最大限使用する配置を行うことに します。この場合、右のウィジェットを左のウィジェットに接続する必要があります。しかし、図 20-39 に示す例では、左側にあるラベルウィジェットがすでにテキストの上下に接続されることにより正しい垂直 整列が生成されているため、このような接続は実行できません。
この矛盾した状況を解決するには、以下の 3 通りの方法があります。
1. テキストウィジェットがラベルを覆い隠すことのないように十分に大きなオフセットを使用して、フォーム の左側にテキストウィジェットの左側を接続します。ラベルの右側をテキストウィジェットの左側に接続し ます (図 20-40)。
2. テキストウィジェットの左側を指定したパーセントに設定し、ラベルの右側をその場所に接続します (図 20-41)。
3.
単一行の場合には、ラベルの上下の整列をフォームへのアタッチメントに置き換え、テキストウィジェット
の左側をラベルの右側に接続することができます
(図 20-42)。
それぞれの図には、これらの 3 通りの方法と、フォームがサイズ変更され、ラベル、フォントが変更される場合の動作を示します。
図 20-40 では、テキストウィジェットは両端でフォームに接続されます。この配列の長所は、 フォームの幅を広くした場合に生じる余分のスペースを、すべてテキストウィジェットが使用することです 。これはユーザーがアプリケーションの構成を大幅に変更しない場合に限り、満足のいく動作が期待できま す。ラベルまたはフォントが変更された場合には、正しく動作しません。
図 20-41 では、テキストウィジェットの左端の位置が設定されています。これは、ラベルまたはフォントが変更され る場合には、ラベルに余分なフォーム幅の一部が与えられるため、いっそう確実な配置となります。前述の 列配置の場合には、この方法が最も有効です。
図 20-42 では、ラベルの上下をテキストウィジェットの上下に接続する代わりに、フォームに接続することによって 、循環アタッチメントの問題が解決されています。この後、テキストウィジェットの左側をラベルの右側に 接続して、図 20-33 に示すような右優先の配置を作成することができます。
この方法を使用すると、最適な動作を実現することができます。しかし、この方法 は各行を独立したフォームで囲む必要があると同時に、列を垂直に揃える手段がないため、列配置に使用す ることはできません。また、各行に対して余分なフォームウィジェットを必要とするため、かなりの量のオ ーバーヘッドが発生する可能性があります。
垂直のサイズ変更方法は、基本的には水平サイズ変更の場合と同じです。しかし、 通常は垂直サイズ変更の方が循環アタッチメントの問題が少なくなっています。これは、オブジェクトの左 側にあるラベルを、使用可能なスペースの中央に配置する必要があるのに対し、オブジェクトの上に位置さ れているラベルは、オブジェクトの左端に揃えることができるためです。図 20-43 にこの例を示します。
図 20-44 から図 20-46 に、図 20-36 に示す水平配列に似ている垂直配置の例を示します。それぞれの例では、余分の高さは複数行のテキストウ ィジェットに与えられます。
ダイアログの初期サイズは、シェル、フォーム、フォーム内のウィジェット間の交 渉の結果によって決定されます。通常、フォームはその子についての制約をすべて満たす配置を見つけよう とし、それぞれの要求をできるだけ「自然な」サイズで実現させようとします。その後、フォームはフォー ム自身がその配置を含むようにサイズを決め、シェルはフォームまたはブリテンボードを含むようにそのサ イズを決めます。
ほとんどのウィジェットには、合理的で自然なサイズというものがあります。たと えばラベルの自然なサイズは、その中に含まれるテキストとフォントによって決定されます。また、テキス トウィジェットは通常、リソースで指定されている行および列の数に従ってウィジェット自身でサイズを決 定します。
ダイアログに、許容できる大きさの自然サイズのウィジェットのみが含まれている 場合は、フォームが初期サイズを決めることができます。ダイアログ中にあるウィジェットの自然サイズが 大きすぎる場合は、制約を使用してサイズを固定する必要があります。その際、ダイアログの初期サイズが かなり小さく見える場合があります。
この問題が生じた場合、最上位フォームの幅と高さのリソースを設定してダイアロ グの初期サイズを設定します。適切なシェルリソースを使用して最小サイズを設定することはできますが、 シェルの幅および高さのリソースを設定して初期サイズを設定することはできません。
|
サン・マイクロシステムズ株式会社 Copyright information. All rights reserved. |