And now for something completely different, well not really, just a more technical post...
I wanted to share a small widget I created after my long battle with the rounded corner button.
I did not invent anything here, just borrowed some techniques from here and there to propose a small improvement to the sliding doors technique.
You can find many explanations on the sliding doors, I personally liked this post.
The sliding doors technique requires that you add a span element “inside” your button and put the button’s text in it, this way you can use 2 different images as backgrounds to the button and the span (a left and right parts of a button image) that slide one over the other.
What was missing now was a nice wrap so I don’t need to put my text on a span element in an html.
While looking for a solution I stumbled upon this great post on button with image, the button there has exactly what I need, it puts it’s text on an inner span element.
So I used it to create my “EasySkinnableButton”, here is what I did:
The css part:
when used in a ui binder xml it looks like this:
Instead of:
You can also use it programmatically by just calling “button.setTex()”
Here are the images:
I wanted to share a small widget I created after my long battle with the rounded corner button.
I did not invent anything here, just borrowed some techniques from here and there to propose a small improvement to the sliding doors technique.
You can find many explanations on the sliding doors, I personally liked this post.
The sliding doors technique requires that you add a span element “inside” your button and put the button’s text in it, this way you can use 2 different images as backgrounds to the button and the span (a left and right parts of a button image) that slide one over the other.
What was missing now was a nice wrap so I don’t need to put my text on a span element in an html.
While looking for a solution I stumbled upon this great post on button with image, the button there has exactly what I need, it puts it’s text on an inner span element.
So I used it to create my “EasySkinnableButton”, here is what I did:
public class SkinnableButton extends Button{
private String text;
private Element span;
public SkinnableButton() {
span = DOM.createElement("span");
DOM.insertChild(getElement(), span, 0);
}
@Override
public void setText(String text){
this.text = text;
span.setInnerText(text);
}
@Override
public String getText() {
return this.text;
}
}
The css part:
.gwt-Button span {
background: transparent url(images/slidingdoors_button_left.png) no-repeat top left;
display: block;
line-height: 22px;
padding: 1px 0 3px 12px;
color: #fff;
border-style: none;
}
.gwt-Button {
background: transparent url(images/slidingdoors_button_right.png) no-repeat top right;
display: block;
float: right;
height: 24px;
margin-right: 15px;
padding: 0px 10px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border-style: none;
}
.gwt-Button:hover span {
background-position: 0 -24px;
}
.gwt-Button:hover {
background-position: right -24px;
}
.gwt-Button:focus span {
background-position: 0 -48px;
}
.gwt-Button:focus {
background-position: right -48px;
}
.gwt-Button:active span {
background-position: 0 -72px;
}
.gwt-Button:active {
background-position: right -72px;
}
.gwt-Button:disabled span {
background-position: 0 -96px;
}
.gwt-Button:disabled {
background-position: right -96px;
}
when used in a ui binder xml it looks like this:
<button:EasySkinnableButton text=”Tada!”/>
Instead of:
<button:Button><span>Tada !</span></button:Button>
You can also use it programmatically by just calling “button.setTex()”
Here are the images:
