如何在Tapestry5中创建一个自定义文本字段，将一些Javascript呈现到页面上？ [英] How do I create a custom text field in Tapestry5 that renders some Javascript onto the page?

问题描述

我一直在尝试在tapestry中创建一个自定义文本字段，当它获得焦点时会呈现一些javascript。但是我一直在努力寻找一个这样的例子。

I have been trying to create a custom textfield in tapestry which will render some javascript when it gains focus. But I have been having trouble trying to find an example of this.

以下是我开始使用的一些代码：

Here is some of the code i have started off with:

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文件。如果有人能帮忙或指出我正确的方向，我将不胜感激。

I have been unsure on what to do next. I do not know what to put into the .tml file. I would be grateful if anyone could help or point me in the right direction.

推荐答案

没有必要复制任何 TextField 在您自己的组件中的功能，而不是您应该创建组件mixin。 Mixins旨在为现有组件添加行为。

There is no need to replicate any of TextField's functionality in your own component, instead you should create a component mixin. Mixins are designed to add behaviour to existing components.

来自 Tapestry 5 docs ：

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

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：

You would use the mixin like this:

<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。

Note the @InjectContainer annotation, which injects the containing TextField into your Mixin. In this case, we want the TextField's clientId.

还要注意 @IncludeJavaScriptLibrary（MyMixin.js）注释，包括所需的Javascript文件。

Also note the @IncludeJavaScriptLibrary("MyMixin.js") annotation, which includes the required Javascript file.

Javascript可能如下所示：

The Javascript could look like this:

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也相对轻巧和优雅创建自己的组件。

The key difference to your approach is that this involves defining your own JS class and using Tapestry's built-in facilities to load and initialize the JS. The use of mixins is also relatively light-weight and elegant in comparison to creating your own components.

这篇关于如何在Tapestry5中创建一个自定义文本字段，将一些Javascript呈现到页面上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！