Richard Bolkey – Blog

/**
 * Modifies how a the content of a Tapestry Zone is updated.  Allows content to 
 * be inserted instead of just updating an element.
 */
@IncludeJavaScriptLibrary("ZoneInserter.js")
public class ZoneInserter {
 
    /**
     * Accepted insertion points are:
     * <ul>
     * <li>before (as element's previous sibling)</li>
     * <li>after (as element's next sibling)</li>
     * <li>top (as element's first child)</li>
     * <li>bottom (as element's last child) [<b>default</b>]</li>
     * </ul>
     */
    @Parameter(defaultPrefix = BindingConstants.LITERAL, value = "bottom")
    private String insertion;
 
    @InjectContainer
    private Zone zone;
 
    @Inject
    private ComponentResources resources;
 
    @Inject
    private RenderSupport renderSupport;
 
    void afterRender() {
 
        final String id = zone.getClientId();
 
        final JSONObject config = new JSONObject();
 
        if (resources.isBound("insertion")) config.put("insertion", insertion);
 
        renderSupport.addInit("zoneInserter", new JSONArray(id, config));
    }
}

Tapestry.Initializer.zoneInserter = function(zoneId, options)
{
    // Need to access the zone after the zone manager is configured during Tapestry.onDomLoaded
    Event.observe(window, "load", function() {
 
        var zoneObject = Tapestry.findZoneManagerForZone(zoneId);
 
        if (!zoneObject) return;
 
        zoneObject.show = function(content)
        {
            var key = (options.insertion || 'bottom');
 
            var insertion = new Hash();
            insertion.set(key, content);
 
            this.updateElement.insert(insertion.toJSON().evalJSON());
 
            var func = this.element.visible() ? this.updateFunc : this.showFunc;
 
            func.call(this, this.element);
 
            this.element.fire(Tapestry.ZONE_UPDATED_EVENT);
        }
    });
};

/**
 * Enables a zone to be periodically refreshed with the response from the given event.
 */
@IncludeJavaScriptLibrary("PeriodicUpdate.js")
public class PeriodicUpdate {
 
    /**
     * The name of the event to call to update the zone.
     */
    @Parameter(required = true, defaultPrefix = BindingConstants.LITERAL)
    private String event;
 
    /**
     * The context for the triggered event. The clientId of the containing zone is always 
     * added as the final context item.
     */
    @Parameter("defaultContext")
    private Object[] context;
 
    /**
     * How long, in seconds, to wait between the end of one request and the beginning of the next.
     */
    @Parameter(defaultPrefix = BindingConstants.LITERAL)
    private int period;
 
    @InjectContainer
    private Zone zone;
 
    @Inject
    private ComponentResources resources;
 
    @Inject
    private RenderSupport renderSupport;
 
    public Object[] getDefaultContext() {
        return new Object[0];
    }
 
    void afterRender() {
 
        final String id = zone.getClientId();
 
        final List<Object> context = Lists.newArrayList(Arrays.asList(this.context));
        context.add(zone.getClientId());
 
        final Link link = resources.createEventLink(event, context.toArray(new Object[context.size()]));
 
        final JSONObject config = new JSONObject();
 
        if (resources.isBound("period")) config.put("period", period);
 
        // Let subclasses do more.
        configure(config);
 
        renderSupport.addInit("periodicupdater", new JSONArray(id, link.toAbsoluteURI(), config));
    }
}

Tapestry.PeriodicUpdater = Class.create({
    initialize: function(element, url, options) {
        this.options = options;
 
        this.period = (this.options.period || 2);
 
        this.element = element;
        this.url = url;
 
        this.start();
    },
 
    start: function() {
        this.onUpdate = this.updateComplete.bind(this);
        this.timer = this.onTimerEvent.bind(this).delay(this.period);
    },
 
    stop: function() {
        this.onUpdate = undefined;
        clearTimeout(this.timer);
    },
 
    updateComplete: function() {
        this.timer = this.onTimerEvent.bind(this).delay(this.period);
    },
 
    onTimerEvent: function() {
        var zoneObject = Tapestry.findZoneManagerForZone(this.element);
 
        if (!zoneObject) return;
 
        zoneObject.updateFromURL(this.url);
 
        (this.onUpdate || Prototype.emptyFunction).apply(this, arguments);
    }
});
 
Tapestry.Initializer.periodicupdater = function(elementId, url, options)
{
    $T(elementId).periodicupdater = new Tapestry.PeriodicUpdater(elementId, url, options);
};

...
<t:zone mixins="ZoneInserter, PeriodicUpdate" insertion="top" period="10" event="updates"/>
...