# オブジェクトのグループ化と接続

テキストの変更(国際化対応による変更も含みます)およびウィンドウのサイズ変更にかかわらず、 調和した間隔とサイズの関係を確実に保ためには、コントロール・オブジェクトをグルー プ化し、オブジェクトどうしを接続する必要があります。

この章では、動的なレイアウト動作のためにオブジェクトを接続する方法を説明します。

ABUG.group.mkr.2
ABUG.group.mkr.3
ABUG.group.mkr.4
ABUG.group.mkr.5
ABUG.group.mkr.6
ABUG.group.mkr.7
ABUG.group.mkr.8
ABUG.group.mkr.9
ABUG.group.mkr.10

## オブジェクトのグループ化

グループは単体として処理することができるオブジェクトの集合です。 グループ内にオブジェクトを配置すると、グループは個々のオブジェクトの位置関係を 維持しながら移動することができます。 グループは動的なレイアウトでオブジェクトを配 置するため、グループ内のオブジェクトのサイズが変更しても、グループ内のオブジェクトの 間隔と配置は維持されます。

エディタの詳細とその要素については、ABUG.apRPE.mkr.6を参照してください。

### グループを作成するには

1. グループの一部にしたいコントロール・オブジェクトを選択します。

   インタフェースまたはオブジェクトのどちらかで、オブジェクトを選択できます。最も 使用しやすい方法で、オブジェクトを選択してください。操作方法は、 ABUG.layo.mkr.6を参照してください。

2. [レイアウト]メニューまたはポップアップ・メニュー(ウィンドウ・インタフェースまた はモジュール・ブラウザ上にカーソルを置き、マウス・ボタン3を押すと表示されます) から、[グループ化]を選択します。

   インタフェースでは、矩形のボックスがグループの周りに描画されます。これはグループ化 が選択されたことを示します。[レイアウト]またはポップアップ・メニューで[グループ 化解除]がアクティブになっています。[グループ化解除]は、グループ化が選択されたと きのみアクティブになります。

   モジュール・ブラウザでは、新規オブジェクトが表示および選択されます。 このオブジェクトは、「group」(または グループ内に他のグループが存在し ているときは「group2」など)と呼ばれます。グループ・オブジェクトは グループを構成するオブジェクトの親になります。グループのメンバは、独立して移動 することはできません。グループ内のオブジェクトを移動すると、グループ全体が移動 します。

### グループ属性を編集するには

水平または垂直方向の整列およびオブジェクト間の間隔などのグループ属性はグループ属性エディタで設定します。

1. インタフェースまたはモジュール・ブラウザでグループをダブルクリックします。

   属性エディタでグループが選択されています。 インタフェースでは、グループを選択してグループ・メンバ間の間隔でクリック しなければなりません。

   別の方法として、主ウィンドウの[エディタ]メニューから[グループ]を選択することに よってグループ属性エディタを表示できます。[エディタ]メニューから[グループ]を選択 するのは、[オブジェクト型]として[グループ]を選択している属性エディタで[ティアオフ]をクリックするのと同じことです。

2. 必要であれば、[グループ・オブジェクト]リストから編集するグループを選択します。

3. 必要であれば、グループの新規名を入力します。

4. 完成したインタフェースで、グループにボーダを持たせるには、ボーダ枠のスタイルを 選択します。(デフォルトではボーダはつきません。)

   [ボーダ枠]の選択肢は、[外側のシャドウ]、[内側のシャドウ]、[外側エッチング]、 [内側エッチング]、そして[なし]です。

5. [レイアウト型]を選択します。

   選択肢は、そのまま、垂直、水平、そして行と列です。

   [垂直揃え]と[水平揃え]オプション・メニューのどちらかまたは両方がアクティブになり ます。アクティブになるメニューは、[レイアウト型]の選択に依存します。 行と列を 選択すると[行数]および[列数]ラジオ・ボタンもアクティブになります。

