Yep. @external worked. Thanks everyone.
For the record:
========= TabLayoutPanelTest =========
<ui:UiBinder
xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style src='TabLayoutPanel.css'/>
<g:TabLayoutPanel ui:field="tabLayoutPanel" barHeight="28">
<g:tab><g:header>This</g:header><g:HTML>this</g:HTML></g:tab>
<g:tab><g:header>That</g:header><g:HTML>that</g:HTML></g:tab>
<g:tab><g:header>The Other</g:header><g:HTML>the other</g:HTML></g:tab>
</g:TabLayoutPanel>
</ui:UiBinder>
=========== TabLayoutPanel.css ============
@external gwt-TabLayoutPanelTabs;
@external gwt-TabLayoutPanelTabInner;
@external gwt-TabLayoutPanelTab;
@external gwt-TabLayoutPanelTab-selected;
.gwt-TabLayoutPanelTab, .gwt-TabLayoutPanelTab-selected {
position: relative;
height: 26px;
width: 9em;
margin-left: -16px;
}
.gwt-TabLayoutPanelTab .gwt-TabLayoutPanelTabInner,
.gwt-TabLayoutPanelTab-selected .gwt-TabLayoutPanelTabInner {
height: 26px;
padding-left: 15px;
}
.gwt-TabLayoutPanelTab {
background: url(tab-inactive-left.png) no-repeat bottom left;
cursor: default;
}
.gwt-TabLayoutPanelTab .gwt-TabLayoutPanelTabInner {
background: url(tab-inactive-right.png) no-repeat bottom right;
}
.gwt-TabLayoutPanelTab-selected {
background: url(tab-active-left.png) no-repeat bottom left;
z-index: 1;
}
.gwt-TabLayoutPanelTab-selected .gwt-TabLayoutPanelTabInner {
background: url(tab-active-right.png) no-repeat bottom right;
}
.gwt-TabLayoutPanelTabs {
background: url(tabs-bg.png) repeat-x bottom;
padding-left: 2em;
margin-left: 2px;
margin-right: 4px;
}
.gwt-TabLayoutPanelTabInner div {
color: #444;
padding-top: 6px;
font-weight: bold;
height: 26px;
text-align: center;
margin-right: 15px;
}
.gwt-TabLayoutPanelTab .gwt-TabLayoutPanelTabInner div {
background: url(tab-inactive-center.png) repeat-x top;
}
.gwt-TabLayoutPanelTab-selected .gwt-TabLayoutPanelTabInner div {
background: url(tab-active-center.png) repeat-x top;
}
=============================
Note that all of the CSS class names in the CSS file need to be
annotated @external at the top of the CSS file. This could have all
been on one line, but it also works one per line.
Where to put things:
- Since the CSS path is picked up from the ui.xml file, the parser
expects the CSS file to be in the same path as the ui.xml file.
- Since the image URLs are inline in the CSS, but the CSS is annotated
external, then the images are expected to be in the war root
directory, right beside the main .html file for the project. (Images
were in an attachment in a previous email in this thread.)
And here is what it should look like:
http://tablayoutpanel.latest.emcode-dev.appspot.com
Stuart
On Wed, Dec 2, 2009 at 10:22 AM, Ray Ryan <rj...@google.com> wrote:
>
> I don't think we should thaw 2.0 for the externalized CSS file (though it's
> tempting), but it would be a good add for the downloads page. Or a tool that
> externalizes CSS files, similar to the one that generates java interfaces
> from them.
>
> On Dec 2, 2009 5:59 AM, "BobV" <b...@google.com> wrote:
>
> > [...@rjrjr, bobv: Is there some easy way to put plain, unobfuscated CSS
> > rules > in a .ui.xml file?]
>
> Yes. Declare those class selectors to be @external in the CSS block.
>
> @external gwt-TabLayoutPanelTabs gwt-TabLayoutPanelTabInner;
>
> Now that ui:style allows users to specify a src attribute as well as
> inline styles, we should provide a CSS file that has @external
> declarations for all of the gwt- styles. Alternatively, the @external
> syntax could be extended with something like "@external gwt-*;"
>
> --
> Bob Vawter
> Google Web Toolkit Team
>
> --
>
> http://groups.google.com/group/Google-Web-Toolkit-Contributors
>
> --
> http://groups.google.com/group/Google-Web-Toolkit-Contributors
--
http://groups.google.com/group/Google-Web-Toolkit-Contributors
