Одна из интересных вещей в JSF 2.0 - это компоненты. С помощью них, можно разделить
пользовательский интерфейс на небольшие составные части, которые в последствии можно использовать в других проектах; их проще писать и проще редактировать, так же они позволяют придерживаться принципа DRY - Don't Repeat Yourself и экономят этим время разработки.
Сделаем простой компонент "login", что он будут из себя представлять? - Простую форму входа на сайт. И так приступим, Создадим новый maven проект в netbeans и назовём его "mysimplecomponents", далее как и раньше удаляем index.jsp, создаём main.xhtml, page1.xhtml (пока что их не трогаем), faces-config, управляемый компонент JSF(UserBean) и наш составной компонент
login(Ctrl+N-> JavaServer Faces -> Составной компонент JSF, назовём его login и нажмём "готово").
Первоначально он выглядит так:
Теперь собственно опишем интерфейс компонента:
С помощь тега "<cc:attribute>" мы и описываем интерфейс, задаём имя атрибута с помощью "name", для последующего обращения к нему и так же можно указать значение default, которое будет отображаться если его потом не переопределить.
method-signature - сообщит реализащии JSF, что значение атрибута представляет собой строку(String).
С помощью атрибута "type" можно задать любой тип (например: <cc:attribute name="date" type="java.util.Date")
Реализуем интерфейс:
Как видишь, тут реализована обычная, простая форма входа на сайт, в качестве значений используются атрибуты интерфейса, доступ к ним осуществляется в помощью выражения:
#{cc.attrs.attributeName}
Далее опишем UserBean, он будет выглядеть следующим образом:
Теперь когда у нас есть все заготовки, перейдём к вставке компонента в main.xhtml:
Пространство имён для компонента определяется следующим образом
xmlns:util="http://java.sun.com/jsf/composite/ezcomp"
В качестве обозначения пространства можно использовать любое имя(у нас "util"),
значение обязательно должно быть "http://java.sun.com/jsf/composite/",
ezcomp - это папка в которой находится компонент.
Когда вставляем компонент, мы определяем, некоторые, его значения; например в качестве атрибута name, указываем значение UserBean - name,
атрибут password - принимает значение UserBean- password,
loginAction - соответсвенно UserBean-login();.
<h:outputText value="#{userBean.message}"/> - будет выводить сообщение на странице, если пользователь ввёл неверно имя или пароль.(не является часть компонента).
В page1.xhtml добавим следующее:
И собственно faces-config:
Кстати, не забываем про web.xml, он должен выглядеть так:
Билдим, скидываем на сервер и смотрим, что получилось =).
P.S.: на всякий случай
архив проекта.
пользовательский интерфейс на небольшие составные части, которые в последствии можно использовать в других проектах; их проще писать и проще редактировать, так же они позволяют придерживаться принципа DRY - Don't Repeat Yourself и экономят этим время разработки.
Сделаем простой компонент "login", что он будут из себя представлять? - Простую форму входа на сайт. И так приступим, Создадим новый maven проект в netbeans и назовём его "mysimplecomponents", далее как и раньше удаляем index.jsp, создаём main.xhtml, page1.xhtml (пока что их не трогаем), faces-config, управляемый компонент JSF(UserBean) и наш составной компонент
login(Ctrl+N-> JavaServer Faces -> Составной компонент JSF, назовём его login и нажмём "готово").
Первоначально он выглядит так:
Теперь собственно опишем интерфейс компонента:
С помощь тега "<cc:attribute>" мы и описываем интерфейс, задаём имя атрибута с помощью "name", для последующего обращения к нему и так же можно указать значение default, которое будет отображаться если его потом не переопределить.
method-signature - сообщит реализащии JSF, что значение атрибута представляет собой строку(String).
С помощью атрибута "type" можно задать любой тип (например: <cc:attribute name="date" type="java.util.Date")
Реализуем интерфейс:
Как видишь, тут реализована обычная, простая форма входа на сайт, в качестве значений используются атрибуты интерфейса, доступ к ним осуществляется в помощью выражения:
#{cc.attrs.attributeName}
Далее опишем UserBean, он будет выглядеть следующим образом:
Теперь когда у нас есть все заготовки, перейдём к вставке компонента в main.xhtml:
Пространство имён для компонента определяется следующим образом
xmlns:util="http://java.sun.com/jsf/composite/ezcomp"
В качестве обозначения пространства можно использовать любое имя(у нас "util"),
значение обязательно должно быть "http://java.sun.com/jsf/composite/",
ezcomp - это папка в которой находится компонент.
Когда вставляем компонент, мы определяем, некоторые, его значения; например в качестве атрибута name, указываем значение UserBean - name,
атрибут password - принимает значение UserBean- password,
loginAction - соответсвенно UserBean-login();.
<h:outputText value="#{userBean.message}"/> - будет выводить сообщение на странице, если пользователь ввёл неверно имя или пароль.(не является часть компонента).
В page1.xhtml добавим следующее:
И собственно faces-config:
Кстати, не забываем про web.xml, он должен выглядеть так:
Билдим, скидываем на сервер и смотрим, что получилось =).
P.S.: на всякий случай
архив проекта.








Комментариев нет:
Отправить комментарий