Использование привязанных к данным элементов для доступа к базе данных

В данном руководстве описано создание и развертывание с помощью среды IDE NetBeans веб-приложения для просмотра основных/подробных данных из базы данных, поставляемой со средой IDE. В приложении выберите пользователя из раскрывающегося списка JSF 1.2 (Woodstock). Появится таблица, содержащая все записи о поездках данного пользователя.

Перед использованием данного руководства ознакомьтесь с основными элементами среды IDE и прочтите документ Введение в разработку визуальных веб-приложений JSF в среде NetBeans.

Содержание

• Создание страницы с элементом "Drop Down List"
• Подключение элемента к базе данных
• Добавление элемента "Table"
• Изменение запроса SQL
• Управление отображаемыми строками
• Дополнительные упражнения
• Заключение

Для работы с этим руководством требуется программное обеспечение и ресурсы, перечисленные ниже.

* Для получения преимуществ благодаря функциональности Java EE 5 в среде IDE NetBeans используйте сервер приложений, который является полностью совместимым со спецификацией Java EE 5, например, сервер приложений GlassFish V2 UR2. В случае использования другого сервера см. заметки о выпуске и часто задаваемые вопросы для получения информации об известных проблемах и обходных решениях. Для получения подробной информации о поддерживаемых серверах и платформе Java EE см. заметки о выпуске.

Примечание для пользователей среды IDE NetBeans 6.1:

• При создании проекта в NetBeans 6.1 доступны новые параметры, для которых можно оставить значения по умолчанию. Например, флажок Use Dedicated Folder for Storing Libraries может быть оставлен неустановленным.
• В среде IDE NetBeans 6.1 поддерживается привязка по запросу. В тех местах, где элементы требуют написания кода Java, теперь следует вручную добавить атрибут привязки к элементам в визуальном веб-приложении JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

Создание страницы с элементом "Drop Down List"

В этом руководстве создается приложение "Travel Center", показанное на следующем рисунке (пример приложения после развертывания).

Для начала необходимо добавить элемент "Table" и "Drop Down List" к стандартной странице "Page 1.jsp", созданной вместе с новым проектом.

Примечание: В среде IDE NetBeans 6.1 поддерживается привязка по запросу. В тех местах, где элементы требуют написания кода Java, теперь следует вручную добавить атрибут привязки к элементам в визуальном веб-приложении JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

1. Создайте новый проект веб-приложения с названием DataboundComponents, использующий сервер приложений GlassFish V2 и инфраструктуру визуальных веб-приложений JavaServer Faces.

   В IDE создается первая страница с названием Page1, которая открывается в Visual Designer.

   Примечание: При создании проекта в NetBeans 6.1 доступны новые параметры, для которых можно оставить значения по умолчанию. Например, флажок Use Dedicated Folder for Storing Libraries может быть оставлен неустановленным.

2. Разверните узел "Woodstock Basic" в окне "Palette" и перетащите элемент "Label" в левую часть страницы. Введите Select Name: и нажмите клавишу Enter.
3. Перетащите элемент "Drop Down List" вправо от элемента "Label".
4. В окне "Properties" установите для свойства "id" значение personIdDD.

5. Выберите элемент "Drop Down List" и перетащите его в элемент "Label" (Ctrl-Shift) для создания связи между элементами.

   Для свойства for элемента "Label" теперь установлено значение personIdDD.

6. Перетащите элемент "Message Group" из окна "Palette" в отдаленное местоположение на странице, например, в правый верхний угол.

   Этот элемент удобен для диагностики ошибок программирования. Реализовать вывод диагностических сообщений в этом элементе можно путем вызова методов info(String), error(String), warn(String) или fatal(String). В элементе "Message Group" выводится значение аргумента String. Кроме того, в этом элементе также по умолчанию отображаются сообщения об ошибках во время выполнения, ошибках подтверждения и ошибках преобразования.

Подключение элемента к базе данных

