23 Stimmen

Hyperlink vs Anker

Wann verwendet man HyperLink und wann verwendet man Anchor?

Wie behandelt man Klicks bei der Verwendung von HyperLink? com.google.gwt.user.client.ui.Hyperlink.addClickHandler(ClickHandler) ist veraltet com.google.gwt.user.client.ui.Hyperlink.addClickListener(ClickListener) ist ebenfalls veraltet.

Die Dokumentation schlägt vor, Anchor#addClickHandler zu verwenden, aber wie verwendet man Anchor#addClickHandler beim Verwenden von HyperLink?

Bedeutet das, dass ich immer Anchor verwenden sollte, wenn ich Klicks behandeln möchte, und niemals HyperLink?

24voto

Steve J Punkte 2666

Tolle Frage, weil sie so einfach ist und doch für viele GWT-Programmierer möglicherweise ein ganz neues Gebiet eröffnet. Ich habe die Frage positiv bewertet, weil sie für Personen, die erkunden, was GWT kann, ein toller Einstieg sein kann.

Anchor ist ein Widget zum Speichern und Anzeigen eines Hyperlinks -- im Grunde genommen das tag. Wirklich nicht viel aufregender als das. Wenn du möchtest, dass deine Seite auf eine externe Seite verlinkt, verwende Anchor.

Links werden auch für die interne Navigation verwendet. Angenommen, ich habe eine GWT-App, für die der Benutzer sich anmelden muss. Auf meinem ersten Panel platziere ich also einen Anmeldebutton. Wenn der Benutzer darauf klickt, würde ich ein neues Panel mit Widgets anzeigen, um die Benutzerdaten zu sammeln, Code zur Validierung ausführen und dann, wenn die Validierung erfolgreich ist, das erste Panel, auf dem sich der Benutzer befand, wiederherstellen.

Buttons sind schön, aber dies ist ein Browser und ich möchte, dass die Benutzererfahrung eher wie eine Webseite und nicht wie eine Desktop-App ist. Deshalb möchte ich Links anstelle von Buttons verwenden. Hyperlink ermöglicht das. Die Dokumentation für Hyperlink beschreibt es gut:

Ein Widget, das als "interner" Hyperlink fungiert. Das heißt, es handelt sich um einen Link zu einem anderen Zustand der laufenden Anwendung. Beim Klicken wird ein neuer Verlaufsrahmen unter Verwendung von History.newItem(java.lang.String) erstellt, aber ohne die Seite neu zu laden.

Als echter Hyperlink ist es auch möglich, dass der Benutzer mit "Rechtsklick, Link in neuem Fenster öffnen" das Laden der Anwendung in einem neuen Fenster im Zustand, der durch den Hyperlink angegeben ist, verursacht.

Der zweite Satz sollte das klarstellen. Der Hyperlink ändert die Seite nicht im URL-Sinn (wie Anchor es tut), obwohl die URL den Programmzustand widerspiegelt, indem das "Token", das mit dem Hyperlink verbunden ist, an die Basis-URL nach einem Schrägstrich angehängt wird. Du definierst das Token. Es wäre etwas Beschreibendes wie "login" oder "help" oder "about". Aber das ist keine neue Seite. Es gibt keine zusätzliche HTML-Datei, die du erstellen musstest, um eine Hilfeseite anzuzeigen, zum Beispiel. Es ist der Zustand der aktuellen GWT-App, der sich ändert. Selbst wenn du "in einem neuen Fenster öffnen" wählst, führst du nur dieselbe App in einem bestimmten Zustand aus.

Es sieht wie ein Link aus, ist aber eigentlich ein Widget, das den Verlaufsr.änder manipuliert, was es dir wiederum ermöglicht, den Zustand deiner GWT-Anwendung zu ändern. Du schreibst keinen Klick-Handler für das Hyperlink-Widget, sondern einen Wertänderungs-Handler für den Verlaufsstapel. Wenn du siehst, dass das "help"-Token auf den Verlaufsstapel gelegt wurde, führt dein Handler GWT-Code aus, um einem RootPanel ein FlowPanel mit eingebettetem HTML-Text mit deinen Hilfsinformationen anzufügen. Dies wird vom Benutzer als "neue Seite" wahrgenommen, was er erwartet, wenn er auf einen Hyperlink klickt. Die URL wird etwas.html/help sein. Stell dir vor, er kehrt über die Zurück-Taste zu dieser URL zurück, nicht über deinen Hyperlink. Kein Problem. Du interessierst dich nicht für den Hyperlink-Klick. Du interessierst dich nur dafür, dass sich auf irgendeine Weise der Verlaufsrahmen ändert. Dein Wertänderungs-Handler wird erneut ausgelöst und tut das Gleiche wie zuvor, um das Hilfs-Panel anzuzeigen. Der Benutzer genießt immer noch die Erfahrung, durch Webseiten zu navigieren, obwohl du und ich wissen, dass es nur eine Webseite gibt und dass du Panels an das RootPanel anfügst und wieder abnimmst (oder welches Schema auch immer du verwendest, um deine GWT-Panels anzuzeigen).

