Great, I'm glad that worked out ok. Just for the record, we very much want
to do better than having to mix @external and obfuscated CSS like this. We
fully intend to revisit how styles and themes are applied, both to make it
easier and more efficient, as soon as we get 2.0 out the door.
On Thu, Dec 3, 2009 at 3:53 PM, Stuart Moffatt <stuartmoff...@gmail.com>wrote:
> 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
>
--
http://groups.google.com/group/Google-Web-Toolkit-Contributors
