Help creating a JavaScript mixin in Tapestry5?

Posted by shane87 on Stack Overflow See other posts from Stack Overflow or by shane87
Published on 2010-05-10T16:48:00Z Indexed on 2010/05/11 5:44 UTC
Read the original article Hit count: 302

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about tapestry