netbeans.apache.org/src/old_content/content/tutorials/71/nbm-quick-start-visual_zh_CN.adoc

// 
//     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``  项目。将上面的三张图像添加到主包中。现在，您应看到如下所示的内容：


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


== 添加库

在此部分，我们将添加您使用可视库所需的两个库。


[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`` 。

您现在只有两个所需的 JAR。现在，您应看到如下所示的内容：


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


== 创建容器

在此部分，我们将创建一个容器，该容器将用来保存来自可视库的  ``Scene`` 。


[start=1]
1. 定义  ``Main.java`` ，如下所示：

[source,java]
----

public class Main  extends JPanel {

    *//Create the 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() {
        *//Set the layout:*
        setLayout(new BorderLayout());
        *//Create a JScrollPane:*
        JScrollPane scrollPane = new JScrollPane();
        *//Add the JScrollPane to the 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 一侧的灯泡图标添加 import 语句和抽象方法。现在，您应看到如下所示的内容：

[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. 我们将使用三个  ``LayerWidget`` ，类似于 Swing 中的  ``JGlassPane`` 。在类的顶部对其进行声明：

[source,java]
----

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

----


[start=5]
1. 创建一个构造函数，初始化您的  ``LayerWidget``  并将它们添加到  ``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));

----

在以上代码中，您创建了四个小部件，传递了一个字符串并且设置了小部件的位置。现在，触发上一步骤中定义的  ``attachNodeWidget``  方法。 ``attachNodeWidget``  中的  ``arg``  参数是您传递到  ``addNode``  的字符串。因此，此字符串将会设置小部件的标签。然后，会将该小部件添加到  ``mainLayer``  中。


[start=8]
1. 返回到  ``Main.java``  类，将下面以粗体显示的行添加到  ``initComponents``  方法中：

[source,java]
----

private void initComponents() {
    //Set the layout:
    setLayout(new BorderLayout());
    //Create a JScrollPane:
    JScrollPane scrollPane = new JScrollPane();
    //Add the JScrollPane to the JPanel:
    add(scrollPane, BorderLayout.CENTER);
    *//Create the GraphSceneImpl:
    GraphScene scene = new GraphSceneImpl();
    //Add it to the JScrollPane:
    scrollPane.setViewportView(scene.createView());
    //Add the SatellitView to the scene:
    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. 在  ``GraphSceneImpl``  末尾添加一个定制的  ``ConnectProvider`` ：

[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_zh_CN.html[NetBeans 平台学习资源]中的“用于可视化数据的 NetBeans API”部分。