<!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>Учебный курс по NetBeans Visual Library для приложений Java</title>
  <link rel="stylesheet" type="text/css" href="https://netbeans.org/netbeans.css">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <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 name="description"
 content="A walk-through of the basic features of the Visual Library API.">
</head>

<body>

<h1>Учебный курс по NetBeans Visual Library для приложений Java</h1>

<p>В этом учебном курсе вы узнаете, как использовать основные свойства, предлагаемые <a href="http://bits.netbeans.org/dev/javadoc/org-netbeans-api-visual/overview-summary.html">интерфейсом API NetBeans Visual Library</a>.
   
     <p><b>Содержание</b></p>
   
   <img  src="../images/articles/68/netbeans-stamp-65-67-68.gif" class="stamp" width="114" height="114" alt="Содержимое на этой странице относится к среде IDE NetBeans 6.5, 6.7, 6.8" title="Содержимое на этой странице относится к среде IDE NetBeans 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">Среда IDE NetBeans</a></td>
                <td class="tbltd1">версия 6.5 или выше </td>
            </tr>
            <tr>
                <td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Комплект для разработчика на языке Java (JDK)</a></td>
                <td class="tbltd1">версия 6 или<br/>версия 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>Выберите &quot;File&quot; &gt; &quot;New Project&quot; (Ctrl+Shift+N). В области &quot;Categories&quot; выберите &quot;Java&quot;. В области &quot;Projects&quot; выберите &quot;Java Application&quot;. Нажмите кнопку &quot;Next&quot;.</li>
    <li>На экране &quot;Name and Location&quot; в поле &quot;Project Name&quot; введите <tt>VisLibDemo</tt>:
    <p><p><img border="1" src="../images/tutorials/vislib/vislib-java-1.png"/>
    <p>Нажмите кнопку &quot;Finish&quot;.</li>
</ol>

<p>В среде IDE будет создан проект <tt>VisLibDemo</tt>. К основному пакету добавьте три приведенных выше изображения. На экране появится следующее окно:
<p><img border="1" src="../images/tutorials/vislib/vislib-java-2.png"/>


<p><h2><a name="add"></a>Добавление библиотек</h2>

<p>В этом разделе добавляем две библиотеки, которые необходимы для работы с Visual Library.

<ol>
    <li>Щелкните узел &quot;Libraries&quot; правой кнопкой мыши и выберите команду &quot;Add JAR/Folder&quot;.</li>
    <li>Перейдите в каталог установки среды IDE NetBeans.</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>Сейчас вам потребуются только два файла JAR. На экране появится следующее окно:
<p><img border="1" src="../images/tutorials/vislib/vislib-java-3.png"/>

<p><h2><a name="container"></a>Создание контейнера</h2>

<p>В этом разделе создаем контейнер, в котором будет содержаться <tt>сцена</tt> из Visual Library.

<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 для добавления операторов импорта и абстрактных методов. На экране появится следующее окно:

<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>Используем три элемента <tt>LayerWidgets</tt>, аналогичные элементам <tt>JGlassPanes</tt> в Swing. Объявите их вверху класса:
<pre class=examplecode>
private LayerWidget mainLayer;
private LayerWidget connectionLayer;
private LayerWidget interactionLayer;
</pre>
     </li>
     <li>Создайте конструктор, инициализируйте элементы <tt>LayerWidgets</tt> и добавьте их в <tt>сцену</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>В вышеуказанном коде вы создали четыре элемента оформления, передали строку и задали позицию элементов оформления. Теперь выполним метод <tt>attachNodeWidget</tt>, определенный в предыдущем шаге. Параметр <tt>arg</tt> в методе <tt>attachNodeWidget</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>//Создать элемент GraphSceneImpl:
    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>Теперь, после того как вы получили основное представление о функциях интерфейса Visual Library API, ознакомьтесь с разделом &quot;Интерфейсы NetBeans для отображения данных&quot; в <a href="https://netbeans.org/kb/trails/platform_ru.html">Учебной карте по платформе NetBeans</a>.

    </body>
</html>