GWT access style defined inside .ui.xml within corresponding .java file

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.