JSF 2.0 Ajax hello worldの例
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> ** タグの場合:
-
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]
ソースコードをダウンロードする
ダウンロードする –
JSF-2-Ajax-Hello-World-Example.zip
(8KB)
ajax
hello world
リンク://タグ/jsf2/[jsf2]