Reusing CssResource's @def (within e.g. UiBinder)

[Thomas Broyer]

Hi all,

We're starting using UiBinder quite intensively and one thing we
haven't been able to do is to declare some constants in a CssResource
and reuse them in our ui.xml (I believe this is unrelated to UiBinder
actually, as I don't know how it could be made to work with plain old
CssResources only).

Our use case is I believe very common: declare constants for common
colors to be shared thoughout the app (namely some kind of orange and
grays for use with borders, fore color and back color). I suspect we
might have the need for font sizes too.

As a last resort, I tried the following (which forces me to have the
common CSS file in the same package as my ui.xml file):
<!-- mystyle.css has @def yellow red -->
<!-- and MyStyle has a String yellow() method -->
<ui:style field='common' src='mystyle.css'
type='com.my.app.client.MyStyle' />
<ui:style>
@def yellow value('common.yellow');
.foo { color: yellow; }
</ui:style>

but it fails with:
Scanning for additional dependencies: ...\gen\com\my\app\client
\Test_MyBinderImpl.java
Computing all possible rebind results for
'com.my.app.client.Test_MyBinderImpl_GenBundle'
Rebinding com.my.app.client.Test_MyBinderImpl_GenBundle
Invoking <generate-with
class='com.google.gwt.resources.rebind.context.InlineClientBundleGenerator'/
>
Creating assignment for style()
Performing substitution in node color : .....
;

[ERROR] Could not find no-arg method named yellow
in type com.my.app.client.Test_MyBinderImpl_GenCss_common


Is there a way to reuse @def-s in other CssResource-s? (in other
ClientBundle-s!) and which one?

[Ray Ryan]

@bobv, please double check me here.

This will work, although I don't know if it will work in gwt/current or even gwt/canary yet:

<ui:style src='colors.css'>

  .foo { color: yellow; }

</ui:style>

A ui:style element can have any number of css source files (space separated). They'll be concatenated, and the body text appended to them. But the ability for ui:style to have both a source css file and body text was a fairly recent change. I doubt it's in gwt/current, and I'm not even sure that it's in the long delayed gwt/canary.

@bobv, will anything pathological happen to the generated code if lots of ui.xml files all do this? Remember that each ui.xml defines its own ClientBundle.

On Tue, Nov 17, 2009 at 8:11 AM, Joel Webber <j...@google.com> wrote:

[@rjrjr, bobv: There's a way to reference Java constants from CSS, right?]

--~--~---------~--~----~------------~-------~--~----~
http://groups.google.com/group/Google-Web-Toolkit-Contributors
-~----------~----~----~----~------~----~------~--~---

[BobV]

> @bobv, will anything pathological happen to the generated code if lots of
> ui.xml files all do this? Remember that each ui.xml defines its own
> ClientBundle.

The common css will be duplicated every time you do this, but this may
be what you want, depending on whether or not the common css should be
shared between the widget types at runtime. If the common css can be
reused, you would be better off creating an @Shared CssResource for
the common CSS and then having the per-UI.xml CssResource mix in the
additional rules.

--
Bob Vawter
Google Web Toolkit Team

[Ray Ryan]

Just to be clear:

In the case at hand, where the shared CSS file has nothing in it but @def values, there is nothing to be gained by an approach that is any more complicated than:

<ui:style src='colors.css'>

  .foo { color: yellow; }

</ui:style>

But if you want to share actual class definitions, the @Shared mixin is the way to go.

[Thomas Broyer]

On Fri, Nov 20, 2009 at 1:53 AM, Ray Ryan wrote:
> Just to be clear:
> In the case at hand, where the shared CSS file has nothing in it but @def
> values, there is nothing to be gained by an approach that is any more
> complicated than:
>
> <ui:style src='colors.css'>
>   .foo { color: yellow; }
> </ui:style>

This works (using RC2); I cannot use an absolute path though (my
*.ui.xml and *.css files are in different packages). This works:
<ui:style src="../../../core/client/resources/style.css">...</ui:style>
but neither of these do (both produce an "Unable to find resource" error):
<ui:style src="/com/myApp/core/client/resources/style.css">...</ui:style>
<ui:style src="com/myApp/core/client/resources/style.css">...</ui:style>

The first one (src="/com/...") searches for
"com/myApp/moduleA/client/ui//com/myApp/core/client/resources/style.css"
(notice the double-slash); maybe a src="" starting with a slash could
be special-cased to be treated as an absolute path? (rather than
relative to the package containing the *.ui.xml file)
Would you like me to file an issue for this?

> But if you want to share actual class definitions, the @Shared mixin is the
> way to go.

But then the @Shared CssResource's methods must only reference class
names, not constants, or you'll have a "The following obfuscated style
classes were missing from the source CSS file: [ERROR] red: Fix by
adding .red{}" error (my style.css contains a "@def red green;" and
the @Shared interface has a "String red()" method)

Thanks at lot anyway, I can now refactor my resources to have a
constants.css that can be referenced using src="" on <ui:style> in my
*.ui.xml files, and a @Shared CssResource with common CSS classes
(with the @Source referencing both common.css and constants.css to
import my @def's).

I'll get back to you if I ever have a problem in doing so ;-)

--
Thomas Broyer
/tɔ.ma.bʁwa.je/