Предположите создание следующего простого виджета с UiBinder:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style type="my.package.Widget1.Widget1Style">
.childWidgetStyle {
border-width: 1px;
border-style: dotted;
}
</ui:style>
<g:TextArea styleName="{style.childWidgetStyle}"/>
</ui:UiBinder>
package my.package;
// some imports here
public class Widget1 extends Composite {
private static Widget1UiBinder uiBinder = GWT.create(Widget1UiBinder.class);
interface Widget1UiBinder extends UiBinder<Widget, Widget1> {
}
public interface Widget1Style extends CssResource {
String childWidgetStyle();
}
@UiField
TextArea textArea;
public Widget1(String text) {
initWidget(uiBinder.createAndBindUi(this));
textArea.setText(text);
}
}
Чем Вы используют этот простой виджет в другом (родительском) виджете, который Вы создали:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.parentWidgetStyle .childWidgetStyle {
margin-bottom: 10px;
}
</ui:style>
<g:VerticalPanel ui:field="listPanel" addStyleNames="{style.parentWidgetStyle}" />
</ui:UiBinder>
package my.package;
// imports go here
public class ParentWidget extends Composite {
private static ParentWidgetUiBinder uiBinder = GWT.create(ParentWidgetUiBinder.class);
interface ParentWidgetUiBinder extends UiBinder<Widget, ParentWidget> {
}
@UiField
VerticalPanel listPanel;
public ParentWidget(final String... texts) {
initWidget(uiBinder.createAndBindUi(this));
for (final String text : texts) {
final Widget1 entry = new Widget1(text);
listPanel.add(entry);
}
}
}
То, чего Вы хотите достигнуть, должно получить некоторое поле между записями Widget1 в списке с помощью CSS. Но это не будет работать. Поскольку GWT запутает названия CSS. И запутываемое название .childWidgetStyle
в ParentWidget
будет отличаться от .childWidgetStyle
в Widget1
. Получающаяся CSS будет выглядеть подобной этому:
.G1unc9fbE {
border-style:dotted;
border-width:1px;
}
.G1unc9fbBB .G1unc9fDa {
margin-bottom:10px;
}
Так привычка установки поля применяются. Как я делаю это правильно?
прием должен импортировать имя класса CSS в ParentWidget
:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style import="my.widget.Widget1.Widget1Style">
.parentWidgetStyle .Widget1Style-childWidgetStyle {
margin-bottom: 10px;
}
</ui:style>
<g:VerticalPanel addStyleNames="{style.parentWidgetStyle}" />
</ui:UiBinder>
важная часть, если вы не будете использовать аннотация ImportedWithPrefix , то GWT снабдит префиксом импортированные имена стиля имя класса ресурса, в котором находится класс CSS. Так childWidgetStyle
становится .Widget1Style-childWidgetStyle
.
(редактирование: удаленная часть о @Shared после комментариев и документация .)