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!" текст, шрифт которого постоянно меняется при нажатии на две кнопки.