CSS における複合ノードの構築

> > > > >

このセクションでは、スタイル・シートで直接、複合グラフィックスを構築して、ノードを複合グラフィックスとしてスタイリングする方法を説明します。

このソリューションで提供される手順に従うと、以下の図に示される複合グラフィックを取得することになります。

複合グラフィックのダイアグラムで、Balloon というラベルの黄色の楕円形、その下に青い正方形、その青い正方形の右上先端に、赤、黄、緑の小さい正方形が水平に並べて示されています。
Composite Graphics というラベルが、青い正方形の下に表示されています。

複合グラフィックの例

この複合グラフィック自体に複合グラフィックスが含まれていることに注意してください。

この複合グラフィックは、特定のユーザー定義タイプのノードを表すために使用されます。

表示されるデータは、以下のコード例に示すように、XML ファイルから取得されます。

XML データ・ファイル例

<?xml version="1.0" encoding="UTF-8"?>
<SDM>
  <MyNode >
    <property name="x">100</property>
    <property name="y">100</property>
    <property name="label">Composite Graphic</property>
    <property name="alarm">Balloon</property>
  </MyNode>
</SDM>

ノードが 1 つのみ、ユーザー定義タイプ MyNode で定義されます。

x および y プロパティーにより、ノードのロケーションが示されます。

他のプロパティーはそれぞれ、複合グラフィックの子としてスタイリングされます。

CSS において複合ノードを構築するには、以下の手順に従います。

複合グラフィックスを使用可能にします。

スタイル・シート内の複合グラフィックスを使用するには、以下のように SDM ルール内で Composite Graphics 機能を使用可能にします。
```
SDM {
   Composite:true;
}
```
一部のオブジェクトを複合グラフィックスとしてカスタマイズします。

以下のように、ユーザー定義タイプ MyNode のオブジェクトを複合グラフィックスとしてカスタマイズするためのルールを追加します。
```
node.MyNode {
   class:'ilog.views.sdm.graphic.IlvSDMCompositeNode';
   children[0]:@+Rectangle;
}
Subobject#Rectangle {
   class:'ilog.views.graphic.IlvRectangle';
   width:40;
   height:40;
   fillOn:true;
   background:blue;
}
```
Rogue Wave® JViews Diagrammer における複合グラフィックは、クラス IlvSDMCompositeNode のインスタンスです。少なくとも 1 つの子要素を常に含んでいます。この 1 番目の子が、children 配列において、インデックス 0 になります。この例では、1 番目の子は、 IlvRectangle オブジェクトとして作成されます。これは、別のルールで、ID Rectangle を使用して定義されます。

このステージでは、以下の図に示すように MyNode ノードが SDM エンジンによって表示されます。

1 番目の子要素のみを持つ複合ノード
装飾された子を追加します。

MyNode オブジェクトのラベル属性を表示するには、以下のコード例に示すように、 MyNode ルールに別の子要素を追加します。
```
node.MyNode {
   class:'ilog.views.sdm.graphic.IlvSDMCompositeNode';
   layout:@+AttachmentLayout;
   children[0]:@+Rectangle;
   children[1]:@+Label;
   constraints[1]:@=attachmentLabel;
}

...

Subobject#AttachmentLayout {
   class:'ilog.views.graphic.composite.layout.IlvAttachmentLayout';

}

Subobject#Label {
   class:'ilog.views.graphic.IlvText';
   label:@label;

}
Subobject#attachmentLabel {
   class:'ilog.views.graphic.composite.layout.IlvAttachmentConstraint';
   hotSpot:TopCenter;
   anchor:BottomCenter;
}
```
この 2 番目の子は、children 配列において、インデックス 1 になります。この例では、2 番目の子は、 IlvText オブジェクトとして作成されます。これは、別のルールで、ID Label を使用して定義されます。

さらに追加する子がある場合は、使用するレイアウトを指定する必要があります。この場合、添付レイアウトが適切です。添付レイアウトが最も汎用的であるためです。また、2 番目の子を 1 番目に添付する方法を指定する制約も追加する必要があります。 constraints 配列のインデックスは、children 配列のインデックスに対応していなければなりません。

添付の制約の場合、別のルールに以下のプロパティーを指定する必要があります。
- hotSpot - これは、後続の子オブジェクトが添付される、その子オブジェクト上のポイントです。
- anchor - これは、後続の子が添付される最初の子上のポイントです。
このステージでは、図 1 番目の子要素のみを持つ複合ノードに示すように MyNode ノードが SDM エンジンによって表示されます。

添付は共有することができ、MyNode ルールで CSS 構造 @= が使用されることに注意してください。子グラフィックスは、共有することができないため、CSS 構造 @+ を使用して作成されます。

警告

複合グラフィックスの定義に @# 構造を使用してはいけません。 @+ 構造と @= 構造のみが許可されます。@# を使用すると、間違ったレイアウトや矛盾したレイアウトになる可能性があります。

2 つの子要素を持つ複合ノード

2 番目の子 ( IlvText オブジェクト) の中央上が 1 番目の子 ( IlvRectangle オブジェクト) の中央下にアンカーで固定されています。

添付レイアウトには、以下の図に示すように 9 つの可能性のある添付ロケーションがあります。

可能性のある添付ロケーション
整列ネスト複合グラフィックを追加します。

青い矩形の右上隅に 3 つの小さい矩形を追加するには、それ自体が複合グラフィックである子を追加する必要があります。

