15

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

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

4

4 に答える 4

27

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

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

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

于 2012-05-21T16:19:03.997 に答える
5

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

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

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

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

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

質問に答えるには：フォームコンテキストで：

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

たとえば、次のようにログに記録する方がいくぶん高速です。

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

とは対照的に

  1. ユーザー名 Tab パスワード... 手をキーボードからマウスに移動し、ポインターを探してボタンに配置し、クリックします。

また、任意のボタン (オプションで CSS スタイル) には、 (CSS スタイルのボタン) がフォーカスされるまで ing<input>によってキーボードからアクセスでき、その後.Tab<a>Spacebar

  • ただし、送信する代わりに他のアクションを実行する (またはフィールドを「単に」クリアする) 必要があるフォーム上の追加のボタンの場合は、<h:commandLink>より適切です。(CSS スタイルのボタン) がフォーカスされるまでTabingを実行し、その後. これは で生成されたボタンと矛盾することに注意してください。これはCSS スタイルで同じように見えるかもしれませんが、ブラウザ ( ... ) によって異なる方法で処理されます。<a>Enter<h:commandButton>TabSpacebar

以上が大まかな説明ですが、注意していただきたい点がいくつかあります...

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

また、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>それら<h:commandLink>が (本質的に) 同じに見えることを確認することです!

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

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 no, flds no POST をクリア
Javascript イベント はい はい はい はい
action{Listener} はい いいえ いいえ はい
フォームに入力すると有効になります はい いいえ いいえ いいえ
Tab...+Enter でアクティブ化 はい(*) はい はい はい
Tab...+Space でアクティブ化 YES(*) YES YES いいえ
タブフォーカスでハイライト:
- Firefox 32 はい いいえ いいえ いいえ
- クローム 41 はい はい はい はい
- Internet Explorer 11 はい はい はい はい
- Opera 28 YES YES YES NO(*)

(*=Opera 28 では、ハイパーリンクへのタブ移動 (または Alt+矢印) によるアクティブ化が許可されていないようです。)
于 2015-04-08T16:46:58.813 に答える
5

フォームについては、h:commandbutton を好みます

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

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

于 2012-05-21T16:20:01.277 に答える
0

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

于 2015-08-29T16:15:43.717 に答える