第 7 章 オブジェクトのグループ化と接続
テキストの変更 (国際化対応を含む) やウィンドウのサイズ変更にかかわらず、インタフェース・オブジェクトに対して、一貫した空間とサイズの関係を確実に維持するために、コントロール・オブジェクトのグループ化とオブジェクト同士の接続が必要な場合があります。
この章では、動的なレイアウト動作でオブジェクトをグループ化および接続する方法について説明します。
オブジェクトのグループ化
グループは、単体として処理できるオブジェクトの集まりです。1 グループ内のオブジェクトが必要に応じて配置されると、そのグループは、個々のオブジェクトの相対的な配置を維持しながら移動できます。グループは、動的レイアウトでオブジェクトを配置するので、グループ内における間隔および配列は、そのグループ内のオブジェクトがサイズを変更しても維持されます。
エディタとその属性の詳細は、「グループ属性エディタ」を参照してください。
グループを作成するには
-
グループに入れるコントロール・オブジェクトを選択します。
インタフェースか [モジュール・ブラウザ] のどちらかで、しかも最も都合のよい方法でオブジェクトを選択できます。選択方法については、「インタフェースまたはブラウザでコントロール・オブジェクトを選択するには」を参照してください。
-
[レイアウト] メニューまたはポップアップ・メニュー (カーソルがウィンドウ・インタフェースまたは [モジュール・ブラウザ] にある状態で、マウス・ボタン 3 を押すと表示される) から、[グループ化] を選択します。
インタフェースでは、グループの周りに矩形のボックスが描画され、そのグループが選択されたことを示します。[グループの解体] は、グループが選択されている場合、[レイアウト] メニューおよびポップアップ・メニューでアクティブなので注意してください。
[モジュール・ブラウザ] では、新規オブジェクトが選択表示されます。このオブジェクトは、「group」(モジュール内に他のグループが存在している場合には「group 2」など) と呼ばれます。グループ・オブジェクトは、グループを構成するオブジェクトの親です。グループ・メンバーは、それぞれ独自に移動できません。グループ内のオブジェクトを移動しようとすると、そのグループ全体が移動してしまいます。
グループ属性を編集するには
グループ属性 (水平または垂直方向の揃え方と、オブジェクト間の間隔を含む) は、グループ属性エディタで設定します。
-
インタフェースまたは [モジュール・ブラウザ] で、グループをダブルクリックします。
グループが、属性エディタで選択されます。インタフェースでは、グループ・メンバ間のスペースをクリックして、グループを選択しなければなりません。
あるいは、主ウィンドウの [エディタ] メニューから [グループ化] を選択して、グループ属性エディタを表示することもできます。[エディタ] メニューから [グループ化] を選択することは、オブジェクト型として [グループ] を選択した属性エディタで、[ティアオフ] をクリックするのと同じです。
-
必要であれば、[グループ・オブジェクト] リストから、編集するグループを選択します。
-
完成したインタフェースでグループにボーダを持たせる場合は、ボーダ枠スタイルを選択します (デフォルトは、ボーダなし)。
ボーダ枠スタイルの選択肢は、[外側のシャドウ]、[内側のシャドウ]、[外側エッチング]、[内側エッチング]、および [なし] です。
-
[レイアウトの型] を選択します。
選択肢は、[任意]、[垂直]、[水平]、および [行／列] です。
その選択に従って、[垂直揃え] または [水平揃え] のオプション・メニューのどちらか、またはその両方がアクティブになります。[行／列] を選択した場合は、[行数] および [列数] のラジオ・ボタンもアクティブになります。
-
行数または列数を指定します ([行／列] のレイアウト型を選択した場合)。
行数を指定した場合は自動的に列数が決まり、列数を指定した場合は自動的に行数が決まります。
-
垂直の揃え方を選択します ([垂直] または [行／列] のレイアウト型を選択した場合)。
選択肢は、オブジェクトの左端揃え (デフォルト)、コロン／ラベル合わせ揃え、オブジェクトの中央揃え、またはオブジェクトの右端揃えです。
-
垂直の間隔を選択します ([垂直] または [行／列] のレイアウト型を選択した場合)。
値はピクセル単位で、10 がデフォルト値です。
-
水平の揃え方を選択します ([水平] または [行／列] のレイアウト型を選択した場合)。
選択肢は、オブジェクトの上端揃え (デフォルト)、オブジェクトの中央揃え、またはオブジェクトの下端揃えです。
-
水平の間隔を選択します ([水平] または [行／列] のレイアウト型を選択した場合)。
値はピクセル単位で、10 がデフォルト値です。
-
アプリケーションが開いている時にグループ内のオブジェクトを表示しない場合は、[可視] の選択を解除します。
-
アプリケーションが開いている時にグループ内のオブジェクトをアクティブにしない場合は、[アクティブ] の選択を解除します。
インタフェースでオブジェクトのグループを解体するには
-
[モジュール・ブラウザ] またはインタフェースで、グループを選択します。
インタフェースでは、グループ内のオブジェクト間をクリックして、グループを選択します。2 つ以上のオブジェクトの周りにボックスが表示されることで、グループが選択されたことが分かります。
インタフェースでグループを選択できない場合、または多数のグループを持つインタフェースで正しいグループを選択する場合は、[モジュール・ブラウザ] を開きます。グループが、その名前で [モジュール・ブラウザ] に表示されます。[モジュール・ブラウザ] でグループを選択した場合は、インタフェースでも選択されています。
-
[レイアウト] メニュー、またはインタフェースのポップアップ・メニュー (インタフェース・ウィンドウでマウス・ボタン 3 を押すと表示される) から [グループの解体] を選択します。
オブジェクトは、グループの一部ではなくなります。任意のオブジェクトを選択できます。また、他のオブジェクトとは無関係に移動することもできます。
オブジェクトの周囲にボーダを作成するには
グループ機能は、個々のオブジェクトの周りにボーダ (たとえば、ラベル) を作成するのに使用できます。
-
インタフェースでオブジェクトを選択します。
-
[レイアウト] メニューまたはインタフェースのポップアップ・メニューから、[グループ化] を選択します。
オブジェクトがグループに入ります。
-
グループ属性エディタを表示します。
-
ボーダを作成するグループを選択します。
[モジュール・ブラウザ] でグループをダブルクリックした場合は、グループが選択されているグループ属性エディタが表示されます。
-
オブジェクトに追加する [ボーダ枠] のスタイルを選択します。
-
[了解] をクリックして変更内容を適用し、グループ属性エディタを終了します。
オブジェクトの接続
アタッチメント (およびアタッチメントに基づくグループ) は、インタフェース内のオブジェクトの動的なレイアウト動作を確立します。動的なレイアウト動作により、オブジェクトはサイズ変更時における一貫した関係を確実に維持します。国際化対応がなされたアプリケーションは、アタッチメントにより、多くのロケールにおいて問題なく動作します。
すべての子オブジェクトは、デフォルトでは、親オブジェクトの左上端で接続されます。したがって、メイン・ウィンドウ上にドロップしたコントロール区画は、メイン・ウィンドウの左上端で接続されます。コントロール区画上にドロップしたボタンも同様に、コントロール区画に接続されます。
親オブジェクトが上方向または左方向にサイズが変更されると、子オブジェクトも親オブジェクトとともに移動します。この時、親の左上端との距離は保たれます。
区画オブジェクトがその親の上端または左端にドロップされると、このオブジェクトはオフセット 0 でその端に接続されます。その親の右側で左上端の下にドロップされると、正のオフセットになります。
区画オブジェクトがその親オブジェクトに重なるように右下端からサイズを変更すると、このオブジェクトはその親の右下端に接続されます。
アタッチメント・エディタ
レイアウトのためにオブジェクト同士を接続するのに使用するアタッチメント・エディタについて説明します。
- オブジェクト型
-
アタッチメントを接続するオブジェクトの型を選択するオプション・メニュー。オブジェクトの中には、親がないものがあり、これらはメニューに含まれていません (カスタム・ダイアログ、ファイル選択ダイアログ、メイン・ウィンドウ)。
- オブジェクト
-
アタッチメントを接続するオブジェクトを選択するスクロール・リスト
- 親
-
選択したオブジェクトの親を示すテキスト・フィールド
- 子
-
親オブジェクトの子をリストするスクロール・リスト
- 親アタッチメント／子のアタッチメント
-
選択したオブジェクトの親アタッチメント、または選択したオブジェクトの子のアタッチメントを表示するラジオ・ボタン
オブジェクトの中には子を持たずに、メイン・ウィンドウまたはカスタム・ダイアログの子になるものがあります (描画領域区画、端末区画、テキスト区画)。その場合、親アタッチメントも子のアタッチメントもアクティブにはなりません。ただし、その区画が別の区画の子である場合、または階層化された区画の一部である場合は、親アタッチメントがアクティブになります。
- 接続先
-
選択したオブジェクトのアタッチメントの型を選択し、オブジェクトを何に接続するかを指定するオプション・メニュー。また、選択したオブジェクトおよびその親や兄弟 (同じ親を持つ別の兄弟) からのオフセット (ピクセル単位) を指定するテキスト・フィールドと、選択したオブジェクトのその親からのパーセンテージ・オフセットを指定するテキスト・フィールドもあります。
「接続先: 」の下にあるオプション・メニューは、接続する兄弟を選択するためのもので、兄弟アタッチメント (2 つの小さな四角) の場合のみアクティブになります。[オフセット] テキスト・フィールドは、(ピクセル) アタッチメントの場合のみアクティブになります。[パーセンテージ] テキスト・フィールドは、パーセンテージ・アタッチメントの場合のみアクティブになります。
選択したオブジェクトは、4 つの可能なアタッチメントの中央に表示されます。アタッチメント (上から始まり、時計回り) は、選択したオブジェクトの上端、選択したオブジェクトの右端、選択したオブジェクトの下端、および選択したオブジェクトの左端です。
次に、上端アタッチメントと左端アタッチメントについて説明します。デフォルトでは、オブジェクトは、その親の上端および左端に接続されます。選択したオブジェクト (4 つの [接続先] ボックスの中央にあるオブジェクト) は、コントロール・オブジェクトです。このコントロール・オブジェクトを移動した場合、ピクセルまたはパーセントのオフセットが変更されます。接続したオブジェクトを移動後に、[リセット] をクリックして現在の値を確認してください。
接続した親オブジェクトのサイズが変更されても、その子オブジェクトは、親からのピクセル・オフセットまたはパーセントのオフセットをそのまま維持します。子オブジェクトを移動すると、オフセットは変わります。
選択したオブジェクトに兄弟がない場合、兄弟アイコン (2 つの小さな四角) はアクティブではありません。
小さな四角の上端からその周囲のボックスの上端へと上がっていく線は、選択したオブジェクトの上端の、その親の上端に対する絶対 (ピクセル・オフセット) アタッチメントを表します。
小さな四角の上端からその周囲のボックスの下端へと下がっていく線は、選択したオブジェクトの上端の、その親の下端に対する絶対 (ピクセル・オフセット) アタッチメントを表します。この値は負の数です。y 値は、上がるにつれて正になり、下がるにつれて負になるからです。
垂直線によって接続された 2 つの垂直揃えの四角は、選択したオブジェクトの上端の、その兄弟の下端に対する絶対 (ピクセル・オフセット) アタッチメントを表します。選択したオブジェクトを移動すると、オフセットは変わります。選択したオブジェクトの上端が、その兄弟の下端より上にある場合、この値は負になります。
その上端の中心部に対する水平線によって接続された 2 つの水平揃えの四角は、選択したオブジェクトの垂直中心部の、その兄弟の垂直中心部に対する絶対 (ピクセル・オフセット) アタッチメントを表します。選択したオブジェクトを移動すると、オフセットは変わります。選択したオブジェクトの中心部が、その兄弟の中心部より上にある場合、この値は負になります。
双方向の矢印で、その上にパーセント記号がある四角は、選択したオブジェクトの上端の、その親の上端に対するパーセントのオフセット・アタッチメントを表します。選択したオブジェクトを移動すると、オフセットは変わります。
その上にパーセント記号があり、四角の中心線と周囲のボックスの一番上との間に双方向の矢印を持つ四角は、選択したオブジェクトの中心部の、その親の上端に対するパーセントのオフセット・アタッチメントを表します。選択したオブジェクトを移動すると、オフセットは変わります。
内に対角線のある円は、端 (上、左、下、または右) から別のオブジェクトへアタッチメントがないことを表しています。デフォルトでは、ドロップされたオブジェクトには、右端または下端のアタッチメントがありません。
注 -選択したオブジェクトの下端に対するアタッチメントの説明は、上述した上端のアタッチメントの説明と相関関係にあります。下端のアタッチメントの場合は、上述の説明の「上」を「下」、「下」を「上」に置き換えてください。通常は、上端および左端のアタッチメントだけを使用します。
周囲のボックスの左端から小さな四角の左端への水平線は、選択したオブジェクトの左端の、その親の左端に対する絶対 (ピクセル・オフセット) アタッチメントを表します。選択したオブジェクトを移動すると、オフセットは変わります。
周囲のボックスの右端から小さな四角の左端への水平線は、選択したオブジェクトの左端の、その親の右端に対する絶対 (ピクセル・オフセット) アタッチメントを表します。選択したオブジェクトを移動すると、オフセットは変わります。この値は負の数です。x 値は、左に対しては正になり、右に対しては負になるからです。
水平線によって接続された 2 つの水平揃えの四角は、選択したオブジェクトの左端の、その兄弟の右端に対する絶対 (ピクセル・オフセット) アタッチメントを表します。選択したオブジェクトを移動すると、オフセットは変わります。選択したオブジェクトの左端が、その兄弟の右端の左にある場合、この値は負になります。
左端の中心部に対する垂直線によって接続された 2 つの垂直揃えの四角は、選択したオブジェクトの水平中心部の、その兄弟の水平中心部に対する絶対 (ピクセル・オフセット) アタッチメントを表します。選択したオブジェクトを移動すると、オフセットは変わります。このアイコンは、選択したオブジェクトに兄弟がない場合は、アクティブではありません。選択したオブジェクトの中心部が、その兄弟の中心部の左にある場合、この値は負になります。
双方向の矢印で、その上にパーセント記号がある四角は、選択したオブジェクトの左端の、その親の左端に対するパーセントのオフセット・アタッチメントを表します。選択したオブジェクトを移動すると、オフセットは変わります。
上にパーセント記号があり、四角の中心線と周囲のボックスの左端との間に双方向の矢印を持つ四角は、選択したオブジェクトの中心部の、その親の左端に対するパーセントのオフセット・アタッチメントを表します。選択したオブジェクトを移動すると、オフセットは変わります。
注 -
選択したオブジェクトの右端に対するアタッチメントの説明は、上述した左端のアタッチメントの説明と相関関係にあります。右端のアタッチメントの場合は、上述の説明の「左」を「右」、「右」を「左」に置き換えてください。通常、上端および左端のアタッチメントだけを使用します。
インタフェースでオブジェクトを接続するには
アタッチメント・エディタの解説とその要素については、「アタッチメント・エディタ」を参照してください。
-
アプリケーション・ビルダの主ウィンドウの [エディタ] メニューから [アタッチメント] を選択して、アタッチメント・エディタを表示します。
アタッチメント・エディタは、属性エディタの [アタッチメント] ボタンをクリックするか、インタフェースまたは [モジュール・ブラウザ] のポップアップ・メニューから [アタッチメント] を選択することによっても表示できます。
-
その親または兄弟に接続するオブジェクトの型を選択します。
-
接続するオブジェクトを選択します。
-
アタッチメントの型を選択します。
1 個の小さな四角を持つアイコンを選択した場合は、子オブジェクトからその親へのアタッチメントになります。2 個の小さな四角を持つアイコンを選択した場合は、兄弟アタッチメントになります。アタッチメントの型については、「アタッチメント・エディタ」を参照してください。
アタッチメントを行う場合、選択したオブジェクト (4 つの [接続先] ボックスの中央にあるオブジェクト) は、コントロール・オブジェクトです。つまり、このオブジェクトは、その親や兄弟に影響を与えることなく移動できます。オフセット値またはパーセンテージの値は、2 つのオブジェクト間の変更された関係を反映するために変わります。
一方、他のオブジェクト (選択したオブジェクトが接続されるオブジェクト) を移動した場合、選択したオブジェクトは、他のオブジェクトとの関係を維持したまま移動します。
変更がアタッチメント・エディタで記述される前に、インタフェース内でオブジェクトを移動した後、必ず [リセット] をクリックします。
-
[了解] か [適用] をクリックして、変更内容を適用します。
アタッチメント例: カスタム・ダイアログ
アプリケーション・ビルダのカスタム・ダイアログのオブジェクトをドラッグ＆ドロップして、アタッチメントの例を参照します。カスタム・ダイアログの一番下にある各ボタンは、それらを囲っているダイアログ・パネルの上部および側部に接続されます。
ボタンは、パネルの一番上から 5 ピクセル離れて接続され、パネルの左端からのパーセンテージは一定の間隔を保ちます (ボタン 1 は左端 10%、右端 30%、ボタン 2 は左端 40%、右端 60%、ボタン 3 は左端 70%、右端 90% です)。
ボタン 1 の左端は、パネルの左端から常に (パネル幅の) 10% 分の距離にあり、このボタンの右端は、パネルの左端から常に (パネル幅の) 30% 分の距離にあります。このため、ボタン 1 の幅は、パネル幅の 20% 分になります。同様に、ボタン 2 の場合、パネルの左端からの距離は左端が 40% 分、右端が 60% 分で、ボタン 3 の場合、左端が 70% 分、右端が 90% 分です。
3 つのボタンは、パネルの拡大縮小に合わせて大きくなったり小さくなったりしますが、お互いの間隔は、常にパネルの全体幅の 10% 分になります。
- © 2010, Oracle Corporation and/or its affiliates