Wednesday, April 15, 2009

Open a page in a popup window

This mixin can be applied to any element that has an onclick event. It opens the specified page in a new window. There is room for more parameters here for styling the window, and possibly for using other events than onclick as a trigger.


<input type=”button” value=”View shopping cart” t:mixins=”popupPageLink” page=”cart/view” context=”cartId”/>


import org.apache.tapestry5.BindingConstants;
import org.apache.tapestry5.ClientElement;
import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.Link;
import org.apache.tapestry5.RenderSupport;
import org.apache.tapestry5.annotations.Environmental;
import org.apache.tapestry5.annotations.IncludeJavaScriptLibrary;
import org.apache.tapestry5.annotations.InjectContainer;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.ioc.annotations.Inject;
public class PopupPageLink {
  private ComponentResources resources;
  private RenderSupport renderSupport;
  private ClientElement container;
  @Parameter(required = true, defaultPrefix = BindingConstants.LITERAL)
  private String page;
  @Parameter(defaultPrefix = BindingConstants.LITERAL, value="800")
  private String width;
  @Parameter(defaultPrefix = BindingConstants.LITERAL, value="600")
  private String height;
  private Object[] context;
  void afterRender() {
    Link link = resources.createPageLink(page, true, context);
    renderSupport.addScript("new PopupPageLink('%s', '%s', %s, %s);", container.getClientId(), link, width, height);


var PopupPageLink = Class.create();
PopupPageLink.prototype = {
	initialize: function(id, link, width, height) {
		this.element = $(id); = link;
		this.width = width;
		this.height = height;
		Event.observe(this.element, 'click', this.onclick.bindAsEventListener(this));
	onclick: function() {
		var	name = 'dialogWindow';
		var win =,name,'width=' + this.width + ',height=' + this.height + ',resizable=yes,scrollbars=yes,menubar=no,screenX=0,screenY=0,left=0,top=0' );

Enforce max length on textareas and textfields

This is a mixin that can be used to enforce the maximum content length of any textarea or text input. It uses javascript to chop off any character that exceeds the given maxlength.


<textarea t:type="textarea" t:mixins="maxlength" max="100"></textarea>

 * Enforces maxlength on a textfield or a textarea
 * @author Inge
public class MaxLength {
  private ClientElement container;
  private int max;
  private boolean displayCounter;
  private RenderSupport renderSupport;
  void afterRender(MarkupWriter writer) {
    String id = container.getClientId();
    String counterId = id + "-counter";
    writer.element("div", "id", counterId + "-container");
    if (!displayCounter) {
      writer.attributes("style", "display: none");
    writer.element("input", "type", "text", "id", counterId, "disabled", "disabled", "size", "3");    
    renderSupport.addScript("new MaxLength('%s', '%s', %s)", id, counterId, max);


var MaxLength = Class.create();
MaxLength.prototype = {
	initialize: function(id, counterId, max) {
		this.max = max;
		this.element = $(id);
		this.element.observe('keyup', this.keyup.bindAsEventListener(this));
		this.counterElement = $(counterId);
	keyup: function(event) {
		if (this.element.value.length > this.max) {
			this.element.value = this.element.value.substring(0, this.max);
	updateCounter: function() {
		var currentLength = this.element.value.length;
		this.counterElement.value = (this.max - currentLength);