<title>Ведение базы данных веб-приложения</title> </h:head>
<h:body>
<f:view>
<h:outputLabel value="Таблицы БД" styleClass="graclrtxt"/> <h:form>
<h:commandLink action="citiesPage"> <h:outputText value="Города" />
</h:commandLink>
<br/>
<h:commandLink action="personsPage"> <h:outputText value="Люди" />
</h:commandLink>
<br/>
<h:commandLink action="staffsPage"> <h:outputText value="Работники" />
</h:commandLink>
<br/>
</h:form>
<h:outputText value="Для просмотра и
редактирования данных выбрать таблицу в меню. Таблицы появляются в отдельном окне.
Для выполнения требуемой операции нужно перейти по ссылке."/>
</f:view>
</h:body>
</html>
Упражнения
1.Почему в генерированном средой XHTML-файле нет объявлений всех библиотек?
2.Как разделено участие в проекте администратора баз данных, программиста и дизайнера? Какие согласования они должны произвести?
18.6.Страница просмотра записей таблицы городов
Создание новой страницы производится кликом правой кнопки мыши по узлу
Web Pages с выбром из меню «Новый – XHTML» и заданием имени страницы в диа-
логовом окне помощника.
Следующая страница выдает обзорную таблицу городов. Здесь клиент должен
иметь возможность добавлять новые записи, удалять и редактировать существующие. Особенности протокола http, который обеспечивает связь клиентского браузера с сер-
вером, таковы, что для выполнения любой работы на сервере ему надо послать за-
прос. Инструментом для посылки запроса обычно являются ссылки и кнопки. Поэтому
для выполнения операций правки и удаления записи необходимо в каждой строке поместить две командные ссылки: «Заменить» и «Удалить». При этом соответствующему обработчику команды нужно передать сам объект (сущность), над которым нужно произвести операцию.
223
Просмотр записей удобно выполнять с использованием тега dataTable. Его атрибут value="#{citiesView.allOfCities}" задаёт свойство allOfCities, содержащее список
конвертированных в объекты класса Cities прочитанных из таблицы БД записей. Тег dataTable циклически просматривает объекты списка, передавая его в переменную с
именем city, задаваемым атрибутом var="city". Свойства объекта раскладываются по
столбцам таблицы, вложенным в dataTable тегом с интуитивно понятным содержанием. Здесь есть заголовок столбца, задаваемый тегом facet и содержимое поля записи,
задаваемое тегом outputText с атрибутом value, указывающим свойство объекта для
визуализации, например: value="#{city.idCity}", где city — имя переменной, idCity — имя
свойства.
Таблица имеет дополнительную колонку для размещения командных ссылок на замену и удаление записи. Ссылки выполняются тегом commandLink, а атрибут action="#{citiesView.modCity(city)}" задаёт вызов метода-обработчика modCity для объ-
екта, над которым выполняется операция. Напомним, что city задаётся в цикле по объ-
ектам списка в теге dataTable.
Команда на добавление новой записи выполняется ссылкой <h:commandLink action="cityAddPage"> <h:outputText value="Добавить" /> </h:commandLink>, вызыва-
ющей страницу cityAddPage.xhtml для выдачи клиенту формы ввода данных.
Файл citiesPage.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Просмотр таблицы городов</title> </head>
<body>
<f:view>
<table border="1" width="100%"> <tr>
<td><h:outputLabel value="Города. Всего записей "/> <h:outputText value="#{citiesView.numberOfCities}"/>
</td>
</tr>
<tr>
<td>
<h:form>
<h:dataTable value="#{citiesView.allOfCities}" var="city" border="1">
224
<h:column>
<f:facet name="header"> <h:outputText value="Ключ"/>
</f:facet>
<h:outputText value="#{city.idCity}"/> </h:column>
<h:column>
<f:facet name="header"> <h:outputText value="Название"/>
</f:facet>
<h:outputText value="#{city.name}"/> </h:column>
<h:column>
<f:facet name="header"> <h:outputText value="Население"/>
</f:facet>
<h:outputText value="#{city.population}"/> </h:column>
<h:column>
<f:facet name="header"> <h:outputText value="Операции"/>
</f:facet>
<h:commandLink
action="#{citiesView.modCity(city)}">
<h:outputText value="Заменить" /> </h:commandLink>
<h:commandLink
action="#{citiesView.delCity(city)}">
<h:outputText value="Удалить" /> </h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</td>
</tr>
<tr>
<td>
<h:form>
<h:commandLink action="cityAddPage"> <h:outputText value="Добавить" />
</h:commandLink>
<h:commandLink action="index">
<h:outputText value="На главную" /> </h:commandLink>
</h:form>
</td>
</tr>
</table>
</f:view>
</body>
</html>
225
Упражнения
1.Создайте страницу ввода с использованием палитры (кнопка «Палитра» справа вверху окна). Выберите JSF Data Table From Entity и отбуксируйте левой кнопкой в нужную точку формируемой страницы. Заполните поля Entity и Manage Bean Property, выбирая из списка нужный класс и свойство. Вставленный фрагмент
выглядит так:
<h:form>
<h1><h:outputText value="List"/></h1>
<h:dataTable value="#{citiesView.allOfCities}" var="item"> <h:column>
<f:facet name="header"> <h:outputText value="IdCity"/>
</f:facet>
<h:outputText value="#{item.idCity}"/> </h:column>
<h:column>
<f:facet name="header"> <h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{item.name}"/> </h:column>
<h:column>
<f:facet name="header"> <h:outputText value="Population"/>
</f:facet>
<h:outputText value="#{item.population}"/> </h:column>
</h:dataTable>
</h:form>
Доработайте фрагмент для получения требуемой функциональности.
2.Почему все страницы содержат теги view и form?
3.Как отсортировать список сущностей по ключу или по названию города?
18.7.Страница добавления записей о городах
При добавлении новой записи клиенту необходимо предоставить форму ввода
реквизитов города и две командные кнопки на подтверждение сохранения введенных
данных и отмену записи. При отмене записи нужно вернуться к обзорной таблице,
создаваемой файлом citiesPage.xhtml. При подтверждении сохранения в базе данных
нужно вызвать метод-обработчик citiesView.saveCity, который вызовом метода фасада create сохранит объект как запись в базе данных.
Ввод свойства объекта производится тегом inputText с атрибутом value, опреде-
ляющим, где взять начальное значение и куда поместить введенные клиентом данные, например:
<h:inputText value="#{citiesView.city.name}"/>
где citiesView – имя объекта-вида сущностей;
226
city – имя свойства объекта citiesView, которое содержит объект класса Cities, созданный конструктором вида в строке this.city = new Cities(null, "", 0);
name – имя свойства объекта класса Cities, где хранится значение поля.
Файл cityAddPage.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Добавление города в таблицу</title> </head>
<body>
<f:view>
<table border="1" width="100%"> <tr>
<td>
<h:form>
<table>
<tr>
<td><h:outputLabel value="Название:"/> </td> <td><h:inputText
value="#{citiesView.city.name}"/> </td>
</tr>
<tr>
<td><h:outputLabel value="Население:"/></td> <td><h:inputText
value="#{citiesView.city.population}"/></td>
</tr>
<tr>
<td>
<h:commandButton
action="#{citiesView.saveCity}" value="Добавить" />
<h:commandButton
action="citiesPage" value="Отменить" />
</td>
</tr>
</table>
</h:form>
</td>
</tr>
227