6. [行数]または[列数]を指定します。([レイアウト型]として行と列を選択した場合)

   行数を指定すると、列数は自動的に決定されます。列数を指定すると、行数が自動的に 決定されます。

7. 垂直方向の整列方法を選択します。([レイアウト型]として[垂直]または[行と列]を選択した場合)

   選択肢は、オブジェクトの左端揃え(デフォルト)、コロン/ラベル揃え、オブジェクトの 中央揃え、オブジェクトの右端揃えです。

8. 垂直方向の間隔を指定します。([レイアウト型]として[垂直]または[行と列]を選択した場合)

   値はピクセル単位で、デフォルトは10ピクセルです。

9. 水平方向の整列方法を選択します。([レイアウト型]として[水平]または[行と列]を選択した場合)

   選択肢は、オブジェクトの上端揃え(デフォルト)、オブジェクトの中央揃え、オブジェク トの下端揃えです。

10. 水平方向の間隔を指定します。([レイアウト型]として水平または行と列を選択した場合)

    値はピクセル単位で、デフォルトは10ピクセルです。

11. アプリケーションを開いたときに、グループ内のオブジェクトを表示したくないときは、 [表示]を選択解除します。

12. アプリケーションを開いたときに、グループ内のオブジェクトをアクティブにしたくない ときは、[アクティブ]を選択解除します。

