javacode banner

Стандартные компоненты JSF

Стандартные компоненты JSF разделены на две части: базовые компоненты JSF и HTML-компоненты JSF. Предалагаем вам ознакомится с синтаксисом и примерами.

Базовые компоненты JSF

Базовыми называются компоненты, которые не привязываются к рендерингу HTML или какому-либо другому механизму отображения. Среди прочего они предоставляют такую функциональность, как преобразование типов и проверка допустимости.
Тег Описание
<h:commandButton action="save" value="Сохранить">
    <f:actionListener type="net.ensode.CustomActionListener" />
</h:commandButton>
f:actionListener Выполняет метод действия слушателя processAction(), определяемый атрибутом type тега. Значение атрибута type должно быть полностью определенным (квалифицированным) именем класса, реализующего интерфейс javax.faces.event.ActionListener. Этот тег обычно является дочерним тегом h:commandButton или h:commandLink. Когда пользователь щелкает по родительскому компоненту, метод processAction() объявленной реализации ActionListener выполняется автоматически.
    <h:commandButton actionListener="#{bean.calculate}">
        <f:ajax execute="first second" render="sum" />
    </h:commandButton>
f:ajax Включает поведение AJAX. Этот тег обычно вкладывается в другой тег JSF, такой как h:commandButton. Когда присутствует этот тег родительский компонент автоматически "аяксифицируется". Например кнопка, поддерживающая AJAX, не обновляет целую страницу — вместо этого она инициирует частичное обновление страницы. Значением атрибута execute является разделенный пробелами список идентификаторов компонентов, которые будут использоваться в качестве входных при запуске запроса AJAX. Значением атрибута render является разделенный пробелами список компонентов для повторного отображения, после того как запрос AJAX будет завершен.
    <h:commandButton action="save" value="Save">
        <f:actionListener type="net.ensode.CustomActionListener" />
        <f:attribute name="someAttribute" value="someValue" />
    </h:commandButton>
f:attribute Устанавливает атрибут родительского компонента с ключом, определенным атрибутом name тега и значением, определенным атрибутом value тега. Все атрибуты компонента позже могут быть получены программно, как структура данных — карта Map, вызовом метода getAttributes() соответствующего экземпляра javax.faces.component.UIComponent. Этот тег часто используется в сочетании с классом f:actionListener, чтобы передать параметру методу действия слушателя.
    <h:inputText value="#{user.birthday}">
        <f:convertDateTime dateStyle="short" />
    </h:inputText>
f:convertDateTime Преобразует значение родительского компонента в экземпляр java.util.Date. Этот тег позволяет присваивать правильно отформатированную строку, вводимую пользователем, полю даты в управляемом бине.
    <h:inputText value="#{user.phone}">
        <f:converter converterId="TelephoneConverter" />
    </h:inputText>
f:converter Регистрирует пользовательский преобразователь, указанный атрибутом converter-Id тега, в родительском теге. Указанный преобразователь должен представлять собой класс, реализующий интерфейс javax.faces.convert.Converter, и быть или декорированным аннотацией @FacesConverter, или зарегистрированным в дескрипторе конфигурации приложения, файле faces-config.xml, с помощью тега converter.
    <h:inputText value="#{user.age}">
        <f:convertNumber />
    </h:inputText>
f:convertNumber Преобразует значение родительского компонента в экземпляр java.lang.Number. Этот тег позволяет правильно отформатировать строку, вводимую пользователем, присваиваемую в последствии числовому полю в управляемом бине. Этот тег может использоваться, чтобы преобразовать практически любой тип поля ввода числовых данных в соответствующий тип.
    <h:inputText>
        <f:event type="preRenderComponent"
                 listener="#{myBean.doSomething}" />
    </h:inputText>
