Apache Tapestry - Componente Ajax

AJAX sta per Asynchronous JavaScript and XML. È una tecnica per creare applicazioni web migliori, più veloci e più interattive con l'aiuto diXML, JSON, HTML, CSS, e JavaScript. AJAX ti consente di inviare e ricevere dati in modo asincrono senza ricaricare la pagina web, quindi è veloce.

Componente di zona

Un componente di zona viene utilizzato per fornire il contenuto (markup) e la posizione del contenuto stesso. Il corpo del componente Zona viene utilizzato internamente da Tapestry per generare il contenuto. Una volta generato il contenuto dinamico, Tapestry lo invierà al client, eseguirà nuovamente il rendering dei dati nella posizione corretta, attiverà e animerà l'HTML per attirare l'attenzione dell'utente.

Questo componente Zona viene utilizzato insieme a un componente EventLink. Un EventLink ha la possibilità di collegarlo a una particolare zona utilizzando ilt:zoneattributi. Una volta configurata la zona in EventLink, facendo clic su EventLink si attiverà l'aggiornamento della zona. Inoltre, gli eventi EventLink (refreshZone) possono essere utilizzati per controllare la generazione di dati dinamici.

Un semplice esempio di AJAX è il seguente:

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

Il risultato verrà visualizzato su: http: // localhost: 8080 / MyFirstApplication / AjaxZone