GWT RC2: TabPanelLayout -- no supporting CSS?

[Stuart Moffatt]

All,

I found myself needing band-aids (read: bleeding edge) while trying
out TabLayoutPanel.

1) The javadocs and code for TabLayoutPanel suggest that the gwt-
TabLayoutPanel(*) css selectors exist:

http://code.google.com/p/google-web-toolkit/source/browse/releases/2.0/user/src/com/google/gwt/user/client/ui/TabLayoutPanel.java

2) And, poking around the trunk shows this tidy example:

http://code.google.com/p/google-web-toolkit/source/browse/releases/2.0/user/javadoc/com/google/gwt/examples/TabLayoutPanelExample.java

3) When that example is implemented, there is no CSS on the
TabLayoutPanel:

http://tablayoutpanel.latest.emcode-dev.appspot.com/

While there is no CSS to dress it up, the layout and events are mostly
correct on Safari 4.0.3 (Mac). But on FF 3.5.5 (Mac) only one tab
shows (the third) sitting above the contents of the first tab. Yikes,
not really cross-browser.

4) Of course, it seems that the main problem is that the new gwt-
TabLayoutPanel(*) selectors don't yet exist, in here:

http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard.css

or any other of the themes/css files.

Is there someone sitting on a patch for gwt-TabLayoutPanel(*)
selectors, or is the problem deeper? I came across a couple of TODOs
and hints about css floats maybe not doing the trick under the
TabLayoutPanel implementation. Any help on this?

In the meantime, is there sample UIBinder xml to use the old TabPanel
instead?

[Joel Webber]

The following CSS rules should work fine with the TabLayoutPanel as checked in:

.gwt-TabLayoutPanel { }

.gwt-TabLayoutPanelTabs { }

.gwt-TabLayoutPanelTab { }

.gwt-TabLayoutPanelTab .gwt-TabLayoutPanelTabInner { }

.gwt-TabLayoutPanelTab-selected { }

.gwt-TabLayoutPanelTab-selected .gwt-TabLayoutPanelTabInner { }

While we haven't added rules to default.css, et al, these rules should be sufficient for most standard CSS tricks. There is indeed an issue that's causing the tabs to stack up on Firefox, for which I will be committing a patch momentarily (TabLayoutPanel.java:111 should be setting "cssFloat" rather than just "float").

If you run into other problems with the structures that are there, please let me know.

Thanks,

joel.

--
http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Stuart Moffatt]

Joel,

Is there something "special" that I need to do in my ui.xml in order to get these CSS rules applied to my TabLayoutPanel?

<!DOCTYPE ui:UiBinder SYSTEM "http://google-web-toolkit.googlecode.com/files/xhtml.ent">

<ui:UiBinder

  xmlns:ui='urn:ui:com.google.gwt.uibinder'

  xmlns:g='urn:import:com.google.gwt.user.client.ui'>

 ... ui style ... src? type? empty? do I add {style.*} styles to the XML below?

  <g:TabLayoutPanel ui:field="tabLayoutPanel" barHeight="20">

   <g:tab><g:header>First Tab</g:header><g:HTML>first tab content</g:HTML></g:tab>

   <g:tab><g:header>Second Tab</g:header><g:HTML>second tab content</g:HTML></g:tab>

  </g:TabLayoutPanel>

</ui:UiBinder>

You'll notice my sample app which has no default CSS rules applied: http://tablayoutpanel.latest.emcode-dev.appspot.com/

Stuart

--
http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Joel Webber]

These are just normal CSS rules that can be specified in a CSS file. We haven't yet updated the widgets to integrate deeply with CssResource everywhere, so they're specified unobfuscated right now. We're planning on attacking this problem soon (but post-2.0), so that you will be able to specify these kinds of styles directly using CssResource.

[@rjrjr, bobv: Is there some easy way to put plain, unobfuscated CSS rules in a .ui.xml file?]

To give you some idea of what's possible, the following rules give you tabs like the ones in Chrome (the images are attached, and you'll want to give the TabLayoutPanel a barHeight of 28px):

.gwt-TabLayoutPanelTab,

.gwt-TabLayoutPanelTab-selected {

  position: relative;

  height: 26px;

  width: 8em;

  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;

}

.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;

  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;

[BobV]

> [@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

[Stuart Moffatt]

Thanks. Will give @external a try.

Stuart

[Ray Ryan]

The @external mention is just the thing for that CSS page.

--

http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Ray Ryan]

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" <bo...@google.com> wrote:

--

http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Stuart Moffatt]

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

> --
> http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Joel Webber]

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.

--

http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Stuart Moffatt]

@jgw,

Morten makes a good observation (which I wasn't worrying about for now as I just chalked it up to pre-release fuzzies).

Any ideas why the rendering in FF is so poor? It seems we might be heading back to the land where web developers need a PhD in browser quirks (albeit CSS instead of JS)

sfm

On Tue, Dec 8, 2009 at 4:10 PM, Morten Holm <moho...@gmail.com> wrote:

On 3 Dec., 21:53, Stuart Moffatt <stuartmoff...@gmail.com> wrote:
> And here is what it should look like:
>
> http://tablayoutpanel.latest.emcode-dev.appspot.com
>

This looks great in Safari, but not so good in FireFox. Any idea why?

Morten

[Joel Webber]

That should be fixed in the final release. Turns out I had made the mistake of writing style.setProperty("float", "left"), rather than style.setProperty("cssFloat", "left"). The latter is "correct", but WebKit accepts either.

(Yes, there should be a style.setFloat() method, but that will have to come later, once I have time to write a script to generate the bazillion CSS property setters!)

--

http://groups.google.com/group/Google-Web-Toolkit-Contributors

[Stuart Moffatt]

Figured something along those lines. Thanks Joel.

sfm

--
http://groups.google.com/group/Google-Web-Toolkit-Contributors