Гиперссылка против якоря

Когда использовать HyperLink и когда использовать Anchor?

При использовании HyperLink для обработки кликов? com.google.gwt.user.client.ui.Hyperlink.addClickHandler(ClickHandler) устарел com.google.gwt.user.client.ui.Hyperlink.addClickListener(ClickListener) также устарел.

Doc предлагает использовать Anchor#addClickHandler, но как использовать Якорь #addClickHandler при использовании HyperLink

Означает ли это, что если мне нужно обрабатывать клики, я всегда должен использовать Anchor и никогда не использовать HyperLink?

Ответ 1

Отличный вопрос, потому что он настолько прост и все же открывает то, что может быть совершенно новой областью для многих программистов GWT. Я поднял вопрос только потому, что это может стать отличным руководством для людей, изучающих, что может сделать GWT.

Якорь - это виджет для хранения и отображения гиперссылки - по существу, <a> тег. На самом деле это не намного более захватывающе. Если вы хотите, чтобы ваша страница ссылалась на какой-то внешний сайт, используйте привязку.

Ссылки также используются для внутренней навигации. Скажем, у меня есть приложение GWT, которое требует от пользователя входа в систему, поэтому на моей первой панели я установил кнопку входа в систему. Когда пользователь нажмет на него, я бы отобразил новую панель с виджетами для сбора информации о пользователе, кода для ее проверки, а затем, если она была успешно проверена, восстановите эту первую панель, на которой был включен пользователь.

Кнопки приятные, но это браузер, и я хочу, чтобы мой пользовательский интерфейс больше напоминал веб-страницу, а не настольное приложение, поэтому я хочу использовать ссылки вместо кнопок. Гиперссылка делает это. Документация для гиперссылки описывает это хорошо:

Виджет, который служит "внутренней" гиперссылкой. То есть, это ссылка в другое состояние запущенного приложения. При щелчке создайте новый кадр истории, используя History.newItem(java.lang.String), но без перезагрузки страницы.

Будучи подлинной гиперссылкой, пользователь также может "щелкните правой кнопкой мыши, откройте ссылку в новом окне", что приведет к приложение, которое будет загружено в новом окне в состоянии, указанном гиперссылка.

Это второе предложение должно помочь прояснить это. Гиперссылка не изменяет страницу в смысле URL (как это делает привязка), хотя URL-адрес будет отображать состояние программы, отображая "токен", связанный с гиперссылкой, добавленной к базовому URL-адресу после косой черты. Вы определяете токен. Это было бы что-то описательное, как "login" или "help" или "about". Но это не новая страница. Например, нет дополнительного файла HTML, который вы должны были создать для отображения страницы справки. Это состояние текущего приложения GWT меняется. Даже если вы "открываете в новом окне", вы просто запускаете одно и то же приложение в определенном состоянии.

Похоже на ссылку, но это действительно виджет, который управляет кадром истории, что, в свою очередь, позволяет вам перемещать состояние вашего приложения GWT. Вы не пишете обработчик клика для виджета гиперссылки, а обработчик изменения стоимости для стека истории. Когда вы увидите, что в стек истории был помещен токен "help", ваш обработчик выполнит код GWT для присоединения к RootPanel FlowPanel со встроенным текстом HTML с помощью справки. Это воспринимается пользователем как "новая страница", чего он ожидает, когда он нажимает на гиперссылку. URL будет something.html/help. Теперь сделайте вид, что он вернется к этому URL-адресу через кнопку "Назад", а не вашу гиперссылку. Нет проблем. Вы не заботитесь об гиперссылке. Вам все равно, что, как-то, стек истории меняется. Ваш обработчик изменения значения снова загорается и делает то же самое, что и раньше, чтобы отобразить панель справки. Пользователь по-прежнему пользуется опытом навигации по веб-страницам, хотя вы и я знаем, что есть только одна веб-страница, и что вы прикрепляете и отделяете панели от RootPanel (или любую другую схему, которую вы используете для отображения ваших панелей GWT).

И это приводит к теме бонуса.

Этот бонус немного сложнее, но по иронии судьбы он может помочь лучше понять гиперссылки. Я говорю более сложным, но на самом деле, это помогает укрепить это представление о том, что приложение GWT составлено из серии состояний и что веб-страница на экране - это просто восприятие пользователями этих изменений состояния. И это Действия и места, Действия и места абстрагируют эту манипуляцию с историей, обрабатывая ее в фоновом режиме после того, как вы настроили сопоставитель с классом GWT-класса, предназначенным для этой цели, что позволяет вам разбивать ваше приложение на ряд действий, а пользователь взаимодействует через эти действия, он помещается в разные места, и у каждого места есть вид. Кроме того, пользователь может перемещаться с места на место с помощью элементов управления браузера, таких как адресная строка, закладки, история и кнопки "назад/вперед", предоставляя пользователю реальный веб-опыт. Если вы действительно хотите понять концептуальную разницу между гиперссылками и якорями, вы должны попытаться изучить эту тему GWT. Это действительно может заставить вас изменить то, как вы видите ваши приложения, и к лучшему.

Ответ 2

Hyperlink (или InlineHyperlink) в основном не более чем Anchor с ClickHandler, который вызывает History.newItem и preventDefault() событие (так что ссылка фактически не выполняется).
Фактически, Hyperlink не будет делать этого, если он думает (и да, это всего лишь предположение), вы щелкнули правой кнопкой мыши или нажали в среднем (или нажали Ctrl) в ссылке (в зависимости от браузера), чтобы открыть ссылку в новом окне или вкладке.

Если вам нужно какое-либо другое поведение, тогда не используйте Hyperlink и используйте Anchor. И если вы хотите добавить какое-то поведение в Hyperlink, используйте Anchor и подражайте тому, что делает Hyperlink. И вы можете повторно использовать HyperlinkImpl для обработки щелчка правой кнопкой мыши /ctrl -click (см. Ссылки ниже).

Но на самом деле, если вам нужно что-то похожее на ссылку и что-то делать по клику, но не имеет "целевого URL" (т.е. его не следует щелкнуть правой кнопкой мыши /ctrl -clicked, чтобы открыть его в новом окне /tab, или это ничего не значит для этого), тогда не используйте либо 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