2.3 Реализация тестового примера средствами JSF
Учебная цель данного подраздела — изучить базовые средства практического использования компоненты JSF.
Важность практического изучения возможностей JSF связана с явным подобием ее функциональной архитектуры, видимой клиентом Web-приложе- ния и бизнес-парадигмой модели SOA, представленной в предыдущей главе на рисунке 1.12 (см. стр. 32). Действительно, клиент JSF-приложения обращается к Web-приложению посредством указания URI-ресурса в виде файла XHTML, который (на основе Facelets-шаблона) отражает «Представление», скрытого за ним, бизнес-приложения. Аналогично, бизнес-руководитель предприятия к биз- нес-функции уровня приложений, «Представлению» уровня бизнес-логики. Таким образом, технология Web-приложений на основе компоненты JSF — явный кандидат на технологию реализации уровня бизнес-логики предприятия.
Если рассматривать учебный процесс данной дисциплины в интерпретации функционирования предприятия, то учебный материал данного подраздела — это формирование и реализация уровня бизнес-логики такого предприятия.
2.3.1 Создание Facelets-шаблона изучаемой дисциплины
Базовым ресурсом Facelets-компонент являются XHTML-файлы.
Новый шаблон Facelets-компонент создадим по общей схеме предыдущего шаблона, как это приведено в таблице 2.5.
Обратите внимание, что:
а) все компоненты шаблона представлены файлами в XHTML-формате;
б) имена компонент шаблона отличаются от имен старого шаблона только цифрой и располагаются в тех же каталогах;
в) зеленым цветом выделены статические компоненты, не требующие новых знаний;
г) синим цветом выделены компоненты, использующие ссылки; д) красным цветом выделена компонента, использующая список.
85
Таблица 2.5 - Facelets-компонент нового шаблона
Компонента |
Описание |
lab3Templ.xhtml |
Базовый шаблон. Листинг 2.8. |
header3.xhtml |
Заголовок учебной дисциплины. Листинг 2.9. |
subheader3.xhtml |
Вид занятия. Листинг 2.10. |
footer3.xhtml |
Концевик приложения. Листинг 2.11. |
welcome3.xhtml |
Контекст приложения. Основной перезагружаемый компо- |
|
нент. Листинг 2.12. |
menus3.xhtml |
Компонента боковой страницы. Листинг 2.13. |
lab3.xhtml |
Дополнительный ресурс. Листинг 2.14. |
auth3.xhtml |
Дополнительный ресурс. Листинг 2.15. |
default.xhtml |
Доступный ресурс по умолчанию. Листинг 2.16. |
Листинг 2.8 — Базовый шаблон lab3Templ.xhtml проекта labs
<?xml version="1.0" encoding="UTF-8" ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Новый шаблон labs</title>
</head>
<body>
<div id="header"> <ui:insert name="header">
<ui:include src="/WEB-INF/templates/header3.xhtml"/> </ui:insert>
</div>
<div id="subheader"> <ui:insert name="subheader">
<ui:include src="/WEB-INF/templates/subheader3.xhtml"/> </ui:insert>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr>
<td id="menus" valign="top" width="1px">
<ui:insert name="menus">
<ui:include src="/WEB-INF/templates/menus3.xhtml"/> </ui:insert>
</td>
86
<td id="context" valign="top">
<ui:insert name="content">
<ui:include src="/WEB-INF/templates/welcome3.xhtml"/> </ui:insert>
</td> </tr> </table>
<div id="footer"> <ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer3.xhtml"/> </ui:insert>
</div>
</body> </html>
В листинге 2.8 комментировать нечего, поскольку в нем изменены только ссылки на компоненты, согласно именам таблицы 2.5.
Листинг 2.9 — Заголовок учебной дисциплины header3.xhtml проекта labs
<?xml version="1.0" encoding="UTF-8" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Заголовок</title>
</head> <body>
<div
</div> </body> </html>
align="center" style="width:100%;font-size:26px;line-height:28px; background-color:navy;color:white;padding:10px"> Распределенные сервис-ориентированные системы
В листинге 2.9 изменен только текст и размер шрифта.
Листинг 2.10 — Вид занятия subheader3.xhtml проекта labs
<?xml version="1.0" encoding="UTF-8" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Вид занятий</title>
</head> <body>
<div style="background-color:gray;width:100%;
87
color:white;padding:5px"> Лабораторные работы
</div> </body> </html>
В листинге 2.10 изменен только текст.
Для навигации между ресурсами без помощи конпонент-подложек используются тегицелей из библиотеки тегов http://xmlns.jcp.org/jsf/html (см. таблицу 2.3 на стр. 79), которые определенны в таблице 2.6.
Таблица 2.6 — Теги целей [17]
Тег |
Описание |
<h:button> |
Отрисовывает элемент ввода данных HTML для |
|
кнопки, при нажатии на которую создается HTTP-запрос GET. |
<h:link> |
Отрисовывает элемент привязки HTML <a>, при нажатии на |
|
которую создается HTTP-запрос GET. |
Формат использования этих тегов — смотри в листингах 2.11 и 2.12.
Листинг 2.11 — Концевик приложения footer3.xhtml проекта labs
<?xml version="1.0" encoding="UTF-8" ?>
<!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:h="http://xmlns.jcp.org/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Концевик приложения</title>
</head> <body>
<div style="background-color:gray;width:100%;color:white; padding:20px;font-style:italic">
Учебный программный комплекс "УПК АСУ" <br/> Преподаватель: В.Г. Резник <br/>
<h:link outcome="default.xhtml" value="Перейти на главную..."/>
</div>
</body> </html>
Листинг 2.12 — Контекст приложения welcome3.xhtml проекта labs
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
88
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert title here</title>
</head> <body>
<div align="center" style="color:black; width:100%; padding:10px"> <h2>Приветствуем Вас на сайте дисциплины РСОС!</h2>
<p><a href="http://localhost:8080/test/TestTomee"> Запуск тестового примера...</a></p>
<p><h:link outcome="index.xhtml"
value="Показать базовый шаблон..."/> </p>
<p><h:link outcome="lab3.xhtml" value="Лабораторная работа №3"/> </p>
<p><h:button outcome="auth3.xhtml" value="На авторизацию..."/> </p>
</div> </body> </html>
Для удобного ввода информации используется набор тегов-выбора, основанных на двух базовых библиотеках тегов http://xmlns.jcp.org/jsf/html и http://xmlns.jcp.org/jsf/core.
Перечень указанных тегов-выбора представлен в таблице 2.7.
Таблица 2.7 — Теги-выбора [17]
Тег |
Описание |
<h:selectBooleanCheckbox> |
Отображается один флажок, представляющий двоичное |
|
значение. Флажок будет установлен в зависимости от |
|
значения свойства. |
<h:selectManyCheckbox> |
Отрисовывается список флажков. |
<h:selectManyListbox> |
Отрисовывается компонент множественного выбора, где |
|
могут быть выбраны один или несколько вариантов. |
<h:selectManyMenu> |
Отрисовывается HTML-элемент <select>. |
<h:selectOneListbox> |
Отрисовывается компонент одиночного выбора, где может |
|
быть выбран только один вариант. |
<h:selectOneMenu> |
Отрисовывается компонент одиночного выбора, где может |
|
быть выбран только один вариант. Показывает только один |
|
доступный вариант в любой момент времени. |
<h:selectOneRadio> |
Отрисовывает список переключателей. |
89
Следует заметить, что теги-выбора, имея стилизованное графическое представление, предназначены для ввода бизнес-информации и для нормального использования привязывается к компоненте-подложке (бизнес-модели).
В данном пункте, мы создаем Facelets-шаблон изучаемой дисциплины или, другими словами, - уровень бизнес-логики предприятия, который еще не привязан к бизнес модели.
Далее, на листинге 2.13 представлена компонента menus.xhtml, которая в декоративной форме выводит список лабораторных работ с помощью тега
<h:selectOneListbox>.
Листинг 2.13 — Компонента боковой страницы menus3.xhtml проекта labs
<?xml version="1.0" encoding="UTF-8" ?>
<!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:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Боковая страница</title>
</head> <body>
<div style="background-color:lightgray; color:black;padding:10px">
<b>Список работ</b> <hr/>
<h:selectOneMenu>
<f:selectItem itemLabel="Работа №1"/> <f:selectItem itemLabel="Работа №2"/> <f:selectItem itemLabel="Работа №3"/> <f:selectItem itemLabel="Работа №4"/> <f:selectItem itemLabel="Работа №5"/> <f:selectItem itemLabel="Работа №6"/> <f:selectItem itemLabel="Работа №7"/> <f:selectItem itemLabel="Работа №8"/> <f:selectItem itemLabel="Работа №9"/> </h:selectOneMenu> <hr/>
</div> </body> </html>
Далее представлены листинги двух ресурсов lab3.xhtml и lab3.xhtml, которые будут задействованы в следующих пунктах данного подраздела, а здесь участвуют в качестве демонстрационного заполнения.
90
Листинг 2.14 — Доступный пользователю ресурс lab3.xhtml проекта labs
<?xml version="1.0" encoding="UTF-8" ?>
<!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://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Приложение lab3</title>
</head> <body>
<ui:composition template="/WEB-INF/templates/lab3Templ.xhtml"> <ui:define name="context">
Работа lab3 еще не сделана! </ui:define>
</ui:composition>
</body> </html>
Листинг 2.15 — Доступный пользователю ресурс auth3.xhtml проекта labs
<?xml version="1.0" encoding="UTF-8" ?>
<!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://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Приложение auth3</title>
</head> <body>
<ui:composition template="/WEB-INF/templates/lab3Templ.xhtml"> <ui:define name="context">
Работа auth3 еще не сделана! </ui:define>
</ui:composition>
</body> </html>
Прямой доступ к новому Facelets-шаблону осуществляется с помощью ресурса default.xhtml, представленного на следующем листинге.
Листинг 2.16 — Доступный пользователю ресурс default.xhtml проекта labs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
91
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xml:lang="ru">
<ui:composition template="/WEB-INF/templates/lab3Templ.xhtml"> <!--
<ui:define name="menus"></ui:define>
--> </ui:composition>
</html>
Теперь в рапоряжении имеются все компоненты. Запуск файла ресурса default.xhtml покажет нам новый Facelets-шаблон с вполне функциональной заставкой приветствия (см. рисунок 2.20).
Рисунок 2.20 — Новый Facelets-шаблон учебной дисциплины
Обратите внимание, что, если в листинге 2.16 убрать комментарий, то боковая панель показана не будет.
92