В окне "Services" в левой части рабочей области IDE расположен узел "Databases". Узел "Databases" содержит все драйверы и подключения базы данных, добавленные в среде IDE.

Среда IDE NetBeans поставляется со стандартной базой данных TRAVEL, расположенной в узле "Databases".

При связывании базы данных с элементом между этим элементом и таблицей базы данных создаются два уровня: уровень набора строк ("RowSet") и уровень источника данных ("Data Provider"). На уровне "RowSet" устанавливается подключение к базе данных, выполняются запросы и осуществляется управление множеством результатов. Уровень "Data Provider" предоставляет общий интерфейс для обращения ко многим типам составных данных, от наборов строк до объектов "Array" и "Enterprise JavaBeans".

Как правило, операции с объектом "RowSet" выполняются только при необходимости установки параметров запроса. В большинстве случаев для получения доступа к данным и управления ими используется объект "Data Provider". Ускорить обучение можно с помощью интерфейса API источника данных, поскольку для любых обертываемых данных применяются одни и те же интерфейсы API (т.е. отсутствует зависимость от конкретной реализации источника данных).

В этом разделе руководства таблица PERSON из базы данных TRAVEL используется в качестве источника вариантов выбора для элемента "Drop Down List".

1. В окне "Services" разверните узел "Databases" и проверьте подключение к базе данных TRAVEL.

   Если для узла jdbc базы данных TRAVEL отображается перечеркнутый значок, и развернуть узел базы данных невозможно, это указывает на то, что среда IDE не подключена к базе данных. Для подключения к базе данных TRAVEL щелкните правой кнопкой мыши узел jdbc для TRAVEL и выберите "Connect" в контекстном меню. При появлении диалогового окна "Connect" введите имя пользователя и пароль travel, выберите "Remember Password During This Session" и нажмите кнопку "OK". Если для базы данных TRAVEL не отображается узел jdbc, см. часто задаваемые вопросы Включение стандартной базы данных TRAVEL для MySQL в среде IDE NetBeans для получения информации об обеспечении доступа к этой базе данных в среде IDE.

2. Разверните узел "Travel > Tables".

   В разделе "Tables" отображаются узлы для всех таблиц в базе данных, например, CARRENTAL и FLIGHT. На следующем рисунке показано окно "Services" с развернутым узлом "Tables".

   

3. Перетащите "PERSON" из окна "Services" в элемент "Drop Down List".

   В элементе "Drop Down List" появится текст abc. Текст abc указывает на то, что поле "Display" связано с объектом String, который, в данном случае, представляет собой столбец базы данных типа SQL varchar. Кроме того, в среде IDE для таблицы базы данных добавляется неотображаемый элемент "personDataProvider". В окне "Navigator" появится элемент "personDataProvider": В среде IDE также добавляется свойство personRowSet к "SessionBean1".

4. Щелкните правой кнопкой мыши элемент "Drop Down List" и выберите "Bind to Data" в контекстном меню. Появится диалоговое окно "Bind to Data", показанное на следующем рисунке.

    
   При привязке данных к элементу "Drop Down List" необходимо указать, что именно должно отображаться в списке (поле "Display"), а также значения, используемые в соответствующей программе (поле "Value"). Как правило, требуется отображать значимые данные из таблицы базы данных, например, имя лица, однако в программе целесообразно использовать уникальный идентификатор, например, идентификатор определенного пользователя. В этом приложении, однако, требуется связать поля "Value" и "Display" с одним столбцом базы данных (PERSON.NAME), как описано в следующих двух действиях.
5. В диалоговом окне "Bind to Data" выберите PERSON.PERSONID в списке поля "Value". В этом случае метод "getSelected" будет возвращать значение PERSON.PERSONID для текущего варианта выбора.
6. Выберите PERSON.NAME в списке поля "Display" для заполнения раскрывающегося списка в обозревателе значениями из столбца базы данных PERSON.NAME.
7. Нажмите кнопку "OK".

