CssResource @def in UiBinder

[John]

I'm trying to use a set of common @def statements across multiple
child projects. I cannot directly reference the css file in the
uiBinder - its in another project. I need a way to set the <ui:style>
tag to import / use / set source the css with @def statements from a
CssResource inside of a common ClientBundle. The only fields
available inside <ui:style> AFAIK are type, src, and field. Type
requires that an interface be implemented, and src can only do paths
to a css file. I need to point the src to a CssResource but this
doesn't seem possible.

(as an aside: I couldn't find a javadoc for any of the <ui:X> tags -
they need to be explicitly available somewhere)


----definitions.css----
@def COLOR_ONE #3B5998;
@def COLOR_TWO #DFE4EE;
@def COLOR_THREE #FFFFFF;
@def COLOR_FOUR #6792AB;
@def COLOR_FIVE #000000;

----CommonBundle----
public interface CommonBundle extends ClientBundle {

@Source("definitions.css")
Definitions definitions();

@Shared
public interface Definitions extends CssResource {

String COLOR_ONE();

String COLOR_TWO();

String COLOR_THREE();

String COLOR_FOUR();

String COLOR_FIVE();
}

---Doesn't work----
<ui:style type="CommonBundle.Definitions">
.outerLabel {
color: COLOR_THREE;
}
</ui:style>

---Doesn't work----
<ui:style src="CommonBundle.Definitions">
.outerLabel {
color: COLOR_THREE;
}
</ui:style>

--- Would like to use ----
<ui:with field='common'
type='agt.fathom.ifathom.common.client.CommonBundle' />
<ui:style src="{common.definitions}">
.outerLabel {
color: COLOR_THREE;
}
</ui:style>

Is there a workaround / solution to this that I just don't know? I
can't find anything searching through the forum posts ...

Thanks,
John

[Myles Bostwick]

I'm not sure if this is exactly what you're talking about or not, but I've got a common ResourceBundle that I use in my uibinder that I use like so:

Included in ui.xml

<ui:with field='res' type='com.pelco.phobos.interfaces.IResources' />

Included in view

        @UiFactory /* this method allows ui.xml to access an instance of a resource */

public IResources getIResources() {

return IResources.INSTANCE;

}

Which allows me to use a common resource bundle across my uibinder uis.

[John]

Not really what I'm going for. You get that same functionality with

<ui:with field='common'
type='agt.fathom.ifathom.common.client.CommonBundle' />

I want to be able to do:

---- common.css -----
@def COLOR_THREE #aaeeaa;

---- *.ui.xml -----
<ui:style>
.myViewSpecificCss {
border: 1px solid COLOR_THREE;
}
</ui:style>

I know you can do

<ui:style src="someCss.css">
.myViewSpecificCss {
border: 1px solid COLOR_THREE;
}
</ui:style>

but the css file with the definitions is in a different project, so I
can't relatively reference it. There should be a way to get the @def
definitions from a CSS resource made available in a <ui:style> tag.

[Riley]

Did you ever figure this out?

[Paul Stockley]

A somewhat convoluted way of doing this is as follows. The resulting javascript code is actually very good and 99% of the time just the string literal for the def will be included.

@def COLOR_ONE #3B5998; 

@def COLOR_TWO #DFE4EE; 

@def COLOR_THREE #FFFFFF; 

@def COLOR_FOUR #6792AB; 

@def COLOR_FIVE #000000; 

----CommonBundle---- 

package com.somepackage

public interface CommonBundle extends ClientBundle { 

        @Source("definitions.css") 

        Definitions definitions(); 

        @Shared 

        public interface Definitions extends CssResource { 

                String COLOR_ONE(); 

                String COLOR_TWO(); 

                String COLOR_THREE(); 

                String COLOR_FOUR(); 

                String COLOR_FIVE(); 

        }

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

public static final Definitions CSS = INSTANCE.css();

}

---- UiBinder ----

<ui:style>

@eval COLOR_THREE com.somepackage.CommonBundle.CSS.COLOR_THREE();

[Thomas Broyer]

We're simply using:

<ui:style src="path/to/definitions.css">

.outerLabel {

  color: COLOR_THREE;

}

</ui:style>

Just like you'd do, without UiBinder:

interface MyClientBundle extends ClientBundle {

   @Source("path/to/definitions.css", "foo.css")

   FooStyles foo();

   interface FooStyles extends CssResource {

      ...

   }

}

[Riley]

Ok, this is what we've been doing too.  Thanks for the response!

[Riley]

It's good to know the output JS is good for this.  Thanks!