Переопределение стиля GWT

Ответ 1

Ну, мне удалось решить проблему с переопределением стандартных правил CSS, наследуя файл проекта .css в файле .gwt.xml моего проекта. Когда вы устанавливаете свой пользовательский .css таким образом - ПОСЛЕ обычной линии наследования - он будет иметь более высокий приоритет при каскадировании одного правила, чем одно и то же правило, определенное в стандартных таблицах стилей gwt. Потребовалось пару часов, чтобы выяснить, как правильно наследовать его, в первую очередь вызвать просто просто набрав <stylesheet src='WebTerminal.css' /&gt; в моем .gwt.xml файле и комментировании <link type="text/css" rel="stylesheet" href="WebTerminal.css"> на моей странице .html не принес мне никакого результата. Таким образом, решение заключается в использовании относительного пути, когда вы устанавливаете конфигурацию .css в .gwt.xml, например:

<stylesheet src='../WebTerminal.css' />

Обратите внимание на ../ в начале моего относительного пути. Чтобы выяснить, как это работает, добавьте Window.alert(GWT.getModuleBaseURL()); в качестве первой строки вашего метода onModuleLoad(). Он покажет вам что-то вроде https://localhost:8080/myproject/resouces/webtermial/, если на самом деле URL вашей размещенной страницы будет выглядеть как https://localhost:8080/myproject/resouces/WebTerminal.html. Здесь myproject/resouces - это каталог, содержащий ваш файл .css, а когда вы устанавливаете его в .gwt.xml, как <stylesheet src='WebTerminal.css' />, компилятор начинает искать myproject/resouces/webtermial/WebTerminal.css и не может его найти. Вот почему иногда нужно добавлять ../, чтобы решить вашу проблему.

В дополнение к словам, упомянутым выше, я хочу только упомянуть, что мне не удалось найти какое-либо описание этого вопроса в последнем документальном фильме или во время обсуждений, происходящих в группах google. Хотелось бы, чтобы было менее сложно выяснить, потому что GWT имеет гораздо более сложные проблемы, чем один, который должен был исчерпать описание внутри учебника.

Ответ 2

Причина, по которой ваш стиль переопределяется, заключается в том, что когда gwt компилирует ваш проект, он включает в себя собственный файл css по умолчанию. Тип файла css зависит от типа стиля по умолчанию, который вы используете:

<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

В приведенном выше сценарии будет включен файл clean.css, который, в свою очередь, имеет следующие общие стили, которые полностью компенсируют ваш шаблон (поля и фоновые параметры всегда перепутали мои шаблоны):

body, table td, select, button {
  font-family: Arial Unicode MS, Arial, sans-serif;
  font-size: small;
}
pre {
  font-family: "courier new", courier;
  font-size: small;
}
body {
  color: black;
 margin: 10px;
 border: 0px;
 padding: 0px;
 background: #fff;
 direction: ltr;
}
a, a:visited {
  color: #0066cc;
  text-decoration:none;
}

a:hover {
  color: #0066cc;
  text-decoration:underline;
}

select {
    background: white;
}

Если вы удалите их и оставите все остальное неповрежденным (в частности, если вы оставите все, что начинается с "gwt" ), ваш шаблон не будет затронут.

Не забывайте - вам нужно удалять эти элементы каждый раз, когда вы компилируете свой проект.

Надеюсь, это поможет.

Ответ 3

Самый простой способ - переопределить стили, которые вы не хотите. Например, если вы не хотите, чтобы gwt стилизовал ваши кнопки, вы можете определить стиль для класса gwt-Button в вашем собственном файле css.

Дополнительная информация здесь.

Ответ 4

Существует специальный ресурс, который вы можете наследовать, чтобы удалить файл clean.css:

<inherits name='com.google.gwt.user.theme.standard.StandardResources'/> 

Итак, найдите файл *.gwt.xml и выполните поиск

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

И замените его на строку выше.

Ответ 5

Вы можете использовать <! important > . Это один из самых простых вариантов

--- GWT ----

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 3px;
background: white;
}

--- Пользовательский стиль ---

.gwt-PopupPanel {
padding: 0px !important;
}

--- Результат ---

.gwt-PopupPanel {
border: 3px solid #E7E7E7;
padding: 0px;
background: white;
}

Ответ 6

На самом деле решение состоит в создании папки public/css в том же каталоге, что и ваш gwt.xml.

Добавьте эти две строки в свой gwt.xml:

<stylesheet src='css/project-name.css'/>

и

<public path='public'/>

Поместите файл project-name.css в папку css.

Это работает как с GWT Compile, так и Режим Super Dev.

Ответ 7

Просто для всех, кто сталкивается с подобной ситуацией, чтобы выяснить ответ, на который ответил stringo0, я поместил свои стили в 'GWT_APPNAME.css', где GWT_APPNAME - это имя файла, который генерирует ваш плагин GWT Eclipse, когда вы создаете свой проект.

Этот файл css должен быть доступен непосредственно под папкой войны с тем же именем, что и hast. Я попробовал это для переопределения стилей gwt-anchor, и это сработало.

.gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}

Ответ 8

Это быстрый, но, надеюсь, полезный ответ.

Что я сделал, так это то, что я скопировал стили, которые я хочу использовать по умолчанию GWT Style. Например, если вы выбрали стандартный стиль, GWT создает стандартный .css в файле war/WEB-INF/appengine (где-то вдоль этих строк) - я скопировал все стили кнопок в файл приложения css, а затем в конфигурационный файл решил не использовать стандартный стиль GWT.

Это помогло нам.

Ответ 9

Вы можете удалить стиль GWT по умолчанию с помощью:

widget.setStyleName("");

Или укажите свой собственный стиль.

Ответ 10

Ответ Витруса работал у меня, спасибо! Однако изменения в .css файлах не были отражены в веб-приложении при перезагрузке страницы; это проблема с кешем. Обновление с помощью Ctrl + F5 разрешает это. Дополнительная информация здесь: http://productforums.google.com/forum/#!topic/chrome/_oCbvfRwTok.

Ответ 11

У меня была аналогичная проблема с установкой фонового изображения и установкой прозрачного фона для элемента body, я решил его, установив определенный стиль для элемента, чтобы я мог сохранить другие стили GWT:

<body id="elementId">...</body>

#elementId {
   background: transparent;
}

Надеемся, что это будет полезно для вашей конкретной проблемы.

Ответ 12

В gwt, 2.6 есть папка с именем (gwt) в сгенерированном исходном тексте JavaScript и имеет все стили.

Попробуйте удалить его.