まず、次のコード例に示すように3 つの矩形に ID Rect1、Rect2、および Rect3 を定義します。これらは、単純なグラフィック・オブジェクトで、ネスト複合グラフィックを構成します。
```
Subobject#Rect1 {
   class:'ilog.views.graphic.IlvRectangle';
   width:5;
   height:5;
   background:red;
   fillOn:true;
}
Subobject#Rect2 {
   class:'ilog.views.graphic.IlvRectangle';
   width:5;
   height:5;
   background:yellow;
   fillOn:true;
}
Subobject#Rect3 {
   class:'ilog.views.graphic.IlvRectangle';
   width:5;
   height:5;
   background:green;
   fillOn:true;
}
```
次に、以下のコード例に示すように、子要素を MyNode ルールに追加します。
```
node.MyNode {
...
   children[2]:@+Rectangles;
...
   constraints[2]:@=attachmentRectangles;
}

...

Subobject#Rectangles {
   class:'ilog.views.sdm.graphic.IlvSDMCompositeNode';
   layout:@+StackerLayout;
   children[0]:@+Rect1;
   children[1]:@+Rect2;
   children[2]:@+Rect3;
}
Subobject#attachmentRectangles {
   class  : "ilog.views.graphic.composite.layout.IlvAttachmentConstraint" ;
   hotSpot:BottomLeft;
   anchor:TopRight;
}
Subobject#StackerLayout {
   class:'ilog.views.graphic.composite.layout.IlvStackerLayout';
}
```
この 3 番目の子は、children 配列において、インデックス 2 になります。これは、複合グラフィック、すなわち、 IlvSDMCompositeNode オブジェクトであり、別のルールに ID Rectangles を使用して定義されています。

Subobject#Rectangles ルールでは、3 つの子に使用するレイアウトを指定する必要があります。この場合、スタッカー・レイアウトが適切です。スタッカー・レイアウトは、水平方向、垂直方向のいずれでも、グラフィックの整列に使用されるためです。この例において、水平に整列させるグラフィックは、複合ノードの子です。

また、3 番目の子を 1 番目に添付する方法を指定する制約を MyNode ルールに追加する必要もあります。この例では、3 番目の子 (IlvSDMCompositeNode オブジェクト) の左下が、1 番目の子 (IlvRectangle オブジェクト) の右上にアンカーで固定されます。

このステージでは、以下の図に示すように MyNode ノードが SDM エンジンによって表示されます。

3 つの子要素を含む複合ノードで、その 1 つは複合グラフィック
中央揃えネスト複合グラフィックを追加します。

最後に、情報バルーンを追加して alarm 属性を表示します。

テキストを含む情報バルーンを追加するには、それ自体が複合グラフィックである別の子を追加する必要があります。

まず、次のコード例で示すように、楕円形と Ellipse と BalloonLabel という ID の付いたラベルを定義します。これらは、単純なグラフィック・オブジェクトで、ネスト複合グラフィックを構成します。
```
Subobject#Ellipse {
   class:'ilog.views.graphic.IlvEllipse';
   background:yellow;
   fillOn:true;
}
Subobject#BalloonLabel {
   class:'ilog.views.graphic.IlvText';
   label:@alarm;

}
```
次に、以下のコード例に示すように、子要素を MyNode ルールに追加します。
```
node.MyNode {
   ...
   children[3]:@+Balloon;
  ...
   constraints[3]:@=attachmentBalloon;
}
...
Subobject#Balloon {
   class:'ilog.views.sdm.graphic.IlvSDMCompositeNode';
   layout:@+CenteredLayout;
   children[0]:@+Ellipse;
   children[1]:@+BalloonLabel;

}
Subobject#CenteredLayout {
   class:'ilog.views.graphic.composite.layout.IlvCenteredLayout';
   insets:5,5,5,5;
}

Subobject#attachmentBalloon {
   class:'ilog.views.graphic.composite.layout.IlvAttachmentConstraint';
   hotSpot:BottomCenter;
   anchor:TopLeft;
}
```
この 4 番目の子は、children 配列において、インデックス 3 になります。これは複合グラフィックで、すなわち、 IlvSDMCompositeNode オブジェクトであり、別のルールに ID Balloon を使用して定義されています。

Subobject#Balloon ルールでは、2 つの子に使用するレイアウトを指定する必要があります。この場合、中央揃えレイアウトが適切です。中央揃えレイアウトは、1 つのグラフィックを別のグラフィックと中央揃えにする場合に使用されるためです。中央揃えレイアウトにより、外部グラフィック (インデックス 0 にある子) を内部グラフィック (インデックス 1 にある子) の周囲に表示できます。 4 つの insets で、外部グラフィックのバウンディング・ボックスの各端からの距離をピクセルで指定します。複合グラフィックのサイズが変更されると、2 つの子オブジェクトが、それぞれの相対位置を維持することに注意してください。

また、4 番目の子を 1 番目に添付する方法を指定する制約を MyNode ルールに追加する必要もあります。この例では、4 番目の子 (IlvSDMCompositeNode オブジェクト) の中央下が、1 番目の子 (IlvRectangle オブジェクト) の左上にアンカーで固定されます。

このステージでは、図複合グラフィックの例に示すように、MyNode ノードが必要に応じて、SDM エンジンによって表示されます。

現在のセクション

複合グラフィックスの使用