Wie verwenden Sie importierte css-Stile in GWT richtig
Stell dir vor, du erstellt die folgenden einfachen widget mit 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);
}
}
Als Sie mit diesem einfachen widget in ein anderes (Eltern -) widget, das Sie erstellt:
<!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);
}
}
}
Was Sie wollen, zu erreichen, ist man einen gewissen Spielraum zwischen den Widget1-Einträge in der Liste mit css. Aber das wird nicht funktionieren. Da GWT wird verschleiern die css-Namen. Und den verborgenen Namen für .childWidgetStyle
im ParentWidget
unterscheidet sich von der .childWidgetStyle
im Widget1
. Das resultierende css sieht ähnlich wie diese aus:
.G1unc9fbE {
border-style:dotted;
border-width:1px;
}
.G1unc9fbBB .G1unc9fDa {
margin-bottom:10px;
}
Also die Marge Einstellung nicht gelten. Wie mache ich das richtig?
- Für ein anderes nehmen auf diese, finden Sie unter das posting erstellt habe ich nach langer, frustrierender Kampf mit den verfügbaren online-Ressourcen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Der trick ist das importieren der css-Klassenname in
ParentWidget
:Ist der wichtige Teil, wenn Sie nicht ImportedWithPrefix annotation GWT wird das Präfix des importierten style-Namen mit der Klasse name der Ressource, zu der der css-Klasse ist in. So
childWidgetStyle
wird.Widget1Style-childWidgetStyle
.(edit: Teil entfernt über @Freigegebenen folgenden Kommentare und Dokumentation.)
@Shared
annotation. Das heißt, in dieser Antwort gibt es keine gemeinsame Oberklasse. Dieses eine Beispiel von "Importierten Bereiche" nicht "Gemeinsame Bereiche", und ist ein mis-Nutzung der annotation meiner Meinung nach.