JSF 2.0 Ajax hello worldの例

getdocs

7年前

JSF 2.0では、Ajaxをコーディングするのは通常のHTMLタグをコーディングするのと同じですが、非常に簡単です。このチュートリアルでは、//jsf2/jsf-2-0-hello-world-example/[JSF 2.0 hello worldの例]という最後のリンクを再構成して、ボタンをクリックするとAjaxリクエストを作成します全体のフォームを提出する代わりに。

1. JSF 2.0のページ

AjaxをサポートするJSF 2.0 xhtmlページ

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:body>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="6894224149"></ins>
<script>
     (adsbygoogle = window.adsbygoogle ||[]).push({});
</script><h2>JSF 2.0 + Ajax Hello World Example</h2>

        <h:form>
           <h:inputText id="name" value="#{helloBean.name}"></h:inputText>
           <h:commandButton value="Welcome Me">
             <f:ajax execute="name" render="output"/>
           </h:commandButton>

           <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="8821506761"
     data-ad-format="auto"
     data-ad-region="mkyongregion"></ins>
<script>
(adsbygoogle = window.adsbygoogle ||[]).push({});
</script><h2><h:outputText id="output" value="#{helloBean.sayWelcome}"/></h2>
        </h:form>

    </h:body>
</html>

この例では、ボタンAjaxableを作成します。ボタンをクリックすると、フォーム全体を送信するのではなく、サーバーにAjaxリクエストを行います。

<h:commandButton value="Welcome Me">
    <f:ajax execute="name" render="output"/>
</h:commandButton>
<h:outputText id="output" value="#{helloBean.sayWelcome}"/>

<f:ajax> ** タグの場合:
1. execute = “name”
  
  – ”
  
  name
  
  “のIDを持つフォームコンポーネントを示します.

処理のためにサーバーに送信されます。複数のコンポーネントの場合、間にスペースを入れて分割するだけです（例:

execute = “name anotherId anotherxxId”

）。この場合、テキストボックス値を送信します。

render = “output”

– Ajaxリクエストの後、

idが ”

output

“のコンポーネントです。この場合、Ajaxリクエストが終了すると、

<h:outputText>

コンポーネントがリフレッシュされます。

2. ManagedBean

＃\ {helloBean} ** の例を参照してください。
HelloBean.java **

package com.mkyong.common;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import java.io.Serializable;

@ManagedBean
@SessionScoped
public class HelloBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String name;

    public String getName() {
       return name;
    }
    public void setName(String name) {
       this.name = name;
    }
    public String getSayWelcome(){
      //check if null?
       if("".equals(name) || name ==null){
        return "";
       }else{
        return "Ajax message : Welcome " + name;
       }
    }
}

3.それはどのように機能するのですか？

URL:

http://localhost:8080/JavaServerFaces/helloAjax.jsf

にアクセスします。

jsf2-ajax-hello-world-example-1、title = “jsf2-ajax-hello-world -example-1 “、width = 640、height = 295]

ボタンをクリックすると、Ajaxリクエストが行われ、処理のためにテキストボックス値がサーバーに渡されます。その後、

outputText

コンポーネントをリフレッシュし、

page flippingエフェクト

なしで

getSayWelcome（）

メソッドを介して値を表示します。

jsf2-ajax-hello-world-example-2、title = “jsf2-ajax-hello-world -example-2 “、width = 640、height = 283]