Курс по инструментам JSF - компоновка приложения JSF 2.0

Резюме
В данном учебнике мы скомпонуем и выполним приложение JSF 2.0 и уделим особое внимание функциям, предоставляемым проектом инструментов JSF.

Введение

Проект Инструменты JSF предоставляет инструменты, упрощающие привязку веб-приложений JSF 2.0. К ним относятся усовершенствованный редактор исходного кода HTML, содержащий помощник по работе с содержимым и средство проверки тегов JSF. В этом учебнике мы создадим и выполним веб-приложение JSF 2.0. На странице Новое и заслуживающее внимание перечислены все доступные функции инструментов, предназначенные для разработки веб-приложения JSF 2.0.


Настройка

Настройте экземпляр Apache Tomcat Server

Настройте экземпляр Apache Tomcat Server, руководствуясь информацией из раздела 'Настройка' настоящего учебника, Компоновка и выполнение веб-приложения.

Создайте проект JavaServer Faces

Создайте новое динамическое веб-приложение с именем JSFFaceletsTutorial. Укажите Apache Tomcat 6.0 в качестве целевой среды выполнения
В разделе Конфигурация нажмите кнопку Изменить и выберите вкладку “JavaServer Faces 2.0”. Пропустите следующую панель и перейдите к странице Возможности JSF.



Новое динамическое
веб-приложение Вкладки проекта

На странице Возможности JSF из выпадающего списка Тип библиотеки JSF выберите Пользовательская библиотека.

Страница Возможности
JSF


Щелкните на значке Загрузить библиотеку. Появится окно диалога Загрузка библиотеки со списком провайдеров файлов JAR реализации JSF. Выберите библиотеку JSF 2.0 (Mojarra). Нажмите Далее. Включите переключатель согласия с условиями лицензии и нажмите кнопку Готово

Страница Возможности
JSF


Этот инструмент загружает файлы JAR, создает пользовательскую библиотеку JDT и добавляет ее в текущий проект. Включите переключатель этой новой библиотеки, если он не включен. Затем щелкните на значке Управлять библиотеками.

Страница Возможности
JSF

Нажмите кнопку Закончить, чтобы завершить создание приложения JavaServer Faces. После завершения вам может быть предложено выбрать проекцию J2EE. Нажмите OK.

Приложение JSF создано.


Создать страницы шаблонов Facelets

Теперь вы создадите страницу шаблонов Facelets. Создайте папку templates в папке WEB-INF. С помощью мастера HTML создайте страницу шаблонов BasicTemplate.xhtml в этой папке. Щелкните правой кнопкой мыши на папке template и выберите Создать » HTML для запуска мастера HTML. На странице Выбрать шаблоны мастера выберите шаблон Новый шаблон Facelet. Нажмите кнопку Готово.

Создать шаблон Facelets

Отредактируйте файл шаблона согласно инструкциям шаблона. Вы создадите шаблоны верхнего и нижнего колонтитулов и включите их в файл шаблона. Окончательный вариант файла шаблона должен иметь следующий вид:



BasicTemplate.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">
<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. Внесите изменения в шаблоны, как показано ниже.



Шаблон Facelets

Создайте страницу JSF

Создайте страницу 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>


Проверка атрибутов тегов Facelets и Помощник по работе с содержимым

Проект Инструменты JSF добавляет поддержку проверки атрибутов тегов Facelets, а также Помощник по работе с содержимым для них. Обратите внимание на предупреждение в атрибуте template тега <ui:composition>.



Проверка атрибута тега Facelets

Поместите курсор между двойными кавычками атрибута template и нажмите Ctrl + пробел, чтобы открыть Помощник по работе с содержимым. Появится всплывающий список каталогов из папки Веб-содержимое. Выберите /WEB-INF/templates/BasicTemplate.xhtml.



Помощник по работе с содержимым для атрибутов тегов
Facelets


Закончите страницу JSF

Удалите теги <ui:define> для верхнего и нижнего колонтитулов. Страница будет получать верхний и нижний колонтитулы из шаблона. Добавьте теги для входа в систему в раздел content, как показано ниже. Учтите, что текущий выпуск проекта Инструменты JSF не поддерживает отображение страницы XHTML в редакторе веб-страниц JSF. Однако все рабочие функции, присутствующие на странице исходного кода редактора веб-страниц и предназначенные для редактирования страницы JSP, доступны в редакторе исходного кода HTML и могут применяться для компоновки страницы JSF Facelets в XHTML.



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="/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>

Настройте управляемый объект EJB

В Структуре проектов разверните узел >WebContent. Дважды щелкните на faces-config.xml. Эта команда запустит редактор конфигурации Faces. Выберите вкладку Управляемый объект.

Управляемый объект EJB редактора конфигурации Faces

Нажмите кнопку Добавить. В результате откроется Мастер создания Управляемых объектов. Выберите опцию Создать класс Java. На следующей панели мастера укажитеcom.tutorial в качестве пакета и LoginBean в качестве имени класса. Нажмите кнопку Готово.
В результате будет создан класс Java, зарегистрированный как управляемый объект. Сохраните изменения в Редакторе конфигурации Faces. Для редактирования класса Java щелкните на гиперссылке Класс управляемого объекта на странице Управляемый объект, как показано на рисунке ниже. Эта команда запустит редактор Java.

Редактор конфигурации Faces - вкладка Управляемый объект


Измените класс Java com.tutorial.LoginBean. Добавьте следующий код и сохраните изменения.

LoginBean.java

/**
 * 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 в Веб-содержимом со следующим содержимым:


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.

Выбор действия для правила
навигации

Теперь правило навигации настроено.

Запустите страницу JSF Facelets

Теперь мы запустим страницу login.xhtml с помощью сервера Apache Tomcat. Выберите в навигаторе страницу login.xhtml и в контекстном меню выберите Запустить на сервере. Выберите ваш сервер Apache Tomcat и настройте его требуемым образом, если вы не сделали этого ранее. Нажмите кнопку Готово. В панели Консоли вы увидите, что сервер Tomcat запускается, а затем в веб-обозревателе будет показана запущенная страница идентификации, как показано ниже.


Поздравляем! Вы создали и выполнили свое первое приложение JSF Facelets.