T.M. SoftStudio

feci quod potui, faciant meliora potentes

Купить полную версию книги "Среда разработки Eclipse 4: Руководство разработчика"

Создание RCP-приложений

Создание Eclipse 4 RCP-приложения

Стилизация E4-приложения с помощью CSS

Откроем среду Eclipse с установленным плагином Eclipse 4 core tools.

В меню File выберем мастер New | Other | Eclipse 4 | Eclipse 4 Application Project, нажмем кнопку Next, введем имя проекта, нажмем кнопку Next | Next, отметим флажок Create sample content и нажмем кнопку Finish.

Установим плагины CSS file editor и CSS Spy for Eclipse 4 (см. Создание Eclipse 4 RCP-приложения).

С помощью плагина CSS file editor в разделе Appearance команды Preferences меню Window среды Eclipse можно увидеть, какие CSS-стили используются для определения внешнего вида самой среды разработки Eclipse (рис. 7.22.).

Рис. 7.22. CSS-стили тем среды Eclipse

Плагин CSS Spy for Eclipse 4 с помощью набора клавиш Shift-Alt-F5 отображает CSS-стили для дерева GUI-компонентов активного окна Eclipse-приложения и обеспечивает тестирование «на лету» изменений CSS-свойств (рис. 7.23).

Рис. 7.23. Отображение CSS-стилей для дерева GUI-компонентов активного окна Eclipse-приложения с использованием плагина CSS Spy for Eclipse 4

Файл CSS-стилей по умолчанию default.css для проекта E4-приложения расположен в папке css каталога проекта и его расположение определяется значением свойства applicationCSS точки расширения org.eclipse.core.runtime.products.

Свойство applicationCSS указывается в файле plugin.xml проекта приложения.

Откроем вкладку Overview редактора Plug-in Manifest Editor и нажмем ссылку Extensions. Раскроем узел точки расширения продукта и увидим свойство applicationCSS (рис. 7.24).

Рис. 7.24. Свойство applicationCSS точки расширения org.eclipse.core.runtime.products

В качестве селекторов в файле CSS-стилей E4-приложения используются названия классов SWT-компонентов, например, Label, Text, Shell и др. (см. http://wiki.eclipse.org/E4/CSS/SWT_Mapping), для элементов модели приложения используются CSS-классы .MPart, .MPartStack, .MPartSashContainer, .MTrimBar.

При добавлении тэга к элементу модели приложения, соответствующий CSS-класс расширяется на тэг, например, .MPart.tag.

В проекте E4-приложения создадим Part-часть с тэгом view и классом ViewPart.

Установим плагин WindowBuilder и откроем файл ViewPart.java в редакторе WindowBuilder Editor.

Во вкладке Design WindowBuilder-редактора добавим компоненты RowLayout, Text, Label и Button.

Откроем файл css/default.css в редакторе и добавим код:

Button {

font-size: 12;

font-weight: bold;

cursor:crosshair;

}

Label {

font-style: italic;

font-size: 12;

font-weight: bold;

font-family: "Terminal";

color:red;

background-color: blue;

}

Text {

font: Verdana 10px;

background-color: grey;

color: brown;

}

.MPart.view{

background-color: yellow;

}

Примечание

Так как SWT-система использует GUI-компоненты низлежащей операционной системы, возможности CSS-стилизации ограничены возможностями SWT-реализации.

Теперь при запуске приложения среда выполнения будет считывать CSS-файл и устанавливать свойства GUI-компонентов.

CSS-стили можно определять и для конкретных объектов GUI-интерфейса с помощью установки идентификаторов или классов Widget-компонентов.

Установку идентификаторов и классов Widget-компонентов обеспечивают методы setClassname(Object widget, String classname), setClassnameAndId(Object widget, String classname, String id), setId(Object widget, String id) сервиса org.eclipse.e4.ui.services.IStylingEngine:

@PostConstruct

public void postConstruct(Composite parent, IStylingEngine engine) {

parent.setLayout(new RowLayout(SWT.HORIZONTAL));

Button btnNewButton = new Button(parent, SWT.BORDER);

btnNewButton.setLayoutData(new RowData(108, 73));

btnNewButton.setText("New Button");

engine.setId(btnNewButton, "newbutton");

}

CSS-файл:

#newbutton {

font-size: 12;

font-weight: bold;

cursor:crosshair;

}

Во вкладке Dependencies редактора Product Configuration Editor файла .product проекта E4-приложения кнопкой Add добавим зависимость от плагина org.eclipse.e4.tools.css.spy.

Во вкладке Overview с помощью ссылки Launch an Eclipse application запустим Е4-приложение.

Нажмем комбинацию клавиш Shift+Alt+F5 – запустим инструмент CSS Spy.

В открывшемся окне можно выбирать компонент GUI-интерфейса, изменять его CSS-свойства и смотреть результат изменений.

Плагин org.eclipse.e4.ui.css.swt.theme позволяет определить для Е4-приложения несколько тем со своими CSS-стилями для Е4-компонентов с переключением между темами во время выполнения приложения.

Откроем вкладку Overview редактора Plug-in Manifest Editor и нажмем ссылку Extensions. Раскроем узел точки расширения продукта и кнопкой Remove удалим свойство applicationCSS.

Нажмем кнопку Add, уберем флажок Show only extension points from the required plug-ins, выберем плагин org.eclipse.e4.ui.css.swt.theme и нажмем кнопку Finish.

В папке css каталога проекта создадим файл mycss.css.

Нажмем правой кнопкой мышки на точке расширения плагина org.eclipse.e4.ui.css.swt.theme и создадим две темы, связанные с CSS-файлами default.css и mycss.css (рис. 7.25).

Код файла default.css:

.MPart{

background-color: red;

}

Код файла mycss.css:

.MPart{

background-color: yellow;

}

Рис. 7.25. Темы точки расширения плагина org.eclipse.e4.ui.css.swt.theme

Для точки расширения плагина org.eclipse.core.runtime.products создадим свойство cssTheme со значением идентификатора одной из тем (рис. 7.26).

Рис. 7.26. Свойство cssTheme точки расширения плагина org.eclipse.core.runtime.products

Во вкладке Form редактора файла Application.e4xmi модели приложения нажмем правой кнопкой мышки на узле Application | Windows | Trimmed Window | Main Menu и командой Add child | Menu добавим меню с элементом меню DirectMenuItem и обработчиком со следующим кодом:

import org.eclipse.e4.core.di.annotations.Execute;

import org.eclipse.e4.ui.css.swt.theme.IThemeEngine;



public class SwitchHandler {

@Execute

public void execute(IThemeEngine engine) {

if (!engine.getActiveTheme().getId().equals("E4RCP.theme1")){

engine.setTheme("E4RCP.theme1", true);

} else {

engine.setTheme("E4RCP.theme2", true);

}}}

Теперь при запуске приложения выбор элемента меню позволит переключаться между темами GUI-интерфейса.


Создание Eclipse 4 RCP-приложения. Создание меню и панели инструментов