Und das führt zu einem Bonus-Thema.

Dieser Bonus ist etwas komplizierter, aber ironischerweise könnte er helfen, Hyperlinks besser zu verstehen. Ich sage komplizierter, aber wirklich festigt es die Vorstellung, dass eine GWT-Anwendung aus einer Reihe von Zuständen besteht und dass die Webseite auf dem Bildschirm nur die Wahrnehmung des Benutzers dieser Zustandsänderungen ist. Und das sind Activities und Places. Activities und Places abstrahieren diese Verlaufsbearbeitung, die im Hintergrund abläuft, sobald du einen Mapper mit einer von GWT bereitgestellten Klasse eingerichtet hast, die für diesen Zweck entwickelt wurde. Dadurch kannst du deine App in eine Reihe von Aktivitäten unterteilen, und während der Benutzer durch diese Aktivitäten interagiert, wird er an verschiedene Orte versetzt, und jeder Ort hat eine Ansicht. Darüber hinaus kann der Benutzer von Ort zu Ort mithilfe von Browser-Steuerungselementen wie der Adressleiste, Lesezeichen, Verlauf und den Rück- und Vorwärtsschaltflächen navigieren, was dem Benutzer ein echtes, webähnliches Erlebnis bietet. Wenn du wirklich ein Verständnis für den konzeptionellen Unterschied zwischen Hyperlinks und Ankers erhalten möchtest, solltest du versuchen, dieses GWT-Thema zu erlernen. Es kann wirklich dazu führen, dass du deine Apps anders siehst, und zwar zum Besseren.

6voto

Thomas Broyer Punkte 64153

Hyperlink (oder InlineHyperlink) ist im Grunde genommen nichts anderes als eine Art Anchor mit einem ClickHandler, der History.newItem aufruft und das Ereignis mit preventDefault() verhindert (damit der Link tatsächlich nicht verfolgt wird).
Tatsächlich wird Hyperlink das nicht tun, wenn es denkt (und ja, es ist nur eine Vermutung), dass Sie mit der rechten Maustaste oder mittleren Maustaste (oder Strg-Klick) auf den Link geklickt haben, um den Link in einem neuen Fenster oder Tab zu öffnen (je nach Browser).

Wenn Sie ein anderes Verhalten benötigen, verwenden Sie also nicht Hyperlink und verwenden stattdessen Anchor. Und wenn Sie einem Hyperlink Verhalten hinzufügen möchten, verwenden Sie also einen Anchor und ahmen das Verhalten des Hyperlink nach. Und Sie können die HyperlinkImpl wiederverwenden, um das Verhalten bei einem Rechtsklick/Strg-Klick zu haben (siehe Links unten).

Aber eigentlich, wenn Sie etwas benötigen, das wie ein Link aussieht und beim Klicken etwas tut, aber keine "Ziel-URL" hat (d.h. es sollte nicht per Rechtsklick/Strg-Klick geöffnet werden, oder es würde nichts bedeuten, dies zu tun), verwenden Sie weder ein Anchor noch Hyperlink, verwenden stattdessen ein Label oder etwas Ähnliches und lassen es wie einen Link aussehen (aber nun ja, vielleicht sollten Sie stattdessen eine Button verwenden und sie wie einen Button aussehen lassen; Google hatte früher Link-ähnliche Buttons - wie zum Beispiel der "Aktualisieren"-Link/Butten in GMail - und hat sie geändert, sodass sie wie Buttons aussehen, obwohl sie keine Links sind).

Siehe auch https://groups.google.com/d/msg/google-web-toolkit/P7vwRztO6bA/wTshqYs6NM0J und https://groups.google.com/d/msg/google-web-toolkit/CzOvgVsOfTo/IBNaG631-2QJ

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X