Help creating a JavaScript mixin in Tapestry5?

Question

I am creating a mixin which renders a javascript file when a textfield gains focus.

I am new to the idea of mixins in Tapestry, and I am unsure of where to place my original javascript file which i wish to run when the textfield gains focus.

The following is an example of my code: The Java mixin class:

package asc.mixins;

import org.apache.tapestry5.RenderSupport;
import org.apache.tapestry5.annotations.AfterRender;
import org.apache.tapestry5.annotations.Environmental;
import org.apache.tapestry5.annotations.IncludeJavaScriptLibrary;
import org.apache.tapestry5.annotations.InjectContainer;
import org.apache.tapestry5.corelib.base.AbstractTextField;

@IncludeJavaScriptLibrary("js_dasher_mixin.js")
public class DasherMixin {

@Environmental
private RenderSupport renderSupport;

@InjectContainer
private AbstractTextField field;

@AfterRender
void addScript() {
    this.renderSupport.addScript("new JSDasher('%s');", 
            this.field.getClientId());
 }


}

The Javascript mixin file:

JSDasher = Class.create({

initialize: function(textField) 
{
    this.textField = $(textField);

    this.textField.observe('focus', this.onFocus.bindAsEventListener(this));
},

onFocus: function(event)
{
    //call my javascript init() function
} 
}

part of my javascript file I wish to run when the textfield gains focus:

var posX, posY;


// Sets up our global variables and dispatches an init request to the server.
function init() {

posX=0;
posY=0;
canvas = document.getElementById("canvas"); 
canvasWidth = canvas.offsetWidth;
canvasHeight = canvas.offsetHeight;
if (canvas.getContext) {   
    ctx = canvas.getContext("2d");
}

canvas.onclick = canvasClicked;
canvas.onmousemove = mouseMoved; 

canvasOffsetX = findPosX(canvas);
canvasOffsetY = findPosY(canvas);

sessID = -1;

sendInitRQ(canvasWidth, canvasHeight);

}

My javascript file is much larger than above, my question is where should I put my javascript code above?

Should it all be contained in the mixin.js file? if so where exactly should it go?

Thanks in advance for any help.

Answer 1

The method is ok free-floating in mixin.js but with name like init, you might have a conflict. You can put it in the JSDasher class itself or move the body to the onFocus function. You can also define any other functions on the JSDasher class and call them with this.function_name. Look at datefield.js in the Tapestry source as an example.