How to properly use CSS in GWTP?

Question

it's very difficult to find a complete step-by-step guidelines of How to properly use CSS in GWTP on internet.

I am using eclipse & GWTP to build my app & I want to set some simple Css styles for my widgets (button, textbox...).

Ok, here is what I got: a TestPresenter.java, TestView.java & TestView.ui.xml

-In TestView.ui.xml:

    <ui:UiBinder .....>
    <ui:style src='myStyle.css' />
    <g:HTMLPanel>
    <g:Button  text="My But 1" addStyleNames="{style.myBut}" ui:field="myBut1"/>
    <g:Button  text="My But 2" ui:field="myBut2"/>
    </g:HTMLPanel>
    </ui:UiBinder>

myStyle.css is in the same folder that houses TestPresenter.java, TestView.java & TestView.ui.xml

-TestPresenter.java (has 2 buttons- myBut 1 & myBut 2): I added "myBut" for myBut2

    getView().getMyBut2().addStyleName("myBut");

After running, it shows 2 buttons, the first myBut1 got the correct CSS but myBut2 still show the default Css. I changed to getView().getMyBut2().setStyleName("myBut"); but it still didn't work.

So i think probably i'm missing some classes here & that is why eClipse couldn't recognize "myBut" CSS so that it can apply for myBut2.

So, How to let myBut2 show the correct Css in eClipse?

Answer 1

the reason is that adding a CSS style sheet as a source to the uibinder causes the gwt compiler to generate a CssResource class for it, and therefore obfuscating the CSS class name to SHA1 hash. That mean that in the final compiled version, instead of ".myBut" you actually end up with something like ".XYZXYZ".

this is purely GWT uibinder behavior that you can read about here

Specifically for GWTP, the textbook solution is:

1. in TestView.java add:

   public TestView extends SomeGWTPViewClass implements TestPresenter.MyView
   {
       public interface MyStyle extends CssResource
       {
          String myBut();
       }
   
       @UiField MyStyle style;
   
   
       @Override
       MyStyle getStyle()
       {
           return style;
       } 
   
       //rest of code here......
       .....
       ...
   
   
   }
   

2. in TestView.ui.xml change ui:style to:

   <ui:style src='myStyle.css' type="fully.qualified.package.name.TestView.MyStyle"/>

3. in TestPresenter.MyView interface add:

   MyStyle getStyle();

4. now you can access the myBut style in TestPresenter by:

   getView().getMyBut2().addStyleName(getView().getStyle().myBut());