Re-Using ".gwt-DialogBox .Caption" in UiBinder, how?

[Andrew Hughes]

Hi Guys,

I'd really like to re-use the ".gwt-DialogBox .Caption" style outside of a DialogBox. We have a bunch of widgets and raw html inside UiBinder that we'd like to have styled the same way (for consistency of course).

Here's a BROKEN example:

<!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">

<ui:style>

@external .gwt-DialogBox; .gwt-DialogBox{}

@external .Caption; .Caption {}

</ui:style>

<g:HTMLPanel styleName="{style.mapPanel}">

<!-- the following never get's any style associated with it --> <div class="{style.gwt-DialogBox} {style.Caption}"/> <g:Label text="This should be styled, but it doesn't work!"/> </div> </g:HTMLPanel>

</ui:UiBinder>

Help fixing where I am going wrong would be grand :)

[Andrew Hughes]

this seems to work... but I am not sure how I can get rid of the <g:SimplePanel addStyleNames="{style.gwt-DialogBox}">

<!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">

<ui:style>

@external .gwt-DecoratorPanel;

.gwt-DecoratorPanel {}

@external .gwt-DialogBox;

.gwt-DialogBox {}

@external .Caption;

.gwt-DialogBox .Caption {

border-top: 0px;

}

</ui:style>

<g:DecoratorPanel>

<g:VerticalPanel>

<g:SimplePanel addStyleNames="{style.gwt-DialogBox}">

<g:Label addStyleNames="{style.Caption}" text="Panel Title" />

</g:SimplePanel>

<g:Label text="content goes here"></g:Label>

</g:VerticalPanel>

</g:DecoratorPanel>

</ui:UiBinder>