Get the browser to treat GWT Anchor as a hyperlink

As I mentioned a couple posts ago, I am in the process of learning GWT.  Today I noticed my GWT Anchor was not behaving correctly.  When I would hover over my anchor tag, the cursor would not change to the hand (or in proper CSS cursor property terms, the “pointer”).  Instead it changed to the “text” cursor.

I was using UiBinder and this was how I had declared my Anchor tag:

<g:Anchor ui:field="detailsLink"/>

GWT produced this HTML for my Anchor widget:

<a class="gwt-Anchor">Details</a>

There are two potential issues with the HTML generated.  The first is there is no “href” attribute.  If there was an “href” attribute, then the browser will treat the Anchor tag like a hyperlink.  The second is that there is no hover styling for the “gwt-Anchor” CSS class.

So there are two possible solutions to this issue.  The first is to add an “href” attribute.

<g:Anchor ui:field="detailsLink" href="javascript:;"/>

The second is to use CSS to style the anchor hover property.

<ui:style>
  .anchor:hover{
      cursor: pointer;
  }
</ui:style>

<!-- Other widgets omitted for clarity -->

<g:Anchor ui:field="detailsLink" addStyleNames="{style.anchor}"/>

Either solution works!  I do not know which one is technically more correct.  I will need to keep researching that.

RELATED POST:  GWT Hyperlink Cursor Behavior Fixed

Advertisements

About stevewall123

I am a Lead Software Engineer in Minneapolis working for Thomson Reuters. I am currently working on projects using Java, JavaScript, Spring, Drools, Hazelcast, Liquibase and Tomcat. Previously, I used C#, GWT, Grails, Groovy, JMS and JBoss Drools Guvnor. In the past I have worked on projects using J2EE, Swing, Webwork, Hibernate, Spring, Spring-WS, JMS, JUnit and Ant.
This entry was posted in GWT, UiBinder and tagged , . Bookmark the permalink.

2 Responses to Get the browser to treat GWT Anchor as a hyperlink

  1. thanks for the post, this is what I was struggling with for a while myself

  2. Nemanja Kovacevic says:

    Thanks, I’ve used css solution, it worked perfectly

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s