第二十七讲：tapestry与javaScript

时间 2019-11-07

标签第二十七 tapestry javascript 栏目 JavaScript 繁體版

原文原文链接

tapestry的js库基于prototype，写法很是简单。这个实例JS实现了当输入单字符时显示绿色、双字符时显示红色。代码以下：javascript

JavaScript.javahtml

/**

* 项目名称：TapestryStart

* 开发模式：Maven+Tapestry5.x+Tapestry-hibernate+Mysql

* 网址： http://www.flywind.org

* 版本：1.0

* 编写：飞风

* 时间：2012-02-29

package com.tapestry.app.pages;

import org.apache.tapestry5.annotations.Import;

import org.apache.tapestry5.annotations.Property;

import org.apache.tapestry5.ioc.annotations.Inject;

import org.apache.tapestry5.services.javascript.JavaScriptSupport;

@Import(library="context:assets/js/JavaScript.js")

public class JavaScript {

@Property

@SuppressWarnings("unused")

private String firstName;

@Inject

private JavaScriptSupport javaScriptSupport;

public void setupRender() {

javaScriptSupport.addScript("new ColorSwitcher();");

}

JavaScript.tmljava

<html t:type="layout" title="tapestryStart Index" t:sidebarTitle="Framework Version"

xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd" xmlns:p="tapestry:parameter">

First name: <input t:type="TextField" t:id="firstName"/><br/>

</form>

</html>

JavaScript.jssql

ColorSwitcher = Class.create( {

initialize : function() {

this.element = $('firstName');

Event.observe(this.element, 'keyup', this.doSwitchColor.bindAsEventListener(this));

this.element.setStyle({color: 'red'});

doSwitchColor : function(e) {

if (this.element.getStyle('color') == 'red') {

this.element.setStyle({color: 'green'});

}

else {

this.element.setStyle({color: 'red'});

}

} )

http://localhost/javaScript/javaScript