複合グラフィックの作成

> > > >

対応するコードは、インストールした製品の codefragments/composite/src/Composite.java ソース・ファイルで提供されます。詳細は、 <installdir> /jviews-framework89/codefragments/composite/index.html を参照してください。

このチュートリアルには次のような段階が含まれます。

段階 1 - 複合グラフィックの開始

複合グラフィック・オブジェクトを作成するには、以下の手順に従います。

複合グラフィック・パッケージをインポートします。
```
import ilog.views.graphic.composite.* ;
```
複合グラフィック・オブジェクトを作成します。
```
IlvCompositeGraphic composite = new IlvCompositeGraphic();
```

段階 2 - 添付レイアウトの作成

添付レイアウトでは、バウンディング・ボックスの記号点を選択して、最初のグラフィックに子グラフィックを添付することができます。

添付レイアウトを作成するには、以下の手順に従います。

レイアウト・パッケージをインポートします。
```
import ilog.views.graphic.composite.layout.*;
```

添付レイアウトを作成します。

IlvAttachmentLayout layout = new IlvAttachmentLayout();
composite.setLayout(layout);

段階 3 - 最初の子グラフィックの作成

IlvCompositeGraphic オブジェクトの最初の子グラフィックは、他の子グラフィックを配置するときの基準となります。この例で、最初の子グラフィックは IlvRectangle オブジェクトです。

最初の子オブジェクトを作成するには、以下の手順に従います。

矩形のオブジェクトを作成します。

IlvRectangle rectangle = new IlvRectangle(new IlvRect(0,0,40,40),true,true);
composite.setChildren(0,rectangle)

最初の子の位置は 0 です。添付レイアウトは、この最初の子を複合グラフィックの他の子 (兄弟グラフィック) を添付するときに使用します。

段階 4 - 子グラフィックの添付

ラベルは、子グラフィックとして添付できます。

下図で示されているように、9 つの異なる添付場所が利用できます。

添付場所

複合グラフィックにラベル付けするには、以下の手順に従います。

追加の子グラフィックを最初の子グラフィックに添付します。

IlvText text = new IlvText();
text.setLabel("Composite Graphic");
composite.setChildren(1,text);

矩形の下にラベルを配置します。

composite.setConstraints(1,
new IlvAttachmentConstraint(IlvAttachmentLocation.TopCenter,
IlvAttachmentLocation.BottomCenter));

これで、テキスト (IlvText) の上中央は、最初の子グラフィック (この例では IlvRectangle オブジェクト) の下中央に固定されます。

この時点で例を実行すると、次のような複合が得られます。ここで、「複合グラフィック」ラベルは、水平方向で対称になっている青い矩形に添付されています。

添付付きの複合グラフィック

段階 5 - スタッカー・レイアウトの使用

添付レイアウトを使用すると、2 つのオブジェクトをお互いを基準として複合グラフィック・オブジェクト内に配置できるほか、スタッカー・レイアウトを使用してオブジェクトを整列することができます。

スタッカー・レイアウトを使用して 3 つのアイコンを整列するには、以下の手順に従います。

3 つの小さい矩形を持つために、rectangles という名の複合グラフィックをもう 1 つ作成します。このグラフィックの役割は、これらの矩形を水平に整列することです。
```
IlvCompositeGraphic rectangles = new IlvCompositeGraphic();
```

スタッカー・レイアウトを作成し、複合グラフィック・オブジェクトに渡します。

IlvStackerLayout stacker = new IlvStackerLayout(SwingConstants.RIGHT,SwingConstants.BOTTOM,3);
rectangles.setLayout(stacker);

3 つの矩形を作成し、rectangles 複合グラフィックの子グラフィックとして設定します。

IlvRectangle r1 = new IlvRectangle(new IlvRect(0,0,5,5),true,true);
r1.setBackground(Color.red);
rectangles.setChildren(0,r1);

IlvRectangle r2 = new IlvRectangle(new IlvRect(0,0,5,5),true,true);
r2.setBackground(Color.yellow);
rectangles.setChildren(1,r2);

IlvRectangle r3 = new IlvRectangle(new IlvRect(0,0,5,5),true,true);
r3.setBackground(Color.green);
rectangles.setChildren(2,r3);

rectangles 複合グラフィックを、前の段階で構築された主となる複合グラフィックの子グラフィックにします。

composite.setChildren(2,rectangles);
composite.setConstraints(2,new IlvAttachmentConstraint(IlvAttachmentLocation.BottomLeft,IlvAttachmentLocation.TopRight));

この段階の最後では、次のような結果を取得します。

スタッカー・レイアウト

段階 6 - 中央揃えレイアウトの使用

中央添付 (「添付場所」を参照) とは異なり、中央揃えレイアウトは 2 つのグラフィックを処理する特別な機能、外部グラフィックと内部グラフィックを備えています。正確には、中央揃えレイアウトでは、複合は 2 つの子をレイアウトするコンテナーです。インデックス位置 0 にある最初のものは外部グラフィックで、インデックス位置 1 にある 2 番目のものは、内部グラフィックです。外部グラフィックは、内部グラフィックが外部グラフィックの中央に位置するように複合でサイズ変更されます。

この例では、テキスト「バルーン」を含んだ黄色の楕円から構成されるバルーンを作成し、前の段階で構築された複合グラフィックの新しい子として追加します。バルーンは、中央揃えレイアウトを使用してテキストと楕円をそれぞれ配置する新しい複合グラフィックです。次の手順では、複合オブジェクトを新規オブジェクト (バルーン)、外部グラフィック (楕円)、内部オブジェクト (テキスト) として作成し、バルーンを主となる複合グラフィックに添付します。

バルーンを作成してテキストを中央に配置するには、以下の手順に従います。

中央揃えレイアウトでバルーン複合グラフィックを作成します。

IlvCompositeGraphic balloon = new IlvCompositeGraphic();
IlvCenteredLayout centered = new IlvCenteredLayout(new Insets(5,5,5,5));
balloon.setLayout(centered);

外部グラフィックを IlvEllipse のインスタンスとして作成します。

外部グラフィックは、常に位置 0 の最初の子で、中央揃えレイアウトの複合グラフィックです。この子は、複合で手順 1 で中央揃えレイアウト ((5,5,5,5)) に指定したインセットで拡張された内部グラフィックのサイズにサイズ変更されます。
```
IlvEllipse ellipse = new IlvEllipse();
ellipse.setFillOn(true);
ellipse.setBackground(Color.yellow);
balloon.setChildren(0,ellipse);
```
内部グラフィックを IlvText のインスタンスとして作成します。

内部グラフィックは、常に位置 1 の 2 番目の子で、中央揃えレイアウトの複合グラフィックです。
```
IlvText balloonText = new IlvText(new IlvPoint(0,0),"Balloon");
balloon.setChildren(1,balloonText);
```

IlvAttachmentConstraint を使用して、バルーンを主となる複合グラフィックに添付します。

composite.setChildren(3,balloon);
composite.setConstraints(3,new IlvAttachmentConstraint(IlvAttachmentLocation.BottomCenter,IlvAttachmentLocation.TopLeft));

この段階の最後では、「中央揃えレイアウト」に示すような複合グラフィックを取得します。

中央揃えレイアウト

現在のセクション

複合グラフィック