| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <!-- |
| Copyright (c) 2009 - 2014, Oracle and/or its affiliates. All rights reserved. |
| --> |
| <html> |
| <head> |
| <title>Поддержка редактирования промежутков в конструкторе графического интерфейса пользователя NetBeans</title> |
| <!-- BEGIN METADATA --> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" > |
| <meta name="description" content="This tutorial is intended as a guide to show how to utilize gap editing in the NetBeans GUI Builder without concern for the underlying layout manager."> |
| <meta name="KEYWORDS" content="NetBeans, Free Design, Tutorial, Guide, User, Documentation, Basic"> |
| <link rel="stylesheet" href="../../../netbeans.css"> |
| |
| <!-- END METADATA --> |
| |
| </head> |
| <body> |
| |
| <a name="top"></a> |
| <h1>Поддержка редактирования промежутков в конструкторе графического интерфейса пользователя NetBeans</h1> |
| <div class="articledate" style="margin-left: 0px;">Ян Лагода (Jan Lahoda), Алена Сташкова (Alyona Stashkova)</div> |
| <p>Компоновка контейнера в режиме 'Свободное проектирование' состоит из компонентов и промежутков между этими компонентами. И компоненты, и промежутки визуализированы в представлении 'Проектирование' конструктора графического интерфейса пользователя. IDE NetBeans позволяет редактировать промежутки напрямую в конструкторе графического интерфейса пользователя. </p> |
| <p>В этом учебном курсе описывается использование редактирования промежутков для вставки новых компонентов пользовательского интерфейса между другими компонентами, а также простое центрирование компонентов вокруг фрейма в конструкторе графического интерфейса пользователя NetBeans без влияния на работу базового диспетчера компоновки. Этот учебный курс разработан как руководство для описания способа выполнения изменений в существующей форме в режиме 'Свободное проектирование' для реализации специальной целевой компоновки, необходимой для проекта. </p> |
| |
| |
| |
| |
| |
| <p><b>Содержание</b></p> |
| <img alt="Содержимое на этой странице применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0" class="stamp" src="../../../images_www/articles/73/netbeans-stamp-80-74-73.png" title="Содержимое на этой странице применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0"> |
| <ul class="toc"> |
| <li><a href="#zip">Открытие примера проекта</a></li> |
| <li><a href="#drag">Изменение размера промежутка путем перетаскивания его краев</a></li> |
| <li><a href="#wheel">Изменение промежутка с помощью колесика мыши</a></li> |
| <li><a href="#container">Изменение промежутков рядом с компонентами</a></li> |
| <li><a href="#summary">Заключение</a></li> |
| <li><a href="#seealso">Дополнительные сведения</a></li> |
| </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">7.2, 7.3, 7.4 или 8.0 </td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Комплект для разработчика на языке Java (JDK)</a></td> |
| <td class="tbltd1">Версия 6, 7 или 8 </td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip">GapSupport.zip</a></td> |
| <td class="tbltd1">Архив с исходными файлами, содержащими начальную и целевую компоновки учебного курса. </td> |
| </tr> |
| |
| </tbody> |
| </table> |
| |
| <p class="notes"><strong>Примечания</strong></p> |
| <div class="indent"> |
| <ul> |
| <li>Проект, используемый в качестве отправной точки для данного курса, можно загрузить в форме архива <tt>.zip</tt>. </li> |
| <li>В данном руководстве основное внимание уделено созданию структуры контейнера. Добавление функциональных возможностей к графическому интерфейсу выходит за его рамки.</li> |
| <li>Для включения и выключения визуализации промежутков используйте параметр <tt>Визуализировать дополнительные сведения о компоновке</tt> после выбора <tt>Сервис</tt> > <tt>Параметры</tt> > <tt>Java</tt> > <tt>Конструктор графического интерфейса пользователя</tt> в главном меню IDE'. </li> |
| </ul> |
| </div> |
| <!-- ++++++++++++ Using .zip ++++++++++++ --> |
| <a name="zip"></a> |
| <h2>Открытие примера проекта</h2> |
| |
| <ol><li>Загрузите и разарвируйте архив <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip">GapSupport.zip</a> в любую папку на своем компьютере.</li> |
| <li>В главном меню IDE NetBeans выберите <tt>Файл</tt> > <tt>Открыть проект</tt>, перейдите к папке, содержащей разархивированные файлы с проектом <tt>GapSupport</tt>, разархивированном в предыдущем шаге.</li> |
| <li>Нажмите кнопку "Открыть проект".<br> Окно "Projects" (Проекты) должно выглядеть следующим образом: |
| <p class="align-center"><img alt="Откройте окно &quot;Проект&quot;." border="1" src="../../../images_www/articles/72/java/gui-gaps/prj.png"></p></li> |
| <li> Дважды щелкните файл <tt>Initial.java</tt>.<br> В конструкторе графического интерфейса откроется образец формы в режиме конструктора. |
| <p class="align-center"><img alt="Initial.java открыт" border="1" src="../../../images_www/articles/72/java/gui-gaps/initialform.png"></p> |
| <p class="notes"><b>Примечание.</b> Можно просмотреть иерархию компонентов формы в окне навигатора, выбрав в основной панели инструментов Window > 'Навигатор'.</p> |
| <p class="align-center"><img alt="Окно навигатора" border="1" src="../../../images_www/articles/72/java/gui-gaps/navigator.png"></p></li> |
| </ol> |
| |
| |
| <p class="align-center"><a href="#top">В начало</a></p> |
| <!-- ++++++++++++ DnD an Edge of a Gap ++++++++++++ --> |
| <a name="drag"></a> |
| <h2>Изменение размера промежутка путем перетаскивания его краев </h2> |
| <p>Рассмотрим способы редактирования промежутка путем перетаскивания его краев в представлении 'Проектирование' в среде IDE.</p> |
| <p> Чтобы добавить строку <tt>Отчество</tt> между строками <tt>Имя</tt> и <tt>Фамилия</tt> необходимо выполнить следующие шаги:</p> |
| |
| <ol> |
| <li>Щелкните промежуток между метками <tt>Имя</tt> и <tt>Фамилия</tt>.<br> Промежуток выделяется зеленым. |
| <p class="align-center"><img alt="Промежуток выделен" border="1" src="../../../images_www/articles/72/java/gui-gaps/gap-highlighted.png"></p></li> |
| <li>Наведите курсор мыши на нижнюю часть выделенного промежутка.<br> Указатель будет преобразован в вертикальный указатель с поддержкой изменения размера. |
| <p class="align-center"><img alt="Указатель будет преобразован в указатель с поддержкой изменения размера" border="1" src="../../../images_www/articles/72/java/gui-gaps/gap-resizable.png"></p></li> |
| <li>Увеличить выбранный промежуток до 50 нажатием левой кнопки мыши, перетаскиванием указателя вниз, после чего следует отжать левую кнопку мыши.<br> Новый размер промежутка отображается в подсказке. |
| <p class="align-center"><img alt="Увеличение размера промежутка" border="1" src="../../../images_www/articles/72/java/gui-gaps/resizing.png"></p></li> |
| <li>Добавить новую метку в созданный промежуток, перетащив его из раздела 'Элементы управления Swing' палитры и отпустив его таким образом, чтобы левая граница была выровнена с левой границей метки <tt>Имя</tt> а ее верхняя граница содержала указанный предпочитаемый промежуток из строки <tt>Имя</tt>. |
| <p class="align-center"><img alt="Добавление метки" border="1" src="../../../images_www/articles/72/java/gui-gaps/jlabel.png"></p></li> |
| <li>Дважды щелкните метку и измените текст метки на <tt>Отчество:</tt>. |
| <p class="align-center"><img alt="Текст изменен на 'Отчество':" border="1" src="../../../images_www/articles/72/java/gui-gaps/middle-name.png"></p></li> |
| <li>Добавьте новое текстовое поле к правой стороне метки <tt>Отчество:</tt> перетащив его из раздела 'Элементы управления Swing' палитры и отпустив его, таким образом, чтобы его базовая линия была выровнена с меткой <tt>Отчество</tt>, а левая граница была выровнена с другими текстовыми полями. |
| <p class="align-center"><img alt="Добавление текстового поля" border="1" src="../../../images_www/articles/72/java/gui-gaps/textfield.png"></p></li> |
| <li>Перетащите правую границу текстового поля для выравнивания его с правой границей других текстовых полей. |
| <p class="align-center"><img alt="Изменение размера текстового поля" border="1" src="../../../images_www/articles/72/java/gui-gaps/textfield-resized.png"></p></li> |
| <li>Щелкните правой кнопкой мыши текст внутри текстового поля и выбрав 'Редактировать текст' во всплывающем меню. Удалите текст. </li> |
| </ol> |
| <p>Строка <tt>Отчество</tt> вставлена между компонентами формы.</p> |
| <p class="align-center"><img alt="Изменение размера текстового поля" border="1" src="../../../images_www/articles/72/java/gui-gaps/middle-inserted-gap.png"></p> |
| <p class="align-center"><a href="#top">В начало</a></p> |
| |
| |
| |
| <!-- ++++++++++++ Using Mouse Wheel When Resizing ++++++++++++ --> |
| <a name="wheel"></a> |
| <h2>Изменение промежутка с помощью колесика мыши</h2> |
| |
| <p>Среда IDE позволяет изменить промежуток щелчком мыши и последующей прокруткой колесиком мыши для задания точного размера промежутка. </p> |
| <p>Для удаление оставшегося пространства между строками <tt>Отчество</tt> и <tt>Фаилия</tt> щелкните промежуток ниже и уменьшите высоту промежутка путем прокрутки колесика мыши вниз и задания нового размера равным <tt>малому по умолчанию</tt>.</p> |
| <p class="notes"><b>Примечание.</b> Конструктор графического интерфейса пользователя NetBeans поддерживает три рекомендуемых промежутка для размещения компонентов - <tt>малый по умолчанию</tt>, <tt>средний по умолчанию</tt> и <tt>большой по умолчанию</tt>. </p> |
| <p class="align-center"><img alt="малый по умолчанию" border="1" src="../../../images_www/articles/72/java/gui-gaps/default-small.png"></p> |
| |
| |
| <p>Размер промежутка между компонентами формы можно изменить с помощью колесика мыши и использование рекомендованного промежутка.</p> |
| <p class="align-center"><img alt="Вставлена строка 'Отчество'" border="1" src="../../../images_www/articles/72/java/gui-gaps/middle-inserted.png"></p> |
| |
| <p class="align-center"><a href="#top">В начало</a></p> |
| <!-- ++++++++++++ Resizing a Gap Around a Container ++++++++++++ --> |
| <a name="container"></a> |
| <h2>Изменение промежутков рядом с компонентами</h2> |
| <p>Можно выполнить центрирование компонента, заключив его в два идентичных промежутка, которые были ранее помечены как поддерживающие изменение размера.</p> |
| <p class="notes"><b>Примечание.</b> Контейнер используется для указания местоположения центрирования компонентов. Можно отцентрировать кнопки, не добавляя их к новой панели, но это трудно сделать в конструкторе графического интерфейса пользователя и полученная компоновка будет отличаться некоторой ненадежностью. Поэтому мы рекомендуем включать компонент, отцентрированный на панели там, где это возможно.</p> |
| <p><b>Для включения кнопок и промежутков с поддержкой изменения размера в отдельный контейнер выполните следующие действия:</b> </p> |
| |
| <ol> |
| <li>Выберите в форме все четыре кнопки. </li> |
| <li>Щелкните правой кнопкой мыши выборку и выберите <tt>Заключить в</tt> > <tt>Панель</tt> во всплывающем меню. |
| <p class="align-center"><img alt="Выбор 'Панель' во всплывающем меню" border="1" src="../../../images_www/articles/72/java/gui-gaps/enclose-panel.png"></p> |
| Кнопки будут добавлены в контейнер. |
| <p class="align-center"><img alt="Кнопки добавлены к панели" border="1" src="../../../images_www/articles/72/java/gui-gaps/buttons-enclosed.png"></p></li> |
| </ol> |
| |
| <p><b>Чтобы удалить новые созданные промежутки пробелы слева и справа от кнопок, выполните следующие шаги:</b></p> |
| <ol> |
| <li>Щелкните правой кнопкой мыши одну из кнопок и выберите 'Изменить пространство компоновки' во всплывающем меню.<br> Отображается диалоговое окно 'Изменить пространство компоновки'. |
| <p class="align-center"><img alt="Диалоговое окно ''Изменить пространство компоновки''" border="1" src="../../../images_www/articles/72/java/gui-gaps/edit-layout-space.png"></p></li> |
| <li> Задайте размер левого и правого промежутка равным 0 и нажмите OK.<br> Промежутки справа и слева от кнопок удаляются с помощью диалогового окна 'Изменить пространство компоновки'. |
| <p class="align-center"><img alt="Промежутки слева и справа удалены" border="1" src="../../../images_www/articles/72/java/gui-gaps/gaps-removed.png"></p></li> |
| </ol> |
| <p><b>Чтобы включить для промежутков выше и ниже контейнера поддержку изменения размера, выполните следующие действия:</b></p> |
| |
| <ol> |
| <li> Дважды щелкните промежуток в нижней части последней кнопки.<br> Отображается диалоговое окно 'Изменить пространство компоновки'.</li> |
| <li>В диалоговом окне выберите 'Изменить пространство компоновки' выберите параметр <tt>С поддержкой изменения размера</tt> и нажмите ОК. |
| <p class="align-center"> |
| <a href="../../../images_www/articles/72/java/gui-gaps/bottom.png" rel="lytebox" title="Измяется размер промежутка в нижней части"> <img alt="Измяется размер промежутка в нижней части" border="1" src="../../../images_www/articles/72/java/gui-gaps/bottom-small.png"></a></p></li> |
| <li> Повторите шаги 1 и 2 для промежутка над самой верхней кнопкой.<br> Для промежутков выше и ниже контейнера с кнопками включена поддержка изменения размера.</li> |
| </ol> |
| |
| <p><b>Центрирование кнопок в образце формы</b>:</p> |
| <p>Перетащите нижнюю границу контейнера с кнопками для выравнивания с нижними границами списков, как показано ниже: </p> |
| <p class="align-center"><img alt="Центрирования контейнера с кнопками" border="1" src="../../../images_www/articles/72/java/gui-gaps/align.png"></p> |
| <p>Контейнер растягивается для соответствия высоте списков <tt>Доступные темы</tt> и <tt>Выбранные темы</tt>. Кнопки центрируются в пространстве, определенном включающим контейнером, поскольку окружающие промежутки были помечены как поддерживающие изменение размера. </p> |
| <p class="align-center"><img alt="Кнопки отцентрированы" border="1" src="../../../images_www/articles/72/java/gui-gaps/buttons-centered.png"></p> |
| |
| |
| |
| <p class="align-center"><a href="#top">В начало</a></p> |
| |
| |
| <!-- ++++++++++++ Summary ++++++++++++ --> |
| <a name="summary"></a> |
| <h2>Заключение</h2> |
| <p>В этом учебном руководстве была усовершенствована простая форма. Этот учебный курс разработан как руководство для описания способа выполнения изменений в существующей форме в режиме 'Свободное проектирование' для реализации специальной целевой компоновки, необходимой для проекта.</p> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <p class="align-center"><a href="#top">В начало</a></p> |
| |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20Gap%20Support">Отправить отзыв по этому учебному курсу</a></div> |
| <br style="clear:both;" > |
| <a name="seealso"></a> |
| <h2>Дополнительные сведения</h2> |
| <p>Изучение учебного курса 'Поддержка редактирования промежутков в конструкторе графического интерфейса пользователя NetBeans' завершено. Сведения о добавлении функциональных возможностей к создаваемому графическому интерфейсу приведены в разделах:</p> |
| <ul> |
| <li><a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG920">Реализация графических интерфейсов Java</a> в документе <i>Разработка приложений в IDE NetBeans</i></li> |
| <li><a href="gui-functionality.html">Введение в создание графического интерфейса на языке Java</a></li> |
| <li><a href="http://wiki.netbeans.org/NetBeansUserFAQ#GUI_Editor_.28Matisse.29" target="_blank">Часто задаваемые вопросы по GUI Builder</a> </li> |
| <li><a href="../../trails/matisse.html">Учебная карта по приложениям с графическим интерфейсом Java </a> </li> |
| </ul> |
| |
| <p class="align-center"><a href="#top">В начало</a></p> |
| |
| |
| </body> |
| </html> |
