Tuesday, July 15, 2008

Rounded corners panel with GWT

Native GWT solution

GWT provides a native solution to build panels with rounded corners. This solution is done with a DecoratorPanel component.

The rounded corners are build thanks a .css file customization where images needs to be provided in the css file.

html>body .gwt-DecoratorPanel .topLeft {
  background: url(images/corner.png) no-repeat 0px 0px;
}

The drawback of this solution is that images need to be provided when a new rounded panel has to be created with a new color.

Bouwkamp solution

An other solution without providing any images for corner definition is available thanks http://code.google.com/p/com-bouwkamp-gwt/. By this way creating a new rounded corner panel with different colors is a very basic task.

Steps to create a new rounded panel:

  • Download the jar file and reference this file in the classpath
  • Modify the <appli>.gwt.xml and add :

<inherits name='com.bouwkamp.gwt.user.User' />

  • Create your java file:

    By default the height of the corners is 2px. It is possible to set a different height at construction time. The height can be a value between and including 1 and 9. This value doesn't correspond exactly with the height, e.g. 9 is 12px height.

     // all 4 corners are rounded and height index 5
    RoundedPanel rp = new RoundedPanel(yourWidget, ALL, 5);



    In the previous sample yourWidget can be any component like a VerticalPanel



    You can even define the color of the corner programaticaly:




    // all 4 corners are rounded.
    RoundedPanel rp = new RoundedPanel(yourWidget);
    rp.setCornerColor("red");




  • Customize the .css application file for rounder corner customization


  • Default the css style name of the rounded corner divs is cbg-RP. Use it to set the colors of the corner. For example:




     .cbg-RP { background-color:#c3d9ff; }



    Conclusion



    The solution provided by the Bouwkamp library is very easy to use. Some improvement can be done like providing a rounded corner support and shadow borders. It seems javascript libary is available for this feature see:



    http://www.ruzee.com/blog/shadedborder/






 

2 comments:

Michal said...

Hi Fred,

I was wondering what am I doing wrong with RoundedPanel. I am using GWT 1.5 RC1 and com.bouwkamp.gwt-1.3.2.

This is the portion of my code:

AbsolutePanel ap =
new AbsolutePanel();
ap.setPixelSize(50, 50);
ap.setStyleName("brown");
RoundedPanel rp =
new RoundedPanel(ap, RoundedPanel.ALL, 9);

RootPanel.get().add(rp, 1300, 100);

It only shows normal Absolute panel (square), no rounded corners.

Thank you for your help.

Michal

Gerben said...

rp.setCornerColor("red");

Looks like the default is white.

Frederic shared items