f:event Позволяет вызывать метод управляемогобина всякий раз, когда встречается конкретное события. Этот тег должен быть вложен в другой тег JSF. Регистрируемое событие указывается в качестве значения атрибута type тега f:event. Для него допустимы следующие значения: preRenderComponent - инициируется непосредственно перед тем, как родительский компонент будет прорисован; PostAddToView - инициируется после того, как родительский компонент будет добавлен к представлению; preValidate - инициируется непосредственно перед тем, как значение родительского компонента будет проверено; postValidate - инициируется сразу после того, как значение родительского компонента будет проверено. Значение атрибута listener тега f:event должно быть значением выражения привязки, которое разрешается в метод управляемого бина, удовлетворяющего следующим требованиям: имеет модификатор видимости public, не возвращаетникакого значения и принимает экземпляр класса javax.faces.event.ComponentSystemEvent в качестве своего единственного параметра.
    <h:dataTable value="#{Order.items}" var="item">
        <h:column>
            <f:facet name="header">
                <h:outputText value="Element Number" />
            </f:facet>
            <h:outputText value="#{item.itemNumber}" />
        </h:column>
        <h:column>
            <f:facet name="header">
                <h:outputText value="Element Description" />
            </f:facet>
            <h:outputText value="#{item.itemDescription}" />
        </h:column>        
    </h:dataTable>
f:facet Регистрирует фасет на родительском компоненте. Фасет (facet) - это специальный дочерний компонент, к которому можно получить доступ с помощью метода UIComponent.getFacet. Этот метод может быть переопределен для пользовательских компонентов; данное обстоятельство позволяет иначе обрабатывать компоненты в фасете. Например, у стандартного тега h:dataTable может быть фасет, называемый "header", который будет использоваться для представления всех компонентов в теге f:facet в качестве заголовка представленной HTML-таблицы.
    <f:view locale="#{facesContext.externalContext.request.locale}">
        <f:loadBundle basename="net.ensode.Messages" var="mess" />
        <h:outputText value="#{mess.helloBrother}" />
    </f:view>
f:loadBundle Загружает пакет ресурса в контекст запроса. Имя пакета ресурса указывается атрибутом basename тега. Переменная для использования с целью получения доступа к свойствам пакета ресурса определяется атрибутом var тега.
    <f:metadata>
        <f:viewParam name="someParam" value="Bean.someProp" />
    </f:metadata>
f:metadata Этот тег прежде всего используется в качестве родительского тега для f:viewParam, который в свою очередь используется для отображения параметров GET-запроса на значения управляемого бина.
    <h:outputFormat value="Hello, {0}!" >
        <f:param value="#{user.firstName}" />
    </h:outputFormat>
f:param Когда этот тег является дочерним элементом тега h:commandLink, он генерирует параметр запроса определенный его атрибутами name и value. Когда же он является дочерним элементом тега h:outputForm, он заменяется в обозревателе параметром, определенным атрибутом value тега h:outputFormat.
    <f:view>
        <f:phaseListener type="net.ensode.CustomPhaseListener" />
    </f:view>
f:phaseListener Регистрирует слушателя этапа на текущей странице. Слушатель этапа должен быть экземпляром класса, реализующего интерфейс javax.faces.event.PhaseListener.
    <h:selectManyCheckbox value="#{ord.items}" >
        <f:selectItem itemValue="#{item1}" itemLabel="Keyboard" />
        <f:selectItem itemValue="#{item1}" itemLabel="Mouse" />
    </h:selectManyCheckbox>
f:selectItem Добавляет выбираемый элемент, принадлежащий родительскому компоненту. Способ, которымэтот компонент прорисовывается, зависит от родительского компонента. Он может использоваться в качестве дочернего компонента для тегов h:selectManyCheckBox, h:selectManyListBox, h:selectManyMenu, h:selectOneListBox, h:selectOneMenu и h:selectOneRadio.
    <h:selectManyCheckbox value="#{ord.items}" >
        <f:selectItems value="#{valueContainer.allitems}" />
    </h:selectManyCheckbox>
f:selectItems Добавляет серию выбираемых элементов, принадлежащих родительскому тегу. Атрибут value этого тега должен быть значением отложенного выражения, разрешающимся в массив или список обьектов javax.faces.model.SelectItem.
    <h:commandButton value="Save" action="#{controller.save}">
        <f:setPropertyActionListener
            target="#{order.lastUpdUserId}"
            value="#{user.UserId}" />
    </h:commandButton>
f:setPropertyActionListener Может быть дочерним тегом тегов h:commandLink или h:commandButton. Когда производится щелчок по кнопке или ссылке, этот тег устанавливпет атрибут в управляемом бине, определенном атрибутом target тега с помощью значения атрибута value тега.
    <f:view>
        <div>
            <f:subview id="qwe">
                <jsp:include page="menu.jsp" />
            </f:subview>
        </div>
    </f:view>
