| <!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> |