Как создать собственное текстовое поле в 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. В этом случае нам нужен идентификатор клиента TextField.

Также обратите внимание на аннотацию @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()" />

Java должен, вероятно, расширить TextField? Вероятно, потребуется импортировать новую таблицу стилей.

- Страницы на самом деле являются компонентами, поэтому вы должны создать компонент так же, как любую другую страницу. Вы можете встроить в них любой другой компонент. Я надеюсь, что это хорошая отправная точка для вас.