Использовать пользовательские CSS с GWT
Как мне настроить gwt, чтобы использовать мой собственный CSS для макияжа? Эти ссылки мне совсем не помогли: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiCss?hl=cs http://code.google.com/p/google-web-toolkit-doc-1-5/wiki/GettingStartedStyle
- Проблема в том, что я не могу заставить gwt обнаружить css-файлы, которые я объявляю в своем файле lorum.gwt.xml, когда я запускаю режим отладки, jetty выдает следующую ошибку при выводе журнала при запуске:
:
00:00:00.811 [WARN] 404 - GET /lorum/stylesheet.css (127.0.0.1) 1418 bytes
00:00:00.811 [INFO] Request headers
00:00:00.811 [INFO] Host: 127.0.0.1:8888
00:00:00.811 [INFO] Connection: keep-alive
00:00:00.811 [INFO] User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Ubuntu/11.10 Chromium/18.0.1025.168 Chrome/18.0.1025.168 Safari/535.19
00:00:00.811 [INFO] Accept: text/css,*/*;q=0.1
00:00:00.811 [INFO] Referer: http://127.0.0.1:8888/Home.html?gwt.codesvr=127.0.0.1:9997
00:00:00.812 [INFO] Accept-Encoding: gzip,deflate,sdch
00:00:00.812 [INFO] Accept-Language: en-US,en;q=0.8
00:00:00.812 [INFO] Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
00:00:00.812 [INFO] Cookie: JSESSIONID=ywoku1zfjs0b
00:00:00.812 [INFO] Response headers
00:00:00.812 [INFO] Content-Type: text/html; charset=iso-8859-1
00:00:00.812
И это не загружает мой CSS.
lorum.gwt.xml источник:
l version="1.0" encoding="UTF-8"?>
<module rename-to='lorum'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
<inherits name="com.google.gwt.resources.Resources" />
<inherits name="com.company.lorum.gwt.client.stylesheet.css"/>
<entry-point class='com.company.lorum.gwt.client.LoadModuleLorum'/>
<stylesheet src='stylesheet.css' />
<servlet path="/AuthenticationImpl" class="com.company.lorum.gwt.server.implementations.AuthenticationServiceImpl" />
<servlet path="/GeneralImpl" class="com.company.lorum.gwt.server.implementations.GeneralServiceImpl" />
<servlet path="/ProjectImpl" class="com.company.lorum.gwt.server.implementations.ProjectServiceImpl" />
</module>
- Я попытался унаследовать свой CSS-файл в файл приветствия (Home.html), который работает; но он не применяет правила стиля к моим виджетам. И я не предпочитаю этот метод, так как разные браузеры по-разному работают с синтаксисом CSS. Хотя, если вы знаете, как заставить его работать, я буду его использовать. Это мой источник Home.html
:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<title>lorum</title>
</head>
<body>
<script language="javascript" src="lorum/lorum.nocache.js"></script>
</body>
</html>
Исходный код CSS (stylesheet.css) (это просто, потому что я просто хочу проверить, работает ли он):
.gwt-MenuBar {
color:green;
}
.gwt-Button {
font-size: 200%;
}
Под вопрос:
Где я должен хранить свой файл css, чтобы мой файл lorum.gwt.xml обнаружил и использовал его, используя следующий синтаксис: <stylesheet src='stylesheet.css' />
4 ответа
Есть два простых способа включить CSS-файл. Вы можете определить его в HTML, но если вы хотите переопределить уже принятое значение, вы должны использовать тег! Important в конце вашего CSS-атрибута.
Или вы можете определить это в себе YourName.java
public interface CellTabelResources extends CellTable.Resources {
public interface CellTableStyle extends CellTable.Style {
};
@Source({ "style.css" })
CellTableStyle cellTableStyle();
}
что делает ваш style.css наиболее важным, поэтому он перекрывает любой другой стиль.
Это сработало для меня, я не собираюсь голосовать за свой собственный ответ, только если другие люди подтвердят, что это решение также работает для них.
Это на самом деле довольно просто достичь в 2 простых шага.
Шаг 1.
поместите файл таблицы стилей (CSS) в папку вашего веб-приложения
Шаг 2.
Добавьте следующую строку в ваш файл gwt.xml:
<stylesheet src='/yourstylesheetname.css' />
ПРИМЕЧАНИЕ. Поместите эту строку между последним объявлением наследования и заявлением вашей точки входа.
ДОПОЛНИТЕЛЬНО: Мой источник gwt.xml:
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='lorum'>
<inherits name='com.google.gwt.user.User'/>
<inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
<inherits name="com.google.gwt.resources.Resources" />
<stylesheet src='/customsheet.css' />
<entry-point class='com.company.lorum.gwt.client.LoadModuleLorum'/>
<servlet path="/AuthenticationImpl" class="com.company.lorum.gwt.server.implementations.AuthenticationServiceImpl" />
<servlet path="/GeneralImpl" class="com.company.lorum.gwt.server.implementations.GeneralServiceImpl" />
<servlet path="/ProjectImpl" class="com.company.lorum.gwt.server.implementations.ProjectServiceImpl" />
</module>
Дерево проекта
java __ com __ company __ lorum __ gwt __ client __ **
__ server __ **
__ shared __ **
__ Lorum.gwt.xml
resources__ **
webapp __ WebFiles __ **
__ WEB-INF __ **
__ Home.html
__ mystylesheet.css
Если вы хотите поместить ссылку css в файл gwt.xml, вам нужно добавить файл в общую папку, а затем вы можете ссылаться на css относительно позиции скомпилированного файла, так как на него будет ссылаться из файла js, что браузер посмотрите в скомпилированную папку рядом с файлом. Однако вы можете поместить его в папку webapp, что также приведет к тому, что оно будет скопировано в целевой каталог и будет ссылаться на него из gwt.xml.
Положить его в файл HTML также работает. Но если вы переопределяете любой из стилей виджета по умолчанию, поместите ссылку css после файла.nocache.js, чтобы он переопределял свои значения
Проверьте это для получения дополнительной информации:
Где я могу разместить статические файлы для приложения GWT? Военная папка или общая папка?
Следующее решение работает для меня:
- поместите файл YourCss.css в тот же каталог, где находится YourApplication.html
добавить следующую строку в
<head>блок YourApplication.html:<link type="text/css" rel="stylesheet" href="YourCss.css">