src/content/platform/tutorials/72/nbm-quick-start-visual_ru.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>Учебный курс по 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.">
          <!--      Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. -->
         <!--     Use is subject to license terms.-->
 </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>

    <p><img  src="../../images/articles/69/netbeans-stamp7-8-9.png" 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.7 или выше </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;Файл&quot; команду &quot;Новый проект&quot; (CTRL+SHIFT+N). В области &quot;Категории&quot; выберите &quot;Java&quot;. В области &quot;Проекты&quot; выберите &quot;Приложение Java&quot;. Нажмите кнопку &quot;Далее&quot;.</li>
     <li>На экране &quot;Имя и местоположение&quot; в поле &quot;Имя проекта&quot; введите <tt>VisLibDemo</tt>:
     <p><p><img border="1" src="../../images/tutorials/vislib/vislib-java-1.png"/>
     <p>Нажмите кнопку &quot;Готово&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;Добавить архив JAR/папку&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>
	<!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.">
	<!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. -->
	<!-- Use is subject to license terms.-->
	</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>

	<p><img src="../../images/articles/69/netbeans-stamp7-8-9.png" 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.7 или выше </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>Выберите в меню "Файл" команду "Новый проект" (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>. К основному пакету добавьте три приведенных выше изображения. На экране появится следующее окно:
	<p><img border="1" src="../../images/tutorials/vislib/vislib-java-2.png"/>



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

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

	<ol>
	<li>Щелкните узел "Libraries" правой кнопкой мыши и выберите команду "Добавить архив JAR/папку".</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("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 для добавления операторов импорта и абстрактных методов. На экране появится следующее окно:

	<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>Используем три элемента <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("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>В вышеуказанном коде вы создали четыре элемента оформления, передали строку и задали позицию элементов оформления. Теперь выполним метод <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("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>Теперь, после того как вы получили основное представление о функциях интерфейса Visual Library API, ознакомьтесь с разделом "Интерфейсы NetBeans для отображения данных" в <a href="https://netbeans.org/kb/trails/platform_ru.html">Учебной карте по платформе NetBeans</a>.

	</body>
	</html>