GWT - Стиль с CSS
Виджеты GWT используют каскадные таблицы стилей (CSS) для визуального оформления. По умолчанию имя класса для каждого компонентаgwt-<classname>.
Например, виджет Button имеет стиль по умолчанию gwt-Button, а виджет TextBox имеет стиль по умолчанию gwt-TextBox .
Чтобы сделать все кнопки и текстовые поля более крупным шрифтом, вы можете поместить следующее правило в файл CSS вашего приложения
.gwt-Button { font-size: 150%; }
.gwt-TextBox { font-size: 150%; }По умолчанию ни браузер, ни GWT не создают default idатрибуты для виджетов. Вы должны явно создать уникальный идентификатор для элементов, которые вы можете использовать в CSS. Чтобы дать конкретную кнопку с idmy-button-id более крупный шрифт, вы можете поместить следующее правило в файл CSS вашего приложения:
#my-button-id { font-size: 150%; }Чтобы установить идентификатор для виджета GWT, получите его элемент DOM, а затем установите атрибут id следующим образом:
Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")API стилей CSS
Существует множество API-интерфейсов для зависания настроек CSS для любого виджета GWT. Ниже приведены несколько важных API-интерфейсов, которые помогут вам в повседневном веб-программировании с использованием GWT.
| Sr. No. | API и описание |
|---|---|
| 1 |
public void setStyleName(java.lang.String style) Этот метод очистит все существующие стили и установит стиль виджета на новый класс CSS, предоставленный с помощью style . |
| 2 |
public void addStyleName(java.lang.String style) Этот метод добавит к виджету вторичное или зависимое имя стиля. Вторичное имя стиля - это дополнительное имя стиля, то есть, если были применены какие-либо предыдущие имена стилей, они сохраняются. |
| 3 |
public void removeStyleName(java.lang.String style) Этот метод удалит данный стиль из виджета и оставит все остальные, связанные с виджетом. |
| 4 |
public java.lang.String getStyleName() Этот метод получает все имена стилей объекта в виде списка, разделенного пробелами. |
| 5 |
public void setStylePrimaryName(java.lang.String style) Этот метод устанавливает имя основного стиля объекта и обновляет все зависимые имена стилей. |
Например, давайте определим два новых стиля, которые мы применим к тексту:
.gwt-Big-Text {
font-size:150%;
}
.gwt-Small-Text {
font-size:75%;
}
.gwt-Red-Text {
color:red;
}Теперь вы можете использовать setStyleName (Style), чтобы изменить настройку по умолчанию на новую настройку. После применения правила ниже шрифт текста станет большим
txtWidget.setStyleName("gwt-Big-Text");Мы можем применить вторичное правило CSS к тому же виджету, чтобы изменить его цвет следующим образом:
txtWidget.addStyleName("gwt-Red-Text");Используя вышеуказанный метод, вы можете добавить столько стилей, сколько хотите применить к виджету. Если вы удалите первый стиль из виджета кнопки, второй стиль все равно останется с текстом.
txtWidget.removeStyleName("gwt-Big-Text");Основные и дополнительные стили
По умолчанию имя основного стиля виджета будет именем стиля по умолчанию для его класса виджета, например gwt-Button для виджетов Button. Когда мы добавляем и удаляем имена стилей с помощью метода AddStyleName (), эти стили называются вторичными стилями.
Окончательный вид виджета определяется суммой всех добавленных к нему дополнительных стилей плюс его основной стиль. Вы устанавливаете основной стиль виджета с помощью метода setStylePrimaryName (String) . Для иллюстрации предположим, что у нас есть виджет Label. В нашем файле CSS определены следующие правила:
.MyText {
color: blue;
}
.BigText {
font-size: large;
}
.LoudText {
font-weight: bold;
}Предположим, мы хотим, чтобы конкретный виджет метки всегда отображал синий текст, а в некоторых случаях мы использовали более крупный жирный шрифт для дополнительного выделения.
Мы могли бы сделать что-то вроде этого -
// set up our primary style
Label someText = new Label();
someText.setStylePrimaryName("MyText");
...
// later on, to really grab the user's attention
someText.addStyleName("BigText");
someText.addStyleName("LoudText");
...
// after the crisis is over
someText.removeStyleName("BigText");
someText.removeStyleName("LoudText");Связывание файлов CSS
Есть несколько подходов для связывания файлов CSS с вашим модулем. Современные приложения GWT обычно используют комбинацию CssResource и UiBinder. В наших примерах мы используем только первый подход.
Использование тега <link> на HTML-странице хоста.
Использование элемента <stylesheet> в XML-файле модуля.
Используя CssResource содержится в ClientBundle.
Использование встроенного элемента <ui: style> в UiBinder шаблон.
Пример GWT CSS
Этот пример проведет вас через простые шаги по применению различных правил CSS к вашей видимости GWT. Давайте установим рабочую среду Eclipse IDE вместе с подключаемым модулем GWT и выполним следующие шаги для создания приложения GWT:
| Шаг | Описание |
|---|---|
| 1 | Создайте проект с именем HelloWorld в пакете com.tutorialspoint, как описано в главе GWT - Создание приложения . |
| 2 | Измените HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html и HelloWorld.java, как описано ниже. Остальные файлы оставьте без изменений. |
| 3 | Скомпилируйте и запустите приложение, чтобы проверить результат реализованной логики. |
Ниже приводится содержимое измененного дескриптора модуля. src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name = 'com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path = 'client'/>
<source path = 'shared'/>
</module>Ниже приводится содержимое измененного файла таблицы стилей. war/HelloWorld.css.
body {
text-align: center;
font-family: verdana, sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-Button {
font-size: 150%;
font-weight: bold;
width:100px;
height:100px;
}
.gwt-Big-Text {
font-size:150%;
}
.gwt-Small-Text {
font-size:75%;
}Ниже приводится содержимое измененного файла хоста HTML. war/HelloWorld.html для размещения двух кнопок.
<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id = "mytext"><h1>Hello, World!</h1></div>
<div id = "gwtGreenButton"></div>
<div id = "gwtRedButton"></div>
</body>
</html>Пусть у нас будет следующее содержимое файла Java src/com.tutorialspoint/HelloWorld.java который позаботится о добавлении двух кнопок в HTML и применит собственный стиль CSS.
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// add button to change font to big when clicked.
Button Btn1 = new Button("Big Text");
Btn1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
RootPanel.get("mytext").setStyleName("gwt-Big-Text");
}
});
// add button to change font to small when clicked.
Button Btn2 = new Button("Small Text");
Btn2.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
RootPanel.get("mytext").setStyleName("gwt-Small-Text");
}
});
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
}
}Когда вы будете готовы со всеми внесенными изменениями, позвольте нам скомпилировать и запустить приложение в режиме разработки, как мы это делали в главе GWT - Создание приложения . Если с вашим приложением все в порядке, это даст следующий результат:
Теперь попробуйте нажать на две отображаемые кнопки и посмотреть "Hello, World!" текст, шрифт которого постоянно меняется при нажатии на две кнопки.