Some times you may want to access styles defined inside your Sample.ui.xml
file which you want to access/use from within Sample.java
widget class. You can do that by defining an interface which extends from com.google.gwt.resources.client.CssResource
and declaring method with name matching exactly
that of required style class name
that you have declared inside ui.xml
. Refer below code.
Sample.ui.xml
contents
<src path>/com/pandurang/client/ui/Sample.ui.xml
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
.
.
.
<ui:style type="com.pandurang.client.ui.Sample.MyStyle">
.domain {
margin: 0 auto;
width: 730px;
}
.editImg {
cursor: pointer;
float: left;
margin-left: 181px;
}
</ui:style>
<g:HTMLPanel>
<div>
<div class="{style.domain}">
<!-- Contents.... -->
</div>
</div>
</g:HTMLPanel>
</ui:UiBinder>
You need to connect <ui:style>
tag with corresponding CssResource
interface by using type
attribute of <ui.style>
tag as shown above.
Sample.java
contents
<src path>/com/pandurang/client/ui/Sample.java
package com.agnie.useradmin.main.client.ui;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.core.client.GWT;
public class Sample extends Composite {
interface MyUiBinder extends UiBinder<Widget, Sample> {
}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
interface MyStyle extends CssResource {
String domain();
String editImg();
}
@UiField
MyStyle style;
public Sample(){
initWidget(uiBinder.createAndBindUi(this));
}
}
If you look at above code, we have defined MyStyle
interface and declared methods with name matching to that of css class names
. And instance of MyStyle
will be injected by using @UiField
annotation. In your java code you can make use of style variable to access the styles defined inside ui.xml
.