web-dev-qa-db-ja.com

h：コマンドボタンとh：コマンドリンク

JSF-2.1.7を使用しており、すべてのフォームでリクエストを投稿しています。 <h:commandButton>と<h:commandLink>のどちらを使用するかを正当化しようとしています。 <h:commandLink>（href <a/>）の外観は、styleとjQueryを使用して制御できます。

<h:commandButton>または<h:commandLink>のどちらが推奨されますか？本当の利点はありますか？

jsfjsf-2commandbuttoncommandlink
15
user684434

生成されたマークアップと外観以外に機能的な違いはありません。 <h:commandButton>はHTML<input type="submit">要素を生成し、<h:commandLink>はJavaScriptを使用してフォームを送信するHTML<a>要素を生成します。どちらもフォームの送信に使用されます。追加のスタイリングは機能とは無関係です。

送信が必要な場合は<h:commandButton>を使用しますbutton送信が必要な場合は<h:commandLink>を使用しますlink。それがあなたにとって意味をなさないのなら、私にはわかりません。どちらを使用するかを決定できない場合は、UIの観点から最も意味のあるものを選択してください。よくわからない場合は、Webデザイナーに問い合わせてください。

<h:commandLink>と<h:outputLink>の違いは、ちなみにもっと興味深いものです。これはここで詳細に回答されています： h：commandLinkの代わりにh：outputLinkを使用する必要があるのはいつですか？

27
BalusC

要するに、私の推奨事項は、プライマリ（デフォルト）送信ボタン用の<h:commandButton type="submit">と追加ボタン（フィルター、並べ替え、ルックアップ、プレビュー、パスワードの生成など）用の<h:commandLink>sの組み合わせです。

長い説明は次のとおりです。

まず、いくつかの背景：おそらく、さまざまな<h:commandButton>type属性にも注意する必要があります。 （type属性は、生成された<input type="">属性に直接変換されます。）これが明示的に記述されている場所は見つかりませんでしたが、いくつかのテストで次のことが示されました。

  • type="submit"（省略した場合はデフォルトでこれになります）は、フォームの通常の「送信」動作（つまり、フォームのPOST）と、actionおよび/またはactionListener。
  • type="reset"は、通常の「リセット」動作（つまり、フォームフィールドのクリア/リセット）を実行しますなし任意のactionおよび/またはactionListenersを呼び出します。
  • type="button"はボタンを生成します（明らかに<input type="button">は<button>タグよりも少し制限されています）なし任意のactionおよび/またはactionListenersを呼び出します。

フィールドをリセットすることは別として、後者の2つは、アクティブ化する場合にのみ役立つようです。 Javascript。フォームはPOSTしません。

したがって、質問に答えるには：フォームコンテキストで：

  • <h:commandButton>（<h:commandButton type="submit">と同等です、覚えておいてください）は、多くの場合、最も便利です。特に、ほとんどのブラウザーは、フォームのDOMツリーにある最初の送信ボタンのアクティブ化を実装しているためです。 Enter が押されました。これにより、フォームのユーザーエクスペリエンスが向上する可能性があります

例えば。ログに記録する方がやや高速です。

  1. ユーザー名 Tabパスワード Enter

とは対照的に

  1. ユーザー名 TabPassword...手をキーボードからマウスに移動し、ポインターをハントし、ボタン上の位置をクリックします。

また、<input>ボタン（オプションでCSSスタイル）には、キーボードを介してアクセスできることにも注意してください。 Tab<a>（CSSスタイルのボタン）にフォーカスが入るまで実行してから、 Spacebar。

  • ただし、送信する（またはフィールドを「単に」クリアする）代わりに他のアクションを実行する必要があるフォーム上の追加のボタンの場合は、<h:commandLink>の方が適切です。これはまだキーボードを介して到達することができます Tab<a>（CSSスタイルのボタン）にフォーカスが入るまで実行してから、 Enter。 注これは<h:commandButton>で生成されたボタンと矛盾します。これはCSSスタイルで同じように見える場合がありますが、ブラウザーによって処理が異なります（Tab.。Spacebar）。

