Here is what I did to test this:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";>
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:p1="urn:import:com.google.gwt.user.datepicker.client">
<g:HTMLPanel>
<p1:DatePicker/>
</g:HTMLPanel>
</ui:UiBinder>
(can't be more basic then that)
And in my css file I have simply added the following lines:
.gwt-DatePicker { font-size: 40pt; }
.datePickerMonthSelector { color: red; }
.datePickerMonth { font-weight: bold; }
I did this in a new project where I did nothing more then simply alter the
.css file and create this one UiBinder bit of code, adding it directly to
the root layout panel (I like standards mode :-) I am not using the
CSSResource interface and I found that if you do the following the styles
are ignored:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent";>
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:p1="urn:import:com.google.gwt.user.datepicker.client">
<ui:style>
.gwt-DatePicker { font-size: 40pt; }
.datePickerMonthSelector { color: red; }
.datePickerMonth { font-weight: bold; }
.datePickerPreviousButton { }
.datePickerNextButton { }
.datePickerDays { }
.datePickerWeekdayLabel { }
.datePickerWeekendLabel { }
.datePickerDay { }
.datePickerDayIsToday { }
.datePickerDayIsWeekend { }
.datePickerDayIsFiller { }
.datePickerDayIsValue { }
.datePickerDayIsDisabled { }
.datePickerDayIsHighlighted { }
.datePickerDayIsValueAndHighlighted { }
</ui:style>
<g:HTMLPanel>
<p1:DatePicker/>
</g:HTMLPanel>
</ui:UiBinder>
Now personally I am very very much against inline styles or any styles other
then in a separate stylesheet so I actually don't mind that this does not
work. Though I do not see why it wouldn't as the classes are applied to the
elements so the UiBinder should not ignore this code just because it is not
assigned later on using addStyleNames or setStyleName but it seems
that optimization has removed this bit of code from the final product as it
sees it as never used. (Unless I am totally crazy and doing this completely
wrong)
As far as examples and documentation goes I agree the GWT documentation is
though extensive very much a trail and error thing which quite often feels
incomplete or assuming a bit more knowledge of the GWT framework then a
beginner with it can have.
Anyway the styles do get applied though it might be that using CSSResource
the file is loaded "to early" and the default style sheet from GWT gets
loaded after overwriting your styles at least that is the only reason I can
come up with why it would not work in your case.
Hope this helps,
Rob
On Fri, Jul 8, 2011 at 8:17 AM, vik <[email protected]> wrote:
> Thanks for the reply Rob. I did try the piece of code you have pasted
> even previously but it did not work. Even a simple rule like a color
> change or a bg-color change within all the parenthesis don't work.
> This technique doesn't work if I put it in the ui.xml nor does it work
> in a .css file referred as a CSSResource interface. Again, the
> examples online are incomplete. If possible, please share a working
> example. Thank you again!
>
> Vikram
>
> On Jul 7, 9:12 pm, Rob Coops <[email protected]> wrote:
> > On Thu, Jul 7, 2011 at 11:09 AM, vik <[email protected]> wrote:
> > > Can somebody please post a simple example on how to style a 'fairly-
> > > complex' widget like the gwt-DatePicker with different colors and
> > > assets? There are a few examples online for the date picker but they
> > > either are incomplete or don't use the UiBinder technique. I would
> > > like to use the UiBinder ui.xml files to store information as in
> > > colors, bg images etc. Thanks!
> >
> > > --
> > > You received this message because you are subscribed to the Google
> Groups
> > > "Google Web Toolkit" group.
> > > To post to this group, send email to
> [email protected].
> > > To unsubscribe from this group, send email to
> > > [email protected].
> > > For more options, visit this group at
> > >http://groups.google.com/group/google-web-toolkit?hl=en.
> >
> > Hi Vik,
> >
> > I would suggest using the build in styles
> > CSS Style Rules
> >
> > .gwt-DatePicker { }
> > .datePickerMonthSelector { the month selector widget }
> > .datePickerMonth { the month in the month selector widget }
> > .datePickerPreviousButton { the previous month button }
> > .datePickerNextButton { the next month button }
> > .datePickerDays { the portion of the picker that shows the days }
> > .datePickerWeekdayLabel { the label over weekdays }
> > .datePickerWeekendLabel { the label over weekends }
> > .datePickerDay { a single day }
> > .datePickerDayIsToday { today's date }
> > .datePickerDayIsWeekend { a weekend day }
> > .datePickerDayIsFiller { a day in another month }
> > .datePickerDayIsValue { the selected day }
> > .datePickerDayIsDisabled { a disabled day }
> > .datePickerDayIsHighlighted { the currently highlighted day }
> > .datePickerDayIsValueAndHighlighted { the highlighted day if it is also
> > selected }
> >
> > Since with UIBinder you can only assign a single style name and as far as
> I
> > know this is not automatically used to replace the datePicker part of the
> > default styles you are pretty much stuck with these once. Though I would
> not
> > put it past the Google team to be smart enough to do that I fear that
> this
> > might just not work at the moment. To be able to do this and still add
> you
> > own style use: addStyleNames.
> >
> > Regards,
> >
> > Rob
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> 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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
