Rounded Corner In Gwt Button

[pavi]

Hi all,

I am try to make round corner using css But I am not able to do
rounded corner.

My css style is:
.box {
background-image: url(/images/nw.gif), url(/images/ne.gif), url(/
images/sw.gif), url(/images/se.gif);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

please Help

[mariyan nenchev]

For my custom buttons i use Flex Table with 1 row and 3 columns: left, repeat and right, where left and right are images with rounded corners and repeat is 1px width image that is repeated.
I also have predefined styles that are placed in enum. The only problem here is that my images are not in bundle, but it can easily be done with bundle. At the and is the css.
Here is an example:

public class ImageButton extends FlexTable {

    public enum Style {
        HEADER, TABLE_CLOSE;

        private static String fromEnum(Style i) {
            switch (i) {
            case HEADER:
                return "header-image-button";
            case TABLE_CLOSE:
                return "table-close-image-button";
            default:
                return "header-image-button";
            }
        }
    }

    private final HTML left = new HTML();
    private final HTML middle = new HTML();
    private final HTML right = new HTML();
    private final CellFormatter cf = getCellFormatter();

    public ImageButton(String title, Style style) {
        this(style);
        middle.setText(title);
    }

    public ImageButton(Style style) {
        // make all flex table cells like one
        this.setBorderWidth(0);
        this.setCellPadding(0);
        this.setCellSpacing(0);
        this.setWidget(0, 0, left);
        // cf.setWidth(0, 0, "6px");

        this.setWidget(0, 1, middle);
        middle.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
        cf.setVerticalAlignment(0, 1, HasVerticalAlignment.ALIGN_MIDDLE);
        cf.setHorizontalAlignment(0, 1, HasHorizontalAlignment.ALIGN_CENTER);
        this.setWidget(0, 2, right);
        // cf.setWidth(0, 2, "7px");
        setOverridenStyleName(style);
    }

    private void setOverridenStyleName(Style style) {
        super.setStyleName(Style.fromEnum(style));
        switch (style) {
        case HEADER:
            setLeftStyleName("bg-left");
            setRightStyleName("bg-right");
            setMiddleStyleName("bg-repeat");
            break;
        case TABLE_CLOSE:
            setLeftStyleName("left-table-close-button");
            setRightStyleName("right-table-close-button");
            setMiddleStyleName("repeat-table-close-button");
            break;
        }
    }

    public void setLeftStyleName(String style) {
        cf.setStyleName(0, 0, style);
    }

    public void setMiddleStyleName(String style) {
        cf.setStyleName(0, 1, style);
    }

    public void setRightStyleName(String style) {
        cf.setStyleName(0, 2, style);
    }

    @Override
    public void setTitle(String title) {
        middle.setText(title);
    }

    @Override
    public String getTitle() {
        return middle.getText();
    }

    public void setEnabled(boolean enabled) {
        DOM.setElementPropertyBoolean(getElement(), "disabled", !enabled);
        if (enabled) {
            this.removeStyleName("disabled-button");
        } else {
            this.addStyleName("disabled-button");
        }
    }

    public boolean isEnabled() {
        return !DOM.getElementPropertyBoolean(getElement(), "disabled");
    }
}


CSS:

bg-left {
    background-image: url("left.gif");
    background-repeat: no-repeat;
}

.bg-repeat {
    background-image: url("repeat.gif");
    background-repeat: repeat-x;
}

.bg-right {
    background-image: url("right.gif");
    background-repeat: no-repeat;
}

USE IT:
ImageButton b1 = new ImageButton(Style.HEADER);
Hope this help.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[George Georgovassilis]

There is a way using a button with the sliding door techique [1]. The
example does it with a link simulating a button, but it also works
with buttons.
Please be advised that buttons pose an unforseen behavior when
pressed: they displace their content by a few pixels. Unfortunately
not all browsers report that state correctly (depends whether the
button is clicked with the mouse or the keyboard) and you might be
stuck occasionally with a few uggly artifacts.

[1] http://www.filamentgroup.com/lab/styling_the_button_element_with_sliding_doors/