Веб-приложения, как правило, имеют больше, чем одну страницу в них. В этой части урока вы сможете добавить еще одну страницу - страницу Поиска - для вашего приложения и использовать  ADF Task Flow Diagrammer для определения правил навигации между двумя страницами. Вы сможете использовать характеристики ADF Faces Framework, чтобы добавлять дополнительную функциональность страниц. Наконец, вы создадите многоразовый фрагмент страницы и добавите его в страницу DeptEmpPage.

Подробнее...

Это страница Поиска для приложения.

1. В Application Navigator найдите adfc-config файл в узле Page Flows в ViewController проекта. Дважды щелкните его, чтобы открыть его в редакторе. Это то, где вы собираетесь определить навигацию приложения .

   

2. Перетащите DeptEmpPage.jsf файл из Application Navigator в пустую диаграму adfc-config.

   

3. Из Палитры Компонентов (Component Palette) перетащите компонент View  в диаграму adf-config, и переименуйте ее в query. Это по сути новые страницы JSF, который вы собираетесь создать.

   

4. Из Палитры Компонентов выберите Control Flow Case,  а затем нажмите на DeptEmpPage и перетащите линию к странице query.

   

   Дайте имя этой линии goQuery.

   

5. Из Палитры Компонентов, выберите другой Control Flow Case, и затем создайте противоположный поток от query к странице DeptEmpPage. Имя этого потока будет back.

   

6. Дважды щелкните на query  на диаграмме, чтобы создать новую страницу. В диалоге Create JSF Page примите значение по умолчанию радио-кнопки Facelets , и с выбраннойрадио-кнопкой Quick Start Layout, нажмите кнопку Browse.

   

7. В Component Gallery, сохраните по умолчанию категорию One Column, тип и макет, но отметьте Apply Themes в Options панели.

   

   Нажмите кнопку OK и OK снова для создания страницы.

8. Чтобы добавить функцию поиска сотрудников на странице, откройте дерево Data Controls, и найдите EmpDetails1. (Если вы не видите его, нажмите на кнопку Refresh ).

   

9. Раскройте EmpDetails1  и раскройте узел Named Criteria ниже его. Выберите All Queriable Attributes и перетащите на новую страницу query.jsf . Создать как Query > ADF Query Panel.

   

10. В Data Controls выберите контроль данных EmpDetails1 и перетащите его в центре страницы ниже компонента запроса.  Создать как Form > ADF Form.

    

    В окне Edit Forms Details отметить флажки Include Navigation Controls и Include Submit Button. Нажмите кнопку OK.

    
    

11. Для panelFormLayout не снимая выделения, используйте  Property Inspector для установки Rows в 5.

    

12. В окне Structure найдите кнопку Submit, щелкните правой кнопкой мыши и выберите  Insert after af:command:Button - Submit > Button.

    

13. В Инспекторе свойств изменить Текст новой кнопки на Back и для Action выберите back из раскрывающегося списка. Это обязывает кнопку выполнять навигацию, которую вы задали на диаграме потока страниц.

    

14. Затем вы добавляете операции транзакций на страницу, чтобы позволить вам делать commit и rollback изменении. В Data Controls расширьте модуль на уровне узла Operations  для поиска операции commit и rollback. Перетащите Commit в окно Structure перед First Button. При появлении запроса, выбрать ADF Button.

    
    
    
    

15. Повторите те же действия для операции Rollback .

    

16. В Инспекторе свойств, для кнопок Rollback и Commit , сбросьте свойство Disabled  в default чтобы сделать обе кнопки всегда доступными для выбора.

    

17. Дважды щелкните на вкладку Query.jsf, чтобы максимизировать страницы в Редакторе Дизайна(Design Editor). Ваша страница должна выглядеть следующим образом:

    

18. Нажмите на вкладку DeptEmpPage.jsf  для переключения обратно на страницу. Быстрый способ навигации в этот или любой другой файл с помощью глобального поля поиска в верхнем правом углу JDeveloper, если набрать имя файла там.

    

    Затем просто щелкните на имени файла, чтобы открыть его в редакторе.

19. В дизайне страницы, расширить аккордеон Departments . Из Палитры Компонентов, выберите компонент Button и перетащите его в аккордеон Departments между кнопками First и Previous . Альтернативно, вы можете щелкнуть правой кнопкой мыши на кнопку First и выберать "insert after > button", чтобы добавить новую кнопку.

    

20. С помощью Инспектора свойств изменить Текст кнопки на Query и Action на goQuery или выберите его из выпадающего списка, если имеется. Это обязывает кнопку для выполнения навигации, которую вы задали на странице схема.

    

