How to change the CSS Caption part of gwt-DialobBox

[koolootoomba]

Hello

How can I override the css class '.gwt-DialobBox .Caption' to use
'cursor: move' instead of 'cursor: default'?

I want to do this to make it more obvious to the user that they can
drag the DialogBox. To do this, I want to change the appearance of the
cursor.

Notice that one must grab the caption part of the DialogBox in order
to drag it. That's why I need to modify '.gwt-DialobBox .Caption' and
not '.gwt-DialobBox'.

Now normally I know I can define my own css class in MyProject.css and
then write code like myDialogBox.setStyleName("myCustomCssClass"). But
here the problem is that I need to reach the .Caption part of '.gwt-
DialobBox .Caption'. So how does the setStyleName method work in a
case like this? Apparently, I cannot do things like
myDialogBox.setStyleName("myCustomCssClass .Caption").

So how can I modify the .Caption part of '.gwt-DialobBox .Caption'?


Thanks

[Tristan]

had the same problem...

someone showed me how to use UiBinder to solve it

http://groups.google.com/group/google-web-toolkit/browse_thread/thread/b3c0e7038841e727/8d31c665c0902c73

not sure how it translates to doing it programmatically, but here's
the pattern in UiBinder

<ui:style field='local'>
@external .Caption;
.whateverNameYouWant .Caption {
color: pink;
}
</ui:style>

<g:DialogBox ui:field='myDialogBox'
addStyleNames='{'local.whateverNameYouWant}'/>

because UiBinder obfuscates css class ".whateverNameYouWant" will
become a hash class 'c43SgH' or whatnot, but because you specified
@external .Caption, ".Caption" will not be obfuscated.. so in html,
when your style will be applied it will be something akin to:

<div class="c43SgH Caption"> but it'll be the "Caption" that you
defined which will overwrite the .gwt-DialogBox .Caption

hope that makes sense

[koolootoomba]

BIG THANKS! It is really cruicial to know this, since every non-
trivial GWT widget is using these hard-to-reach CSS classes.

By the way, specifically for the DialogBox it is goot to keep the
HTMLPanel tags in the UIBinder. So instead of this:

<g:DialogBox ui:field='myDialogBox'
addStyleNames='{local.whateverNameYouWant}'/>

It should be this:

<g:HTMLPanel>

<g:DialogBox ui:field='myDialogBox'
addStyleNames='{local.whateverNameYouWant}'/>

</g:HTMLPanel>

Otherwise when trying to display the DialogBox, there are problems
with HasWidgets interface and with calculating the popup position.
When I add a UiBinder in Eclipse, it always suggests the <g:HTMLPanel>
tags and I guess in general it may be good to keep them.

On Jun 3, 3:18 am, Tristan <tristan.slomin...@gmail.com> wrote:
> had the same problem...
>
> someone showed me how to use UiBinder to solve it
>

> http://groups.google.com/group/google-web-toolkit/browse_thread/threa...

> > Thanks- Hide quoted text -
>
> - Show quoted text -