8. Выберите "Run > Run Main Project" на основной панели инструментов.

   В среде IDE сохраняются все изменения, после чего выполняется сборка, развертывание и запуск веб-приложения. Сначала в нижней части среды IDE открывается окно "Output". В этом окне выводится информация, относящаяся к подготовке компиляции и развертывания. (Поэтому при возникновении проблем в течение сборки в первую очередь необходимо обратиться к окну "Output".) Далее в диалоговом окне отображается статус развертывания. После завершения развертывания среда IDE вызывает веб-обозреватель для приложения. При визуализации страницы в обозревателе раскрывающийся список заполняется данными из столбца NAME таблицы PERSON.

Добавление элемента "Table"

Далее к приложению добавляется элемент "Table", который подключается к таблице базы данных.

Примечание: В среде IDE NetBeans 6.1 поддерживается привязка по запросу. В тех местах, где элементы требуют написания кода Java, теперь следует вручную добавить атрибут привязки к элементам в визуальном веб-приложении JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

1. Перетащите элемент "Table" из окна "Palette" под элемент "Drop Down List".
2. В окне "Services" разверните узел "Travel > Tables".

3. Перетащите TRIP из окна "Services" в заголовок элемента "Table".

   Примечание: Если базу данных TRIP перетащить в другую часть элемента таблицы, откроется диалоговое окно "Choose Target". Выберите "table1" в диалоговом окне "Choose Target" и нажмите кнопку "OK".

4. Щелкните правой кнопкой мыши элемент "Table" и выберите "Table Layout".

   В списке "Selected" поля "Table Layout" отображаются все столбцы таблицы. Элементы списка "Selected" используются для указания столбцов, которые требуется отображать в элементе "Table".
5. Щелкните при нажатой клавише Ctrl для выбора всех элементов в списке "Selected" за исключением TRIP.DEPDATE, TRIP.DEPCITY и TRIP.DESTCITY.

6. Нажмите кнопку <.

   Выбранные элементы перемещаются в список "Available", а следующие три элемента остаются в списке "Selected", как показано на следующем рисунке:

   

7. Нажмите кнопку "OK".

   В Visual Designer появятся три столбца элемента "Table", как показано на следующем рисунке:

   

Изменение запроса SQL

Далее изменяется запрос SQL в объекте "tripRowSet", который также должен возвращать данные из таблицы TRIPTYPE. Элемент "Table" аналогично изменяется для вывода описания типа поездки.

1. Разверните узел "SessionBean1" в окне "Navigator", если он не развернут.

   

2. В разделе "SessionBean1" окна "Navigator" щелкните правой кнопкой мыши узел "tripRowSet" и выберите "Edit SQL Statement".

   В области изменения откроется редактор запросов с вкладкой "tripRowSet".

   Подсказка: Если открыто окно "Output", закройте его для обеспечения дополнительного пространства для работы с редактором запросов.

3. Перетащите узел "Travel > Tables > TRIPTYPE" из окна "Services" в режим проектирования, как показано на рисунке ниже.

   Появится еще одна диаграмма таблицы со ссылкой на обе диаграммы. Эта ссылка соответствует объединению. Обратите внимание на автоматическое изменение оператора Select в окне "Source Code".

4. Снимите флажок для TRIPTYPEID в таблице TRIPTYPE.

   При этом столбец удаляется из множества результатов и из запроса SQL в окне "Source Code", как показано на следующем рисунке.

   
5. Не закрывайте редактор запросов.
6. Перейдите на вкладку "Page1" в области изменения.

7. В Visual Designer щелкните правой кнопкой мыши элемент "Table" и выберите "Table Layout".

   Появится диалоговое окно "Table Layout". Поскольку запрос SQL для tripRowSet был изменен, появляется дополнительное количество доступных столбцов.

8. Добавьте столбец "TRIPTYPE.DESCRIPTION" к списку "Selected" и нажмите кнопку "OK".

   В элементе "Table" появится четвертый столбец.

