JSF 2リンク、commandLinkおよびoutputLinkの例

JSFでは、<h:link /><h:commandLink />、および<h:outputLink />タグを使用してHTMLの「a」アンカー要素をレンダリングします。以下の例を参照して、それらの違いを理解してください。

Note
以下の例では、「/ JavaServerFaces /」がプロジェクトコンテキストURLのルートであると想定しています。

h:link」タグはJSF 2.0の新しいタグであり、「value」属性はアンカーテキストとしてレンダリングされ、「outcome」属性はHTMLのターゲットURLとして決定されます。 href」属性。 例を参照してください:

1. リンク+「結果」

//JSF


//HTML output
Login page

2. リンク+「結果」+パラメーター

//JSF

    


//HTML output
Login page + Param

3. リンク+「結果」+画像

//JSF

    


//HTML output

    

h:commandLink」タグは、リンクを生成するJSF 1.x以降にリリースされ、クリックすると送信ボタンのように機能します。 「value」属性はアンカーテキストとしてレンダリングされ、「action」属性はHTMLの「href」属性のターゲットURLとして決定されます。 さらに、「h:commandLink」はページに「jsf.js」ファイルを含み、生成されたリンクに「onclick」イベントを添付します。例を参照してください。

Note
j_idtx」はJSFによって生成されたランダムな値です。

1. commandLink

//JSF


//HTML output



    Login page

P.S if the “action” attribute is omitted, it will reload current page while the button is clicked.

2. commandLink +アクション

//JSF


//HTML output



    Login page

P.S You can’t even find the action value in the HTML output, only JSF will know where it goes.

3. commandLink +アクション+パラメーター

//JSF

    


//HTML output



    Login page + Param

4. commandLink +アクション+画像

//JSF

    


//HTML output



    

h:outputLink」タグはJSF 1.xでリリースされ、タグの本文はアンカーテキストとしてレンダリングされ、「value」属性はHTML「href」の値としてレンダリングされます。 s”属性を直接、例を参照してください:

1. outputLink

//JSF
Login page

//HTML output
Login page

P.S if the “value” attribute is omitted, it will put the current page URL as the value of the “href” attribute.

2. outputLink +「値」

//JSF

    Login page


//HTML output

    Login page

3. outputLink +「値」+ outputText +パラメーター

//JSF

    
    


//HTML output
Login page

4. outputLink +「値」+ outputText +画像

//JSF

    


//HTML output

    

私の考え…

上記の3つのリンクタグのレビュー:

  1. h:link」タグは、JSFの「結果」と対話する必要があるリンクを生成するのに役立ちますが、「アクション」のサポートがないため、動的な結果を生成するのが困難です。

  2. h:commandLink」タグは最悪です。生成されたJavaScriptは本当に怖いです! サポートする明確な理由がない限り、このタグの使用はお勧めしません。 ただし、「h:link」にはない「action」属性をサポートしています。

  3. h:outputLink」は、JSFプログラム自体と対話する必要のないリンクを生成するのに役立ちます。

最後に、「action」属性を「h:link」に追加すると完璧になります。

ソースコードをダウンロード

ダウンロード–JSF-2-link-commandLink-outputLink-Example.zip(15KB)