21. Нажмите на значок Save All  в JDeveloper меню, чтобы сохранить вашу работу, и затем нажмите правой кнопкой мыши на страницу DeptEmpPage.jsf и выберите Run.

    

22. Когда страница отобразится в браузере, щелкните на кнопку Query для перехода на новую страницу. На странице Поиска нажмите Advanced для отображения подробных критериев поиска.

    

23. В поле FirstName принять по умолчанию Starts with (Начинается с), и введите букву G.
    Нажмите Search. В форме ниже, покажется запись для Guy Himuro.

    

24. Экспериментируйте с формой, сохраняя ваши критерии поиска, создавая более сложные запросы и обновления данных сотрудников. Обратите внимание, как эта форма отображает представление данных, которое соответствует определению, содержащемуся в  view object, созданному вами - в том числе информация о названии отдела, а также список значений для Job id и годовой заработной платы работника.
    Вы также можете вносить изменения в данные и делать commit и rollback ваших транзакций по мере необходимости.
    
    Когда вы закончите закройте окно браузера.

На следующих шагах вы познакомитесь с некоторыми из характеристик ADF Faces Framework. Вам предстоит улучшить ваши страницы с дополнительной функциональностью Ajax, используя декларативные возможности развития, предлагаемые ADF Faces компонентами.

В ближайшие несколько вложенных шагов использовании частичного обновления страницы, предоставляемая ADF Faces. Подробнее...

Требования к приложению, означает, что вам нужно добавить автоматическое обновление AnnualSalary поле всякий раз, когда в Зарплата поле обновляется. Вы не хотите, чтобы вся страница обновлялась, когда это произойдет, но использовалось частичное обновление страницы, чтобы просто освежить те области, которые были изменены.

1. Откройте query.jsf файл в Редакторе Дизайна, если он еще не открыт. Выберите поле Salary. В Инспекторе свойств установите значение Id в sal.

   

2. Еще в Инспекторе свойств расширьте узел Behavior и установите AutoSubmit в True.

   

3. В окне Structure найдите поле AnnualSalary . (Другой вариант, чтобы попасть на это поле, дважды щелкните на query.jsf вкладку для максимизации окна, а затем найдите поле в Редакторе Дизайна).
   Найдите свойство PartialTriggers в разделе Behavior (Поведение) и нажмите стрелку справа на выбор Edit.

   

4. В окне диалога Edit Property найти поле Salary, переместите его вправо синей стрелкой. Нажмите кнопку OK.

   

5. Нажмите на Save All  в  JDeveloper меню, чтобы сохранить вашу работу, и запустите (run ) DeptEmpPage.jsf.

   

6. Когда страница отобразится, нажмите кнопку Query в панели Departments.

   

7. На странице Поиска ищите сотрудников, чье имя начинается с  A%.

   

   Обратите внимание на значения зарплаты и годового оклада.

   

8. Обновите поле Salary, а затем выйдите из него. Обратите внимание на немедленные изменения в поле AnnualSalary, как только вы покидаете поле Salary. Однако это единственное поле, которое обновляется (не вся страница).

   

9. Закройте браузер.
   

В af:autoSuggestBehavior компонент отображает выпадающего списка предлагаемых предметов, когда пользователь вводит в компонент ввода. Подробнее... Для использования автоматического заполнения в декларативной форме, как вам нужен model-driven список значений  вашей модели проекта, который будет основой для suggestedItems списка. Ранее вы добавили список значений в JobId поле, так что в этом примере вы используете это поле.

1. 
   В странице query, выберите JobId поле.

   

2. В Палитре Компонентов раскройте узел Operations, и найдите  Auto Suggest Behavior в разделе Behavior. Перетащите Auto Suggest Behavior операцию на JobId поле.

   

3. В диалоге Insert Auto Suggest Behavior введите #{bindings.JobId.suggestedItems}. Нажмите OK.

   

4. Сохраните вашу работу, а затем запустите страницу query.

   

5. Введите 121 в поле EmployeeId, и нажмите кнопку Search. В записи для Adam Fripp обновите поле JobId, введя в нем 's' . Несколько рабочих мест, начинающиеся с 's' будут предложены.

   

6. Добавьте 'a' после 's' и смотрите, что список предложений изменен соответствующим образом.

   

7. Выберите Sales Representative из трех оставшихся вариантов, для заполнения поля.

   

8. Закройте браузер без сохранения изменений.
   

На этом этапе вы можете добавить раскрывающееся меню на странице и использовать пару ADF Faces компонентов операций, чтобы добавить Javascript операции на страницу - для экспорта табличных данных в таблицы Excel и для создания страницы печати.

1. В DeptEmpPage.jsf файле щелкните внутри фасетки menus  в панели коллекции окружающую  таблицу "Employees ". Щелкните правой кнопкой мыши и из контекстного меню выберите Insert Inside Facet menus > Menu.

   