f:subview Этот тег предназначен для использования только в случае использования JSP в качестве технологии представления JSF. Включение любой JSP-страницы выполняется с помощью тега jsp:include или JSTL-тега c:import, который должен быть вложенв тег f:subview.
    <h:inputText value="#{someBean.someProp}">
        <f:validateBean disabled="#{anotherBean.beanProp}" />
    </h:inputText>
f:validateBean Этот тег используется для тонкой настройки Проверки допустимости со стороны бина. Он может использоваться для отключения Проверки допустимости со стороны бина в индивидуальном порядке или быть присвоенным компонентам спецификации JSR 303 группы Проверки допустимости со стороны бина, которые будут проверяться.
    <h:inputText value="#{item.price}">
        <f:validateDoubleRange minimum="1.0" maximum="10.0" />
    </h:inputText>
f:validateDoubleRange Проверяет, что значение для родительского компонента является экземпляром java.lang.Double, которое находится между значениями, определенными атрибутами minimum и maximum тега.
    <h:inputText label="Name" value="#{user.firstName}"
                 required="true">
        <f:validateLength minimum="2" maximum="20" />
    </h:inputText>
f:validateLength Проверяет, что значение для родительского компонента является строкой, длина которой находится в диапазоне между значениями,определенными атрибутами minimum и maximum тега.
    <h:inputText value="#{orderItem.quantity}">
        <f:validateLongRange minimum="1" maximum="100" />
    </h:inputText>
f:validateLongRange Проверяет, что значение для родительского компонента является экземпляром java.lang.Long, величина которого находится в диапазоне между значениями, определенными атрибутами minimum и maximum тега.
    <h:inputText value="#{user.phoneNumber}">
        <f:validateRegex pattern="\d{3}-\d{3}-\d{4}" />
    </h:inputText>
f:validateRegex Проверяет, что значение родительского тега соответствует регулярному выражению, указанному в его атрибуте pattern.
    <h:inputText value="#{user.login}">
        <f:validateRequired />
    </h:inputText>
f:validateRequired Проверяет, что пользователь ввел значение в родительский компонент ввода. Этот тег эквивалентен установке атрибута required в значение true в компоненте ввода.
    <h:inputText label="Email" value="#{user.email}">
        <f:validator validatorId="emailValidator" />
    </h:inputText>
f:validator Проверяет значения родительского компонента с использованием пользовательского элемента верификации, реализующего интерфейс javax.faces.validator.Validator. Пользовательский элемент проверки допустимости должен быть или декорирован аннотацией @FacesValidator, или обьявлен в дескрипторе конфигурации приложения - файле faces-config.xml.
    <h:inputText value="#{orderItem.quantity}">
        <f:valueChangeListener type="net.ensode.
                               CustomValueChangeListener" />
    </h:inputText>
f:valueChangeListener Регистрирует экземпляр класса, реализующего интерфейс javax.faces.event.ValueChangeListener в родительском компоненте. Реализация ValueChangeListener реализует метод processValueChange(), который может выполнить действие, если значение родительского компонента изменяется.
    <f:view>
        <f:verbatim><p></f:verbatim>
            This text inside HTML-tag "p"
        <f:verbatim></p></f:verbatim>
    </f:view>
f:verbatim Содержимое этого тега передается "как есть" в отображаемую страницу. До JSF 1.2 не рекомендовалось помещать HTML-теги внутри JSF-тега f:view, так как они иногда неправильно отображались. Общим обходным решением для этого ограничения было помещение стандартных HTML-тегов в теги f:verbatim. Начиная с JSF 1.2, а также при использовании фэйслетов этот тег является избыточным, поскольку теперь можно безопасно помещать стандартные HTML-теги в JSF-теги страницы.
    <f:view>
        <h:outputText
            escape="true"
            value=" All JSF components only inside
            f:view tag" />
    </f:view>
f:view Этот тег является родительским тегом для всех тегов JSF - и стандартных, и пользовательских.
    <f:metadata>
        <f:viewParam name="someName" 
                     value="#{bean.property}" />
    </f:metadata>
f:viewParam Этот тег используется для отображения параметра HTTP-запроса GET на свойство управляемого бина. Значение его атрибута name должно соответствовать наименованию параметера, а значение его параметра value должно быть выражения связывания, соответствующим значению управляемого бина, которого будет заполнено параметром запроса.