それが一般的な説明ですしかし、注意したい問題がいくつかあります...

フォームに<h:commandButton type="submit">ボタンがない場合、ユーザーが押すと、<h:commandLink>ボタンのみ（またはボタンがまったくない）になります。 Enter フォームは引き続き送信されますが、action{Listener}を実行するメリットはありません。フォームの値はバッキングBeanに格納され、ページが読み込まれると再び表示されるため、これはそれほど大きな問題ではない可能性があります。そのため、サーバーのラウンドトリップを除いて、ユーザーは何かが間違っていることに気付かないことがよくあります。しかし、それはあなたが望む方法ではないかもしれません Enter 処理する必要があります....それを回避する現時点で私が考えることができる唯一の方法は、Javascriptを介してデフォルトの<h:commandLink>ボタンをアクティブにするフォームにonSubmitイベントを配置することです。

また、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から<h:commandButton type="button">;

もちろん、これらは単一のスタイル定義のセレクターとしてコンマと連結できます。または、他の何かがmystyleボタンとしてスタイル設定されるリスクを冒したい場合は、A/INPUT指定子を省略できます。ただし、ボタンのスタイルを上記のように設定したので、これも使用できます。

  • リンクまたはボタンが無効になっている場合のSPAN.mystyle定義（たとえば、disabled属性を介して）-これにより、無効になっているボタンのトーンダウン（灰色）の外観を提供できます。

また、いくつかの高さの違い（ボタンの行の高さとリンクのコンテンツの高さ-ボタンにテキストではなくアイコンとして背景画像が含まれている場合に問題になる可能性があります）、および:before/:after疑似クラスの方法にもわずかな違いがあります。処理されます。私が言っているのは、CSSを<h:commandButton>sと<h:commandLink>sの両方でテストして再テストし、（本質的に）同じに見えることを確認することです。

これが私の要約チートシートです：

 JSF <h：commandButton <h：commandButton <h：commandButton <h：commandLink> 
 type = "submit"> type = "reset"> type = "button"> 
 
 <input <input <input <a> 
 type = "submit"> type = "reset"> type = "button"> 
送信フォームPOSTいいえ、fldsをクリアしませんPOST 
 JavascriptイベントYESYES YES YES 
 action {Listener} YES no no YES 
フォームに入力するとYESno no no 
 Tab ... + EnterはYES（*）YES YES YES 
 Tab ... + SpaceはYES（*）YES YES no 
タブフォーカスを強調表示：
 -Firefox32はいいいえいいえいいえ
 -Chrome 41 YES YES YES YES 
-InternetExplorer 11 YES YES YES YES 
 -Opera 28 YES YES YES no（*）
 
（* = Opera 28は、ハイパーリンクをアクティブにするためのタブ（またはAlt +矢印）を許可していないようです。）
5
fr13d

フォームの場合、h：commandbuttonが好きです

h：commandbuttonは、バッキングBeanのアクションを設定できるHTMLのボタンのようなものです。 h：commandlinkは、HTMLのリンク（タグa）のようなもので、バッキングBeanのアクションを設定することもできます。

JSFでcssスタイルを使用するには、属性「styleClass」を使用できます。

5
Felipe Queiroz

私が間違っている場合は訂正してください。ただし、これら2つの最初の違いは、<h:commandButton>はブラウザでJavaScriptを有効にする必要がないという事実です。ウェブページがJSの重い場合は、<h:commandLink>を使用できます。それ以外の場合は、ユーザーがTor Browserのようなsthを使用したい場合に備えて、JSを無料にしておく方がよいでしょう。 2つ目は、これら2つがWebページでどのように動作するかです。 <h:commandLink>は、想定されていることを実行するか、@PostConstructアノテーションを持つバッキングBeanからメソッドを起動することもあります。 <h:commandButton>はインラインJavaScriptも起動する可能性があり、バッキングBeanから他のメソッドを起動する可能性があります。ただし、ビューも自動的に更新されます。

0
Apollo