Help create JavaScript mixing in Tapestry5?

I am creating a mixin that creates a javascript file when a textbox receives focus.

I'm new to the mixins idea in Tapestry and I'm not sure where to place the original javascript file that I want to run when the textbox gets focus.

Below is an example of my code: 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());
 }


}

      

Mixing Javascript 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
} 
}

      

the part of my javascript file that I want to run when the textbox gets 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 the above, my question is where should I put the javascript code above?

Should all this be in the mixin.js file? if so, where exactly should he go?

Thanks in advance for your help.

+2


a source to share


1 answer


The ok method is free floating in mixin.js, but with a type name init, you may have a conflict. You can put it in the JSDasher class or move the body to the onFocus function. You can also define any other functions of the JSDasher class and call them with this .function_name. Take a look at datefield.js in the Tapestry source for an example.



+1


a source







All Articles