Почему существует так много способов установить CSS для виджетов в GWT или GWTP, я в замешательстве? Может ли кто-нибудь прояснить это?

Хорошо, чтобы установить Css для виджета в Gwt или Gwtp, мы можем сделать следующее:

-1. directly from gwt code. Ex: label1.getElement().getStyle().setBackground("blue");
-2. include "ui:style" in UiBinder xml file, but this css only visible to that UiBinder
-3. include "ui:width" in UiBinder xml file, it will visible to all UiBinder
 - and there r many way to set the Css directly to the widget in UiBinder.

Меня смутило то, что если бы я использовал , ex

<ui:with field='res' type="com.myproj.client.MyResource" />

и если myResource.css имеет .gwt-TabLayoutPanel, то мне не нужно использовать "addStyleNames", например <g:TabLayputPanel />, он отлично распознает CSS.

Однако, если я добавлю .gwt-ScrollPanel в myResource.css и использую <g: ScrollPanel />, то ничего не произойдет.

Поэтому мне нужно создать public interface MyCssResource extends CssResource, а затем добавить String gwt-ScrollPanel(); к MyCssResource. Но Java eclipse не допускает дефиса - в имени метода, поэтому мне нужно изменить его на String gwtScrollPanel();.

Наконец, мне нужно добавить addStyleNames в <g: ScrollPanel />, например <g: ScrollPanel addStyleNames="{res.css.gwtScrollPanel}" />, тогда все заработает.

Это также означает, что если я хочу использовать .gwt-TabLayoutPanel в MyCssResource, мне нужно удалить дефис -, и это вызовет несогласованность в моем коде.

Итак, кто-нибудь может объяснить мне, что здесь происходит? Я запутался?


gwt uibinder cssresource gwtp
person Kiti    schedule 01.10.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Это связано с тем, что когда вы создаете TabLayoutPanel, у него есть класс по умолчанию с именем .gwt-TabLayoutPanel. Таким образом, вам не нужно вручную добавлять этот класс в свой TabLayoutPanel. Просто создайте TabLayoutPanel, и вы увидите, что класс ".gwt-TabLayoutPanel" уже существует.

введите здесь описание изображения

Но ScrollPanel не поставляется с классом по умолчанию под названием .gwt-ScrollPanel. Это просто див. Попробуйте создать ScrollPanel и посмотрите. Изначально в него не добавлены какие-либо классы. См. снимок экрана.

введите здесь описание изображения

Если вы хотите добавить класс с именем .gwt-ScrollPanel, вам придется сделать это вручную.

person Dilantha    schedule 01.10.2013
comment
Большое спасибо за ваши инструкции. Я ясно теперь. Но почему Goole не делает .gwtTabLayoutPanel по умолчанию? чтобы я мог использовать его в MyCssResource.java? Вместо этого они использовали .gwt-TabLayoutPanel, а затем я не могу использовать .gwt-TabLayoutPanel в MyCssResource.java из-за дефиса. - person Kiti; 01.10.2013

arrow_upward
2
arrow_downward

Единственное, о чем вы должны знать, это то, что GWT запутывает имена классов, когда вы используете then в ui-binders. Например:

 <ui:style>
   .gwtTabLayoutPanel {}
 </ui:style>
 <g:TabLayoutPanel addStyleNames="{style.gwtTabLayoutPanel}" />

.gwtTabLayoutPanel будет переименован во что-то вроде .AB в окончательной добавленной таблице стилей.

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

 <ui:style>
   @external .gwt-TabLayoutPanel;
   .gwt-TabLayoutPanel {}
 </ui:style>
 <g:TabLayoutPanel />
person Manolo Carrasco Moñino    schedule 01.10.2013