Резюме
В данном учебнике мы скомпонуем и выполним приложение JSF 2.0 и уделим особое внимание функциям, предоставляемым проектом инструментов JSF.
Проект Инструменты JSF предоставляет инструменты, упрощающие привязку веб-приложений JSF 2.0. К ним относятся усовершенствованный редактор исходного кода HTML, содержащий помощник по работе с содержимым и средство проверки тегов JSF. В этом учебнике мы создадим и выполним веб-приложение JSF 2.0. На странице Новое и заслуживающее внимание перечислены все доступные функции инструментов, предназначенные для разработки веб-приложения JSF 2.0.
Создайте новое динамическое веб-приложение с именем JSFFaceletsTutorial.
Укажите Apache Tomcat 6.0 в качестве целевой среды выполнения
В разделе Конфигурация нажмите кнопку Изменить и выберите вкладку
“JavaServer Faces 2.0”. Пропустите следующую панель и перейдите к странице
Возможности JSF.
На странице Возможности JSF из выпадающего списка Тип библиотеки
JSF выберите Пользовательская библиотека.
Щелкните на значке Загрузить библиотеку. Появится окно диалога Загрузка библиотеки со
списком провайдеров файлов JAR реализации JSF. Выберите библиотеку JSF 2.0 (Mojarra). Нажмите Далее.
Включите переключатель согласия с условиями лицензии и нажмите кнопку Готово
Приложение JSF создано.
Теперь вы создадите страницу шаблонов Facelets. Создайте папку templates в папке WEB-INF. С помощью мастера HTML создайте страницу шаблонов BasicTemplate.xhtml в этой папке. Щелкните правой кнопкой мыши на папке template и выберите Создать » HTML для запуска мастера HTML. На странице Выбрать шаблоны мастера выберите шаблон Новый шаблон Facelet. Нажмите кнопку Готово.
Отредактируйте файл шаблона согласно инструкциям шаблона. Вы создадите шаблоны верхнего и нижнего колонтитулов и включите их в файл шаблона. Окончательный вариант файла шаблона должен иметь следующий вид:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<title><ui:insert name="title">Facelets Tutorial</ui:insert></title>
</head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml"/>
</ui:insert>
</div>
</body>
</html>
Создайте шаблоны верхнего и нижнего колонтитулов в папке template с помощью мастера создания HTML, как описано ниже. На странице Выбрать шаблон мастера выберите соответствующие файлы шаблонов, Новый верхний колонтитул Facelet и Новый нижний колонтитул Facelet. Внесите изменения в шаблоны, как показано ниже.
Создайте страницу JSF с тегами Facelets, которые будут использовать шаблон, созданный на
предыдущем шаге. С помощью мастера страниц HTML создайте страницу с именем login.xhtml в
папке Веб-содержимое нового приложения. На странице Выбрать шаблоны мастера выберите шаблон
Новая составная страница Facelet. Нажмите кнопку Готово.
login.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="">
<ui:define name="header">
Укажите здесь верхний колонтитул, либо удалите, чтобы использовать значение по умолчанию
</ui:define>
<ui:define name="content">
Укажите здесь содержимое, либо удалите, чтобы использовать значение по умолчанию
</ui:define>
<ui:define name="footer">
Укажите здесь нижний колонтитул, либо удалите, чтобы использовать значение по умолчанию
</ui:define>
</ui:composition>
</html>
Проект Инструменты JSF добавляет поддержку проверки атрибутов тегов Facelets, а также Помощник по работе с содержимым для них. Обратите внимание на предупреждение в атрибуте template тега <ui:composition>.
Поместите курсор между двойными кавычками атрибута template и нажмите Ctrl + пробел, чтобы открыть Помощник по работе с содержимым. Появится всплывающий список каталогов из папки Веб-содержимое. Выберите /WEB-INF/templates/BasicTemplate.xhtml.
Удалите теги <ui:define> для верхнего и нижнего колонтитулов. Страница будет получать верхний и нижний колонтитулы из шаблона. Добавьте теги для входа в систему в раздел content, как показано ниже. Учтите, что текущий выпуск проекта Инструменты JSF не поддерживает отображение страницы XHTML в редакторе веб-страниц JSF. Однако все рабочие функции, присутствующие на странице исходного кода редактора веб-страниц и предназначенные для редактирования страницы JSP, доступны в редакторе исходного кода HTML и могут применяться для компоновки страницы JSF Facelets в XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:form>
<h:panelGrid columns="2">
<h:outputText value="Name"></h:outputText>
<h:inputText value="#{loginBean.name}"></h:inputText>
<h:outputText value="Password"></h:outputText>
<h:inputSecret value="#{loginBean.password}"></h:inputSecret>
</h:panelGrid>
<h:commandButton value="Login" action="login"></h:commandButton>
</h:form>
</ui:define>
</ui:composition>
</html>
/**
* LoginBean.java
*
*/
package com.tutorial;
public class LoginBean
{
private String name;
private String password;
public String getName() {
return name;
}
public void setName (final String name)
{
this.name = name;
}
public String getPassword ()
{
return password;
}
public void setPassword (final String password)
{
this.password = password;
}
}
Создайте новую страницу HTML welcome.xhtml в Веб-содержимом со следующим содержимым:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml">
<ui:define name="content">
<h:outputLabel value="Welcome #{loginBean.name}"></h:outputLabel>
</ui:define>
</ui:composition>
</html>
Дважды щелкните на файле faces-config.xml, чтобы открыть редактор конфигурации Faces. Щелкните на вкладке Правило навигации. Теперь перетащите файлы login.xhtml и welcome.xhtml из Структуры проектов в сетку Правила навигации, как показано ниже.
Щелкните на инструменте Ссылка в палитре справа. Теперь перетащите стрелку из login.xhtml в welcome.xhtml, как показано ниже.
Теперь щелкните на стрелке и откройте панель Свойства. Нажмите кнопку с многоточием рядом с полем “Из вывода”.
Выберите “Войти в систему” в этом окне. Нажмите OK.
Теперь правило навигации настроено.
Теперь мы запустим страницу login.xhtml с помощью сервера Apache Tomcat. Выберите в
навигаторе страницу login.xhtml и в контекстном меню выберите Запустить на сервере. Выберите ваш сервер Apache Tomcat и настройте его требуемым образом, если вы не сделали этого
ранее. Нажмите кнопку Готово. В панели Консоли вы увидите, что сервер Tomcat
запускается, а затем в веб-обозревателе будет показана запущенная страница
идентификации, как показано ниже.
Поздравляем! Вы создали и выполнили свое первое приложение JSF Facelets.