Why there are so many way to set CSS for Widgets in GWT or GWTP, I am confused? Can someone clarify this?

Ok, to set a Css for a widget in Gwt or Gwtp, we can do following:

-1. directly from gwt code. Ex: label1.getElement().getStyle().setBackground("blue");
-2. include "ui:style" in UiBinder xml file, but this css only visible to that UiBinder
-3. include "ui:width" in UiBinder xml file, it will visible to all UiBinder
 - and there r many way to set the Css directly to the widget in UiBinder.

The one that made me confused is that if i used , ex

<ui:with field='res' type="com.myproj.client.MyResource" /> 

& if myResource.css has .gwt-TabLayoutPanel then i don't need to use "addStyleNames", ex <g:TabLayputPanel />, it can recognized CSS perfectly.

However, if i add .gwt-ScrollPanel into myResource.css & use <g: ScrollPanel /> then nothing happened.

So I have to create public interface MyCssResource extends CssResource, then add String gwt-ScrollPanel(); to MyCssResource. But Java eclipse do not allow hyphen - in the method name, so I have to change to String gwtScrollPanel();.

Finally, i have to add addStyleNames into <g: ScrollPanel />, ex <g: ScrollPanel addStyleNames="{res.css.gwtScrollPanel}" /> then it will work.

That also means if i want to use .gwt-TabLayoutPanel in MyCssResource, then i need to remove the hyphen - & this will cause inconsistency in my code.

So, can someone explain to me what is going on here? I am confused?

That's because when you create a TabLayoutPanel, it has a default class called .gwt-TabLayoutPanel. So you don't need to add that class manually in to your TabLayoutPanel.Just create a TabLayoutPanel and you will see the class ".gwt-TabLayoutPanel" is already there.

But ScrollPanel doesn't comes with a default class called .gwt-ScrollPanel. It is just a div. Try creating a ScrollPanel and see. It doesn't have any classes added initially.see the screenshot

If you want to add a class called .gwt-ScrollPanel you will have to do it manually.