I declare some colors for the border of a VerticalLayout panel, like in:
<ui:style>
.onMouseOverBorderColor {border-color: red; border-style: outset}
.onMouseOutBorderColor {border-color: black; border-style: outset}
</ui:style>
Then i want to change the color of the panel's border according to the position of the mouse, and i add to the constructor of my widget the following:
clickable.addMouseOverHandler(new MouseOverHandler() {
@Override
public void onMouseOver(MouseOverEvent event) {
GWT.log("mouse over");
border.setStyleName("onMouseOverBorderColor");
}
});
clickable.addMouseOutHandler(new MouseOutHandler() {
@Override
public void onMouseOut(MouseOutEvent event) {
GWT.log("mouse out");
border.setStyleName("onMouseOutBorderColor");
}
});
But ... nothing happens! What i do wrong?
Code after suggestion (does not work):
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.fontStyleTitle {font-weight: bold }
.border {border-color: black; border-style: outset}
.border:hover {border-color: red; border-style: outset}
</ui:style>
<g:FocusPanel ui:field="clickable">
<g:VerticalPanel ui:field="border" borderWidth="1" styleName="style.border">
<g:Image ui:field="myImage"/>
<g:Label ui:field="myTitle" horizontalAlignment="ALIGN_CENTER" styleName="{style.fontStyleTitle}"/>
</g:VerticalPanel>
</g:FocusPanel>
</ui:UiBinder>
and the java class:
public UiWidget(String path, String theTitle) {
initWidget(uiBinder.createAndBindUi(this));
GWT.log(URL_PREFIX+path);
myImage.setUrl(URL_PREFIX+path);
myTitle.setText(theTitle);
myImage.setSize(IMG_WIDTH, IMG_HEIGHT);
/*
clickable.addMouseOverHandler(new MouseOverHandler() {
@Override
public void onMouseOver(MouseOverEvent event) {
GWT.log("mouse over");
}
});
clickable.addMouseOutHandler(new MouseOutHandler() {
@Override
public void onMouseOut(MouseOutEvent event) {
GWT.log("mouse out");
}
*/
}
By default all the styles declared in a UiBinder are obfuscated.
It means your style 'onMouseOverBorderColor' will propably become something like 'GLX0QCICAR'.
But when in your JAVA code you do:
border.setStyleName("onMouseOverBorderColor");
your border element will really have the style 'onMouseOverBorderColor'.
So 2 solutions:
Use external to not obfuscate style names:
<ui:style>
@external onMouseOverBorderColor onMouseOutBorderColor;
.onMouseOverBorderColor {border-color: red; border-style: outset}
.onMouseOutBorderColor {border-color: black; border-style: outset}
</ui:style>
Use the obfuscated style in your JAVA code:
<ui:style type="your.package.name.UiWidget.MyStyle">
.onMouseOverBorderColor {border-color: red; border-style: outset}
.onMouseOutBorderColor {border-color: black; border-style: outset}
</ui:style>
public class UiWidget {
...
public interface MyStyle extends CssResource {
String onMouseOverBorderColor();
String onMouseOutBorderColor();
}
@UiField
protected MyStyle style;
public UiWidget(String path, String theTitle) {
...
clickable.addMouseOverHandler(new MouseOverHandler() {
@Override
public void onMouseOver(MouseOverEvent event) {
border.setStyleName(style.onMouseOverBorderColor);
}
});
...
}
}