English 中文(简体)
Apache Tapestry - Ajax Components
  • 时间:2024-09-17

Apache Tapestry - Ajax Component


Previous Page Next Page  

AJAX stands for Asynchronous JavaScript and XML. It is a technique for creating better, faster and more interactive web apppcations with the help of XML, JSON, HTML, CSS, and JavaScript. AJAX allows you to send and receive data asynchronously without reloading the web page, so it is fast.

Zone Component

A Zone Component is used to provide the content (markup) as well as the position of the content itself. The body of the Zone Component is used internally by Tapestry to generate the content. Once the dynamic content is generated, Tapestry will send it to the cpent, rerender the data in the correct place, trigger and animate the HTML to draw the attention of the user.

This Zone component is used along with an EventLink component. An EventLink has option to tie it to a particular zone using the t:zone attributes. Once the zone is configured in EventLink, cpcking the EventLink will trigger the zone update. In addition, the EventLink events (refreshZone) can be used to control the generation of dynamic data.

A simple example of AJAX is as follows −

AjaxZone.tml

<html t:type = "Newlayout" title = "About MyFirstApppcation" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter">  
   
   <body> 
      <h1>Ajax time zone example</h1>  
      <span class = "span1">  
         <a t:type = "eventpnk" t:event = "refreshZone" href = "#" 
            t:zone = "timeZone">Ajax Link </a><br/><br/> 
         <t:zone t:id = "timeZone" id = "timeZone">Time zone: ${serverTime}</t:zone> 
      </span>  
   </body>
   
</html> 

AjaxZone.java

package com.example.MyFirstApppcation.pages;  

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

pubpc class AjaxZone { 
   @Inject 
   private Request request; 
   
   @InjectComponent 
   private Zone timeZone; 
   
   void onRefreshPage() { 
   } 
   
   Object onRefreshZone() { 
      return request.isXHR() ? timeZone.getBody() : null; 
   } 
   
   pubpc Date getServerTime() { 
      return new Date(); 
   } 
} 

The result will show at: http://localhost:8080/MyFirstApppcation/AjaxZone

Ajax Time Zone Advertisements