選択インタラクター

> > > > >

選択インタラクターにより、1 つ以上のオブジェクトを選択して、ページのフルリフレッシュを行わずに、選択したオブジェクトを移動することができます。

1 つのオブジェクトを定義する場合は、以下のタグを使用します。

<jvdf:selectInteractor id="select"/>

オブジェクトをビューに設定するには、以下のタグを使用します。

<jvdf:diagrammerView id="thediagrammer" interactorId="select"/>

メモ

オブジェクトをクリックすると単にサーバー・サイド・アクションがトリガーされるようにする場合は、代わりに nodeOrLinkSelectInteractor を使用してください。

移動選択

以下の条件を満たしている場合に、選択インタラクターにより、選択対象を移動することができます。

インタラクターの moveAllowed プロパティーが true (デフォルト値) に設定されている。
サーバー・サイド・オブジェクトが移動可能である。
ノード・レイアウトが無効になっている。

基本選択管理構成

以下のように、diagrammerView タグでファセットを使用して、選択の実行および表示方法をカスタマイズできます。

<jvdf:diagrammerView id="thediagrammer" interactorId="select">
  <f:facet name="selectionManager">
      <jvdf:selectionManager imageMode="false" […] />
  </f:facet>
</jvdf:diagramerView>

選択マネージャーには、以下の 2 つの表示モードがあります。

イメージ・モード
イメージは、各選択の実行後に更新されます。選択が行われるたびに、サーバーに対して新しいイメージを要求します。これにより、クライアントは、最適な選択グラフィックを取得できます。
通常モード
選択を表す矩形がビューの上部に表示されます。サーバーへの往復通信を最小限にとどめます。新しいイメージの生成が不要であるため、応答時間がより速くなりますが、選択によるフィードバックは選択矩形に限られます。

デフォルト・モードは、イメージ・モードです。

通常選択モードで使用される選択矩形の線の幅や色などの、その他のパラメーターを選択マネージャーで構成できます。

<jvdf:selectionManager lineWidth="2" lineColor="red"/>

選択に関する情報

選択の変更時に呼び出されるリスナーを登録できます。

<jvdf:selectionManager onSelectionChanged="displayProperties(selection)"/>

onSelectionChanged 属性値は、選択が変更されたときに実行される JavaScript™ コードです。実行コンテキストは、 selection 変数を定義します。これは、現在の選択を IlvSelectionRectangle インスタンスの配列として保管します。

JavaScript コードは、以下のような関数になります。

// Alert the ID and bounds of all the selected objects
function displayProperties(selection) {
  for (var i = 0; i < selection.length; i++)
   alert(selection[i].getID()+" "+selection[i].getBounds());  
}

選択オブジェクトの ID およびバウンド・プロパティーのほかに、 JViews Diagrammer モデルで選択したノードやリンクのプロパティーも取得できます。

これは、以下のように、選択マネージャーでプロパティー・アクセサーを構成することにより行えます。

<jvdf:selectionManager propertyAccessor="#{serverBean.propertyAccessor}" [...] />

以下も指定します。

public class ServerBean {
  private IlvFacesDiagrammerPropertyAccessor accessor = 
  new IlvFacesDiagrammerPropertyAccessor();
  public IlvFacesDiagrammerPropertyAccessor getPropertyAccessor() {
    return accessor;
  }
}

IlvFacesDiagrammerPropertyAccessor には、モデル・プロパティーへのアクセス方法を構成または限定するために呼び出したり再定義したりできる複数のメソッドが含まれています。

一度実行すると、以下のように、JavaScript で、 IlvSelectionRectangle のすべてのメソッドおよびコードにアクセスできます。

// Alert all the properties of all the selected objects
function displayProperties(selection) {
  for (var i = 0; i < selection.length; i++) {
    var propertiesNames = selection[i].getObjectPropertyNames();
    for (var j = 0; j < propertiesNames.length; j++)
        alert(selection[i].getObjectProperty(propertiesNames[j]));
  }   
}

さらに、以下のように diagrammerView が編集可能に設定されていると、

<jvdf:diagrammerView editable="true" [...] />

サーバー上のモデルにコミットできるようにプロパティーをクライアントで設定することもできます。これを行うには、以下のコードを使用します。

// Modify a property on the first selected object
thediagrammer.getSelectionManager().getSelection()[0].
setObjectProperty("propertyName","propertyValue");
// [other modifications]
thediagrammer.getSelectionManager().
     commitSelectionProperties(true, oncompleted, onfailed);

ここで、

oncompleted は、新しい値の設定時に発生した可能性があるエラーに対処するために、サーバーが変更を完了した際に呼び出される JavaScript 関数です。 oncompleted メソッドのパラメーターは、 IlvSelectionPropertiesError オブジェクトの配列です。
onfailed は、ネットワーク上の問題によりコミットできなかった場合に呼び出される JavaScript 関数です。

イメージ・モードで選択を実行中に、クライアント側で、選択したオブジェクトのプロパティー情報を取得するには、 forceUpdateProperties プロパティーを true に設定して、追加の要求を強制的に行う必要があります。通常のモードでは、余分なオーバーヘッドをかけずにこの機能を使用できます。

ID によるオブジェクトの選択

以下の JavaScript メソッドを使用して、クライアント側でオブジェクトの ID によってオブジェクトを選択することができます。 IlvAbstractSelectionManager.selectById.

オブジェクトの ID は、SDM モデルを使用して取得されます (「データ・モデル・オブジェクトの動作の実装」を参照してください)。あるいは、JViews Diagrammer のメソッド getID を直接使用して ID を取り出すこともできます。

以下の JavaScript メソッド呼び出しにより、1 つのオブジェクトを選択できます。

thediagrammer.getSelectionManager().selectById("nodeId");

このメソッド呼び出しは、現在選択されているオブジェクトを選択解除して、ID が nodeId のオブジェクトを選択します。以下のようにノードの選択または選択解除を行うことにより、選択を拡張または削減できます。

thediagrammer.getSelectionManager().selectById("nodeId", true);

このメソッド呼び出しは、既存の選択を保持したまま、 ID nodeId のオブジェクトがまだ選択されていない場合は選択し、すでに選択されている場合は選択解除します。

選択のクリア

選択をクリアする場合は、以下の JavaScript メソッド呼び出しを使用します。 IlvAbstractSelectionManager.deselectAll

以下に例を示します。

thediagrammer.getSelectionManager().deselectAll();

すべてのオブジェクトの選択

選択可能なオブジェクトをすべて選択する場合は、以下の JavaScript メソッドを使用します。IlvAbstractSelectionManager.selectAll

以下に例を示します。

thediagrammer.getSelectionManager().selectAll();

メモ

選択インタラクターがビューに設定されており、ビューがフォーカスされている場合は、 CTRL+A を使用して、すべてのオブジェクトを選択できます。

イメージ・モードと矩形モード

どのモードを使用するかは、パフォーマンスやグラフィック・フィードバックの要求基準によって決定します。

イメージ・モードを使用すると、優れたグラフィック・フィードバックが得られますが、イメージの生成や、クライアントにおける選択に関する追加情報を取得するために余分な要求が必要となるため時間がかかります。

矩形モードは、基本レベルのグラフィック・フィードバックになりますが、パフォーマンスはよくなります。

移動選択

以下の場合は、選択インタラクターにより、選択対象を移動することもできます。

インタラクターの moveAllowed プロパティーが true (デフォルト値) に設定されている。
サーバー・サイド・オブジェクトが移動可能である。
ノード・レイアウトが無効になっている。

現在のセクション

JViews Maps JSF コンポーネント・セット