netbeans.apache.org/src/old_content/content/tutorials/72/nbm-quick-start-visual_ja.adoc - netbeans-website - Git at Google

 //
 //     Licensed to the Apache Software Foundation (ASF) under one
 //     or more contributor license agreements.  See the NOTICE file
 //     distributed with this work for additional information
 //     regarding copyright ownership.  The ASF licenses this file
 //     to you under the Apache License, Version 2.0 (the
 //     "License"); you may not use this file except in compliance
 //     with the License.  You may obtain a copy of the License at
 //
 //       http://www.apache.org/licenses/LICENSE-2.0
 //
 //     Unless required by applicable law or agreed to in writing,
 //     software distributed under the License is distributed on an
 //     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 //     KIND, either express or implied.  See the License for the
 //     specific language governing permissions and limitations
 //     under the License.
 //

 = Java アプリケーション: NetBeans ビジュアルライブラリのチュートリアル
 :jbake-type: platform_tutorial
 :jbake-tags: tutorials
 :jbake-status: published
 :syntax: true
 :source-highlighter: pygments
 :toc: left
 :toc-title:
 :icons: font
 :experimental:
 :description: Java アプリケーション: NetBeans ビジュアルライブラリのチュートリアル - Apache NetBeans
 :keywords: Apache NetBeans Platform, Platform Tutorials, Java アプリケーション: NetBeans ビジュアルライブラリのチュートリアル

 このチュートリアルでは、 link:http://bits.netbeans.org/dev/javadoc/org-netbeans-api-visual/overview-summary.html[NetBeans ビジュアルライブラリ API] の主な機能の使い方について説明します。


 また、このチュートリアルでは、3 つのアイコンを使用します。ここでこれらのアイコンを右クリックしてローカルに保存し、このチュートリアでアプリケーションを作成したあとで、そのアプリケーションの場所にこれらのアイコンをコピーできます。その 3 つのアイコンを次に示します。


 image::images/vislib_red.gif[]
 image::images/vislib_blue.gif[]
 image::images/vislib_green.gif[]


 == アプリケーションの設定

 この節では、ウィザードを使用して Java アプリケーションを作成します。


 [start=1]
 1. 「ファイル」>「新規プロジェクト」(Ctrl-Shift-N) を選択します。「カテゴリ」から「Java」を選択します。「プロジェクト」で「Java アプリケーション」を選択します。「次へ」をクリックします。

 [start=2]
 1. 「名前と場所」パネルで、「プロジェクト名」フィールドに「 ``VisLibDemo`` 」と入力します。


 image::images/vislib_vislib-java-1.png[]

 「完了」をクリックします。

 IDE によって、 ``VisLibDemo``  プロジェクトが作成されます。前出の 3 つの画像を主パッケージに追加します。次のような表示になります。


 image::images/vislib_vislib-java-2.png[]


 == ライブラリの追加

 この節では、ビジュアルライブラリで操作する必要がある 2 つのライブラリを追加します。


 [start=1]
 1. 「ライブラリ」ノードを右クリックして、「JAR/フォルダを追加」を選択します。

 [start=2]
 1. NetBeans IDE のインストールディレクトリを参照します。

 [start=3]
 1. 「 ``platform9/lib`` 」で、「 ``org-openide-util.jar`` 」を選択します。

 [start=4]
 1. 「 ``platform9/modules`` 」で、「 ``org-netbeans-api-visual.jar`` 」を選択します。

 これで、必要となる 2 つの JAR だけが選択されました。次のような表示になります。


 image::images/vislib_vislib-java-3.png[]


 == コンテナの作成

 この節では、ビジュアルライブラリからの  ``Scene``  を保持するコンテナを作成します。


 [start=1]
 1. 次に示すように、 ``Main.java``  を定義します。

 [source,java]
 ----

 public class Main  extends JPanel {

     *//JFrame を作成:*
     public static void main(String[] args) {
         JFrame frame = new JFrame("Graph test");
         frame.setMinimumSize(new Dimension(500, 400));
         frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
         frame.setContentPane(new Main());
         frame.pack();
         frame.setVisible(true);
     }

     public Main() {
         initComponents();
     }

     private void initComponents() {
         *//レイアウトを設定:*
         setLayout(new BorderLayout());
         *//JScrollPane を設定:*
         JScrollPane scrollPane = new JScrollPane();
         *//JScrollPane を JPanel に追加:*
         add(scrollPane, BorderLayout.CENTER);
     }

 }

 ----


 [start=2]
 1. アプリケーションを実行すると、次のような、シンプルな JFrame が表示されます。


 image::images/vislib_vislib-java-4.png[]

 これで  ``JScrollPane``  が作成され、シーンを作成する準備が整いました。


 == ウィジェットの作成

 この節では、シーンを格納する個別のクラスを作成します。作成したクラスを  ``JPanel``  に関連付けます。


 [start=1]
 1.  ``GraphSceneImpl.java``  という名前の新しいクラスを作成します。

 [start=2]
 1. GraphScene<String, String> を拡張します。

 [start=3]
 1. IDE の端にある電球のアイコンを使用して、インポート文と abstract メソッドを追加します。次のような表示になります。

 [source,java]
 ----

 package vislibdemo;

 import org.netbeans.api.visual.graph.GraphScene;
 import org.netbeans.api.visual.widget.Widget;

 public class GraphSceneImpl extends GraphScene<String, String> {

     @Override
     protected Widget attachNodeWidget(String arg0) {
         throw new UnsupportedOperationException("Not supported yet.");
     }

     @Override
     protected Widget attachEdgeWidget(String arg0) {
         throw new UnsupportedOperationException("Not supported yet.");
     }

     @Override
     protected void attachEdgeSourceAnchor(String arg0, String arg1, String arg2) {
         throw new UnsupportedOperationException("Not supported yet.");
     }

     @Override
     protected void attachEdgeTargetAnchor(String arg0, String arg1, String arg2) {
         throw new UnsupportedOperationException("Not supported yet.");
     }

 }

 ----


 [start=4]
 1. 3 つの  ``LayerWidgets``  を使用します。これらは、Swing の  ``JGlassPanes``  と似ています。クラスの先頭で次のように宣言します。

 [source,java]
 ----

 private LayerWidget mainLayer;
 private LayerWidget connectionLayer;
 private LayerWidget interactionLayer;

 ----


 [start=5]
 1. コンストラクタを作成し、 ``LayerWidgets``  を初期化して、これらを  ``Scene``  に追加します。

 [source,java]
 ----

 public GraphSceneImpl() {
     mainLayer = new LayerWidget(this);
     connectionLayer = new LayerWidget(this);
     interactionLayer = new LayerWidget(this);
     addChild(mainLayer);
     addChild(connectionLayer);
     addChild(interactionLayer);
 }

 ----


 [start=6]
 1. 次に、新しいウィジェットが作成されたときに行う動作を定義します。

 [source,java]
 ----

 @Override
 protected Widget attachNodeWidget(String arg) {
     IconNodeWidget widget = new IconNodeWidget(this);
     if (arg.startsWith("1")) {
         widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
     } else if (arg.startsWith("2")) {
         widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
     } else {
         widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
     }
     widget.setLabel(arg);
     mainLayer.addChild(widget);
     return widget;
 }
 ----

 これは、シーンで  ``addNode``  が呼び出されるたびにトリガーされます。


 [start=7]
 1. コンストラクタの最後で、前出のメソッドを 4 回トリガーします。

 [source,java]
 ----

 Widget w1 = addNode("1. Hammer");
 w1.setPreferredLocation(new Point(10, 100));
 Widget w2 = addNode("2. Saw");
 w2.setPreferredLocation(new Point(100, 250));
 Widget w3 = addNode("Nail");
 w3.setPreferredLocation(new Point(250, 250));
 Widget w4 = addNode("Bolt");
 w4.setPreferredLocation(new Point(250, 350));

 ----

 4 つのウィジェットを作成し、文字列で渡し、ウィジェットの位置を設定しました。これで、前述の手順で定義した  ``attachNodeWidget``  メソッドがトリガーされます。 ``attachNodeWidget``  の  ``arg``  パラメータが、 ``addNode``  に渡す文字列です。このため、この文字列はウィジェットのラベルを設定します。次に、ウィジェットは  ``mainLayer``  に追加されます。


 [start=8]
 1.  ``Main.java``  クラスに戻り、ボールドで表示された行を  ``initComponents``  メソッドに追加します。

 [source,java]
 ----

 private void initComponents() {
     //レイアウトを設定:
     setLayout(new BorderLayout());
     //JScrollPane を作成:
     JScrollPane scrollPane = new JScrollPane();
     //JScrollPane を JPanel に追加:
     add(scrollPane, BorderLayout.CENTER);
     *//raphSceneImpl を作成:
     GraphScene scene = new GraphSceneImpl();
     //JScrollPane に追加:
     scrollPane.setViewportView(scene.createView());
     //SatellitView をシーンに追加:
     add(scene.createSatelliteView(), BorderLayout.WEST);*
 }

 ----


 [start=9]
 1. アプリケーションを実行すると、次のように表示されるはずです。


 image::images/vislib_vislib-java-5.png[]

 これで、いくつかのウィジェットを持つシーンを作成したので、アクションを統合できるようになりました。


 == アクションの有効化

 この節では、以前に作成したウィジェットに対するアクションを有効にします。


 [start=1]
 1. ボールドで表示された行を追加して、 ``attachNodeWidget``  を作成します。

 [source,java]
 ----

 @Override
 protected Widget attachNodeWidget(String arg) {
     IconNodeWidget widget = new IconNodeWidget(this);
     if (arg.startsWith("1")) {
         widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
     } else if (arg.startsWith("2")) {
         widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
     } else {
         widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
     }
     *widget.getActions().addAction(
             ActionFactory.createAlignWithMoveAction(
             mainLayer, interactionLayer,
             ActionFactory.createDefaultAlignWithMoveDecorator()));*
     widget.setLabel(arg);
     mainLayer.addChild(widget);
     return widget;
 }

 ----


 [start=2]
 1. アプリケーションを実行します。ウィジェットをドラッグすると位置揃えマーカーが表示されます。このマーカーを使用して、ほかのウィジェットの位置に関連してウィジェットを配置します。


 image::images/vislib_vislib-java-7.png[]


 [start=3]
 1. コンストラクタの最後に次のコードを追加して、 ``GraphSceneImpl``  クラスを変更します。

 [source,java]
 ----

 getActions().addAction(ActionFactory.createZoomAction());

 ----


 [start=4]
 1. アプリケーションを実行します。中央のマウスボタンをスクロールするか、使用しているオペレーティングシステムのズーム操作を実行し、シーン全体が拡大縮小することを確認します。

 [start=5]
 1. カスタムの  ``ConnectProvider``  を  ``GraphSceneImpl``  の最後に追加します。

 [source,java]
 ----

 private class MyConnectProvider implements ConnectProvider {

     public boolean isSourceWidget(Widget source) {
         return source instanceof IconNodeWidget &amp;&amp; source != null? true : false;
     }

     public ConnectorState isTargetWidget(Widget src, Widget trg) {
         return src != trg &amp;&amp; trg instanceof IconNodeWidget ? ConnectorState.ACCEPT : ConnectorState.REJECT;
     }

     public boolean hasCustomTargetWidgetResolver(Scene arg0) {
         return false;
     }

     public Widget resolveTargetWidget(Scene arg0, Point arg1) {
         return null;
     }

     public void createConnection(Widget source, Widget target) {
         ConnectionWidget conn = new ConnectionWidget(GraphSceneImpl.this);
         conn.setTargetAnchorShape(AnchorShape.TRIANGLE_FILLED);
         conn.setTargetAnchor(AnchorFactory.createRectangularAnchor(target));
         conn.setSourceAnchor(AnchorFactory.createRectangularAnchor(source));
         connectionLayer.addChild(conn);
     }

 }

 ----

 カスタムの  ``ConnectProvider``  をウィジェットに次のように関連付けます。


 [source,java]
 ----

 @Override
 protected Widget attachNodeWidget(String arg0) {
     IconNodeWidget widget = new IconNodeWidget(this);
     if (arg0.startsWith("1")) {
         widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
     } else if (arg0.startsWith("2")) {
         widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
     } else {
         widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
     }
     *widget.getActions().addAction(
             ActionFactory.createExtendedConnectAction(
             connectionLayer, new MyConnectProvider()));*
     widget.getActions().addAction(
             ActionFactory.createAlignWithMoveAction(
             mainLayer, interactionLayer,
             ActionFactory.createDefaultAlignWithMoveDecorator()));
     widget.setLabel(arg0);
     mainLayer.addChild(widget);
     return widget;
 }

 ----


 [start=6]
 1. アプリケーションを実行し、ウィジェットを選択して、Ctrl キーを押しながらマウスを別のウィジェットにドラッグします。次のように、ウィジェットを互いに接続できるようになります。


 image::images/vislib_vislib-java-6.png[]

 これで、ビジュアルライブラリ API によって提供される機能の基本的な概念について学習は終わりです。次は、「 link:https://netbeans.apache.org/kb/docs/platform_ja.html[NetBeans プラットフォームの学習]」の「仮想化データ用の NetBeans API」の節を参照してください。
	//
	// Licensed to the Apache Software Foundation (ASF) under one
	// or more contributor license agreements. See the NOTICE file
	// distributed with this work for additional information
	// regarding copyright ownership. The ASF licenses this file
	// to you under the Apache License, Version 2.0 (the
	// "License"); you may not use this file except in compliance
	// with the License. You may obtain a copy of the License at
	//
	// http://www.apache.org/licenses/LICENSE-2.0
	//
	// Unless required by applicable law or agreed to in writing,
	// software distributed under the License is distributed on an
	// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
	// KIND, either express or implied. See the License for the
	// specific language governing permissions and limitations
	// under the License.
	//

	= Java アプリケーション: NetBeans ビジュアルライブラリのチュートリアル
	:jbake-type: platform_tutorial
	:jbake-tags: tutorials
	:jbake-status: published
	:syntax: true
	:source-highlighter: pygments
	:toc: left
	:toc-title:
	:icons: font
	:experimental:
	:description: Java アプリケーション: NetBeans ビジュアルライブラリのチュートリアル - Apache NetBeans
	:keywords: Apache NetBeans Platform, Platform Tutorials, Java アプリケーション: NetBeans ビジュアルライブラリのチュートリアル

	このチュートリアルでは、 link:http://bits.netbeans.org/dev/javadoc/org-netbeans-api-visual/overview-summary.html[NetBeans ビジュアルライブラリ API] の主な機能の使い方について説明します。







	また、このチュートリアルでは、3 つのアイコンを使用します。ここでこれらのアイコンを右クリックしてローカルに保存し、このチュートリアでアプリケーションを作成したあとで、そのアプリケーションの場所にこれらのアイコンをコピーできます。その 3 つのアイコンを次に示します。


	image::images/vislib_red.gif[]
	image::images/vislib_blue.gif[]
	image::images/vislib_green.gif[]


	== アプリケーションの設定

	この節では、ウィザードを使用して Java アプリケーションを作成します。


	[start=1]
	1. 「ファイル」>「新規プロジェクト」(Ctrl-Shift-N) を選択します。「カテゴリ」から「Java」を選択します。「プロジェクト」で「Java アプリケーション」を選択します。「次へ」をクリックします。

	[start=2]
	1. 「名前と場所」パネルで、「プロジェクト名」フィールドに「 ``VisLibDemo`` 」と入力します。


	image::images/vislib_vislib-java-1.png[]

	「完了」をクリックします。

	IDE によって、 ``VisLibDemo`` プロジェクトが作成されます。前出の 3 つの画像を主パッケージに追加します。次のような表示になります。


	image::images/vislib_vislib-java-2.png[]


	== ライブラリの追加

	この節では、ビジュアルライブラリで操作する必要がある 2 つのライブラリを追加します。


	[start=1]
	1. 「ライブラリ」ノードを右クリックして、「JAR/フォルダを追加」を選択します。

	[start=2]
	1. NetBeans IDE のインストールディレクトリを参照します。

	[start=3]
	1. 「 ``platform9/lib`` 」で、「 ``org-openide-util.jar`` 」を選択します。

	[start=4]
	1. 「 ``platform9/modules`` 」で、「 ``org-netbeans-api-visual.jar`` 」を選択します。

	これで、必要となる 2 つの JAR だけが選択されました。次のような表示になります。


	image::images/vislib_vislib-java-3.png[]


	== コンテナの作成

	この節では、ビジュアルライブラリからの ``Scene`` を保持するコンテナを作成します。


	[start=1]
	1. 次に示すように、 ``Main.java`` を定義します。

	[source,java]
	----

	public class Main extends JPanel {

	//JFrame を作成:
	public static void main(String[] args) {
	JFrame frame = new JFrame("Graph test");
	frame.setMinimumSize(new Dimension(500, 400));
	frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	frame.setContentPane(new Main());
	frame.pack();
	frame.setVisible(true);
	}

	public Main() {
	initComponents();
	}

	private void initComponents() {
	//レイアウトを設定:
	setLayout(new BorderLayout());
	//JScrollPane を設定:
	JScrollPane scrollPane = new JScrollPane();
	//JScrollPane を JPanel に追加:
	add(scrollPane, BorderLayout.CENTER);
	}

	}

	----


	[start=2]
	1. アプリケーションを実行すると、次のような、シンプルな JFrame が表示されます。


	image::images/vislib_vislib-java-4.png[]

	これで ``JScrollPane`` が作成され、シーンを作成する準備が整いました。


	== ウィジェットの作成

	この節では、シーンを格納する個別のクラスを作成します。作成したクラスを ``JPanel`` に関連付けます。


	[start=1]
	1. ``GraphSceneImpl.java`` という名前の新しいクラスを作成します。

	[start=2]
	1. GraphScene<String, String> を拡張します。

	[start=3]
	1. IDE の端にある電球のアイコンを使用して、インポート文と abstract メソッドを追加します。次のような表示になります。

	[source,java]
	----

	package vislibdemo;

	import org.netbeans.api.visual.graph.GraphScene;
	import org.netbeans.api.visual.widget.Widget;

	public class GraphSceneImpl extends GraphScene<String, String> {

	@Override
	protected Widget attachNodeWidget(String arg0) {
	throw new UnsupportedOperationException("Not supported yet.");
	}

	@Override
	protected Widget attachEdgeWidget(String arg0) {
	throw new UnsupportedOperationException("Not supported yet.");
	}

	@Override
	protected void attachEdgeSourceAnchor(String arg0, String arg1, String arg2) {
	throw new UnsupportedOperationException("Not supported yet.");
	}

	@Override
	protected void attachEdgeTargetAnchor(String arg0, String arg1, String arg2) {
	throw new UnsupportedOperationException("Not supported yet.");
	}

	}

	----


	[start=4]
	1. 3 つの ``LayerWidgets`` を使用します。これらは、Swing の ``JGlassPanes`` と似ています。クラスの先頭で次のように宣言します。

	[source,java]
	----

	private LayerWidget mainLayer;
	private LayerWidget connectionLayer;
	private LayerWidget interactionLayer;

	----


	[start=5]
	1. コンストラクタを作成し、 ``LayerWidgets`` を初期化して、これらを ``Scene`` に追加します。

	[source,java]
	----

	public GraphSceneImpl() {
	mainLayer = new LayerWidget(this);
	connectionLayer = new LayerWidget(this);
	interactionLayer = new LayerWidget(this);
	addChild(mainLayer);
	addChild(connectionLayer);
	addChild(interactionLayer);
	}

	----


	[start=6]
	1. 次に、新しいウィジェットが作成されたときに行う動作を定義します。

	[source,java]
	----

	@Override
	protected Widget attachNodeWidget(String arg) {
	IconNodeWidget widget = new IconNodeWidget(this);
	if (arg.startsWith("1")) {
	widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
	} else if (arg.startsWith("2")) {
	widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
	} else {
	widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
	}
	widget.setLabel(arg);
	mainLayer.addChild(widget);
	return widget;
	}
	----

	これは、シーンで ``addNode`` が呼び出されるたびにトリガーされます。


	[start=7]
	1. コンストラクタの最後で、前出のメソッドを 4 回トリガーします。

	[source,java]
	----

	Widget w1 = addNode("1. Hammer");
	w1.setPreferredLocation(new Point(10, 100));
	Widget w2 = addNode("2. Saw");
	w2.setPreferredLocation(new Point(100, 250));
	Widget w3 = addNode("Nail");
	w3.setPreferredLocation(new Point(250, 250));
	Widget w4 = addNode("Bolt");
	w4.setPreferredLocation(new Point(250, 350));

	----

	4 つのウィジェットを作成し、文字列で渡し、ウィジェットの位置を設定しました。これで、前述の手順で定義した ``attachNodeWidget`` メソッドがトリガーされます。 ``attachNodeWidget`` の ``arg`` パラメータが、 ``addNode`` に渡す文字列です。このため、この文字列はウィジェットのラベルを設定します。次に、ウィジェットは ``mainLayer`` に追加されます。


	[start=8]
	1. ``Main.java`` クラスに戻り、ボールドで表示された行を ``initComponents`` メソッドに追加します。

	[source,java]
	----

	private void initComponents() {
	//レイアウトを設定:
	setLayout(new BorderLayout());
	//JScrollPane を作成:
	JScrollPane scrollPane = new JScrollPane();
	//JScrollPane を JPanel に追加:
	add(scrollPane, BorderLayout.CENTER);
	*//raphSceneImpl を作成:
	GraphScene scene = new GraphSceneImpl();
	//JScrollPane に追加:
	scrollPane.setViewportView(scene.createView());
	//SatellitView をシーンに追加:
	add(scene.createSatelliteView(), BorderLayout.WEST);*
	}

	----


	[start=9]
	1. アプリケーションを実行すると、次のように表示されるはずです。


	image::images/vislib_vislib-java-5.png[]

	これで、いくつかのウィジェットを持つシーンを作成したので、アクションを統合できるようになりました。


	== アクションの有効化

	この節では、以前に作成したウィジェットに対するアクションを有効にします。


	[start=1]
	1. ボールドで表示された行を追加して、 ``attachNodeWidget`` を作成します。

	[source,java]
	----

	@Override
	protected Widget attachNodeWidget(String arg) {
	IconNodeWidget widget = new IconNodeWidget(this);
	if (arg.startsWith("1")) {
	widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
	} else if (arg.startsWith("2")) {
	widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
	} else {
	widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
	}
	*widget.getActions().addAction(
	ActionFactory.createAlignWithMoveAction(
	mainLayer, interactionLayer,
	ActionFactory.createDefaultAlignWithMoveDecorator()));*
	widget.setLabel(arg);
	mainLayer.addChild(widget);
	return widget;
	}

	----


	[start=2]
	1. アプリケーションを実行します。ウィジェットをドラッグすると位置揃えマーカーが表示されます。このマーカーを使用して、ほかのウィジェットの位置に関連してウィジェットを配置します。


	image::images/vislib_vislib-java-7.png[]


	[start=3]
	1. コンストラクタの最後に次のコードを追加して、 ``GraphSceneImpl`` クラスを変更します。

	[source,java]
	----

	getActions().addAction(ActionFactory.createZoomAction());

	----


	[start=4]
	1. アプリケーションを実行します。中央のマウスボタンをスクロールするか、使用しているオペレーティングシステムのズーム操作を実行し、シーン全体が拡大縮小することを確認します。

	[start=5]
	1. カスタムの ``ConnectProvider`` を ``GraphSceneImpl`` の最後に追加します。

	[source,java]
	----

	private class MyConnectProvider implements ConnectProvider {

	public boolean isSourceWidget(Widget source) {
	return source instanceof IconNodeWidget && source != null? true : false;
	}

	public ConnectorState isTargetWidget(Widget src, Widget trg) {
	return src != trg && trg instanceof IconNodeWidget ? ConnectorState.ACCEPT : ConnectorState.REJECT;
	}

	public boolean hasCustomTargetWidgetResolver(Scene arg0) {
	return false;
	}

	public Widget resolveTargetWidget(Scene arg0, Point arg1) {
	return null;
	}

	public void createConnection(Widget source, Widget target) {
	ConnectionWidget conn = new ConnectionWidget(GraphSceneImpl.this);
	conn.setTargetAnchorShape(AnchorShape.TRIANGLE_FILLED);
	conn.setTargetAnchor(AnchorFactory.createRectangularAnchor(target));
	conn.setSourceAnchor(AnchorFactory.createRectangularAnchor(source));
	connectionLayer.addChild(conn);
	}

	}

	----

	カスタムの ``ConnectProvider`` をウィジェットに次のように関連付けます。


	[source,java]
	----

	@Override
	protected Widget attachNodeWidget(String arg0) {
	IconNodeWidget widget = new IconNodeWidget(this);
	if (arg0.startsWith("1")) {
	widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
	} else if (arg0.startsWith("2")) {
	widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
	} else {
	widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
	}
	*widget.getActions().addAction(
	ActionFactory.createExtendedConnectAction(
	connectionLayer, new MyConnectProvider()));*
	widget.getActions().addAction(
	ActionFactory.createAlignWithMoveAction(
	mainLayer, interactionLayer,
	ActionFactory.createDefaultAlignWithMoveDecorator()));
	widget.setLabel(arg0);
	mainLayer.addChild(widget);
	return widget;
	}

	----


	[start=6]
	1. アプリケーションを実行し、ウィジェットを選択して、Ctrl キーを押しながらマウスを別のウィジェットにドラッグします。次のように、ウィジェットを互いに接続できるようになります。


	image::images/vislib_vislib-java-6.png[]

	これで、ビジュアルライブラリ API によって提供される機能の基本的な概念について学習は終わりです。次は、「 link:https://netbeans.apache.org/kb/docs/platform_ja.html[NetBeans プラットフォームの学習]」の「仮想化データ用の NetBeans API」の節を参照してください。