H: commandbutton vs h: commandlink

Мы используем JSF-2.1.7 и во всех наших почтовых запросах формы. Я пытаюсь оправдать использование <h:commandButton> или <h:commandLink>. Внешний вид <h:commandLink> (href <a/>) можно контролировать с помощью стиля и jQuery.

Что рекомендуется <h:commandButton> или <h:commandLink>? Есть ли реальные преимущества?

ОТВЕТЫ

Ответ 1

Функциональная разница не отличается от сгенерированной разметки и внешнего вида. <h:commandButton> генерирует элемент HTML <input type="submit">, а <h:commandLink> генерирует элемент HTML <a>, который использует JavaScript для отправки формы. Оба должны использоваться для отправки формы. Дополнительный стиль не имеет отношения к функциональности.

Используйте <h:commandButton>, если вам нужна кнопка отправки и используйте <h:commandLink>, если вам нужна ссылка . Если это не имеет смысла для вас, то я не знаю. Если вы не можете решить, какой из них использовать, просто выберите тот, который имеет наибольший смысл в перспективе пользовательского интерфейса. Спросите веб-дизайнера, если вы не уверены.

Различие между <h:commandLink> и <h:outputLink>, кстати, более интересно. Здесь подробно дается ответ: Когда следует использовать h: outputLink вместо h: commandLink?

Ответ 2

Для формы я предпочитаю h: commandbutton

h: commandbutton похож на кнопку в HTML, где вы можете установить действие поддержки bean. h: commandlink похожа на ссылку в HTML (тег a), где вы также можете установить действие поддержки bean

Чтобы использовать стиль css в JSF, вы можете использовать атрибут 'styleClass'.

Ответ 3

Короче говоря, моя рекомендация представляет собой сочетание <h:commandButton type="submit"> для основной (по умолчанию) кнопки отправки и <h:commandLink> для любых дополнительных кнопок (например, фильтра, сортировки, поиска, предварительного просмотра, генерации пароля,...).

Далее следует длинное объяснение:

Во-первых, некоторый фон: нужно, вероятно, также знать разные атрибуты <h:commandButton> type. (Атрибут type преобразуется непосредственно в сгенерированный атрибут <input type="">.) Я не нашел это явно сформулированным в любом месте, но некоторые тесты показали, что:

  • type="submit" (по умолчанию это опущено) выполняет обычное "представление" поведения формы (т.е. POSTing формы), а также action и/или actionListener.
  • type="reset" выполняет обычное поведение "reset" (т.е. очистка/сброс полей формы) без, вызывающего любые action и/или actionListener s.
  • type="button" генерирует кнопку (видимо, <input type="button"> немного более ограничен, чем тег <button>) без, вызывающий любые action и/или actionListener s.

Помимо сброса полей, последние два, по-видимому, полезны только для активации, например. Javascript. Они не отправляют форму.

Итак, чтобы ответить на вопрос: в контексте формы:

  • <h:commandButton> (что эквивалентно <h:commandButton type="submit">, помните) часто является наиболее полезным, особенно когда большинство браузеров реализуют активацию первой кнопки отправки, найденной в дереве DOM формы при нажатии Enter. Это может улучшить пользовательский интерфейс вашей формы.

например. он несколько быстрее регистрируется с помощью:

  • Имя пользователя Tab Пароль Enter

в отличие от

  1. Имя пользователя Tab Пароль... перемещайте руку с клавиатуры на мышь, указатель поиска и позицию на кнопке, нажмите.

Также имейте в виду, что любые кнопки <input> (необязательно в стиле CSS) по-прежнему могут быть достигнуты с помощью клавиатуры Tab до тех пор, пока <a> (CSS-стиль в виде кнопки) не будет сфокусирован, а затем Spacebar.

  • Однако для дополнительных кнопок в форме, которые должны выполнять некоторые другие действия вместо отправки (или "просто" очистки полей), <h:commandLink> будет более уместным. Этого можно достичь с помощью клавиатуры Tab до тех пор, пока <a> (в стиле CSS как кнопка) не будет сфокусирован, а затем Enter. Примечание, что это несовместимо с кнопками, сгенерированными с помощью <h:commandButton>, которые могут выглядеть в стиле CSS одинаково, но браузером они обрабатываются по-разному (Tab... Spacebar).