2. В Инспекторе свойств установите Текст в My Options.

   

3. В Инспекторе свойств раскрыть узел Behavior  и установить Detachable в true.

   

4. В окне Structure, щелкните правой кнопкой мыши компонент меню и выберите  Insert inside af:menu - My Options > Menu Item.

   

5. В Инспекторе свойств установите свойство Текст нового пункта меню в  Export to Excel.

   

6. С новым пунктом меню  Export to Excel еще выбраным в окне Structure, расширьте раздел  Listeners узла Операции в ADF Faces компонентах в Палитре Компонентов.
   Найдите компонент Export Collection Action Listener и перетащите его на  Export to Excel меню в окне Structure.

   

7. В диалоговом окне  Insert Export Collection Action Listener щелкните стрелку вниз рядом с ExportedId поле и выберите Edit.

   

8. В диалоговом окне Edit Property пройдите по структуре страницы, чтобы найти компонент  table - t1 и выберите его. Нажмите кнопку OK.

   

9. Из выпадающего списка Type выберите excelHTML и нажмите кнопку OK.

   

10. Добавьте еще один пункт к меню. В окне Structure, щелкните правой кнопкой мыши на меню компонент Export to Excel  и из контекстного меню выберите  Insert After af:commandMenuItem - Export to Excel > Menu Item.

    

11. Установите свойство Текст этого нового меню в Printable Page..

    

12. В разделе Behavior под узлом Operations Палитры Компонентов выберите операцию Show Printable Page Behavior, чтобы добавить ее на новый пункт меню. Перетащите ее на новую опцию меню, созданную вами.

    

13. Нажмите на Сохранить Все  в JDeveloper меню, чтобы сохранить вашу работу, и затем выберите Run.

14. Когда страница отображается, щелкните меню.

    

15. Затем вызывайте каждое из опции меню, что вы создали, например Export to Excel.

    

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

    

16. Попробуйте опции меню Printable Page.

    

    Страница готова для печати.

    

    Закройте окно браузера.

1. Нажмите на вкладку query.jsf для возврата на страницу Query, с открытой панелью "Structure ". В  Data Controls раскройте узел EmpDetails1, а затем узел Operations  ниже его. Выберите операцию CreateInsert .

   

2. Перетащите операцию CreateInsert из палитры "Структура" на panelGroupLayout в нижнюю грань( footer facet) формы сотрудников. Создайте ее как  ADF Button.

   

3. В Инспекторе свойств установите Id кнопки в CreateInsert.

   

4. Еще в Инспекторе свойств раскройте узел Behavior и в PartialTriggers выбрать Edit из раскрывающегося списка.

   

5. В окне Редактирования прокрутите страницу компонентов, пока вы не найдете кнопку CreateInsert . Переместите ее в Selected.

   

   Нажмите кнопку OK. Это действие определяет CreateInsert компонент в качестве триггера, который заставит таблицу обновиться.

6. Таким же образом добавьте операцию Delete, перетаскивая операцию Delete из EmpDetails1 на panelGroupLayout в низ страницы. Как и прежде, создайте ее как  ADF button

   

7. Две кнопки отобразятся в нижней части страницы query.

   

8. Сохраните вашу работу, а затем запустите Query страницу.

9. Когда появится страница  введите F% в поле LastName  и нажмите кнопку Search. Первая запись F% работника будет показана.

   

10. Нажмите на кнопку CreateInsert. Страница обновися, и поля внизу будут очищены (за исключением поля HireDate, согласно установке по умолчанию на текущую дату), так что новая запись может быть вставлена.

    

1. В  Application Navigator найдите demo.model пакет и щелкните правой кнопкой мыши, чтобы выбрать New View Object....

   

2. В мастере Create View Object установките Name в EmpByEmail и выберите SQL Query радио-кнопку в качестве источника данных. Нажмите кнопку Next.

   

3. В Шаге 2 мастера Create View Object , введите следующий запрос:

   select first_name,last_name from employees where email=:p_email

   Знак ':' перед p_email означает, что она является переменной, которая будет передана в запрос.

   Нажмите на кнопку Test and Explain, чтобы подтвердить ваш запрос.

   

   Нажмите кнопку Close и нажмите кнопку Next.

4. В пункте 3 Create View Object мастера, нажмите кнопку New для создания новой bind переменной. Установите Name в p_email.

   

   Нажмите на вкладку Control Hints и установите Label Text в Email или Электронный адрес.

   

5. Нажмите кнопку Next несколько раз, чтобы принять все по умолчанию, пока вы не достигнете 8 шага мастера.
   Отметьте здесь флажок Add to Application Module, чтобы включить ваше новое представление в  модель данных.
   Нажмите Finish.

   

