Ok, CssResources and ClientBundle, what am I doing wrong?

[King_V]

All,

I'm getting an exception trying to use CssResources and ClientBundle.
Admittedly, I'm completely new to it and don't really quite know what
I'm doing.

So, can someone explain to me why this doesn't work, and what exactly
it is that I'm doing wrong?

In any case, here's my code. Both classes exist in the package
com.gwttests.client, and the Style1.css file exists in
com.gwttests.client.css:

class MyClientBundle:
--------
package com.gwttests.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public interface MyClientBundle extends ClientBundle {

public final static MyClientBundle INSTANCE =
GWT.create(MyClientBundle.class);

@Source("css/Style1.css")
MyCssResource css();

public static interface MyCssResource extends CssResource {
String superSize();
}
}
--------


class TestClientBundleAndCssResources:
--------
package com.gwttests.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;

public class TestClientBundleAndCssResources implements EntryPoint {

static {
MyClientBundle.INSTANCE.css().ensureInjected();
}

public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get();
rootPanel.clear();
Button button1 = new Button("First Button");
rootPanel.add(button1);
}
}
--------


Style1.css
--------
.gwt-Button {
background: black;
color: cyan;
}

.superSize {
font-size: 500%;
}
--------


Everything compiles just fine.

When I run in development mode and launch the given URL, I get the
following exception:
--------
16:20:58.462 [ERROR] [testclientbundleandcssresources] Unable to load
module entry point class
com.gwttests.client.TestClientBundleAndCssResources (see associated
exception for details)

java.lang.RuntimeException: Deferred binding failed for
'com.gwttests.client.MyClientBundle' (did you forget to inherit a
required module?)
at
com.google.gwt.dev.shell.GWTBridgeImpl.create(GWTBridgeImpl.java:53)
at com.google.gwt.core.client.GWT.create(GWT.java:97)
at com.gwttests.client.MyClientBundle.<clinit>
(MyClientBundle.java:9)
at
com.gwttests.client.TestClientBundleAndCssResources.<clinit>
(TestClientBundleAndCssResources.java:10)
at java.lang.Class.forName0(Native Method)
at java.lang.Class.forName(Class.java:247)
at
com.google.gwt.dev.shell.ModuleSpace.loadClassFromSourceName(ModuleSpace.java:
654)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:
363)
at
com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:
200)
at
com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:
525)
at
com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:
363)
at java.lang.Thread.run(Thread.java:662)
Caused by: com.google.gwt.core.ext.UnableToCompleteException: (see
previous log entries)
at com.google.gwt.dev.shell.ModuleSpace.rebind(ModuleSpace.java:
595)
at
com.google.gwt.dev.shell.ModuleSpace.rebindAndCreate(ModuleSpace.java:
455)
at
com.google.gwt.dev.shell.GWTBridgeImpl.create(GWTBridgeImpl.java:49)
at com.google.gwt.core.client.GWT.create(GWT.java:97)
at com.gwttests.client.MyClientBundle.<clinit>
(MyClientBundle.java:9)
at
com.gwttests.client.TestClientBundleAndCssResources.<clinit>
(TestClientBundleAndCssResources.java:10)
at java.lang.Class.forName0(Native Method)
at java.lang.Class.forName(Class.java:247)
at
com.google.gwt.dev.shell.ModuleSpace.loadClassFromSourceName(ModuleSpace.java:
654)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:
363)
at
com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:
200)
at
com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:
525)
at
com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:
363)
at java.lang.Thread.run(Thread.java:662)
-------

[Aidan O'Kelly]

You have .gwt-Button in the .css file, but not in the style interface, hence the compile error. It should be a clearer error (if you stop/start dev mode it will probably give you the correct error, and it certainly will if you GWT-compile the project) 

In any case, to fix, you need to declare .gwt-Button as '@external' 

@external gwt-Button;

.gwt-Button { 

    .... 

}

http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

Now, you could create an accessor method in the Style interface for gwt-Button, and use setPrimaryStyleName() on the buttons you want it appied to. This way the style would be obfuscated. However when working with the stock GWT widgets, its generally better to use un-obfuscated style names, as currently, the 'dependent style names' system does not work with obfuscation.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[King_V]

Aidan,

Thanks. I'm still really just learning this stuff, so I'll admit to
some cluelessness.

Your advice took care of the Exception being thrown.

However, I've noticed that the Button is ignoring the style. Am I
using this technique incorrectly? I also tried adding "! important"
to the style (specifically for background, at any rate), but no
difference.

Is there a simple, idiot-level tutorial of using CssResource and
ClientBundle? Something about as small and simple as the code I'm (so
far unsuccessfully) writing?

Thanks.

- Joe

On Nov 4, 4:49 pm, "Aidan O'Kelly" <aida...@gmail.com> wrote:
> You have .gwt-Button in the .css file, but not in the style interface,
> hence the compile error. It should be a clearer error (if you stop/start
> dev mode it will probably give you the correct error, and it certainly will
> if you GWT-compile the project)
>
> In any case, to fix, you need to declare .gwt-Button as '@external'
>
> @external gwt-Button;
>
> .gwt-Button {
>     ....
>
> }
>

> http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.htm...

[Danny Kirchmeier]

Does your Style1.css now say this:

@external .gwt-Button;

.gwt-Button{

background: black;

color: cyan;

}

Don't forget the semicolon at the end of the @external line. I forgot it the first few times I used it. It causes no error to be thrown and next style to be completely ignored. 

It worked for me, so hopefully that is your issue.

[King_V]

Aw, crap - Aiden even specifically said that, and I missed it.

Thanks for pointing it out. Now, don't mind me as I smack my palm
against my forehead. Twice.

- Joe