4 corners are rounded. RoundedPanel rp = new RoundedPanel(yourWidget); // use rp where you would use 'yourWidget' otherwise Or with custom set corners, like only on the left:
// custom set corners RoundedPanel rp = new RoundedPanel(yourWidget, RoundedPanel.LEFT); // use rp where you would use 'yourWidget' otherwise
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); // use rp where you would use 'yourWidget' otherwise
There are 2 ways to set the color on the border programmatically. First via {@link #setCornerColor(String)} and second via {@link #setBorderColor(String)}. The second method will also add a solid border style in the given color on the left and/or right of the widget. The first method doesn't set a border style. Use the first method when you don't want to have a border or when the background color of your widget is the same as the background color of the rounded corners or if you wan to have the flexibility to set the border via CSS. Example to set the color of the corners with {@link #setCornerColor(String)}:
// all 4 corners are rounded. RoundedPanel rp = new RoundedPanel(yourWidget); rp.setCornerColor("red"); To add also a solid border style to the left and/or right of the widget use {@link #setBorderColor(String)}:
// all 4 corners are rounded and solid border style left and right of widget RoundedPanel rp = new RoundedPanel(yourWidget); rp.setBorderColor("red"); 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; } A custom style might be needed when the corners are visible only when a panel is selected (see the KitchenSink example modification below). Use the
setCornerStyleName method to set the custom style name. For example set a custom style
my-RP and add something like the following to the style sheet:
.selected .my-RP { background-color:#c3d9ff; } Adding rounded corners to DialogBox widgets
Adding rounded corners to a
DialogBox is somewhat more complicated. The problem with
DialogBox is that it uses a private panel and the
RoundedPanel should be applied to this private
Panel. To add the rounded corners to a
DialogBox you have to rewrite the implementation of the
DialogBox. For the
DialogBox widget this can be done as follows. First create a new class like
RoundedDialogBox and copy the code from the original
DialogBox (Please take the copyright of this class into account). Next make the following changes to the code:
// Private variable for RoundedPanel private RoundedPanel rp;
In the constructor change:
super.add(panel);
into:
rp = new RoundedPanel(panel); super.add(rp);
Next change the style, otherwise the style of the dialog box is applied to the rounded lines too. Do this by changing the following line:
setStyleName("gwt-DialogBox"); into:
panel.setStyleName("gwt-DialogBox"); In your css add the color of the border, something like:
.cbg-RP { background-color:#AAAAAA; } Now by extending your own dialog class on this
RoundedDialogBox instead of the original
DialogBox you will have rounded corners around your dialog.