How to style Anchor in GWT?

Question

How to add style for Anchor to GWT using UIBinder? I have the following code in a UiBinder XML template:

<g:Anchor ui:field="forgotPassLink">Forgot password?</g:Anchor> 

I know that .gwt-Anchor {} is used to style this widget, but still do not know how to create hover effects. In regular CSS, it will look like this:

 a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ 

Do I need to handle this with the BlurEvent and FocusEvent handlers on Anchor? If so ... this is boilerplate code.

Answer 1

Use the same CSS pseudo-classes with the gwt-Anchor class:

 .gwt-Anchor:link {color:#FF0000;} .gwt-Anchor:visited {color:#00FF00;} .gwt-Anchor:hover {color:#FF00FF;} .gwt-Anchor:active {color:#0000FF;} 

You can also use a.gwt-Anchor , but this is not necessary.

Answer 2

If you use uibinder with gwt HyperLink, you can do this as follows:

 <ui:style> .mystyle a:link { color:#3F3F3F; text-decoration:none; } </ui:style> <g:FlowPanel> <g:Hyperlink styleName='{style.mystyle}'/> </g:FlowPanel> 

Answer 3

Does this work (using UIBIN style names)?

 <ui:style> .a:link { color: #FF0000; } .a:visited { color: #00FF00; } .a:hover { color: #FF00FF; } .a:active { color: #000FF; } </ui:style> <g:HTMLPanel> <g:Anchor ui:field="forgotPassLink" styleName="{style.a}">Forgot password?</g:Anchor> </g:HTMLPanel> 

Answer 4

Define your style as follows:

 <ui:style> .menuItem a:link {color: white;} .menuItem a:visited {color: white;} .menuItem a:hover {color: white;} .menuItem a:active {color: white;} </ui:style> 

And use it as follows:

 <g:Hyperlink styleName="{style.menuItem}" targetHistoryToken="home">Home</g:Hyperlink>