/**
 * 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"/>
...

<?xml version="1.0" encoding="UTF-8"?>
<ul xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd">
 
    <!-- The custom delegate to the component to render based on the context of the current node. -->
    <t:nodedelegate to="currentNodeRenderer"/>
 
    <t:block>
        <!-- This block contains a set of components to delegate rendering to based on the current node. -->
        <div t:id="blackNode">
            <!-- Delegate to the child component to render.  This replaces the component's body. -->
            <t:nodedelegate to="currentNodeRenderer"/>
        </div>
 
        <div t:id="redNode">
            <t:nodeDelegate to="currentNodeRenderer"/>
        </div>
 
    </t:block>
 
</ul>

public class Tree {
 
    @Parameter(required = true)
    private Node node;
 
    @Component(id = "blackNode", parameters = {"node=currentNode", "childPosition=currentChildPosition"})
    private RenderBlackNode blackNode;
 
    @Component(id = "redNode", parameters = {"node=currentNode", "childPosition=currentChildPosition"})
    private RenderRedNode redNode;
 
    private Node currentNode;
 
    private Map<Node, Integer> childPositions;
 
    public Node getCurrentNode() {
        return currentNode;
    }
 
    public void setCurrentNode(final Node node) {
        // set the initial child position for the node to 0 if it has not been seen yet.
        if (!childPositions.containsKey(node)) {
            childPositions.put(node, 0);
        }
        this.currentNode = node;
    }
 
    public int getCurrentChildPosition() {
        return childPositions.get(this.currentNode);
    }
 
    public void setCurrentChildPosition(final int pos) {
        this.childPositions.put(currentNode, pos);
    }
 
    /**
     * Selects the Node component to render based on the currentNode type.
     *
     * @return the component to render the current node
     */
    public BaseRenderNode getCurrentNodeRenderer() {
        BaseRenderNode object = null;
        if (currentNode instanceof BlackNode) {
            object = blackNode;
        }
        else if (currentNode instanceof RedNode) {
            object = redNode;
        }
        return object;
    }
 
    void setupRender() {
        childPositions = CollectionFactory.newMap();
        setCurrentNode(node);
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<div xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd">
    <!-- The body is replaced with component(s) for the child nodes. -->
    <t:body/>
</div>

public class BaseRenderNode {
 
    @Parameter(required = true, cache = false)
    private Node node;
 
    @Parameter
    private int childPosition;
 
    @SetupRender
    boolean setup() {
        // prevents rending with the node parameter is null.
        return node != null;
    }
 
    @BeforeRenderBody
    boolean beforeChild() {
        // the node  has children, render the body to render a child
        final boolean render = node.getChildren().size() > 0;
 
        if (render) {
            // sets the container's currentNode to the node's child at the given index.
            node = node.getChildren().get(childPosition);
        }
        return render;
    }
 
    @AfterRenderBody
    boolean afterChild() {
        // increment the child position, afterRender on the child will have the container's currentNode set back to the node before the body was rendered.
        childPosition = childPosition + 1;
        // return true on last child index, finishing the iteration over the children, otherwise re-render the body (to render the next child)
        return node.getChildren().size() <= childPosition;
    }
 
    @AfterRender
    void after() {
        // set the currentNode to the parent after render (pop the stack)
        if (!node.isRoot())
            node = node.getParent();
    }
}

public interface Transformer { ... }
 
public interface Autobot extends Transformer { ... }
 
public interface Decepticon extends Transformer { ... }