如何创建Tapestry5呈现一些JavaScript到页面上的自定义文本字段？

Question

我一直在努力创造挂毯自定义文本框在它获得焦点，这将使得一些JavaScript。但我一直有麻烦试图找到这样的一个例子。

下面是一些我有开始时的代码：

package asc.components;

import org.apache.tapestry5.ComponentResources;
import org.apache.tapestry5.Field;
import org.apache.tapestry5.annotations.Parameter;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.ComponentDefaultProvider;


public class DahserTextField implements Field {

@Parameter (defaultPrefix = "literal")
private String label;
@Inject
private ComponentResources resources;
@Inject
private ComponentDefaultProvider defaultProvider;
@Parameter
private boolean disabled;
@Parameter
private boolean required;

String defaultLabel(){
    return defaultProvider.defaultLabel(resources);
}

public String getControlName() {
    return null;
}

public String getLabel() {
    return label;
}

public boolean isDisabled() {
    return disabled;
}

public boolean isRequired() {
    return required;
}

public String getClientId() {
    return resources.getId();
}


}

我一直对下一步做什么不确定。我不知道该怎么投入.tml文件。我将不胜感激，如果有人可以帮助或点我在正确的方向。

Answer 1

有没有必要复制任何的TextField的功能在自己的组件，而不是你应该创建一个组件混入。混入被设计成添加行为现有组件。

从挂毯5文档：

  

挂毯5包括自由基特征，   成分混入。成分混入的   一个棘手的概念;它基本上允许   真正的组件并加以混合   与所谓的特殊部件有限   混入。该组件加上其混入   被表示为只是一个单一的标签   分量模板，但所有的   所有元素的行为。

您将使用混入这样的：

<input type="text" t:type="TextField" t:mixins="MyMixin" t:someParam="foo" />

一个混入存根：

@IncludeJavaScriptLibrary("MyMixin.js")
public class MyMixin {

    /**
     * Some string param.
     */
    @Parameter(required = true, defaultPrefix = BindingConstants.LITERAL)
    private String someParam;

    @Environmental
    private RenderSupport renderSupport;

    @InjectContainer
    private AbstractTextField field;

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

}

请注意的@InjectContainer注释中注入含的TextField到您的Mixin。在这种情况下，我们需要的文本字段的Client。

还要注意@IncludeJavaScriptLibrary("MyMixin.js")注释，其中包括所要求的JavaScript文件。

JavaScript的可能是这样的：

MyJavascriptClass = Class.create({

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

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

    onFocus: function(event)
    {
        //do something
    }
}

你的方法的主要区别是，这是定义你自己的JS类和使用Tapestry的内置工具来加载和初始化JS。使用混入的相比也相对轻重量和优雅到创建自己的组件。

Answer 2

在.tml

<t:textfield onfocus="somethingCool()" />

在爪哇或许应该程度的TextField？这将需要导入新的样式也很可能。

- 网页实际上是组件，所以你将建立一个组件，就像你有任何其他页面。您可以嵌入任何其他成分融入其中。我希望这是一个很好的起点为您服务。