Apache-tapestry-ajax-component

提供:Dev Guides
移動先:案内検索

Apacheタペストリー-Ajaxコンポーネント

AJAXは Asynchronous JavaScript and XML の略です。 これは、 XML、JSON、HTML、CSS 、および JavaScript の助けを借りて、より良く、より速く、よりインタラクティブなWebアプリケーションを作成するための手法です。 AJAXを使用すると、Webページをリロードせずに非同期でデータを送受信できるため、高速です。

ゾーンコンポーネント

ゾーンコンポーネントは、コンテンツ(マークアップ)およびコンテンツ自体の位置を提供するために使用されます。 Zoneコンポーネントのボディは、コンテンツを生成するためにTapestryによって内部的に使用されます。 動的コンテンツが生成されると、Tapestryはそれをクライアントに送信し、データを正しい場所に再レンダリングし、HTMLをトリガーしてアニメーション化し、ユーザーの注意を引きます。

このゾーンコンポーネントは、EventLinkコンポーネントとともに使用されます。 EventLinkには、 t:zone 属性を使用して特定のゾーンに関連付けるオプションがあります。 ゾーンがEventLinkで構成されたら、EventLinkをクリックすると、ゾーンの更新がトリガーされます。 さらに、EventLinkイベント(refreshZone)を使用して、動的データの生成を制御できます。

AJAXの簡単な例は次のとおりです-

AjaxZone.tml

<html t:type = "Newlayout" title = "About MyFirstApplication"
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd"
   xmlns:p = "tapestry:parameter">

   <body>
      <h1>Ajax time zone example</h1>
      <div class = "div1">
         <a t:type = "eventlink" t:event = "refreshZone" href = "#"
            t:zone = "timeZone">Ajax Link </a><br/><br/>
         <t:zone t:id = "timeZone" id = "timeZone">Time zone: ${serverTime}</t:zone>
      </div>
   </body>

</html>

AjaxZone.java

package com.example.MyFirstApplication.pages;

import java.util.Date;
import org.apache.tapestry5.annotations.InjectComponent;
import org.apache.tapestry5.corelib.components.Zone;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.Request;

public class AjaxZone {
   @Inject
   private Request request;

   @InjectComponent
   private Zone timeZone;

   void onRefreshPage() {
   }

   Object onRefreshZone() {
      return request.isXHR() ? timeZone.getBody() : null;
   }

   public Date getServerTime() {
      return new Date();
   }
}

結果は次の場所に表示されます。http://localhost:8080/MyFirstApplication/AjaxZone

Ajaxタイムゾーン