Среди множества расширений платформы eclipse хочется отметить проект визуального редактора Visual Editor (VE). Для установки данного проекта необходимо скачать и установить модули следующих проектов:

Данный редактор относится к так называемым WYSIWYG (What You See Is What You Get) редакторам. Данный термин означает способность редактора к редактированию ресурсов в максимально приближенном к оригиналу виде. В данном случае доступно редактирование визуальных объектов в графическом режиме, который позволяет сразу наблюдать конечный результат.

Одной из важнейших функциональных особенностей показывающих насколько это удобный продукт является поддержка двунаправленного редактирования. Это означает, что при внесении изменений в визуальном редакторе автоматически изменяется программный код и, наоборот, при правке кода автоматически изменяется визуальное отображение. В отличие от некоторых других коммерческих визуальных редакторов, редактор VE не требует дополнительных файлов метаданных, как например, в популярной среде разработки Idea. Данный редактор позволяет работать как с графической библиотекой SWT, так и с библиотекой Swing. Фактически он позволяет работать с любыми удовлетворяющими спецификации Java Beans объектами.

Для того чтобы панель файлового менеджера можно было повторно использовать в различных приложениях, создадим ее в виде SWT компонента. Дополнительно, для логической развязки и возможности использования данного компонента в других проектах создадим отдельный модуль расширения для SWT компонент с именем “com.berdaflex.swt.VfsExplorerComposite”. Для поддержки работы с графической библиотекой SWT добавим в файл манифеста данного модуля зависимость от модуля “org.eclipse.ui ”, в виде строчки “Require-Bundle: org.eclipse.ui”.

Если визуальный редактор установлен корректно, то в меню создания новых объектов будут доступны опции по созданию визуальных файлов, как простых так и демонстрационных.

Создадим новый визуальный файл, меню “File->New->Other->Java->Visual Class”. Укажем в качестве предка класс Composite.

Созданный визуальный класс будет открыт в визуальном редакторе. По умолчанию данный редактор отображается в режиме одновременной работы, как с графическими объектами, так и с программным кодом. При помощи сплиттера можно менять занимаемое данными частями редактора пространство.

Существует возможность переключить редактор в режим работы с закладками. При этом освобождается рабочее пространство, что может быть актуально при работе на мониторах с небольшим разрешением. Данный режим устанавливается при помощи меню “Window->Preferences->Java->Visual Editor->Appearance->On separate note tabs”. После изменения настроек редактор надо перезагрузить.

В соответствии с ранее разработанным дизайном панели навигатора определимся с порядком создания компонент. По схеме видно, что основная панель разбивается на три части по вертикали.

Наиболее простым и вполне подходящим менеджером размещения является табличный менеджер размещения “GridLayout”. В корне объекта (this) установим параметры менеджера в одну колонку. Это можно сделать либо в панели свойств объекта, либо вызовом диалога настроек менеджера размещения из контекстного меню, либо нажатием кнопки “Show customize layout window”

Панель адреса так же создадим в виде отдельной компоненты. Реализацию данного компонента отложим на данном этапе, просто создадим заглушку. Сразу можно увидеть мощность визуального редактора, который позволяет использовать вновь созданную компоненту без каких либо специальных настроек. Просто выбираем в палитре компонент “Choose Bean” и указываем в мастере класс бина.

Выравнивание и способ размещения так же можно сделать либо в панели свойств объекта, либо вызовом диалога настроек менеджера размещения из контекстного меню, либо нажатием кнопки “Show customize layout window” , в закладке “Properties”.

Аналогичным образом размещаем на форме остальные компоненты.

Компоненты Tree и Table переведем в связку с TreeView и TreeTable, для этого в правом углу отображаемой компоненты доступно динамическое меню для автоматизации данной операции.

Для изменения статуса видимости панели дерева ресурсов создадим дополнительныt методы.

public void setTreeVisible(boolean visible) {
  this.treeVisible = visible;
  btnExplorerTree.setSelection(visible);
  setExplorerTreeImage();
  treeComposite.setVisible(visible);
  headerPane.layout();
  explorerSashForm.layout();
}

private void setExplorerTreeImage() {
  if (treeVisible) {
    btnExplorerTree.setImage(getHideExplorerImg());
  } else {
    btnExplorerTree.setImage(getShowExplorerImg());
  }
  btnExplorerTree.pack();
}

Метод setExplorerTreeImage() предназначен для автоматического изменения изображения на кнопке при изменении статуса видимости панели, что позволит более наглядно видеть текущее состояние.

Дополнительно создадим get и set методы для изображений, что позволит изменять используемые изображения из внешних программ.

И в завершение, для автоматического изменения состояния на уровне компоненты создадим обработчик нажатия кнопки “изменение статуса видимости панели”. Для этого в визуальном редакторе выберем нужную кнопку и из контекстного меню добавим обработчик события нажатия кнопки. В созданном блоке кода укажем вызов ранее созданного метода для изменения статуса видимости панели.

btnExplorerTree.addMouseListener(new org.eclipse.swt.events.MouseListener() {
public void mouseUp(org.eclipse.swt.events.MouseEvent e) {
    setTreeVisible(!VfsExplorerComposite.this.isTreeVisible());
  }

  public void mouseDown(org.eclipse.swt.events.MouseEvent e) {
  }

  public void mouseDoubleClick(
    org.eclipse.swt.events.MouseEvent e) {
  }
});