HTML-компоненты JSF

HTML-компоненты отвечают за рендеринг разметки результирующей web-страницы.
Тег Описание

                
h:body Отображает тело страницы. Этот тег походит на стандартный html-тег body.

                
h:button Подобен тегу h:commandButton. Тем не менее кнопки, отображаемые с помощью этого тега, генерируют HTTP-запрос GET при переходе на целевую страницу.
<h:dataTable value="#{Order.items}" var="item">
    <h:column>
        <f:facet name="header">
            <h:outputText value="Element Number" />
        </f:facet>
        <h:outputText value="#{item.itemNumber}" />
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Element Description" />
        </f:facet>
        <h:outputText value="#{item.itemDescription}" />
    </h:column>       
</h:dataTable>
h:column Этот тег обычно вкладывается в тег h:dataTable. Любые компоненты в этом теге будут отображаться как одиночный столбец в таблице, отображаемой тегом h:dataTable.
    <h:form>
        <h:inputText label="Name" value="#{user.name}" />
        <h:commandButton action="Save" value="Click and Save" />
    </h:form>
h:commandButton Отображает HTML-кнопку отправки (Submit) на отображаемой странице.
    <h:form>
        <h:inputText label="Name" value="#{user.name}" />
        <h:commandLink action="Save" value="Click and Save" />
    </h:form>
h:commandLink Отображает ссылку, которая отправляет форму, определенную родителем этого тега — тегом h:form
<h:dataTable value="#{Order.items}" var="item">
    <h:column>
        <f:facet name="header">
            <h:outputText value="Element Number" />
        </f:facet>
        <h:outputText value="#{item.itemNumber}" />
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:outputText value="Element Description" />
        </f:facet>
        <h:outputText value="#{item.itemDescription}" />
    </h:column>      
</h:dataTable>
h:dataTable Выполняет динамическое построение таблицы на основе коллекции. Коллекция, содержащая значения, должна быть определена атрибутом value тега.

                
h:form Отображает HTML-форму на сгенерированной странице.

                
h:graphicImage Отображает HTML-тег img.

                
h:head Специфичная для JSF версия стандартного HTML-тега head.

                
h:inputHidden Отображает скрытое поле HTML.
    <h:inputSecret
        redisplay="false"
        value="#{user.password}" />
h:inputSecret Отображает поле ввода HTML input password для ввода пароля.

                
h:inputText Отображает поле ввода HTML input text.

                
h:inputTextarea Отображает поле ввода HTML textarea

                
h:link Подобен тегу h:commandLink. Однако ссылка, используемая этим тегом, генерирует HTTP-запрос GET при перемещении к целевой странице.
<table>
    <tr>
        <td>
            <h:outputLabel
                value="Your name"
                for="loginField" />
        </td>
        <td>
            <h:inputText
                id="loginField"
                value="#{user.login}"
                required="true" />
        </td>
        <td>
            <h:message for="loginField" />
        </td>
    </tr>
</table>
h:message Отображает сообщения для одного компонента. Компонент для отображения сообщений должен использовать свой атрибут id для установки собственного идентификатора, который затем должен использоваться в качестве атрибута for этого элемента.
    <f:view>
        <h:messages />
        <h:form>
            <!-- something here -->
        </h:form>
    </f:view>
h:messages Выводит сообщения для всех компонентов или глобальных сообщений. Если атрибут globalOnly тега будет установлен в значение true, на экран будут выведены только глобальные сообщения — сообщения, не относящиеся к какому-либо компоненту.
    <h:outputFormat value="Helloo, {0}!">
        <f:param value="#{user.firstName}" />
    </h:outputFormat>
h:outputFormat Отображает параметризованный текст. Параметры в атрибуте value этого тега определяются способом, подобным тому, которым они определяются в пакете ресурса, то есть путем размещения целых чисел между фигурными скобками, в местах, где должны быть расположены параметры. Параметры заменяются значениями, определенными в любом дочернем элементе f:param

                
h:outputLabel Отображает HTML-поле label
    <h:outputLink value="http://yandex.ru">
        <h:outputText value="Its Russian Search Engine" />
    </h:outputLink>
