Best CSS practice for complex GWT Widgets using UiBinder

[Roland Bali]

Hi,

I did some searching but couldn't anything about this subject. I'm
using the SuggestBox widget and I'd like to change the layout for
elements in a SuggestBox.

For example I can change the .gwt-SuggestBox by adding addStyleNames
but that only changes .gwt-SuggestBox but how do I change the "sub
elements" like .gwt-SuggestBoxPopup .item?

Is this possible at all using UiBinder?

Kind regards,
Roland

--
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.

[Thomas Broyer]

On Apr 19, 8:54 am, Roland Bali <roland.b...@gmail.com> wrote:
> Hi,
>
> I did some searching but couldn't anything about this subject. I'm
> using the SuggestBox widget and I'd like to change the layout for
> elements in a SuggestBox.
>
> For example I can change the .gwt-SuggestBox by adding addStyleNames
> but that only changes .gwt-SuggestBox but how do I change the "sub
> elements" like .gwt-SuggestBoxPopup .item?

You can use setPopupStyleName to replace gwt-SuggestBoxPopup with the
class name of your choice.

> Is this possible at all using UiBinder?

<g:SuggestBox popupStyleName="my-CustomSuggestBoxPopup" ... />

[Katharina Probst]

You can also change styles in the ui.xml file directly inside a <ui:style> tag, like so:

<ui:style>
  @external gwt-SuggestBox;
  @external gwt-SuggestBoxPopup;

  .gwt-SuggestBox {
   ...
  }

  .gwt-SuggestBoxPopup {
   ...
  }

</ui:style>


(Note the @external - you need that for predefined styles)

kathrin

[Roland Bali]

Thanks Katharina, that did it! :)

/R

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com>
> > .

> > For more options, visit this group at
> >http://groups.google.com/group/google-web-toolkit?hl=en.
>
> --
> 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 athttp://groups.google.com/group/google-web-toolkit?hl=en.

[Mike]

I have a similar question:

I was quite intrigued to see the @external annotation here -- anyone
point at more documentation?
All I found was this: http://code.google.com/p/google-web-toolkit/wiki/CssResource#External_and_legacy_scopes

From that documentation, it seems to imply only that the generated
CssResource will not be obfuscated, and one can still gain
programmatic access to the name.

It does not mean that one could refer to a CssResource *outside* of
the <ui:style> scope though -- correct?

Is it possible to have a single <module>.css file defined that would
allow the one to combine the following techniques:
- use in .ui.xml (I think that the answer is basically yes, use
<ui:style @src="My.css"/> <g:Widget addStyleNames="{style.someStyle}"/
>
- use in .java classes
- use in .html resources (files included in the war directory)

So -- I guess I'm really looking for some way to get something like
this to work: <ui:style @src="<some path>/war/My.css"/>

Any suggestions / comments on this?

> > You can also change styles in the ui.xml file directly inside a <ui:style>
> > tag, like so:
>
> > <ui:style>
> >   @external gwt-SuggestBox;
> >   @external gwt-SuggestBoxPopup;
>
> >   .gwt-SuggestBox {
> >    ...
> >   }
>
> >   .gwt-SuggestBoxPopup {
> >    ...
> >   }
>
> > </ui:style>
>
> > (Note the @external - you need that for predefined styles)
>
> > kathrin

[Thomas Broyer]

On 27 avr, 15:19, Mike <m...@sheridan-net.us> wrote:
> I have a similar question:
>
> I was quite intrigued to see the @external annotation here -- anyone
> point at more documentation?

> All I found was this:http://code.google.com/p/google-web-toolkit/wiki/CssResource#External...

>
> From that documentation, it seems to imply only that the generated
> CssResource will not be obfuscated, and one can still gain
> programmatic access to the name.
>
> It does not mean that one could refer to a CssResource *outside* of
> the <ui:style> scope though -- correct?

No. The class name you use in your stylesheet won't be changed, so it
will apply to the whole document (because "scoped stylesheets" do not
exist); that's why the documentation talks about "legacy CSS".

> Is it possible to have a single <module>.css file defined that would
> allow the one to combine the following techniques:
>    - use in .ui.xml  (I think that the answer is basically yes, use
> <ui:style @src="My.css"/>  <g:Widget addStyleNames="{style.someStyle}"/
>
>    - use in .java classes
>    - use in .html resources (files included in the war directory)

I think browsers wouldn't choke on @external, but other CssResource
features (@sprite, @def, @if, etc.) obviously won't work outside of
CssResource, i.e. in ".html resources".

> So -- I guess I'm really looking for some way to get something like
> this to work:  <ui:style @src="<some path>/war/My.css"/>
>
> Any suggestions / comments on this?

Why not just use the class names instead of trying to make it fit into
a CssResource? (<g:MyWidget addStyleNames="my-MyWidget" />)
Otherwise, you could define a CssResource whose *.css source is only
made of an @external rule listing the class names from you My.css that
lives in your war directory, so you have a CssResource interface
based on a non-CssResource-aware stylesheet (you'd have to inject the
stylesheet into the page by other means than
CssResource::ensureInjected() though)

[Mike]

On Apr 27, 6:15 pm, Thomas Broyer <t.bro...@gmail.com> wrote:

Thanks for the reply.

> > It does not mean that one could refer to a CssResource *outside* of
> > the <ui:style> scope though -- correct?
>
> No. The class name you use in your stylesheet won't be changed, so it
> will apply to the whole document (because "scoped stylesheets" do not
> exist); that's why the documentation talks about "legacy CSS".

Its starting to become clearer to me what's going on.
[I'm still catching up]

> I think browsers wouldn't choke on @external, but other CssResource
> features (@sprite, @def, @if, etc.) obviously won't work outside of
> CssResource, i.e. in ".html resources".

Well -- the @external and other CssResource features won't ever make
it to anywhere past the source code, right? They all get compiled by
the GWT compiler into some amalgam of Java/CSS that should be
compatible with any standards-compliant rendering device, no?

> Why not just use the class names instead of trying to make it fit into
> a CssResource? (<g:MyWidget addStyleNames="my-MyWidget" />)

Where are you suggesting the definition for my-MyWidget live?

Also, the syntax won't guarantee that there aren't any typos or that
the style has been defined. Whereas this alternate syntax provides
that:

> <g:MyWidget addStyleNames="{style.my-MyWidget}" />

or even

> <g:MyWidget addStyleNames="{myApp.my-MyWidget}" />

And, doesn't this syntax (which is compatible with the use of
{style.someStyle} in a .ui.xml

<ui:style> .... </ui:style> actually generate a CssResource auto-
magically?

So, if I want to apply a common style (say, to all tables no matter
where they appear) across my entire app (and say, some tables are
built on the fly in Java code, and some are built in UiBinder.ui.xml
resources, and say some are built in some "static" .html files) --
what do you suggest?

Seems you're saying if I want to declaratively apply the style in my
UiBinder.ui.xml (which I want to do), I would have to do this:

<ui:style>
@external my-MyWidget
</ui:style>

then I would reference using:

<g:Widget addStyleNames="{my-MyWidget}"/>

So, if I then wanted to say have some page being rendered as entirely
auto-generated via some servlet -- I'll have to use the technique you
mentioned here:

> define a CssResource whose *.css source is only made of an @external rule listing the class names from your My.css that lives in your war directory,  so you have a CssResource interface based on a non-CssResource-aware stylesheet (you'd have to inject the stylesheet into the page by other means than CssResource::ensureInjected() though)

Have I got it now?

Cheers.