Monday, May 28, 2012

Re: making Anchor look like a normal link

Here is the confusing thing about links (HyperLink and Anchor).  Picture a simple CRUD situation where one does a search, the search results appear, and one can click on "something" to be shown the details.  When Hyperlink is right-clicked, the usual options appear.  If an app requires authentication (basic cookie/session stuff) and "open in another tab" or "open in another window" is selected, it doesn't work.  The newly opened tab goes to the log on screen.  Open in new Tab/Window has the same basic effect as doing a refresh (F5).

I find the Hyperlink documentation and discussions about Hyperlink confusing in that regard.  They explain that Hyperlink is supposedly for internal linking (within an app).  Open in new tab/window should be allowed.  The result of opening in a new tab/window should be to bring the app to the appropriate state in the new tab/window.  

But they don't talk about this authentication issue.  Is there a recommended way to handle this using Hyperlink/Anchor?  Or, should a Label (ClickableText, maybe) be used in such a situation?  Or something else?

Mike



On Thursday, May 17, 2012 7:26:25 AM UTC-7, Thomas Broyer wrote:


On Thursday, May 17, 2012 1:40:39 PM UTC+2, Matthew Pocock wrote:
Hi,

I have several g:Anchor elements in my UiBinder design. I attach OnClick handlers to these to do interesting things. In the browser, these anchors are being rendered as <a> elements lacking an href attribute. When the mouse hovers over them, they don't do the usual link display things - the mouse icon goes into text mode rather than link-follow mode, and there's no blue underline. I tried adding a dummy href="" attribute, but although now they look like normal links, clicking on them follows to the url (in this case, a boring one) instead of the click handler. I want to have my cake and eat it - I want these links to look like links but react with my click handler. Is there a trick for this?

If your "links" navigate in your app, then you should set the href to be the target history token. Otherwise, you shouldn't use a link, which means you shouldn't use an Anchor. Use a Label, InlineLabel, Button, PushButton, or CustomButton instead, and style it like to look like a link if that's what you want (but then beware that you could confuse users, as things that look like links should behave like links –including the ctrl+click and right-click to open the target in new tabs/windows, add the target as a favorite, or copy the target URL to the clipboard–; Google had it wrong in GMail –they used <span>s at the time I looked at it, they might had used <a>s before that– and in one of their redesign iterations –even before the "gray" overhaul– they fixed it by using buttons that looked like buttons for actions, and use true links for navigation).

href="javascript:;" sure does work (and Anchor has a –legacy– constructor that will use that), but I'd discourage its use if you care the slightest bit about accessibility (and/or semantics).

In any case, with you should preventDefault() on the event to disable the navigation done by the browser on links, if you already do it in your code. This is what Hyperlink/InlineHyperlink do.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/NwqRsw67vXMJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

No comments:

Post a Comment