src/content/platform/tutorials/691/nbm-quick-start-visual_ja.html - netbeans-website-cleanup - Git at Google

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <!-- -*- xhtml -*- -->
 <title>Java アプリケーション: NetBeans ビジュアルライブラリのチュートリアル</title>
   <link rel="stylesheet" type="text/css" href="https://netbeans.org/netbeans.css">
   <meta name="AUDIENCE" content="NBUSER">
   <meta name="TYPE" content="ARTICLE">
   <meta name="EXPIRES" content="N">
   <meta name="developer" content="geertjan.wielenga@sun.com">
   <meta name="indexed" content="y">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="description"
  content="A walk-through of the basic features of the Visual Library API.">
          <!--      Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. -->
         <!--     Use is subject to license terms.-->
 </head>

 <body>

 <h1>Java アプリケーション: NetBeans ビジュアルライブラリのチュートリアル</h1>

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

      <p><b>目次</b></p>

    <p><img  src="../images/articles/69/netbeans-stamp7-8-9.png" class="stamp" width="114" height="114" alt="このページの内容は NetBeans IDE 6.5、6.7、および 6.8 が対象です" title="このページの内容は NetBeans IDE 6.5、6.7、および 6.8 が対象です" /></p>
       <ul class="toc">
 <li><a href="#getting-started">アプリケーションの設定</a>
 <li><a href="#add">ライブラリの追加</a>
 <li><a href="#widget">ウィジェットの作成</a>
 <li><a href="#action">アクションの有効化</a>
        </ul>

 <p><b>このチュートリアルを行うには、次の表に示すソフトウェアおよびリソースが必要です。</b></p>

     <table>
         <tbody>
             <tr>
                 <th class="tblheader" scope="col">ソフトウェアまたはリソース</th>
                 <th class="tblheader" scope="col">必須バージョン</th>
             </tr>
             <tr>
                 <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE</a></td>
                 <td class="tbltd1">version 6.7 以上</td>
             </tr>
             <tr>
                 <td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Java Developer Kit (JDK)</a></td>
                 <td class="tbltd1">version 6 または<br/>version 5</td>
             </tr>
         </tbody>
     </table>

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

    <p><img src="../images/tutorials/vislib/red.gif"/>
     <img src="../images/tutorials/vislib/blue.gif"/>
     <img src="../images/tutorials/vislib/green.gif"/>

 <!-- ===================================================================================== -->

 <p><h2><a name="set"></a>アプリケーションの設定</h2>

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


 <ol>
     <li>「ファイル」&gt;「新規プロジェクト」(Ctrl-Shift-N) を選択します。「カテゴリ」から「Java」を選択します。「プロジェクト」で「Java アプリケーション」を選択します。「次へ」をクリックします。</li>
     <li>「名前と場所」パネルで、「プロジェクト名」フィールドに「<tt>VisLibDemo</tt>」と入力します。
     <p><p><img border="1" src="../images/tutorials/vislib/vislib-java-1.png"/>
     <p>「完了」をクリックします。</li>
 </ol>

 <p>IDE によって、<tt>VisLibDemo</tt> プロジェクトが作成されます。前出の 3 つの画像を主パッケージに追加します。次のような表示になります。
 <p><img border="1" src="../images/tutorials/vislib/vislib-java-2.png"/>


 <p><h2><a name="add"></a>ライブラリの追加</h2>

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

 <ol>
     <li>「ライブラリ」ノードを右クリックして、「JAR/フォルダを追加」を選択します。</li>
     <li>NetBeans IDE のインストールディレクトリを参照します。</li>
     <li>「<tt>platform9/lib</tt>」で、「<tt>org-openide-util.jar</tt>」を選択します。</li>
     <li>「<tt>platform9/modules</tt>」で、「<tt>org-netbeans-api-visual.jar</tt>」を選択します。</li>
 </ol>

 <p>これで、必要となる 2 つの JAR だけが選択されました。次のような表示になります。
 <p><img border="1" src="../images/tutorials/vislib/vislib-java-3.png"/>

 <p><h2><a name="container"></a>コンテナの作成</h2>

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

 <ol>
     <li>次に示すように、<tt>Main.java</tt> を定義します。

 <pre class=examplecode>
 public class Main  extends JPanel {

     <b>//JFrame を作成:</b>
     public static void main(String[] args) {
         JFrame frame = new JFrame(&quot;Graph test&quot;);
         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() {
         <b>//レイアウトを設定:</b>
         setLayout(new BorderLayout());
         <b>//JScrollPane を設定:</b>
         JScrollPane scrollPane = new JScrollPane();
         <b>//JScrollPane を JPanel に追加:</b>
         add(scrollPane, BorderLayout.CENTER);
     }

 }
 </pre>

     </li>

     <li>アプリケーションを実行すると、次のような、シンプルな JFrame が表示されます。

 <p><img border="1" src="../images/tutorials/vislib/vislib-java-4.png"/>

      </li>
 </ol>

 <p>これで <tt>JScrollPane</tt> が作成され、シーンを作成する準備が整いました。

 <p><h2><a name="widget"></a>ウィジェットの作成</h2>

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

 <ol>
     <li><tt>GraphSceneImpl.java</tt> という名前の新しいクラスを作成します。
     <li>GraphScene&lt;String, String&gt; を拡張します。
     <li>IDE の端にある電球のアイコンを使用して、インポート文と abstract メソッドを追加します。次のような表示になります。

 <pre class=examplecode>
 package vislibdemo;

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

 public class GraphSceneImpl extends GraphScene&lt;String, String&gt; {

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

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

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

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

 }
 </pre>
     </li>

     <li>3 つの <tt>LayerWidgets</tt> を使用します。これらは、Swing の <tt>JGlassPanes</tt> と似ています。クラスの先頭で次のように宣言します。
 <pre class=examplecode>
 private LayerWidget mainLayer;
 private LayerWidget connectionLayer;
 private LayerWidget interactionLayer;
 </pre>
      </li>
      <li>コンストラクタを作成し、<tt>LayerWidgets</tt> を初期化して、これらを <tt>Scene</tt> に追加します。

 <pre class=examplecode>
 public GraphSceneImpl() {
     mainLayer = new LayerWidget(this);
     connectionLayer = new LayerWidget(this);
     interactionLayer = new LayerWidget(this);
     addChild(mainLayer);
     addChild(connectionLayer);
     addChild(interactionLayer);
 }
 </pre>

 <li>次に、新しいウィジェットが作成されたときに行う動作を定義します。

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

 <p class="tips"> これは、シーンで <tt>addNode</tt> が呼び出されるたびにトリガーされます。

 <p><li>コンストラクタの最後で、前出のメソッドを 4 回トリガーします。

 <pre class=examplecode>
 Widget w1 = addNode(&quot;1. Hammer&quot;);
 w1.setPreferredLocation(new Point(10, 100));
 Widget w2 = addNode(&quot;2. Saw&quot;);
 w2.setPreferredLocation(new Point(100, 250));
 Widget w3 = addNode(&quot;Nail&quot;);
 w3.setPreferredLocation(new Point(250, 250));
 Widget w4 = addNode(&quot;Bolt&quot;);
 w4.setPreferredLocation(new Point(250, 350));
 </pre>

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

 <li><tt>Main.java</tt> クラスに戻り、ボールドで表示された行を <tt>initComponents</tt> メソッドに追加します。

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

 <li>アプリケーションを実行すると、次のように表示されるはずです。

 <p><img border="1" src="../images/tutorials/vislib/vislib-java-5.png"/>

 </ol>

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

 <p><h2><a name="action"></a>アクションの有効化</h2>

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

 <ol>
     <li>ボールドで表示された行を追加して、<tt>attachNodeWidget</tt> を作成します。

 <pre class=examplecode>
 @Override
 protected Widget attachNodeWidget(String arg) {
     IconNodeWidget widget = new IconNodeWidget(this);
     if (arg.startsWith(&quot;1&quot;)) {
         widget.setImage(ImageUtilities.loadImage(&quot;vislibdemo/red.gif&quot;));
     } else if (arg.startsWith(&quot;2&quot;)) {
         widget.setImage(ImageUtilities.loadImage(&quot;vislibdemo/green.gif&quot;));
     } else {
         widget.setImage(ImageUtilities.loadImage(&quot;vislibdemo/blue.gif&quot;));
     }
     <b>widget.getActions().addAction(
             ActionFactory.createAlignWithMoveAction(
             mainLayer, interactionLayer,
             ActionFactory.createDefaultAlignWithMoveDecorator()));</b>
     widget.setLabel(arg);
     mainLayer.addChild(widget);
     return widget;
 }
 </pre>
     </li>

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

  <p><p><img border="1" src="../images/tutorials/vislib/vislib-java-7.png"/>

     <li>コンストラクタの最後に次のコードを追加して、<tt>GraphSceneImpl</tt> クラスを変更します。

 <pre class=examplecode>
 getActions().addAction(ActionFactory.createZoomAction());
 </pre>
     </li>

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

  <li>カスタムの <tt>ConnectProvider</tt> を <tt>GraphSceneImpl</tt> の最後に追加します。

 <pre class=examplecode>
 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);
     }

 }
 </pre>

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

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

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

 <p><p><img border="1" src="../images/tutorials/vislib/vislib-java-6.png"/>

 </ol>

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

     </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<!-- -- xhtml -- -->
	<title>Java アプリケーション: NetBeans ビジュアルライブラリのチュートリアル</title>
	<link rel="stylesheet" type="text/css" href="https://netbeans.org/netbeans.css">
	<meta name="AUDIENCE" content="NBUSER">
	<meta name="TYPE" content="ARTICLE">
	<meta name="EXPIRES" content="N">
	<meta name="developer" content="geertjan.wielenga@sun.com">
	<meta name="indexed" content="y">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="description"
	content="A walk-through of the basic features of the Visual Library API.">
	<!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. -->
	<!-- Use is subject to license terms.-->
	</head>

	<body>

	<h1>Java アプリケーション: NetBeans ビジュアルライブラリのチュートリアル</h1>

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

	<p><b>目次</b></p>

	<p><img src="../images/articles/69/netbeans-stamp7-8-9.png" class="stamp" width="114" height="114" alt="このページの内容は NetBeans IDE 6.5、6.7、および 6.8 が対象です" title="このページの内容は NetBeans IDE 6.5、6.7、および 6.8 が対象です" /></p>
	<ul class="toc">
	<li><a href="#getting-started">アプリケーションの設定</a>
	<li><a href="#add">ライブラリの追加</a>
	<li><a href="#widget">ウィジェットの作成</a>
	<li><a href="#action">アクションの有効化</a>
	</ul>

	<p><b>このチュートリアルを行うには、次の表に示すソフトウェアおよびリソースが必要です。</b></p>

	<table>
	<tbody>
	<tr>
	<th class="tblheader" scope="col">ソフトウェアまたはリソース</th>
	<th class="tblheader" scope="col">必須バージョン</th>
	</tr>
	<tr>
	<td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE</a></td>
	<td class="tbltd1">version 6.7 以上</td>
	</tr>
	<tr>
	<td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Java Developer Kit (JDK)</a></td>
	<td class="tbltd1">version 6 または<br/>version 5</td>
	</tr>
	</tbody>
	</table>

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

	<p><img src="../images/tutorials/vislib/red.gif"/>
	<img src="../images/tutorials/vislib/blue.gif"/>
	<img src="../images/tutorials/vislib/green.gif"/>

	<!-- ===================================================================================== -->

	<p><h2><a name="set"></a>アプリケーションの設定</h2>

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


	<ol>
	<li>「ファイル」>「新規プロジェクト」(Ctrl-Shift-N) を選択します。「カテゴリ」から「Java」を選択します。「プロジェクト」で「Java アプリケーション」を選択します。「次へ」をクリックします。</li>
	<li>「名前と場所」パネルで、「プロジェクト名」フィールドに「<tt>VisLibDemo</tt>」と入力します。
	<p><p><img border="1" src="../images/tutorials/vislib/vislib-java-1.png"/>
	<p>「完了」をクリックします。</li>
	</ol>

	<p>IDE によって、<tt>VisLibDemo</tt> プロジェクトが作成されます。前出の 3 つの画像を主パッケージに追加します。次のような表示になります。
	<p><img border="1" src="../images/tutorials/vislib/vislib-java-2.png"/>



	<p><h2><a name="add"></a>ライブラリの追加</h2>

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

	<ol>
	<li>「ライブラリ」ノードを右クリックして、「JAR/フォルダを追加」を選択します。</li>
	<li>NetBeans IDE のインストールディレクトリを参照します。</li>
	<li>「<tt>platform9/lib</tt>」で、「<tt>org-openide-util.jar</tt>」を選択します。</li>
	<li>「<tt>platform9/modules</tt>」で、「<tt>org-netbeans-api-visual.jar</tt>」を選択します。</li>
	</ol>

	<p>これで、必要となる 2 つの JAR だけが選択されました。次のような表示になります。
	<p><img border="1" src="../images/tutorials/vislib/vislib-java-3.png"/>

	<p><h2><a name="container"></a>コンテナの作成</h2>

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

	<ol>
	<li>次に示すように、<tt>Main.java</tt> を定義します。

	<pre class=examplecode>
	public class Main extends JPanel {

	<b>//JFrame を作成:</b>
	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() {
	<b>//レイアウトを設定:</b>
	setLayout(new BorderLayout());
	<b>//JScrollPane を設定:</b>
	JScrollPane scrollPane = new JScrollPane();
	<b>//JScrollPane を JPanel に追加:</b>
	add(scrollPane, BorderLayout.CENTER);
	}

	}
	</pre>

	</li>

	<li>アプリケーションを実行すると、次のような、シンプルな JFrame が表示されます。

	<p><img border="1" src="../images/tutorials/vislib/vislib-java-4.png"/>

	</li>
	</ol>

	<p>これで <tt>JScrollPane</tt> が作成され、シーンを作成する準備が整いました。

	<p><h2><a name="widget"></a>ウィジェットの作成</h2>

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

	<ol>
	<li><tt>GraphSceneImpl.java</tt> という名前の新しいクラスを作成します。
	<li>GraphScene<String, String> を拡張します。
	<li>IDE の端にある電球のアイコンを使用して、インポート文と abstract メソッドを追加します。次のような表示になります。

	<pre class=examplecode>
	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.");
	}

	}
	</pre>
	</li>

	<li>3 つの <tt>LayerWidgets</tt> を使用します。これらは、Swing の <tt>JGlassPanes</tt> と似ています。クラスの先頭で次のように宣言します。
	<pre class=examplecode>
	private LayerWidget mainLayer;
	private LayerWidget connectionLayer;
	private LayerWidget interactionLayer;
	</pre>
	</li>
	<li>コンストラクタを作成し、<tt>LayerWidgets</tt> を初期化して、これらを <tt>Scene</tt> に追加します。

	<pre class=examplecode>
	public GraphSceneImpl() {
	mainLayer = new LayerWidget(this);
	connectionLayer = new LayerWidget(this);
	interactionLayer = new LayerWidget(this);
	addChild(mainLayer);
	addChild(connectionLayer);
	addChild(interactionLayer);
	}
	</pre>

	<li>次に、新しいウィジェットが作成されたときに行う動作を定義します。

	<pre class=examplecode>@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;
	}</pre>

	<p class="tips"> これは、シーンで <tt>addNode</tt> が呼び出されるたびにトリガーされます。

	<p><li>コンストラクタの最後で、前出のメソッドを 4 回トリガーします。

	<pre class=examplecode>
	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));
	</pre>

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

	<li><tt>Main.java</tt> クラスに戻り、ボールドで表示された行を <tt>initComponents</tt> メソッドに追加します。

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

	<li>アプリケーションを実行すると、次のように表示されるはずです。

	<p><img border="1" src="../images/tutorials/vislib/vislib-java-5.png"/>

	</ol>

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

	<p><h2><a name="action"></a>アクションの有効化</h2>

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

	<ol>
	<li>ボールドで表示された行を追加して、<tt>attachNodeWidget</tt> を作成します。

	<pre class=examplecode>
	@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"));
	}
	<b>widget.getActions().addAction(
	ActionFactory.createAlignWithMoveAction(
	mainLayer, interactionLayer,
	ActionFactory.createDefaultAlignWithMoveDecorator()));</b>
	widget.setLabel(arg);
	mainLayer.addChild(widget);
	return widget;
	}
	</pre>
	</li>

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

	<p><p><img border="1" src="../images/tutorials/vislib/vislib-java-7.png"/>

	<li>コンストラクタの最後に次のコードを追加して、<tt>GraphSceneImpl</tt> クラスを変更します。

	<pre class=examplecode>
	getActions().addAction(ActionFactory.createZoomAction());
	</pre>
	</li>

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

	<li>カスタムの <tt>ConnectProvider</tt> を <tt>GraphSceneImpl</tt> の最後に追加します。

	<pre class=examplecode>
	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);
	}

	}
	</pre>

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

	<pre class=examplecode>
	@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"));
	}
	<b>widget.getActions().addAction(
	ActionFactory.createExtendedConnectAction(
	connectionLayer, new MyConnectProvider()));</b>
	widget.getActions().addAction(
	ActionFactory.createAlignWithMoveAction(
	mainLayer, interactionLayer,
	ActionFactory.createDefaultAlignWithMoveDecorator()));
	widget.setLabel(arg0);
	mainLayer.addChild(widget);
	return widget;
	}
	</pre>

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

	<p><p><img border="1" src="../images/tutorials/vislib/vislib-java-6.png"/>

	</ol>

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

	</body>
	</html>