Это общее объяснение, , но есть некоторые проблемы, которые вы, возможно, захотите принять к сведению...

Если у вас нет кнопки <h:commandButton type="submit"> в форме, только кнопка <h:commandLink> (или даже никаких кнопок вообще), когда пользователь нажимает Enter, форма все еще отправляется, но без преимущества a action{Listener}. Что может быть не слишком большой проблемой, так как значения формы сохраняются в резервном хранилище bean и отображаются снова при загрузке страницы, поэтому, кроме серверного обратного вызова, пользователь часто не замечает, что что-то не так. Но это может быть не так, как вы хотите обрабатывать Enter. Единственный способ, о котором я могу думать в данный момент обойти это, - разместить событие onSubmit в форме, которая активирует вашу кнопку <h:commandLink> по умолчанию через Javascript.... Arghhhh!!

Вы также должны убедиться, что ваши селектор стиля CSS звучат.

  • A.mystyle применяется к <h:commandLink>;
  • INPUT[type=submit].mystyle - <h:commandButton type="submit">;
  • INPUT[type=reset].mystyle - <h:commandButton type="reset">;
  • INPUT[type=button].mystyle to <h:commandButton type="button">;

Конечно, они могут быть объединены с запятой в качестве селектора для определения одного стиля. Или, если вы хотите рисковать тем, что что-то еще называется стилистикой, вы можете опустить спецификаторы A/INPUT. Тем не менее, я стилизовал свои кнопки, как указано выше, чтобы я мог также использовать это:

  • SPAN.mystyle определение, когда ссылка или кнопка отключена (например, с помощью атрибута disabled) - это позволяет вам отображать отключенную кнопку (greyed) для отключенной кнопки.

Я также столкнулся с некоторыми различиями в высоте (высота строки на кнопке по сравнению с высотой контента в Link - что может быть проблемой, если ваша кнопка включает фоновое изображение в качестве значка вместо текста), а также некоторые незначительные отличия в том, как :before/:after обрабатываются псевдоклассы. Все, что я говорю: протестируйте и повторите проверку CSS на <h:commandButton> и <h:commandLink>, чтобы убедиться, что они выглядят (по существу) одинаковыми!

Вот мой итоговый чит-лист:

JSF                  <h:commandButton <h:commandButton <h:commandButton <h:commandLink>
                      type="submit">   type="reset">    type="button">

Translates to        <input           <input           <input           <a>
                      type="submit">   type="reset">    type="button">
Submit form             POST             no, clears flds  no              POST
Javascript events       YES              YES              YES             YES
action{Listener}        YES              no               no              YES
Enter on form activates YES              no               no              no
Tab...+Enter activates  YES(*)           YES              YES             YES
Tab...+Space activates  YES(*)           YES              YES             no
Highlight on Tab-focus:
- Firefox 32            YES              no               no              no
- Chrome 41             YES              YES              YES             YES
- Internet Explorer 11  YES              YES              YES             YES
- Opera 28              YES              YES              YES             no(*)

(*=Opera 28 seems not to allow tabbing (or Alt+Arrow) to  hyperlinks to activate them.)

Ответ 4

Исправьте меня, если я ошибаюсь, но первое различие между этими двумя заключается в том, что <h:commandButton> не требуется, чтобы JavaScript был включен в браузере. Если ваша веб-страница JS тяжелая, вы можете использовать <h:commandLink>, иначе было бы лучше оставить ее JS бесплатно, если ваш пользователь захочет использовать sth, например Tor Browser, и вы в порядке с ним. Во-вторых, как эти два будут вести себя на веб-странице. <h:commandLink> будет делать то, что он должен делать, а иногда также запускать метод из @PostConstruct. В то время как <h:commandButton> может также запускать встроенные Java-скрипты, которые могут привести к запуску других методов из резервной копии bean. Однако он также автоматически обновит представление.