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

Question

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?

Answer 1

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.

Answer 2

The only think you should be aware about, is that GWT obfuscates class names when you use then in ui-binders. For instance:

 <ui:style>
   .gwtTabLayoutPanel {}
 </ui:style>
 <g:TabLayoutPanel addStyleNames="{style.gwtTabLayoutPanel}" />

.gwtTabLayoutPanel will be renamed to something like .AB in the final injected style-sheet.

But most GWT widgets, are styled with un-obfuscated class names, so for using them in ui-binders files, you have to define as external in order to prevent GWT compier to obfuscate the class name:

 <ui:style>
   @external .gwt-TabLayoutPanel;
   .gwt-TabLayoutPanel {}
 </ui:style>
 <g:TabLayoutPanel />