Updated RoundedPanel
Last year I created a small widget to create rounded corners similar to those in Google mail and calendar. While working with the widget I updated the RoundedPanel Widget with several improvements and changes:
- The height of the corners can be set. In the previous version this was set to 2. In the new version you can set an index between 1 and 9. I call this an index, not the height, because the real height is somewhat out of sync simply to get better looking rounded corners. For example using 9 will get an real height of 12px.
- The color of the corner can be set via a method, setCornerColor. This method sets the background of the corner div’s. This method is helpful to programmatically change the colors.
I created a project on the Google code site where the the latest sources will be maintained as well as issues found and where I will release new widgets, like the VerticalTabPanel: http://code.google.com/p/com-bouwkamp-gwt/
August 4th, 2007 at 23:11
Do you have any idea how to create rounded tabs with GWT? Email me at brent.ryan@gmail.com if you do…
January 2nd, 2008 at 07:45
Hi ,
Rounded corner panel seems good.
i have one question !
can i use rounded panel as rounded titled panel?
means, can i add title on the top border of my rounded panel?
something like the image at following location:
http://nitin638.files.wordpress.com/2007/12/rounded.jpg
Pls. reply.
Thanks
Nitin
January 3rd, 2008 at 23:12
I haven’t completely tested it, but you could try the following:
The title (for example a Label widget) should be placed over the elements of the RoundedPanel. This can be achieved with the CSS attributes position:relative and a negative top value. This means the Label (title text) is placed within the RoundedPanel widget and positioned relative, which will make it float as if it is a title.
Something like:
Label label = new Label(”my title”);
DOM.setStyleAttribute(label.getElement(), “POSITION”, “RELATIVE”);
DOM.setStyleAttribute(label.getElement(), “PADDING”, “0 5px”); // to get free space left/right of text, test different values
DOM.setStyleAttribute(label.getElement(), “TOP”, “-13px”); // negative top position, try based on what looks best, or try other values, like -1em.
DOM.setStyleAttribute(label.getElement(), “LEFT”, “10px”); // position left to get title move to the left.
DOM.setStyleAttribute(label.getElement(), “DISPLAY”, “INLINE”); // otherwise label will take width of whole RoundedPanel widget in some cases, depends on context.
FlowPanel fp = new FlowPanel();
fp.add(label);
fp.add(myownwidget);
RoundedPanel rp = new RoundedPanel(fp);
Or better place these style items your css file and give the label a specific stylename.
It’s also possible to add a RoundedPanel as title, but then you need to remove the display inline, and set the width of the RoundedPanel explicit otherwise the title will take the width of the of whole RoundedPanel widget in some cases, depends on context.
Let me know if this works.