GWT StackPanel Styling - PullRequest
Новая
       24

GWT StackPanel Styling

1 голос
/ 14 апреля 2011

Полагаю, это должно быть прямо, за исключением того, что я просто не могу понять это. Я пытаюсь использовать стековую панель. Я пытаюсь сделать так, чтобы текст заголовка, цвет фона и т. Д. Соответствовал остальной части моего приложения.

Я использую css и клиентский пакет для применения стилей к моим компонентам.

Я попытался стилизовать стековую панель, используя два метода, но оба не удалось.

Method1:

Если я применю следующее к разделу стиля MyProject.html: 

.gwt-StackPanel .gwt-StackPanelItem {
    font-weight: normal;
    font-size: 8pt;
    width: 100%;
    background: green;
}


.gwt-StackPanel .gwt-StackPanelItem-selected {
    background-color: red;
}

А затем загрузить его в Firefox, я все еще вижу стиль по умолчанию. Если я открою firebug и осмотрю элемент, я вижу, что стили gwt по умолчанию все еще применяются.

Метод 2:

Если я инкапсулирую вышеупомянутые стили в моем css-файле, то компилятор GWT жалуется на запутанные стили? Поэтому я добавил атрибут @external к стилям, компилятор не жалуется, но я все еще не вижу примененных изменений.

Заранее спасибо!

Ответы [ 2 ]

3 голосов
/ 12 декабря 2011

Я знаю, что это поздний ответ, но в случае, если кто-то придет сюда позже, у меня есть предложение. Причина, по которой ваш CSS переопределяется темой gwt, заключается в том, что тема gwt имеет прецедент в файле вашего модуля (.gwt.xml). Способ изменить это - включить собственный CSS-файл в файл модуля после темы gwt.

Например, вы должны увидеть что-то подобное в файле модуля: 

<!-- You can change the theme of your GWT application by -->
<!-- uncommenting any one of the following lines. -->
<!-- <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'/> -->
<inherits name='com.google.gwt.user.theme.clean.Clean' />

Где-то после этого добавьте оператор таблицы стилей для своего собственного файла CSS: 

<!-- CSS Style Sheet includes -->
<stylesheet src="<pathToYourCSSFile>.css" />

Теперь, поскольку ваш файл включен после стиля gwt, ваши стили получат прецедент над gwt!

1 голос
/ 21 мая 2011

Я всегда закомментирую эту строку из XML-файла модуля: 

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

, тогда вы можете использовать свои собственные стили, добавляя имена стилей в виджеты (stackPanel.setStyle ...) И если вам нуженСтиль gwt по умолчанию вы можете скопировать из gwt-user.jar com.google.gwt.user.theme.standard.Standard.public.gwt.standard.standard.css в ваш собственный файл CSS.

...