How to use imported css styles in GWT correctly
- by Eduard Wirch
Imagine you created the following simple widget with 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);
}
}
Than you use this simple widget in another (parent) widget you created:
<!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);
}
}
}
What you want to achieve is to get some margin between the Widget1 entries in the list using css. But this won't work. Because GWT will obfuscate the css names. And the obfuscated name for .childWidgetStyle in ParentWidget will be different from the .childWidgetStyle in Widget1. The resulting css will look similar to this:
.G1unc9fbE {
border-style:dotted;
border-width:1px;
}
.G1unc9fbBB .G1unc9fDa {
margin-bottom:10px;
}
So the margin setting wont apply. How do I do this correctly?
