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/