java - 我如何在 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 旨在为现有组件添加行为。

来自Tapestry 5 docs :

Tapestry 5 includes a radical feature, component mixins. Component mixins are a tricky concept; it basically allows a true component to be mixed together with special limited components called mixins. The component plus its mixins are represented as just a single tag in the component template, but all the behavior of all the elements.

你会像这样使用mixin:

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

混合 stub :

@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 注入(inject)到您的 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 的使用也相对轻量级和优雅。