6. Сохраните вашу работу, а затем запустите Business Component Browser, чтобы протестировать новый view. Дважды щелкните на новом view EmpByEmail1 и когда будет предложено вставить значение для переменной, введите SKING и нажмите OK чтобы получить результаты для этого адреса электронной почты.
   

   Запуск Бизнеса Компонент Тестер. Подробнее... Щелкните правой кнопкой мыши на AppModule узел в Application Navigator и выберите Run из контекста.
   
   
   
   

7. Чтобы попробовать другое значение, нажмите кнопку Edit Bind Variables.

   

   Закрыть Business Component Browser.
   

1. Сначала создадим новый поток задач, специально для этой страницы.
   В Application Navigator нажать правой кнопкой мыши на проект ViewController и выбрать New...

   

2. В Web Tier > JSF/Facelets выберите категорию ADF Task Flow (Поток Задач).

   

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

3. В диалоговом окне Create Task Flow установить File Name в search-email-flow.xml.
   Убедитесь, что флажки Create As Bounded Task Flow и Create with Page Fragments оба отмечены.

   

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

4. В Редакторе Дизайна перетащите компонент View  из Палитры компонентов на пустую диаграмму и именуйте его searchEmail. Вы используете только одну страницу в этом потоке, но вы можете иметь потоки задач связанные с несколькими страницами и также включать их в другие JSF страницы.

   

5. Дважды щелкните на новом компоненте searchEmail для создания фрагмента страницы.
   Примите значения по умолчанию в диалоговом окне, которое отображается, убедитесь, что имя файла searchEmail.jsff. Это создает страницу как фрагмент страницы, который может быть включен в другие JSF страницы. Нажмите кнопку OK.

   

6. Пустая страница отображается в Редакторе Дизайна. Раскрыть аккордеон  Data Controls и, если необходимо, щелкнуть на кнопку Refresh, чтобы убедиться, что новый контролер данных EmpByEmail появился в списке.

   

7. Раскройте новый EmpByEmail1 и узел Операции под ним. Выберите ExecuteWithParams операцию. Вы собираетесь использовать эту операцию, чтобы выполнить запрос к этому представлению, передавая ему необходимые параметры.

   

8. 
   Перетащите операцию ExecuteWithParams на вашу новую страницу, и создайте его в качестве ADF Parameter Form....

   

9. В диалоговом окне Edit Form Fields измените display label для p_email от значения по умолчанию на Email. Нажмите кнопку OK.

   

10. В Редакторе Дизайна страницы, нажмите кнопку ExecuteWithParams кнопку и с помощью Инспектора свойств измените Текст на Find Details.

    

11. Из дерева Data Controls, перетащите EmpByEmail1 на страницу под кнопку. Создайте его в качестве Form > ADF Read-only Form...

    

12. Примите значения по умолчанию, представленные в диалоговом окне Edit Form Fields и нажмите кнопку OK. Сохраните вашу работу.

    

    Страница должна выглядеть так:

    

13. Новый связанный поток задач теперь содержит фрагмент страницы; далее вы включите полностью  связанный поток задач внутрь другой страницы JSF.
    В Application Navigator найдите файл DeptEmpPage.jsf и откройте его в Редакторе Дизайна, если он еще не открыт. Из Палитры Компонентов раздела Layout перетащите компонент Separator в левый  аккордеон страницы DeptEmpPage.jsf ниже формы Departments.

    

14. Добавим новый поток, созданный вами, как регион к существующим страницам.
    Из Application Navigator перетащите search-email-flow.xml файл в левый аккордеон на  DeptEmpPage.jsf страница под новый separator. Создать его как Region.

    

15. Ваша страница должна выглядеть так, как на скриншоте ниже.

    

16. Сохраните вашу работу, а затем запустите обновленный DeptEmpPage.jsf.
    Когда страница отображается в браузере тестируйте новую функциональность, вводя значение email  в поле Email и нажимая кнопку Find Details.

17. Имя сотрудника возвращается.

    

• Строить бизнес-сервисы, которые обеспечивают данными приложение
• Создавать data-bound JSF страницы.
• Улучшать страницы, добавив более сложные операции,
• Добавлять вторую JSF-страницу, в приложения и создавать диаграммы для определения навигации между страницами
• Создавать многоразовый фрагмент страницы, содержащий бизнес-сервис на основе параметров

• "Разработка Приложений с Использованием Инструментов Веб-Страницы" в Руководстве Пользователя в Oracle JDeveloper
• Веб-Интерфейс Пользователя Руководство Разработчика для Oracle ADF

Развернуть все | Скрыть все