Управление отображаемыми строками

При добавлении источника данных для таблицы TRIP в среде IDE был создан объект RowSet с запросом SQL, возвращающим все строки для всех столбцов в таблице. Если на этом этапе выполнить развертывание и запуск приложения, в элементе "Table" будет отображаться вся информация о поездках из таблицы TRIP.

В этом приложении в элементе "Table" должна отображаться информация о поездках только для лица, имя которого выбрано в элементе "Drop Down List". Для ограничения отображаемой информации измените запрос для объекта tripRowSet путем создания связи на основе основных и подробных данных между элементами "Drop Down List" и "Table".

1. Для перехода к редактору запросов выберите вкладку jdbc:derby://localhost:1527/travel в области изменения.
2. В окне "Design Grid" редактора запросов правой кнопкой мыши щелкните любую ячейку в строке PERSONID и выберите "Add Query Criteria".
3. Установите для раскрывающегося списка "Comparison" значение =Equals, выберите кнопку-переключатель "Parameter" и нажмите кнопку "OK".

4. В столбце "Criteria" для PERSONID выводится =?, что означает добавление к запросу SQL следующего выражения WHERE.

   Пример кода 1: выражение WHERE в запросе SQL

   WHERE TRAVEL.TRIP.PERSONID = ?

   
   Рекомендация: На этом этапе можно проверить правильность запроса. Щелкните правой кнопкой мыши в редакторе запросов и выберите "Run Query". В диалоговом окне "Specify Parameters Value" введите "1" в поле "Value" параметра TRAVEL.TRIP.PERSONID и нажмите кнопку "OK". Результаты запроса для "Person 1" появятся на панели результатов редактора запросов.

5. В элементе "Design Grid" редактора запросов щелкните ячейку "Sort Type" в строке DEPDATE, а затем выберите "Ascending" в раскрывающемся списке.

   При этом автоматически устанавливается порядок сортировки, и к запросу SQL добавляется выражение сортировки.
6. Закройте редактор запросов.

7. В Visual Designer дважды щелкните элемент "Drop Down List".

   При этом в редакторе Java открывается исходный код класса Page1, и курсор перемещается в тело метода personIdDD_processValueChange. Этот метод-заглушка обработки событий создается при первом двойном щелчке в элементе "Drop Down List".

8. Замените тело метода personIdDD_processValueChange следующим кодом (выделено полужирным шрифтом).

   Пример кода 2: обработка события изменения значения для элемента "Drop Down List"

   public void personIdDD_processValueChange(ValueChangeEvent event) { try { getSessionBean1().getTripRowSet().setObject( 1, personIdDD.getSelected()); tripDataProvider.refresh(); } catch (Exception e) { error("Cannot switch to person " + personDataProvider.getValue( "PERSON.PERSONID")); log("Cannot switch to person " + personDataProvider.getValue( "PERSON.PERSONID"), e); } }

   
   

   Этот код используется для привязки значения PERSONID для выбранного в настоящее время имени NAME в раскрывающемся списке к параметру в подготовленном выражении SQL для объекта "tripRowSet", выполнения запроса и получения нового множества результатов.

   Метод setObject заменяет "?" в запросе значением PERSONID. Метод refresh передает новый запрос и обновляет множество результатов. Для получения дополнительных данных об этих методах щелкните вызов метода правой кнопкой мыши и выберите в контекстном меню "Show Javadoc". Javadoc для источника данных и набора строк можно просмотреть путем выбора "Help > Javadoc References > Data Provider" и "Help > Javadoc References > RowSet".

   Метод log передает сообщение и соответствующие данные трассировки стека в файл регистрации сервера приложений; далее эти данные могут использоваться для обнаружения и диагностики проблем пользователей. Для просмотра протокола сервера щелкните правой кнопкой мыши узел сервера в окне "Services" и выберите "View Server Log" в контекстном меню.
9. Для переформатирования кода нажмите комбинацию клавиш Alt-Shift-F.
10. Перейдите к методу prerender в исходном коде:

