Gwt UIbinder Doesn't Load The Stylesheet

ui:with, style not showing up

You have to use res.style().ensureInjected()

GWT UiBinder not showing anything

You are mixing layout (DockLayoutPanel) with non-layout (RootPanel.get("header")) panels .

Either use RootLayoutPanel (that will hook the entire body of your app; hence you will need to rewrite it to setup the header/main/footer areas inside your app, and not relying on DOM placeholders) or set the header size explicitly. See the official docs.

I'd go for the former.

UiBinder inline styles using default GWT CSS class names are not applied

.gwt-Button in your ui:style will be obfuscated, and therefore won't be applied to a class="gwt-Button".

You have to mark it as @external for it not to be obfuscated:

@external .gwt-Button;

.gwt-Button { background-color: red; }

CSS-File of a GWT-UIBinder not responding to @media max-width

CssResource in GWT is limited to CSS 2 (plus a few additions).

If you want full CSS3 support, switch to GssResource; it'll be bundled in the next GWT version (2.7) and will replace CssResource in the version after that. The syntax is a bit different but there's a tool to convert CssResource-style stylesheets to the GssResource syntax.

See also the presentation at the last GWT Meet-Up

How to migrate global stylesheet to GSS in GWT

As I discovered later on, it turns out that you can inject a GSS (or CSS) stylesheet as a CSSResource without the selectors being obfuscated. Simply add the following annotation to the stylesheet:

@external '*';

This will mark all selectors in the file as external, which means 1) that the CSSResource subinterface used as the type for the stylesheet resource will no longer be required to implement accessor methods corresponding corresponding to the class selectors in the stylesheet and 2) that the selectors in the stylesheet will be unobfuscated, so for example if you have a class .foo in the stylesheet you'll be able to apply it to entities using UIObject.addStyleName("foo").

This way you can easily get some of the major benefits of GSS (variables, functions, etc.) and CSSResource (injection into the page rather than serving another file) without having to make any changes to your workflow.

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

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.

---

Related Topics