Блог девушки-программиста: Создание композитных компонентов JSF 2

Композитный компонент – это компонент, который состоит из разметки и других существующих компонентов. Создание подобных компонентов возможно в JSF версии 2.0 и выше.

Создание композитного компонента

Составные компоненты создаются в виде XHTML-файлов где-либо в директории resources, после чего они в соответствии с соглашением связываются с пространством имен и тегом.
В данном примере в каталоге webapp/recources/custom находится файл send-name.xhtml.

Рисунок 1. Структура проекта

При описании композитного компонента в части <composite:interface> определяется интерфейс, который можно использовать для конфигурирования компонента. В части <composite:implementation> содержится реализация компонента. В ней для доступа к атрибутам, определенным в интерфейсе компонента, используется выражение #{cc.attrs.ATTRIBUTE_NAME} (cc - composite component - это зарезервированное ключевое слово языка выражений JSF 2).

Листинг 1. Композитный компонент send-name.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:composite="http://java.sun.com/jsf/composite">

<composite:interface>
    <composite:attribute name="inputValue"/>
    <composite:attribute name="outputValue"/>
    <composite:attribute name="submitButtonText"/>
    <composite:attribute name="submitButtonAction"
                    method-signature="java.lang.String action()"/>
</composite:interface>

<composite:implementation>
    <h:form>
        <p:panelGrid columns="3" id="textPanel">
            <p:inputText id="name" value="#{cc.attrs.inputValue}"/>
            <p:commandButton action="#{cc.attrs.submitButtonAction}"
                             value="#{cc.attrs.submitButtonText}"
                             update="@form"/>
            <h:outputText value="#{cc.attrs.outputValue}"
                          id="outputValue"/>
        </p:panelGrid>
    </h:form>
</composite:implementation>

</html>

Для работы с составными компонентами нужно объявить пространство имен и использовать теги. Пространство имен – это всегда http://java.sun.com/jsf/composite плюс имя поддиректории в директории resources, в которой находится данный компонент. Само имя компонента – это имя его XHTML-файла без расширения .xhtml. Это соглашение делает необязательным использование какой-либо конфигурации.

Пример использования композитного компонента

Листинг 2. Пример использования композитного компонента, файл components.xhtml


<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:custom="http://java.sun.com/jsf/composite/custom">

<h:head>
</h:head>

<h:body>
    <custom:send-name inputValue="#{customComponentBean.input}"
                      outputValue="#{customComponentBean.output}"
                      submitButtonText="Click Me..."
                  submitButtonAction="#{customComponentBean.click}"/>
</h:body>
</html>

Листинг 3. CustomComponentBean.java


package components;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean(name = "customComponentBean")
@SessionScoped
public class CustomComponentBean {

    private String input;
    private String output;

    public String getInput() {return input;}
    public void setInput(String input) {this.input = input;}

    public String getOutput() {return output;}
    public void setOutput(String output) {this.output = output;}

    public void click() {
     output = "You input (click) : " + input;
    } 
}

Рисунок 2. Результат

Блог девушки-программиста

1 марта 2013 г.

Создание композитных компонентов JSF 2

Создание композитного компонента

Пример использования композитного компонента

3 комментария:

1 марта 2013 г.

Создание композитных компонентов JSF 2

Создание композитного компонента

Пример использования композитного компонента

3 комментария:

1 марта 2013 г.