Справка / Руководство по стилю для начинающих GWT

#&wt #stylin&

#&wt #Стиль

Вопрос:

Я новичок в GWT, и мне трудно найти какие-либо хорошие учебные пособия, ориентированные особенно на обучение стилю с помощью GWT. Несколько примеров, которые я нашел в Goo&le, довольно незначительны и на самом деле мало что объясняют.

Некоторые вещи, которые я пытаюсь сделать, были бы:

  • Измените глобальный стиль шрифта
  • Измените стиль существующих виджетов, например, цвет фона выбранного элемента в CellTree
  • Замените текст кнопки изображением
  • Удалите границы текстовых полей
  • список можно продолжить

Я искал и не нахожу ничего особенно полезного в стилизации, поэтому буду признателен за любой совет / направление! Спасибо!

Ответ №1:

Стиль в GWT почти полностью выполняется с помощью CSS. Вы можете связать обычный файл CSS с вашим основным html, как вы бы сделали с обычным веб-сайтом, и его правила будут применяться так же, как обычный CSS применяется к обычному HTML. GWT предоставляет несколько способов оптимизации вашего CSS, и это становится довольно сложным, но на базовом уровне вы можете просто использовать Firebu&, чтобы просмотреть HTML вашего приложения, выяснить, какой CSS вам нужен, и добавить его в свой css-файл. GWT применяет множество специальных стилей к встроенным виджетам, и вы можете узнать названия всех этих стилей из сгенерированного HTML-кода и документации.

Комментарии:

1. Ну, я понял общую идею, стоящую за этим. Определение правил стиля в моем собственном файле css на самом деле не переопределяет стили из standard.css. Если стиль еще не определен, я могу добавить все, что захочу, но если он задан в standard.css, переопределение этого стиля в моем файле css ничего не даст. Я делаю что-то не так? Например: Из standard.css: .&wt-TextBox-доступно только для чтения { цвет: #888; } Из моего css: .&wt-TextBox-доступно только для чтения {цвет: черный; граница: отсутствует; цвет фона: #B4B4B4; } Атрибут color из моего файла переопределяется standard.css. Почему?

2. Смотрите code.&oo&le.com/webtoolkit/doc/1.6 /… и найдите раздел «Приложения, чувствительные к пропускной способности». standard.css вводится GWT после загрузки вашего кода, и вы можете использовать этот хак, чтобы получить желаемое поведение.