13. [了解]または[適用をクリックし、変更内容を適用します。

    [了解]をクリックすると、属性エディタまたはグループ属性エディタが終了します。

### インタフェースで、オブジェクトのグループ化を解除するには

1. モジュール・ブラウザまたはインタフェースでグループを選択します。

   オブジェクトでは、グループ内のオブジェクト間をクリックして、グループを選択します。 グループが選択されると、2つ以上のオブジェクトのまわりにボックスが表示されます。

   インタフェースで、グループを選択できないとき、または多くのグループを持つインタ フェースで正しいグループを選択したいときは、モジュール・ブラウザを開きます。 モジュール・ブラウザでは、グループの名前によってグループが示されています。 モジュール・ブラウザで選択したグループは、インタフェースでも選択されます。

2. [レイアウト]メニューまたはポップアップ・メニュー(インタフェース・ウィンドウ上に カーソルを置き、マウス・ボタン3を押すと表示されます。)から[グループ化解除]を選択 します。

   オブジェクトがグループの一部でなくなります。オブジェクトを選択して、他のオブジェクトとは無関係に独立して移動することができます。

### オブジェクトの周りにボーダを作成するには

グループ化機能は、ラベルなどの個々のオブジェクトのまわりにボーダを作成するのに 使用します。

1. インタフェースでオブジェクトを選択します。

2. インタフェースのポップアップ・メニューから[グループ化]を選択します。

   オブジェクトがグループに入ります。

3. グループ属性エディタを表示します。

4. まわりにボーダをつけたいグループを選択します。

   モジュール・ブラウザでグループをダブルクリックすると、選択したグループをもつ グループ属性エディタが表示されます。

5. オブジェクトに追加したい[ボーダ枠]のスタイルを選択します。

6. [了解]をクリックして、変更内容を適用しグループ属性エディタを終了します。

## オブジェクトの接続

アタッチメント(およびアタッチメントに基づく グループ)は、インタフェースでオブジェクトの動的なレイアウト動作を確立します。 動的なレイアウト動作は、サイズ変更において、オブジェクトが調和した関係を確実に 維持するようにします。アタッチメントは、国際化対応のアプリケーションが多くのロケールで適切に使用できるようにします。

デフォルトで、すべての子オブジェクトの左上端は、親オブジェクトの左上端に接続され ます。したがって、メイン・ウィンドウ上にドロップしたコントロール区画の左上端は、 メイン・ウィンドウの左上端に接続されます。同様に、コントロール区画にドロップした ボタンはコントロール区画に接続されます。

親オブジェクトを上または左方向にサイズ変更すると、子オブジェクトは親オブジェクト とともに移動し、親オブジェクトの左上端からの距離を保ちます。

区画オブジェクトがその親の上端または左端にドロップされると、上端または左端の オフセットが0で接続されます。区画オブジェクトがその親の左上端から右下に離れた 位置にドロップされると、正のオフセットになります。

区画オブジェクトを親オブジェクトに重なるように、右下端からサイズ変更すると、親 オブジェクトの右下端に接続します。

### アタッチメント・エディタ

アタッチメント・エディタは、レイアウトのために、オブジェクトを他のオブジェクトと接続するのに使用します。アタッチメント・エディタについて、以下に説明します。

オブジェクト型 | アタッチメントしたいオブジェクトの型を選択するオプション・メニューです。 いくつかのオブジェクト(カスタム・ダイアログ、ファイル選択ダイアログ、メイン・ ウィンドウ)は親をもたないので、これらはメニューには含まれていません。
オブジェクト | アタッチしたいオブジェクトを選択するスクロール・リストです。
親 | オブジェクトの親を示すテキスト・フィールドです。
子 | 親オブジェクトの子をリストしているスクロール・リストです。
親アタッチメント/子のアタッチメント | 選択したオブジェクトの親のアタッチメント、または選択したオブジェクトの子のアタッチメントを表示するためのラジオ・ボタンです。 いくつかのオブジェクト(描画領域区画、端末区画、テキスト区画)は、子オブジェクトを 持たず、メイン・ウィンドウまたはカスタム・ダイアログの子になることがあります。 したがって、[親アタッチメント]と[子のアタッチメント]のどちらもアクティブではあり ません。その区画が、他の区画の子であるとき、または階層化された区画であるときは、 [親アタッチメント]がアクティブになります。
接続先 | 選択したオブジェクトのアタッチメントの型とオブジェクトの接続先を選択するオプション ・メニューです。選択したオブジェクトとその親オブジェクト、または兄弟(同じ親を もつ別のオブジェクト)からのオフセット(ピクセル単位)、または親オブジェクトからの パーセンテージのオフセットを指定するテキストフィールドも含んでいます。 [接続先]の下にあるオプション・メニューは接続先にする兄弟オブジェ クトを指定するもので、兄弟オブジェクトへのアタッチメント(2つの小さな四角)のとき のみアクティブになります。[オフセット]テキスト・フィールドは、絶対(ピクセル 単位)のアタッチメントのときのみアクティブになります。[パーセント]テキスト・ フィールドは、パーセントテージのアタッチメントのときのみアクティブになります。 選択したオブジェクトは、4つの可能なアタッチメントの中央に表示されます。 アタッチメントは、上から始めて時計回りに、選択したオブジェクトの上端、選択した オブジェクトの右端、選択したオブジェクトの下端、選択したオブジェクトの左端に なっています。 上端および左端アタッチメントについて、以下に説明します。 デフォルトでは、オブジェクトは、親オブジェクトの上端と左端に接続します。選択した オブジェクト(4つの[接続先]ボックスの中央にあるオブジェクト)は、コントロールする オブジェクトです。このコントロールするオブジェクトを移動すると、ピクセルまたは パーセントのオフセットが変更します。接続したオブジェクトを移動した後、[リセット] をクリックして現在の値を確認してください。 接続した親オブジェクトをサイズ変更すると、その子オブジェクトは、親オブジェクト からのピクセルまたはパーセントのオフセットを維持します。子オブジェクトを移動する とオフセットは変わります。 選択したオブジェクトは兄弟オブジェクトを持たないときは、兄弟オブジェクトへの アタッチメントを示すアイコン(2つの小さな四角)はアクティブではありません。
| 小さな四角の上端からその周囲のボックスの上端へ上がっている線は、 選択したオブジェクトの上端の、その親オブジェクトの上端に対する絶対 (ピクセル・オフセット)アタッチメントを表しています。
| 小さな四角の上端からその周囲のボックスの下端に下がっている線は、 選択したオブジェクトの上端の、その親オブジェクトの下端に対する絶対 (ピクセル・オフセット)アタッチメントを表しています。 この値は、負の値です。Y座標は上がるにつれて正になり、下がるにつれて 負になります。
| 垂直線で接続された2つの垂直方向に揃った四角は、選択した オブジェクトの上端の、その兄弟オブジェクトの下端に対する絶対(ピクセル・オフ セット)アタッチメントを表しています。選択したオブジェクトを移動すると オフセットが変更します。選択したオブジェクトの上端が、兄弟オブジェクトの下端の 上にあるとき、この値は負の値になります。
| 上端の中心部への水平線で接続された2つの水平方向に揃った四角は、 選択したオブジェクトの垂直方向の中心部の、その兄弟オブジェクトの垂直方向の 中心部に対する絶対(ピクセル・オフセット)アタッチメントを表しています。 選択したオブジェクトを移動するとオフセットが変更します。 選択したオブジェクト中心部が、兄弟オブジェクトの中心部の上にあるとき、 この値は負の値になります。
| 双方向の矢印とパーセント記号が上にある四角は、 選択した オブジェクトの上端の、その親オブジェクトの上端に対するパーセントの オフセット・アタッチメントを表しています。 選択したオブジェクトを移動するとオフセットが変更します。
| パーセント記号が上にあり、四角の中心線と周囲のボックスの 上端との間に双方向の矢印がある四角は、選択したオブジェクトの中心線の、 その親オブジェクトの上端に対するパーセントのオフセット・アタッチメントを 表しています。 選択したオブジェクトを移動するとオフセットが変更します。
| 内側に対角線がある円は、端(上、左、下、右)から他のオブジェクト へのアタッチメントがないことを表しています。 デフォルトでは、ドロップしたオブジェクトには、右端または下端のアタッチメント はありません。

選択したオブジェクトの下端に対するアタッチメントの説明は、上端のアタッチメントの 説明と相関関係にあります。下端のアタッチメントの説明は、上記の説明の「上」を 「下」に、そして「下」を「上」に置き換えてたものに なります。通常は、上端と左端のアタッチメントのみを指定します。

| 周囲のボックスの左端から小さな四角の右端への水平線は、 選択したオブジェクトの右端の、その親オブジェクトの左端に対する 絶対(ピクセル・オフセット)アタッチメントを表しています。 選択したオブジェクトを移動するとオフセットが変更します。
| 周囲のボックスの右端から小さな四角の左端への水平線は、 選択したオブジェクトの左端の、その親オブジェクトの右端に対する 絶対(ピクセル・オフセット)アタッチメントを表しています。 選択したオブジェクトを移動するとオフセットが変更します。この値は、負の値です。 X座標は左に対して正、右に対しては負になります。
| 水平線で接続されたつの水平方向に揃った四角は、選択した オブジェクトの左端の、その兄弟オブジェクトの右端に対する絶対 (ピクセル・オフセット)アタッチメントを表しています。 選択したオブジェクトを移動するとオフセットが変更します。 選択したオブジェクトの左端が、兄弟オブジェクトの右端の左にあるとき、 この値は負の値になります。
| 左端の中心部への垂直線で接続された2つの垂直方向に揃った四角は、 選択したオブジェクトの水平方向の中心部の、その兄弟オブジェクトの水平方向の 中心部に対する絶対(ピクセル・オフセット)アタッチメントを表しています。 選択したオブジェクトを移動するとオフセットが変更します。 選択したオブジェクトが兄弟オブジェクトをもたないときは、このアイコンは アクティブではありません。 選択したオブジェクト中心部が、兄弟オブジェクトの中心部の左にあるとき、 この値は負の値になります。
| パーセント記号が上にある双方向の矢印をもつ四角は、選択した オブジェクトの左端の、その親オブジェクトの左端に対するパーセントの オフセット・アタッチメントを表しています。 選択したオブジェクトを移動するとオフセットが変更します。
| パーセント記号が左にあり、四角の中心線と周囲のボックス部 の左端との間に双方向の矢印がある四角は、選択したオブジェクトの中心線の、 その親オブジェクトの左端に対するパーセントのオフセット・アタッチメントを 表しています。 選択したオブジェクトを移動するとオフセットが変更します。

選択したオブジェクトの右端に対するアタッチメントの説明は、左端のアタッチメントの 説明と相関関係にあります。右端のアタッチメントの説明は、上記の説明の「左」を 「右」に、そして「右」を「左」に置き換えてたものに なります。通常は、上端と左端のアタッチメントのみを指定します。

### インタフェースでオブジェクトを接続するには

アタッチメント・エディタとその要素の説明は、ABUG.group.mkr.8を参照してください。

1. アプリケーション・ビルダの主ウィンドウの[エディタ]メニューから[アタッチメント] を選択し、アタッチメント・エディタを表示します。

   アタッチメント・エディタは、属性エディタで[アタッチメント]ボタンをクリックするか、 またはインタフェースまたはモジュール・ブラウザのポップアップ・メニューから [アタッチメント]を選択することによって、表示できます。

2. 親オブジェクトまたは兄弟オブジェクトに接続したいオブジェクトの型を選択します。

3. 接続したいオブジェクトを選択します。

4. アタッチメントの型を指定します。

   1つの小さな四角をもつアイコンを選択すると、子オブジェクトから親オブジェクトへの アタッチメントになります。2つの小さな四角をもつアイコンを選択すると、兄弟オブ ジェクトへのアタッチメントになります。アタッチメントの型の詳細は、ABUG.group.mkr.8を参照してください。

   アタッチメントを行うとき、選択したオブジェクト(4つの[接続先]ボックスの中央にある オブジェクト)がコントロールするオブジェクトです。このオブジェクトは親オブジェク トや兄弟オブジェクトの影響を受けずに移動できます。オフセット値またはパーセント 値は、2つのオブジェクト間で変更された関係を反映するために、変更されます。

   一方、他のオブジェクト(選択したオブジェクトが接続されているオブジェクト)を移動する と、選択したオブジェクトは、他のオブジェクトとの関係を保ちながら移動します。

   アタッチメント・エディタで変更内容が留意される前に、インタフェースでオブジェクトを移動後、必ず[リセット]をクリックします。

5. [了解]または[適用]をクリックして、変更内容を適用します。

   [了解]をクリックすると、アタッチメント・エディタが終了します。

## アタッチメント例: カスタム・ダイアログ

アプリケーション・ビルダのカスタム・ダイアログ・オブジェクトをドラッグ＆ドロップ して、アタッチメントの例を参照します。カスタム・ダイアログの一番下にある各ボタン は、それらを囲っているダイアログ・パネルの上端と両サイドに接続されています。 ボタンは、パネルの上端から5ピクセルの位置に接続され、パネルの左端からは一定のパーセンテージ(ボタン1の左端は10%、右端は30%。ボタン2の左端は40%、右端は60%。 ボタン3の左端は70%、右端は90%。)で接続されています。

ボタン1の左端は、パネルの左端からパネル幅の10%分だけ離れています。ボタン1の右端は、 パネルの右端からパネル幅の30%分だけ離れています。ボタン1は、常にパネル幅の20％分の 幅になります。 ボタン2の左端はパネルの左端から40%分、右端はパネルの左端から60%分だけ離れています。 ボタン3の左端はパネルの左端から70%分、右端はパネルの左端から90%分だけ離れています。

3つのボタンはパネルの拡大および縮小に合わせて、拡大したり縮小したりします。 ボタンとパネルの距離は、常に、パネル幅の10%分になります。