超链接与锚点
什么时候使用超链接,什么时候使用锚点?
使用超链接时如何处理点击? com.google.gwt.user.client.ui.Hyperlink.addClickHandler(ClickHandler) 已弃用 com.google.gwt.user.client.ui.Hyperlink.addClickListener(ClickListener) 也已弃用。
Doc建议使用Anchor#addClickHandler
,但是在使用HyperLink时如何使用Anchor#addClickHandler
是不是意味着如果我需要处理点击,我应该始终使用Anchor
并且从不使用HyperLink
?
When to use HyperLink and when to use Anchor?
When using HyperLink how to handle clicks?
com.google.gwt.user.client.ui.Hyperlink.addClickHandler(ClickHandler) is deprecated
com.google.gwt.user.client.ui.Hyperlink.addClickListener(ClickListener) is deprecated as well.
Doc suggests to use Anchor#addClickHandler
, but how to use Anchor#addClickHandler
when using HyperLink
Does it mean that if I need to handle click I should always use Anchor
and never use HyperLink
?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这是一个很好的问题,因为它非常简单,但却为许多 GWT 程序员开辟了一个全新的领域。我对这个问题投了赞成票,只是因为它可以为人们探索 GWT 的功能提供一个很好的引导。
Anchor 是一个用于存储和显示超链接的小部件 - 本质上是 。标签。真的没有比这更令人兴奋的了。如果您希望页面链接到某个外部站点,请使用锚点。
链接也用于内部导航。假设我有一个需要用户登录的 GWT 应用程序,因此在我的第一个面板上放置了一个登录按钮。当用户单击它时,我将显示一个新面板,其中包含用于收集用户信息的小部件、用于验证它的代码,然后如果验证成功,则重建用户所在的第一个面板。
按钮很好,但这是一个浏览器,我希望用户的体验更像是网页,而不是桌面应用程序,所以我想使用链接而不是按钮。超链接就是这样做的。 文档超链接很好地描述了它:
第二句话应该有助于澄清这一点。尽管 URL 将通过显示与附加到基本 URL 的超链接关联的“令牌”来反映程序的状态,但超链接不会从 URL 意义上更改页面(就像锚点所做的那样)斜线之后。您定义令牌。它可以是一些描述性的东西,比如“登录”或“帮助”或“关于”。但这并不是新的一页。例如,您无需构建额外的 HTML 文件来显示帮助页面。当前 GWT 应用程序的状态正在发生变化。即使您“在新窗口中打开”,您也只是在特定状态下运行相同的应用程序。
它看起来像一个链接,但它实际上是一个操纵历史框架的小部件,这反过来又允许您移动 GWT 应用程序的状态。您不需要为超链接小部件编写单击处理程序,而是为历史堆栈编写值更改处理程序。当您看到“help”标记已放入历史堆栈中时,您的处理程序将执行 GWT 代码,将带有嵌入式 HTML 文本和帮助信息的 FlowPanel 附加到 RootPanel。用户将其视为“新页面”,这正是他单击超链接时所期望的。 URL 将为something.html/help。现在假设他通过后退按钮而不是您的超链接返回到此 URL。没问题。您不关心超链接的点击。您只关心历史堆栈以某种方式发生变化。您的值更改处理程序再次触发,并执行与之前相同的操作以显示帮助面板。用户仍然喜欢浏览网页的体验,即使您和我都知道只有一个网页,并且您正在将面板附加到 RootPanel(或者您用来显示 GWT 面板的任何方案)。
这就引出了一个额外的话题。
这个奖励有点复杂,但讽刺的是,它可以帮助更好地理解超链接。我说的是更复杂,但实际上,它有助于巩固这样一个概念:GWT 应用程序由一系列状态组成,屏幕上的网页只是用户对这些状态更改的感知。这就是活动和地点。活动和地点会抽象出这种历史框架操作,一旦您使用为此目的设计的 GWT 提供的类设置了映射器,就会在后台处理它,从而允许您将应用程序分解为一系列活动,并且作为用户通过这些活动进行交互,他被放置在不同的地方,并且每个地方都有一个视图。此外,用户可以使用地址栏、书签、历史记录和后退/前进按钮等浏览器控件从一个地方移动到另一个地方,为用户提供真正的网络体验。如果您确实想掌握超链接和锚点之间的概念差异,您应该尝试学习这个 GWT 主题。它确实可以让您改变查看应用程序的方式,并且变得更好。
Great question, because it is so simple, and yet opens up what might be a whole new area for a lot of GWT programmers. I've up-voted the question just because it can be a great lead-in for people exploring what GWT can do.
Anchor is a widget for storing and displaying a hyperlink -- essentially the <a> tag. Really not much more exciting than that. If you want your page to link to some external site, use anchor.
Links are also used for internal navigation. Let's say I have a GWT app that requires the user to login, so on my first panel I put a login button. When the user clicks it, I would display a new panel with widgets to collect the user's information, code to validate it, and then if validated successfully, reconstruct that first panel the user was on.
Buttons are nice, but this is a browser, and I want my user's experience to be more like a web page, not a desktop app, so I want to use links instead of buttons. Hyperlink does that. The documentation for hyperlink describes it well:
That second sentence should help clear it up. The hyperlink is not changing the page in a URL sense (the way anchor does), though the URL will reflect the state of the program by displaying the "token" associated with the hyperlink appended to the base URL after a slash. You define the token. It would be something descriptive like "login" or "help" or "about". But this isn't a new page. There is no additional HTML file you've had to construct to display a help page, for example. It is the state of the current GWT app that is changing. Even if you "open in a new window" you are just running the same app in a particular state.
It looks like a link, but it is really a widget that manipulates the history frame, which in turn allows you to move the state of your GWT application. You don't write a click handler for the hyperlink widget, but a value change handler for the history stack. When you see that the "help" token has been put on the history stack, your handler will execute GWT code to attach to the RootPanel a FlowPanel with embedded HTML text with your help information. This is perceived by the user as a "new page", which is what he expects when he clicks on a hyperlink. The URL will be something.html/help. Now pretend he returns to this URL via the back button, not your hyperlink. No problem. You don't care about the hyperlink click. You only care that, somehow, the history stack changes. Your value change handler fires again, and does the same thing as before to display the help panel. The user still enjoys the experience of navigating through web pages, even though you and I know that there is only one web page and that you are attaching and detaching panels to the RootPanel (or whatever scheme you are using to display your GWT panels).
And this leads to a bonus topic.
This bonus is a bit more complicated, but ironically, it could help better understand hyperlinks. I say more complicated, but really, it helps solidify this notion that a GWT application is made up of a series of states, and that the web page on the screen is just the user's perception of those state changes. And that is Activities and Places. Activities and Places abstracts away this history frame manipulation, handling it in the background once you've set up a mapper with a GWT-provided class designed for this purpose, allowing you to break down your app into a series of activities, and as the user interacts through these activities he is put into different places, and each place has a view. Moreover, the user can move from place to place using browser controls like the address bar, bookmarks, history, and the backward/forward buttons, giving the user a real web-like experience. If you really want to get a grip on the conceptual difference between hyperlinks and anchors, you should try to learn this GWT topic. It can really make you change the way you see your apps, and for the better.
Hyperlink
(或InlineHyperlink
)基本上只不过是一种Anchor
,带有调用的
和ClickHandler
History.newItempreventDefault()
事件(以便实际上不跟踪该链接)。实际上,如果
Hyperlink
认为(是的,这只是猜测)您在链接上单击鼠标右键或中键单击(或按住 Ctrl 键单击),则它不会执行此操作(取决于浏览器) ,在新窗口或选项卡中打开链接。如果您需要任何其他行为,请不要使用
Hyperlink
并使用Anchor
代替。如果您想向Hyperlink
添加一些行为,请使用Anchor
并模仿Hyperlink
的功能。您可以重用HyperlinkImpl
来进行右键单击/Ctrl 单击处理(请参阅下面的链接)。但实际上,如果您需要看起来像链接的东西并在单击时执行某些操作,但没有“目标 URL”(即不应右键单击/按住 Ctrl 键单击以在新窗口/选项卡中打开,或者这样做没有任何意义),然后不要使用
ANchor
或Hyperlink
,而是使用Label
,并让它看起来像一个链接(但是,也许您应该使用Button
并让它看起来像一个按钮;Google 曾经有类似链接的按钮 - 例如 GMail 中的“刷新”链接/按钮 - 并将它们更改为看起来像按钮当它们实际上不是链接时)。另请参阅 https://groups.google.com/d/msg /google-web-toolkit/P7vwRztO6bA/wTshqYs6NM0J 和 https://groups.google.com/d/msg/google -web-toolkit/CzOvgVsOfTo/IBNaG631-2QJ
Hyperlink
(orInlineHyperlink
) is basically no more than a kind ofAnchor
with aClickHandler
that callsHistory.newItem
andpreventDefault()
the event (so that the link is not actually followed).Actually,
Hyperlink
won't do that if it thinks (and yes, it's only a guess) you right-clicked or middle-clicked (or ctrl-clicked) on the link (depending on the browser), to open the link in a new window or tab.If you need any other behavior, then don't use
Hyperlink
and useAnchor
instead. And if you want to add some behavior to anHyperlink
, then use anAnchor
and mimic what theHyperlink
does. And you can reuse theHyperlinkImpl
to have the right-click/ctrl-click handling (see links below).But actually, if you need something that looks like a link and do something on click, but does not have a "target URL" (i.e. it shouldn't be right-clicked/ctrl-clicked to open in a new window/tab, or it wouldn't mean anything to do so), then do not use either an
ANchor
orHyperlink
, use aLabel
of whatever instead, and make it look like a link (but well, maybe you should use aButton
and have it look like a button then; Google used to have link-alike buttons –such as the "refresh" link/button in GMail– and changed them to look like buttons when they really aren't links).See also https://groups.google.com/d/msg/google-web-toolkit/P7vwRztO6bA/wTshqYs6NM0J and https://groups.google.com/d/msg/google-web-toolkit/CzOvgVsOfTo/IBNaG631-2QJ