11. Замените тело метода prerender следующим кодом (выделено полужирным шрифтом).

    Пример кода 3: синхронизация основных/подробных данных при первом выводе страницы

    public void prerender() { if ( personIdDD.getSelected() == null ) { try { personDataProvider.cursorFirst(); getSessionBean1().getTripRowSet().setObject( 1, personDataProvider.getValue("PERSON.PERSONID")); tripDataProvider.refresh(); } catch (Exception e) { error("Cannot switch to person " + personDataProvider.getValue("PERSON.PERSONID")); log("Cannot switch to person " + personDataProvider.getValue("PERSON.PERSONID"), e); } } }

    
    Код в методе "prerender" вызывается до начала вывода страницы веб-обозревателем.
12. Для переформатирования кода нажмите комбинацию клавиш Alt-Shift-F.
13. Для перехода к Visual Designer нажмите кнопку "Design" на панели инструментов изменения.

14. Щелкните правой кнопкой мыши элемент "Drop Down List" и выберите "Auto-Submit on Change".

    В окне "Properties" для свойства "onchange" отображается следующий код:

    Пример кода 4: код свойства "onchange"

    webuijsf.suntheme.common.timeoutSubmitForm(this.form, 'personIdDD');

    
    Теперь при выборе другого элемента раскрывающегося списка в работающем веб-приложении страница передается веб-обозревателем автоматически.

15. На основной панели инструментов выберите "Run > Run Main Project".

    В среде IDE сохраняются все измененные файлы, выполняется повторная сборка приложения и его повторное развертывание на сервере.
16. Выберите лицо в элементе "Drop Down List" для проверки синхронизации основных и подробных данных в элементе "Table". Щелкните заголовок столбца DESTCITY для проверки сортировки строк в элементе "Table".

Дополнительные упражнения

Упражнение Добавьте элемент "Static Text" справа от элемента "Drop Down List". Щелкните правой кнопкой мыши элемент "Static Text" и выберите "Bind to Data". Выберите personDataProvider в раскрывающемся списке "Data Provider" и свяжите этот элемент с PERSON.JOBTITLE. Запустите программу и выберите из раскрывающегося списка другое имя. Обратите внимание на то, что название должности не изменяется. Это связано с синхронизацией personDataProvider в приложении с элементом, выбранным из раскрывающегося списка. Добавьте выделенный ниже полужирным шрифтом код к методу prerender и снова запустите приложение. Теперь названия должностей должны соответствовать выбранному имени.

Примечание: В среде IDE NetBeans 6.1 поддерживается привязка по запросу. В тех местах, где элементы требуют написания кода Java, теперь следует вручную добавить атрибут привязки к элементам в визуальном веб-приложении JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

public void prerender() {
    if ( personIdDD.getSelected() == null ) {
        try {
            personDataProvider.cursorFirst();
            getSessionBean1().getTripRowSet().setObject(
                1, personDataProvider.getValue("PERSON.PERSONID"));
            tripDataProvider.refresh();
        } catch (Exception e) {
            error("Cannot switch to person " +
                    personDataProvider.getValue("PERSON.PERSONID"));
            log("Cannot switch to person " +
                    personDataProvider.getValue("PERSON.PERSONID"), e);
        }
    }
    else {
        try {
            // Синхронизация источника данных с текущим вариантом выбора
            personDataProvider.setCursorRow(
                    personDataProvider.findFirst(
                    "PERSON.PERSONID", personIdDD.getSelected()));
        } catch (Exception e) {
            error("Cannot switch to person " +
                    personIdDD.getSelected());
            log("Cannot switch to person " +
                    personIdDD.getSelected(), e);
        }
    }
}
         

