Apache Tapestry - Komponen Ajax

AJAX adalah singkatan dari Asynchronous JavaScript and XML. Ini adalah teknik untuk membuat aplikasi web yang lebih baik, lebih cepat, dan lebih interaktif dengan bantuanXML, JSON, HTML, CSS, dan JavaScript. AJAX memungkinkan Anda untuk mengirim dan menerima data secara asynchronous tanpa memuat ulang halaman web, jadi cepat.

Komponen Zona

Komponen Zona digunakan untuk menyediakan konten (markup) serta posisi konten itu sendiri. Tubuh Komponen Zona digunakan secara internal oleh Tapestry untuk menghasilkan konten. Setelah konten dinamis dibuat, Tapestry akan mengirimkannya ke klien, merender data di tempat yang benar, memicu dan menganimasikan HTML untuk menarik perhatian pengguna.

Komponen Zona ini digunakan bersama dengan komponen EventLink. Sebuah EventLink memiliki opsi untuk mengikatnya ke zona tertentu menggunakant:zoneatribut. Setelah zona dikonfigurasi di EventLink, mengklik EventLink akan memicu pembaruan zona. Selain itu, peristiwa EventLink (refreshZone) dapat digunakan untuk mengontrol pembuatan data dinamis.

Contoh sederhana AJAX adalah sebagai berikut -

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(); 
   } 
}

Hasilnya akan ditampilkan di: http: // localhost: 8080 / MyFirstApplication / AjaxZone