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.
On Wed, Feb 10, 2010 at 12:19 PM, pavi praveen.ojh...@gmail.com wrote:
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
--
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-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.comgoogle-web-toolkit%2bunsubscr...@googlegroups.com
.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
--
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-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
