Is there a way to override standard.css inline in UiBinder?

[Tristan]

Hey,

Does anyone have an idea how to override standard.css inline in
UiBinder? For example,

<ui:binder ..... >

<g:Widget ui:field='datePicker'/>

</ui:binder>

where 'datePicker' in java is provided

@UiField(provided = true)
Widget datePicker;

I would like to do something like...

<ui:binder ... >

<ui:style field='local'>
.datePickerMonth { color: white }
</ui:style>

<g:Widget ui:field='datePicker'
addStyleName='{local.datePickerMonth}'/>

</ui:binder>

The above is obviously wrong as .datePickerMonth is obfuscated and i'm
adding the style to the whole thing and not to month selector in the
date picker.
How do I override standard.css in this case? Is it even possible to do
it inline?

Tristan

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

[daniel]

have a look at @external
http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideClientBundle.html#Selector_obfuscation

[Tristan]

Thank you for pointing me to the right spot in the article, it seems
to answer well. So now it seems the setup should be

<ui:binder...>
<ui:style field='local'>
@external .datePickerMonth;
.datePickerMonth { color: white !important; }
</ui:style>

<g:Widget ui:field='datePicker'/>
</ui:binder>

But I am stomped as to how to make the Widget use .datePickerMonth
that I specified instead of the one from standard.css. I don't want to
do addStyleNames='{local.datePickerMonth}' because that would assign
the style at the widget's top level instead of just the month label,
and there is no setMonthStyle thing. I think the functionality that
I'm looking for is some sort of call to create a css resource on the
fly when the widget gets called with my inline .datePickerMonth being
the last css loaded so that it overrides whatever other ones are
there. I don't think there's a call like that, or is there?

I'm thinking something like

<g:Widget ui:field='datePicker'

overrideStyleNames='{local.datePickerMonth}'/>

this should translate to this type of html:

<style type="text/css">
<!--
.datePickerMonth { color: white; }
-->
</style>
<table>
<tbody> .... whatever the widget is....
</table>
.. and then after the widget is done, override again to go back to the
defaults
<style type="text/css">
<!--
.datePickerMonth { } .. since this is empty, it should default to
old values???
-->
</style>

Since I just made that up, would that even work?

Tristan

On Apr 25, 4:36 pm, daniel <d.brelov...@googlemail.com> wrote:
> have a look at @externalhttp://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideClien...

[daniel]

try this:

<ui:style field='local'>
@external .datePickerMonth;

.datePicker .datePickerMonth {

color: white;
}
</ui:style>

<g:Widget ui:field='datePicker'

StyleNames='{local.datePicker}'/>


this way the style of your widget is 'datePicker', that would be
obfuscated to lets say 'A'.
so the calculated style will look like this then:

.A .datePickerMonth{
color: white;
}

cause .datePickerMonth won't get obfuscated;
and the html is somthing like

<div class="A">
<div class="datePickerMonth"/>
</div>

and the style matches the inner element.

Is that what you wanted to do?

[Tristan]

You are the man!!

this worked:

<ui:style field='local'>
@external .datePickerMonth;
.datePicker .datePickerMonth {
color: white;
}
</ui:style>

<g:Widget ui:field='datePicker' addStyleNames='{local.datePicker}'/>

This solution should be included in the UiBinder Article (http://
code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html)!!!

> > fly when the widget gets called with myinline.datePickerMonth being