Упражнение Ознакомьтесь с возможностями расположения элементов таблицы. Щелкните правой кнопкой мыши элемент "Table" и выберите в контекстном меню "Table Layout". Измените текст заголовка ("Header Text") на "Departure Date", "Departure City", "Destination City" и "Description". Измените заголовок таблицы на "Trips" в таблице "Options" в диалоговом окне. Выберите "Enable Pagination" и установите в поле "Page Size" значение 3. Запустите приложение и просмотрите, как внесенные изменения влияют на способ вывода таблицы.

Примечание: Если используется режим разбиения на страницы, добавьте следующий код после оператора tripDataProvider.refresh() в методе personIdDD_processValueChange: tableRowGroup1.setFirst(0);. При этом обеспечивается отображение первой страницы каждый раз при выборе нового имени из раскрывающегося списка.

Упражнение Создайте веб-приложение с элементами "Drop Down List" и "Table". Настройте для элемента "Drop Down List" отображение TRIPTYPE.DESCRIPTION. Настройте для элемента "Table" отображение всех записей TRIP с TRIPTYPEID, совпадающим с выбранным TRIPTYPE.

Упражнение Можно возникнуть вопрос: приводит ли дважды повторенный код в методах prerender и personIdDD_processValueChange к двойному обновлению подробного набора строк? Ответ – нет. В целях иллюстрации добавим выражение log(method-name) к конструктору, методу prerender и personIdDD_processValueChange. В окне "Services" щелкните правой кнопкой мыши узел сервера и выберите "View Server Log". Запустите приложение и выберите новое имя. В протоколе сервера (в окне "Output") можно просмотреть порядок вызова методов:

1. constructor
2. prerender
3. constructor
4. personIdDD_processValueChange

При первом запросе страницы обозревателем в приложении создается экземпляр Page1 и вызывается prerender. Сервер передает ответ (страницу HTML), и экземпляр Page1 уничтожается. Приложение не вызывает обработчик события изменения значения, поскольку события изменения значения создаются только при передаче страницы (в данном случае – при выборе нового лица).

При выборе нового имени из раскрывающегося списка выполняется передача страницы обозревателем. Приложение создает новый экземпляр Page1 и восстанавливает значения из предыдущего экземпляра (они передаются в запросе). Поскольку имеет место обратная отправка (передача), а имя изменилось, создается событие изменения значения. При этом вызывается personIdDD_processValueChange, и в приложении обновляется набор строк.

После вызова обработчиков события изменения значения вызывается метод prerender. Поскольку в раскрывающемся списке теперь имеется выбранное значение, раздел if метода prerender пропускается.

Заключение

Для привязки элемента к таблице базы данных используется следующая процедура:

1. Элемент связывается с таблицей базы данных путем перетаскивания узла базы данных в элемент или путем выбора "Bind to Data" в контекстном меню с последующим выбором существующего источника данных из раскрывающегося списка.
2. В диалоговом окне "Bind to Data" выполняется настройка столбцов базы данных, отображаемых элементом, а также, для элемента типа "список", возвращаемых столбцов. Также для настройки столбцов таблицы базы данных, отображаемых элементом "Table", можно использовать действие меню "Table Layout".
3. Для изменения запроса для объекта "RowSet" откройте редактор запросов в объекте "RowSet" из окна "Navigator".
4. Для определения значений параметров запроса вызовите метод setObject объекта "RowSet". Для выполнения запроса и обновления набора результатов используется метод источника данных refresh.
5. Для автоматической передачи страницы при изменении значения элемента используется действие меню "Auto-Submit on Change".

6. Для синхронизации элемента подробных данных с основным элементом используется следующая процедура:

   1. Добавьте код к методу prerender элемента "Page" для вызова метода setObject объекта "RowSet" подробных данных для установки значений параметров запроса по умолчанию, например, первого лица в раскрывающемся списке. Затем вызовите метод refresh для выполнения запроса.
   2. Свяжите основной элемент с методом processValueChanged. Вызовите метод setObject объекта "RowSet" подробных данных из этого метода для определения новых параметров запроса. Затем вызовите метод refresh для выполнения запроса.

Дополнительная информация