Come usare gli stili CSS importate in GWT correttamente
-
20-09-2019 - |
Domanda
Immaginate si è creato il seguente semplice widget con 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);
}
}
Che si utilizza Widget creato questo semplice widget in un altro (padre):
<!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);
}
}
}
Quello che si vuole raggiungere è quello di ottenere un certo margine tra le voci WIDGET1 nella lista usando i CSS. Ma questo non funzionerà. Perché GWT sarà offuscare i nomi CSS. E il nome offuscato per .childWidgetStyle
in ParentWidget
sarà diverso dal .childWidgetStyle
in Widget1
. Il CSS risultante sarà simile a questo:
.G1unc9fbE {
border-style:dotted;
border-width:1px;
}
.G1unc9fbBB .G1unc9fDa {
margin-bottom:10px;
}
Quindi applicare wont l'impostazione del margine. Come faccio a fare questo in modo corretto?
Soluzione
Il trucco è quello di importare il nome della classe CSS in 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>
La parte importante è, se non si utilizza ImportedWithPrefix annotazione GWT sarà prefisso i nomi di stile importati con il nome della classe della risorsa classe CSS è. Quindi childWidgetStyle
diventa .Widget1Style-childWidgetStyle
.
(edit: parte rimosso circa seguenti osservazioni @Shared e documentazione ).