如何在 Tapestry5 中创建自定义文本字段以将一些 Javascript 呈现到页面上？

Question

我一直在尝试在 Tapestry 中创建一个自定义文本字段，当获得焦点时它将呈现一些 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 的任何功能，而是应该创建一个组件 mixin。 Mixin 旨在向现有组件添加行为。

来自 Tapestry 5 文档：

Tapestry 5 包含一个激进的功能，
组件混合。组件混入是
一个棘手的概念；它基本上允许
真正要混合在一起的成分
具有特殊的有限组件称为
混合。该组件及其 mixin
仅表示为单个标签
在组件模板中，但所有
所有元素的行为。

您可以像这样使用 mixin：

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

一个 mixin 存根：

@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 中。在本例中，我们需要 TextField 的 clientId。

另请注意 @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。与创建自己的组件相比，mixins 的使用也相对轻量且优雅。

Answer 2

.tml

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

Java 应该扩展 TextField 吗？它也可能需要导入一个新的样式表。

--
页面实际上是组件，因此您可以像构建任何其他页面一样构建组件。您可以将任何其他组件嵌入其中。我希望这对您来说是一个良好的起点。