Панель свойств (Property Pane)

Руководство по созданию графического интерфейса с использованием WindowsBuilderPro
Здесь мы познакомимся с графическим редактором (VisualEditor WindowsBuilderPro). Известно,
что 95% кода приложения сосредоточено на создание графического интерфейса с пользователем
и лишь 5% представляет собой бизнес-модель. В последнее время для того, чтобы увеличить
производительность разработки приложений, усилия многих коллективов разработчиков
направлены на создание графических редакторов и инструментальных средств, предназначенных
для графической разметки и автоматизированной генерации кода все более и более сложных
графических интерфейсов. Эти усилия направлены на создание среды, аналогичной Microsoft
VisualStudio успешно решающей задачи проектирования графического интерфейса. Обычно,
графический редактор поддерживает соответствие между изображением экрана и исходным
текстом программы в прямом и обратном направлении, что означает, что изменения в исходном
коде программы отображаются на элементы интерфейса и наоборот, изменения элементов
интерфейса отображается в исходном тексте программы.
Мы будем использовать WindowsBuilderPro версии 6.8.0.200810070805 для Eclipse 3.3 (Europe) от
фирмы ( http://www.instantiations.com/). Предлагаемый инструментарий,
расширяющий Eclipse, позволяет создавать сложные интерфейсы в кратчайшие сроки, используя
WYSIWYG подход, drag-and-drop и мастеров c последующей генерацией кода Java. Интерфейс
приложения может быть создан на основе компонентов Swing, SWT, RCP и GWT , включая
наиболее популярные элементы управления (widget) и менеджеры расположений (layout
managers).
Быстрое начало:
1. Установить Eclipse 3.3. (См. Соответствующее руководство)
2. Активировать WindowsBuilder:
- Заблокируйте выход в Интернет.
- Распакуйте приложение WindowsBuilder в подкаталог eclipse
- Выполните 'java -jar Keygen.jar', чтобы получить регистрационную информацию
- Запустите Eclipse
- Выберите пункт Window\Preferences\Designer\License
- Отключите флажок "Automaticaly activate when possible"
- Нажмите кнопку Registration and Activation button
- Ведите Serial number и Activation key
- Выберите вариант "By email"
- Нажмите кнопку Next
- Заполните необходимую информацию
- Нажмите кнопку Next
- Нажмите кнопку Next
- Нажмите кнопку Finish
3. Создайте новый проект.
WindowBuilder поддерживает большое количество мастеров. Каждый инструментарий
поддерживает один или более мастеров.
Мастера могут быть доступны Eclipse (File > New > Other)
или из выпадающего меню WindowBuilder .
4. Используйте соответствующий мастер класса для создания первого
графического окна или редактирование существующего окна
Для открытия файла, который не был создан с помощью WindowBuilder или который был
создан с помощью другого редактора, просто нажмите правую кнопку на файл и выберите
Open With > WindowBuilder Editor.
При этом файл откроется в редакторе WindowBuilder в режиме Source View по умолчанию
(редактор расположения может быть легко переустановлен, если вы предпочитаете режим
Design View сначала или пожелаете, чтобы Source View и Design View были одновременно).
В нижней части окна редактора располагаются метки Source и Design, как показано на
рисунке внизу. Если вы нажмете на метку Design или F12 файл будет представлен в режиме
Design View и вы будете способны графически проектировать интерфейс.
5. Выберите необходимый менеджер расположения (layout manager) для окна
Программа, написанная на Java может выполняться на различных платформах. Если использовались
стандартные технологии проектирования графического интерфейса, то задание абсолютных позиций и
размеров элементов графического интерфейса может привести к ограничению мобильности приложения.
Для решения этой проблемы Java обеспечивает мобильные менеджеры расположения. Эти менеджеры
используются для задания правил и ограничений для расположения элементов графического интерфейса
для выполнения условий мобильности.
Менеджер расположения обеспечивает следующие преимущества:

Правильно размещенные компоненты, которые не зависят от шрифтов, разрешения
экранов и платформенную независимость..

Интеллектуальное размещение компонентов для контейнеров, которые динамически
изменяют размер во время исполнения.

Легкая трансляция. Если длина строки увеличивается после трансляции, то связанный
компонент остается правильно выровненным..
О менеджерах расположения
Когда разрабатывается Java приложение, может потребоваться использовать схему расположения
для того чтобы придать окну определенный вид. Схема расположения контролирует позицию и
размер подчиненных элементов в контейнере. Классы схемы расположения являются
подклассами абстрактного класса Layout. И SWT и Swing обеспечивают несколько стандартных
классов расположения, также можно написать свои собственные классы
Позиционирование и изменение размера в Java не происходит автоматически. Приложения сами
могут решать изменять размер и местоположение элементов контейнера изначально или в
слушателе изменения размера. Альтернативой этому является определение расположение класса
в позиции и размере наследника. Если наследнику не присвоен размер, то размер присваивается
равным нулю и он не виден.
Менеджер расположения устанавливает размер и расположение других компонентов на основе
следующих факторов:

Правила расположения менеджеров расположения.

Установленные свойства менеджеров расположения, если есть.

Данные расположения, связанные с каждым компонентом.

Размер контейнера.
Каждый менеджер расположения имеет преимущества и недостатки. Расположение на основе Grid
и на основе ограничений (border) являются наиболее полезными и мощными из стандартных
расположений, но они и более сложными. В режиме design можно изменять расположение в
любое время. Изменение расположения может выполняться явно добавлением менеджера
расположения для контейнера или выбирая расположение для композиционного проекта.
6. Добавляйте различные компоненты из панели инструментов и редактируйте
их свойства
Palette обеспечивает быстрый доступ к компонентам и организована по категориям, которые могут
быть расширены и скрыты.
Для добавления компонентов в Design View можно:

Выбрать его и добавить на Design View или в дерево компонентов (Component Tree) ,
щелкая на требуемое место.
Дерево компонентов показывает иерархическую связь всех компонентов в Design View.
Каждый компонент в дереве представлен иконкой, именем переменной и текстовой меткой.
Компоненты могут быть представлены как локальные переменные или поля, имена переменных
должны быть уникальны внутри диапазона, в котором компонент определен.
Иконка изображается с индикатором (приведен в таблице ниже), используемым для индикации
того, является ли компонент определителем или обработчиком событий, или представляется как
открытый компонент специального контейнера.
Для расширения компонентов в дереве используется кнопка Expand All
, а для сворачивания
отображаемой на экране структуры используется кнопка
Collapse All
.
Нажатие правой кнопки приводит к появлению контекстного
меню, доступного в режиме Design View. Компоненты могут
быть переупорядочены в дереве посредством drag/drop или
удалены с использованием клавиши Delete.
Множественные компоненты могут быть выбраны в дереве с
традиционно помощью клавиш Ctrl или Shift .
Иконка Имя

Описание
Exposed
Подчиненные элементы представляются в специальном контейнере.
Event
Определены компоненты с одним или более обработчиком событий.
Использовать команду выбора компонента (Choose Component) для выбора типа элемента
управления из диалога Choose Component . Множественные компоненты могут быть
выбраны в дереве с традиционно помощью клавиш Ctrl или Shift.
Палитра (palette) может быть настроена правой кнопки в
любом месте palette для доступа к контекстному меню
(Описание содержания конкретных меню смотреть Help/Help
Context/Designer Guide) или открытием Менеджера палитры
(Palette Manager). Описание содержания меню смотреть
Help/Help Context/Designer Guide/User Interface/Palette).
Следующие команды являются общими для каждой палитры:

Selection

Marquee

Choose component

Tab Order
Общие команды палитры
Выбор Выбирает один или больше элементов управления (widgets). Удерживайте
клавиши Shift или Ctrl для выбора нескольких элементов управления.
Шатер (Marquee)
Накройте диапазоном выбранные несколько объектов. Удерживайте
клавишу Alt и начните перемещать курсор мыши для автоматического включения инструмента
Marquee..
Выбор компонента (Choose component)
Добавляет компонент к редактору. Введите
имя класса или выберите из списка. Можно нажать правую кнопку на элементе в списке для для
удаления из истории (Remove from History).
Tab Order
Устанавливает порядок перехода компонентов по клавише табуляции.
Положение Palette может быть конфигурировано посредством drag and drop. Palette может быть
прижато либо к левой либо к правой стороне Design View. Также Palette может быть скрыта с
последующим расширением.
Palette также может располагаться отдельно.
Панель свойств (Property Pane)
Панель свойств (Property Pane)
показывает свойства и события выбранных
компонентов и обеспечивает редактирование
текстовых полей, списков и других элементов
управления и позволяет редактировать свойства и
события. Выберите элемент управления в дереве
компонентов (Component Tree) или в Design View
для их представления и последующего
редактирования .
Когда выбрано несколько элементов управления,
то все их свойства представляются в Property
Pane. Если не все выбранные элементы
управления имеют аналогичные значения для
свойств, то редактор свойств представит их
пустыми.
По умолчанию Property Pane показывает
нормальные свойства. Предпочтительные
свойства показываются полужирным, а
экспертные свойства представляются курсивом
(нажмите кнопку Show advanced properties
для
получения доступа к ним). Серый фон отображает
набор свойств по умолчанию, в то время как белый
фон представляет установленное значение
свойства. Нажмите кнопку Restore default value
для восстановления значения по умолчанию.
Можно выбрать свойство, нажав заголовок войства
или значение. Когда свойство выбрано, редактор
показывает его значение, которое можно изменять. В большинстве свойств Enter используется
для применения установленного значения, а Esc для возвращения к предыдущему значению.
Если выбрано несколько свойств, вы можете использовать клавиши навигации для перехода
между свойствами.
Property Pane поддерживает простые свойства, такие как String и int, а также сложные, состоящие
из нескольких других свойств, таких как расположение и данные расположения. Сложные свойства
показываются со знаком плюс и минус перед заголовком. Вы можете расширить/скрыть сложные
свойства несколькими способами:

двойной щелчок на заголовок или значение свойства

щелчок на знак плюс или минус

выберите свойство и нажмите на
для расширения,
для сокрытия
Некоторые свойства, такие как strings, colors, fonts и images требуют специальных значений
которые можно установить, нажав на кнопку
.
Состояние свойства (расширенные или скрытые) сохраняются между выборами элементов
управления, таким образом, что если вы расширяете свойство “style” для одного элемента
управления и затем выделяете другой элемент управления, то свойство “style” останется
расширенным и вы сможете легко переходить между ними без необходимости открывать их вновь
и вновь.
Property Pane поддерживает возможность выбора свойств, т.е. свойств, чьи значения могут быть
выбраны из некоторого списка. Например, свойство “type” сложного свойства “style” для Buttons,
является таким свойством. Вы можете изменить его значение следующими способами:

двойной щелчок на значение свойства или для изменения значения на следующее
из списка (или первое значение, если текущее
значение является последним);

выберите свойство и нажмите пробел для
расширения списка и затем используйте
стрелки навигации для изменения значения;

выберите свойство и нажмите Delete для
установки значения по умолчанию.
Двойной щелчок на Property Pane для доступа к контекстному
меню.
7. Визуальное создание и редактирование меню
Меню является наиболее подходящим элементом
графического интерфейса. Использование
WindowBuilder поддерживает быстрое и
безболезненное создание строк меню (menu bars) и
всплывающих меню (popup menus).
Для создания строки меню в окне выберите Menu
Bar (SWT или GWT) или JMenuBar (Swing) из
палитры и поместите его в окно в режиме Design
View.
Каждое окно имеет единственное Menu Bar, и
только одно место в окне, в которое вы можете
поместить Menu Bar. Определенное окно
может быть показано только в окне, для
которого оно было создано. После размещения
Menu Bar можно наблюдать пустую строку
меню вверху окна режима Design View.
Для того, чтобы добавить элемент меню в строку
выберите Cascade Menu Item (SWT) или
JMenu (Swing) из палитры (Palette) и поместите его
в строку меню.
Для того, чтобы добавить пункт к меню выберите
ниспадающее меню и добавьте Menu Item или
JMenuItem к выпадающему меню, которое
показывается. Если вы хотите сделать подменю, то
добавьте Cascade Menu или JMenu к меню.
Пункт меню также может быть в стиле
переключателя (check) или радио-кнопки (radio). Для
того, чтобы создать переключателя (checkbox) или
радио-кнопки (radio button) выберите Check Menu
Item / JCheckBoxMenuItem или Radio Menu
Item / JRadioButtonMenuItem из палитры и
добавьте его к меню. Для SWT, Check Menus
Items и Radio Menu Items являются Menu Items, в
которых style установлен как CHECK или RADIO.
Для того, чтобы сделать переключатель или радиокнопку изначальна выбранной, установите свойство selection true в панели свойств для пункта
меню.
Можно также добавить картинку к пункту меню.
Просто выберите пункт меню, нажмите на
свойство image в панели свойств, нажмите на
кнопку
в редакторе свойств, и выберите
image.
Установка текста утверждения меню выполняется
также как в любом другом элементе управления. В
панели свойств установите свойство
text необходимого содержания. Для SWT, поместите
амперсанд (&) перед символом в свойстве text,
который создает мнемонику для этого пункта меню.
Для Swing вам следует установить свойство you
mnemonic . В большинстве платформ символ после
амперсанда или символ, определенный в свойстве
mnemonic будет выделен после запуска программы. При нажатии на этот символ, когда
отображается меню, соответствующий пункт меню будет выбран.
Для быстрой проверки вида проектируемого меню
в приложении используйте команду
Test/Preview . Для этого нажмите кнопку
Test/Preview в Toolbar над Design View или
правую кнопку в Design View и
выберите Test/Preview.
В дополнение к созданию строки меню, вы можете создать всплывающее меню для любого
элемента управления, включая окно. Просто
выберите Popup Menu (SWT)
или JPopupMenu(Swing) из Palette, переместите
его к желаемому элементу управления в Design
View и щелкните на его место в элементе
управления. Только popup menu может быть
помещено в элемент управления. После
размещения маленькая иконка меню появится
на элементе управления, как показано внизу.
Popup menu будет автоматически открываться, с тем чтобы можно было выбрать пункт меню.
Если щелкните за пределами popup menu, оно исчезнет. Если вы щелкните на иконку popup menu,
popup menu вновь появится.
Добавление пункта меню к popup menu
аналогично добавлению пункта меню в
ниспадающее меню в строке меню. Чтобы
увидеть ваше меню в работе используйте
команду WindowBuilder�s Test/Preview
и щелкните правой кнопкой на элемент
управления, к которому добавлено popup
menu to. Появится созданное вами меню.
Как вы только что видели, создание различных меню в WindowBuilder производится очень быстро
и легко. Добавление определенного обработчика событий для пункта меню также очень легко.
Просто щелкните дважды на пункт меню и обработчик событий будет создан для вас.
8. Добавьте обработчик событий к различным элементам управления для
обеспечения поведения
События происходят, когда пользователь взаимодействует с графическим интерфейсом
приложения на Java. При этом должен выполняться соответствующий код обработчика
прерываний. Для того чтобы знать какое событие произошло, обработчик событий должен быть
добавлен к вашему компоненту. WindowBuilder делает это весьма просто добавляя и удаляя
слушателей (listeners) событий к вашим компонентам. .
Добавление Event Handler
Существует два способа добавить обработчик
событий с использованием
WindowBuilder. Первый способ с
использованием панели свойств (Property
Pane). Сначала выберите компонент либо в
Component Tree или Design View. Щелкните
кнопку Show Events
для получения списка
в Property Pane. Расширьте событие и
щелкните дважды либо нажмите Enter на
обработчике, который вы намерены применять.
Второй способ добавления обработчика событий
состоит в простом нажатии правой кнопки на
компонент (либо в Design View или
Component TreeT), выборе Add event handler
> [name of the event] > [name of the event handler to implement].
Быстрый способ добавить слушатель событий к кнопке (включая переключатель и ради-кнопку) и
пункт меню состоит в двойном нажатии на кнопку или или пункт меню. После такого двойного
нажатия будет создан соответствующий обработчик событий.
В любом случае вы добавляете событие, при котором WindowBuilder будет автоматически
создавать обработчик событий для выбранного метода обработки события. WindowBuilder будет
затем переключен в режим Source View и перейдет непосредственно к вновь созданному
методу обработки событий. Сгенерированный код выглядит следующим образом:
browseButton = new Button(shell, SWT.NONE);
browseButton.addSelectionListener(new SelectionListener() {
public void widgetDefaultSelected(SelectionEvent arg0) {
}
public void widgetSelected(SelectionEvent arg0) {
}
});
browseButton.setText("Browse...");
Существует два способа быстро вернуться в код обработчика
событий из режима Design View. В Property Pane, щелкните
кнопку Show Events
и расширьте событие. Затем двойное
нажатие или нажмите Enter на метод события для возвращения
в код. Список событий в Property Pane является списком всех
применяемых событий и значение свойств представляет собой
список применяемых методов событий. Если метод
применяется, то значением свойства является номер строки
исходного текста где начинается код обработчика события.
Другой способ быстро вернуться в код обработчика событий
компонента состоит в нажатии правой кнопки на компоненте
(либо в Design View либо в Component Tree), и затем выборе
пункта меню для применяемого метода . Показанный справа
"actionPerformed -> line 111" будет выбран. В этом примере
"actionPerformed" является методом события и "111" – номер
строки исходного текста где начинается код обработчика события
Удаление Обработчика событий
Существует единственный способ удалить существующий обработчик событий
в WindowBuilder. Выберите компонент либо в Design View либо в Component Tree. В Property
Pane расширьте событие, щелкните на метод события, которе намерены удалить и нажмите
Delete. Если не существует других методов, которые применяются для этого события ,
то, WindowBuilder также удалит слушатель события для этого события.
9. Если создается Composite или JPanel, можно внедрять их в другое окно,
используя команду Choose Component .
WindowBuilder поддерживает создание индивидуальных Composites (SWT & GWT)
и JPanels (Swing). Это является идеальным способом создания индивидуальных, повторно
используемых компонентов. WindowBuilder поддерживает следующие возможности:

Внедрять любые подклассы Composite для JPanel в другое окно

Все элементы управления, определенные в Composite / JPanel are видимы в окне, в
котором они используются

Доступ любого элемента управления через аксессоры public

Доступ демонстрирует специальные свойства

Демонстрируемые элементы управления появляются в дереве вместе
оформителем
Следующий пример специального компонента Composites, который затем используется в окне.
Composite использует a GridLayout и содержит два элемента управления Labels, два элемента
управления Text, Button и встроенный элемент управления Composite.
Внутренний элемент управления Composite демонстрируется как компонент public,
использующий команду Expose Conrrol. Expose Control преобразует компонент в поле и
добавляет к нему аксессор public. В заключение, свойство цвет background первого элемента
управления Text и свойство text для элемента управления Button демонстрируются как public для
Composite, используя команду Expose Property. Expose Property добавляет пару аксессоров для
для getting и settingжелаемого свойства на результирующем элементе управления.
import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.layout.*;
import org.eclipse.swt.widgets.*;
public class CustomComposite extends Composite {
private Button browseButton;
private Composite composite;
private Text secondField;
private Text firstField;
public CustomComposite(Composite parent, int style) {
super(parent, style);
createContents();
}
public void createContents() {
final GridLayout gridLayout = new GridLayout();
gridLayout.numColumns = 3;
setLayout(gridLayout);
final Label firstFieldLabel = new Label(this, SWT.NONE);
firstFieldLabel.setText("First Field");
firstField = new Text(this, SWT.BORDER);
final GridData gd_firstField = new GridData(SWT.FILL, SWT.CENTER,
true, false);
firstField.setLayoutData(gd_firstField);
browseButton = new Button(this, SWT.NONE);
browseButton.setLayoutData(new GridData(SWT.FILL, SWT.CENTER,
false, false));
browseButton.setText("Browse...");
final Label secondFieldLabel = new Label(this, SWT.NONE);
secondFieldLabel.setText("Second Field");
secondField = new Text(this, SWT.BORDER);
final GridData gd_secondField = new GridData(SWT.FILL,
SWT.CENTER, true, false, 2, 1);
secondField.setLayoutData(gd_secondField);
composite = new Composite(this, SWT.NONE);
composite.setLayoutData(new GridData(SWT.FILL, SWT.FILL, false,
true, 3, 1) );
}
public Composite getComposite() {
return composite;
}
public String getBrowseButtonText() {
return browseButton.getText();
}
public void setBrowseButtonText(String text) {
browseButton.setText(text);
}
public Color getFirstFieldBackground() {
return firstField.getBackground();
}
public void setFirstFieldBackground(Color background) {
firstField.setBackground(background);
}
}
Окно использует FillLayout и внедряет специальный Composite. Окно назначает внутреннего
менеджера расположения для Composite через своего аксессора в специальном Composite и
затем добавляет несколько элементов управления во внутренний Composite. В заключение,
переписывается свойство цвета background для первого элемента управления и свойство Text
назначается с использованием аксессоров, определенных Composite.
Отметим, что демонстрируемый внутренний Composite из специального Composite показывается
в дереве компонентов с маленькой иконкой вверху. Другие элементы управления не
показываются в дереве, поскольку они private для Composite.
import org.eclipse.swt.SWT;
import org.eclipse.swt.widgets.*;
import org.eclipse.swt.layout.*;
import com.swtdesigner.SWTResourceManager;
import org.eclipse.swt.layout.GridLayout;
public class WindowUsingComposite {
protected Shell shell;
private List list;
private Text thirdField;
private Text fourthField;
public static void main(String[] args) {
try {
WindowUsingComposite window = new WindowUsingComposite();
window.open();
} catch (Exception e) {
e.printStackTrace();
}
}
public void open() {
final Display display = Display.getDefault();
createContents();
shell.open();
shell.layout();
while (!shell.isDisposed()) {
if (!display.readAndDispatch()) {
display.sleep();
}
}
}
protected void createContents() {
shell = new Shell(SWT.SHELL_TRIM);
shell.setLayout(new FillLayout(SWT.HORIZONTAL));
shell.setSize(450, 384);
shell.setText("Window Using Composite");
CustomComposite customComposite = new CustomComposite(shell, SWT.NONE);
customComposite.setBrowseButtonText("Find...");
customComposite.setFirstFieldBackground(SWTResourceManager.getColor(SWT
.COLOR_YELLOW));
final GridLayout gridLayout = new GridLayout();
gridLayout.numColumns = 2;
customComposite.getComposite().setLayout(gridLayout);
final Label thirdFieldLabel = new Label(customComposite.getComposite(),
SWT.NONE);
thirdFieldLabel.setText("Third Field");
thirdField = new Text(customComposite.getComposite(), SWT.BORDER);
final GridData gd_thirdField = new GridData(SWT.FILL, SWT.CENTER, true,
false);
thirdField.setLayoutData(gd_thirdField);
final Label fourthFieldLabel = new
Label(customComposite.getComposite(), SWT.NONE);
fourthFieldLabel.setText("Fourth Field");
fourthField = new Text(customComposite.getComposite(), SWT.BORDER);
final GridData gd_fourthField = new GridData(SWT.FILL, SWT.CENTER,
true, false);
fourthField.setLayoutData(gd_fourthField);
list = new List(customComposite.getComposite(), SWT.BORDER);
list.setItems(new String[] {"First Item", "Second Item"});
list.setLayoutData(new GridData(SWT.FILL, SWT.FILL, false, true, 2,
1));
}
}
10. Вы можете запустить ваше приложение, нажав правую кнопку на проекте и
выбрав Run As > Java Application.