Кравец

Добавим меню на главную страницу.

1.На Component Palette, странице ADF Faces, панели Common Components перетяните Panel Menu Bar на верхнюю грань страницы в визуальном редакторе.

2.Перетяните Menu на панель области меню.

3.В Property Inspector, секции Common, задайте Options в текстовом поле для задания текста меню.

4.Растяните секцию Behavior и выберите true в выпадающем списке Detachable.

5.В окне Structure сделайте правый клик на компоненте af:menu и выберите nsert Inside af:menu - Options | Menu Item.

6.В Property Inspector, секции Common, введите Query в текстовое поле.

7.Выберите query из выпадающего списка Action

130

8. Сохраните проделанную работу. Вы должны получить следующую картину:

Создадим страницу Query

1.В окне editor кликните faces-config.xml для того, чтобы начать настройку.

2.На диаграмме дважды кликните query.jspx для того, чтобы открыть Create JSF Page.

3.Согласитесь с именем query.jspx и поставьте галочку Create as XML Document (*.jspx). Выберите Blank Page. Нажмите Ok.

4.На панели Data Controls, перетащите под узел FODFacadeLocal узел getOrderItemsFindByQuantity.

131

5.В контекстном меню Create выберите ADF Parameter Form. В диалоге Edit Form Fields примите все по-умолчанию и нажмите Ok. Все должно выглядеть как на скриншоте:

6.В компоненте Component Palette, странице ADF Faces, растяните панель Operations. Схватите узел Convert Number на странице и перетащите его на страницу. В Property Inspector выберите number из выпадающего списка Type.

7.На панели Data Controls растяните узел getOrderItemsFindByQuantity. Перетащите OrderItems на страницу и бросьте его ниже параметра, добавленного ранее.

8.В контекстном меню Create выберите Form->ADF Form.

9.В диалоге Edit Form Fields исключите следующее: createdBy, creationDate, lastUpdatedBy, lastUpdateDate, lineItemId, objectVersionId, orderId, productId, quantity и unitPrice кликая на кнопку Delete.

10.Выберите оба поля Include Navigation Controls и Include Submit Button. Нажмите Ok.

11.В окне Editor кликните Bindings.

12.Под узлом Executables выберите узел getOrderItemsFindByQuantityIterator. В Property Inspector, секции Advanced, выберите ifNeeded из выпадающего списка Refresh.

13.В окне editor кликните Design для возвращения обратно в визуальный редактор.

Страница должна иметь такой вид

132

Окно Structure должно выглядеть так

133

Делаем страницу Query обновляемой

1.С панели Data Controls перетяните метод mergeOrders(Orders) на кнопку Submit на странице query.jspx.

2.В диалоге Edit Action Binding кликните поле Value и выберете Show El Expression Builder из выпадающего списка.

3.В диалоге Variables растяните ADF Bindings | bindings | getOrderItemsFindByQuantityIterator | currentRow и выберите dataProvider.

4.Кликните Ok для закрытия этого диалога.

5.Кликните Ok снова для закрытия диалога Action Binding.

6.В диалоге Confirm Component Rebinding кликните Ok.

7.В визуальном редакторе страницы query.jspx page выберите называющуюся теперь кнопку mergeOrders.

8.В Property Inspector, секции Common, введите Save в текстовое поле.

9.В Button Action выберите browse в выпадающем списке Action.

10.Сохраните изменения. Страница должна выглядеть следующим образом:

134

Запуск приложения.

1.В окне editor кликните таб faces-config.xml для возвращения в конфигурационный файл.

2.На диаграмме дважды кликните browse и нажмите кнопку Run.

3.В браузере запущенного приложения используйте скрол бар или двигайте сплиттер для того, чтобы скрыть или убрать кнопки.

4.Используйте навигационные кнопки для перемещения по строкам формы и изменения данных в таблицах. Это должно выглядеть так

135

5.Выберите заголовок и перетащите его в другое положение в таблице. Это изменит положение столбцов.

6.Сверху слева страницы кликните меню Options и переместите меню в любое другое место на странице.

7.В поле getOrderItemsFindByQuantity_p_quantity введите число, например, 7 и кликните кнопку getOrderItemsFindByQuantity.

8.Поэкспериментируйте с навигацией.

9.Кликните на иконку календаря и выберите новую дату.

10.Кликните Save для сохранения изменений и возвращения в страницу browse. Это должно выглядеть так

136

Практическое занятие № 10

Создание графического изображения базы данных Цель работы: создать графическое изображение базы данных и подключить к ней базу данных.

1.Для того чтобы создать графическое отображение базы данных выберите в меню Файл (File) Новый (New). Раскройте вкладку базы данных (Database Tier) и выберите категорию Оффлайновая база данных. Далее выберите графическое отображение базы данных (Data Base Diagram) и нажмите ОК.

2.Задайте графическому отображение имя DBOoffline1

137

Рисунок 1 – создание графического изображения базы данных 3. Вы создали графическое отображение базы данных

Рисунок 2 – графическое отображение базы данных

4.Из набора элементов управления для базы данных (Component Pallete) выберите таблицу (Table) и перетащите на форму.

5.Далее нужно подключить базу данных. В меню Specify Location (определение местоположения) выберите Открыть (Open) и введите название базы данных DBOoffline1. В качестве имени графического

отображения введите DBDEMO.

138

6.Нажмите Save (сохранить) чтобы сохранить Ваше графическое отображение базы данных.

139