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

このチュートリアルでは、NetBeans ビジュアルライブラリ API の主な機能の使い方について説明します。

目次

• アプリケーションの設定
• ライブラリの追加
• ウィジェットの作成
• アクションの有効化

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

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

アプリケーションの設定

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

1. 「ファイル」>「新規プロジェクト」(Ctrl-Shift-N) を選択します。「カテゴリ」から「Java」を選択します。「プロジェクト」で「Java アプリケーション」を選択します。「次へ」をクリックします。
2. 「名前と場所」パネルで、「プロジェクト名」フィールドに「VisLibDemo」と入力します。

   

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

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

ライブラリの追加

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

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

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

コンテナの作成

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

1. 次に示すように、Main.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);
       }
   
   }
   

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

   

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

ウィジェットの作成

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

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

   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.");
       }
   
   }
   

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

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

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

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

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

   @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 が呼び出されるたびにトリガーされます。

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

   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 に追加されます。

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

   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);
   }
   

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

   

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

アクションの有効化

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

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

   @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;
   }
   

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

   

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

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

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

   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 をウィジェットに次のように関連付けます。

   @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;
   }
   

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

   

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