2

I'm trying to write an app that uses rounded corners for framing the app. I've found a package on google code that has a RoundedLinePanel and it seems to work... kind of.

I'm wondering a few things. Is this what people are using for creating divs with round corners in GWT? The release notes say it hasn't changed in almost a year.

Also, I can't seem to set a fixed height of this div (setHeight sets it on the wrapper div, not the inner one). so it's not useful to me as I have a fixed height app.

Finally, if anyone can suggest a better mechanism for creating rounded corner divs in GWT I'm all ears.

brad
  • 31,987
  • 28
  • 102
  • 155
  • As the author of the "package" I'm biased of course;-) but the package is the way to create rounded corner with divs. Regarding your problem setting the height. Could you or elaborate some more or file a bug report: http://code.google.com/p/cobogw/issues/list. And if you have any other requests or problems feel free to report them as well or mention them here. – Hilbrand Bouwkamp Apr 07 '10 at 11:17
  • Well I definitely have quite a few questions, should I ask through here or create an issue at the above link? – brad Apr 07 '10 at 12:54
  • If you have pr/cr requests please do so at the link, since it makes it easier to track. – Hilbrand Bouwkamp Apr 07 '10 at 14:58
  • I've added two issues (#32 & #33) to the issue tracker. Hope that helps – brad Apr 20 '10 at 14:43

2 Answers2

4

There is a beautiful way to rounded corners using CSS 3 (which thus doesn't work in IE<=8 , but will in IE9 developer preview). Take a look at http://css3please.com/ to see the styles involved. It's fairly simple using a border-radius (or -moz-border-radius or -webkit-border-radius property). In GWT just add a Style Class Name you want to the elements you want to have a rounded border and you are go. Of course supporting rounded corners in legacy browsers is harder, but do you need to do it?

For legacy browsers it is quite harder, depending on the actual context. It always involves images for the borders. You have to create images that mask the border of the box. What works is the trick described in this answer. To use this in GWT you can use either uibinder, htmlelement or you create your own widget. A broader explanation of the technique can also be found here.

Community
  • 1
  • 1
Paul de Vrieze
  • 4,888
  • 1
  • 24
  • 29
  • In fact I'm currently using border-radius (moz/web equivalent) and the one gripe (in my office) is that it only works for Firefox/Webkit. So yes, I do need to do it. – brad Apr 07 '10 at 12:54
3

The solution most commonly found, the decoratorPanel, is deprecated in the current version of GWT (if you use it with GWT 2.1.1, for example, you'll wind up with a mess of incompatilbility between the GWT-required doctype, the decoratorPanel, and IE, especially IE8).

The required GWT 2.1.1 doctype (!doctype html) also disables the popular rounded-corners.htc for IE8.

You can use the CSS3 series of rounded corner properties to add classes, but they will not work in IE versions prior to 9.

JQuery and other javascript rounded corners have a high probability of conflicting with the native GWT js, so we abandoned those as a possible solution, though I personally did no testing for these.

We wound up having to use rounded corner images in order to be truly cross-browser compliant and create a consistent look.

deborah64554
  • 124
  • 4