第二十七講：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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。