h:outputLink Отображает HTML-ссылку как anchor-элемент с атрибутом href.

                
h:outputScript Используется для загрузки файла JavaScript из стандартного расположения ресурса.

                
h:outputStylesheet Используется для загрузки таблицы стилей CSS из стандартного расположения ресурса.

                
h:outputText Если атрибуты dir, lang, style или styleClass определены, этот тег отображает элемент HTML span, содержащий атрибут value. В противном случае значение, определенное атрибутом value тега, отображается так, чтобы избежать любых символов XML/HTML — чтобы они отображались должным образом. Если атрибут escape тега устанавливается в значение false, то символы XML/HTML не игнорируются.
    <h:panelGrid columns="2"
                 columnClasses="rightAlign, leftAlign">
        <h:outputText value="Name" />
        <h:inputText label="Name"
                     value="#{user.firstName}"
                     required="true" />
        <f:validateLength minimum="2" maximum="100" />
        <h:outputText value="Name" />
        <h:inputText label="LastName"
                     value="#{user.lastName}"
                     required="true" />
        <f:validateLength minimum="2" maximum="100" />        
    </h:panelGrid>
h:panelGrid Отображает статическую HTML-таблицу. Число столбцов в таблице указывается в атрибуте columns тега. Дочерние компоненты будут добавляться к последующей строке, как только к текущей строке будет добавлено число элементов, определенное в атрибуте columns.

                
h:panelGroup Используется для группировки его дочерних компонентов в единую ячейку родительского тега h:panelGrid или h:dataTable. Может также использоваться для создания "пустой" ячейки в родительском теге h:panelGrid.
    <h:selectOneRadio value="#{order.selectedItem}">
        <f:selectItems value="#{valueContainer.allItems}" />
    </h:selectOneRadio>
h:selctOneRadio Отображает серию связанных переключателей. Значения для выбора пользователем определяются в любом дочернем теге f:selectItem или f:selectItems.
    <h:selectBooleanCheckbox value="user.newsletterOK" />
    <h:outputText value="Do you want to get our news?" />
h:selectBooleanChekbox Отображает единичное поле ввода HTML input checkbox. Атрибут value для этого тега обычно устанавливается в значение выражение связывания, отображаемое на булево свойство в управляемом бине.
    <h:selectManyCheckbox value="#{order.items}">
        <f:selectItems value="#{valueContainer.allItems}" />
    </h:selectManyCheckbox>
h:selectManyCheckbox Отображает серию связанных флажков. Значение для выбора пользователем определяются в любом дочернем теге f:selectItem или f:selectItems
    <h:selectManyListbox value="#{order.items}">
        <f:selectItems value="#{valueContainer.allItems}" />
    </h:selectManyListbox>
h:selectManyListbox Отображает HTML-поле select переменного размера, которое допускает множественные выборы. Значения для выбора пользователем определяются в любом дочернем теге f:selectItem или f:selectItems. Число элементов, одновременно выводимое на экран, устанавливается атрибутом size тега.
    <h:selectManyMenu value="#{order.items}">
        <f:selectItems value="#{valueContainer.allItems}" />
    </h:selectManyMenu>
h:selectManyMenu Отображает HTML-поле select, которое допускает множественные выборы. Значения для выбора пользователем определяются в дочернем теге f:selectItem или f:selectItems. Этот тег идентичен тегу h:selectManyListBox за исключением того, что он всегда выводит на экран один элемент за один раз. Поэтому у него нет атрибут size.
    <h:selectOneListbox value="#{order.selectedItem}">
        <f:selectItems value="#{valueContainer.allItems}" />
    </h:selectOneListbox>
h:selectOneListbox Отображает HTML-поле выбора переменного размера, не допускающее множественных выборов. Значения для выбора пользователем определяются в любом дочернем теге f:selectItem или f:selectItems. Число элементов, выведенное на экран одновременно, устанавливается атрибутом size тега, который является необязательным. Если атрибут size не установлен, то все элементы выводятся на экран одновременно.
    <h:selectOneMenu value="#{order.selectedItem}">
        <f:selectItems value="#{valueContainer.allItems}" />
    </h:selectOneMenu>
h:selectOneMenu Отображает "выпадающее меню" HTML, предназначенное для отображения HTML-поля select, которое не допускает множественных выборов. Только один элемент выводится на экран за один раз. Значения для выбора пользователем определяются в любом дочернем теге f:selectItem или f:selectItems.