JavaServer Faces (JSF) - стандартная Java EE технология, которая упрощает Веб -разработку.
В этой части урока вы создадите JSF-страницы для доступа к бизнес-компонентам, которые вы создали в предыдущей части.

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

Вы создадите форму, которые могут быть использованы для отображения и изменения данных. Вы будете использовать master-detail отношения для отображения информации о сотрудниках в отделе. Чтобы создать страницу, то можете использовать Oracle ADF Faces Rich Client компоненты. Эти компоненты позволяют создавать пользовательский Ajax-Веб-интерфейс, без написания HTML и Javascript-кода низкого уровня .

1. Щелкните правой кнопкой мыши на ViewController проект в Application Navigator и выберите New...

   
   Веб-часть приложения, разработанные в отдельный проект под названием " Viewcontroller проекта, который вы создали в предыдущей части этого руководства вы создали Fusion Web-приложений. Подробнее...
   
   Поддержание разделение уровня Модели и пользовательского интерфейса путем их развития в отдельных проектов, делает бизнес услуги слоя более многоразового использования.

2. В New Gallery, перейдите к JSF/Facelets под узел Web Tier, и выберите Page. Нажмите кнопку OK.

   

3. В диалоге Create JSF Page , переименовать страницу в DeptEmpPage.jsf: убедитесь, что  переключатель  Document Type установлен в Facelets, и на вкладке "Page Layout" выберите  кнопку  Page Template и выберите Oracle Three Column Layout ( Oracle Три Колонки).

   

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

4. На странице отображается Редактор Дизайна. Шаблон состоит из трех столбцов, но вам нужно только два на странице, так что удалите третий.
   Поместите курсор в крайний правый раздел end и щелкните правой кнопкой мыши, чтобы выбрать Delete.

   

   С af:pageTemplate, выбранной в панели Structure, в  Property Inspector установите startColumnSize в 350.

   

5. Добавить некоторые внутренние компоненты на стр.
   В Component Palette раскройте Layout группу компонентов и найдите компонент Panel Accordion(Панель-Гармошка) в разделе Interactive Containers and Headers. Перетащите его в start вашей страницы.

   

6. Выберите af:showDetailItem (в panel accordion кот. вы только что добавили на страницу, на предыдущем шаге), в панели Structure и в Property Inspector измените его свойство Text в Departments.

   

7. Щелкните правой кнопкой мыши на этом новом Departments и выберите  Insert after Show Detail Item - Departments > Show Detail Item. Это добавляет еще одну "складку" аккордеона на вашу страницу.

   

8. Изменить Текст на More Info.

   

   Это еще один способ добавления компонентов на странице - используя контекстные меню непосредственно в Design Editor (вместо перетаскивания из Палитры Компонентов).

9. От Layout компонентов, нажмите и перетащите Panel Splitter(Панель Сплиттер) компонент в секцию центр (center facet) вашей страницы.

   

10. В Property Inspector (Инспектор Свойств) изменить Orientation (Ориентация) нового splitter на vertical (вертикальная).

    

11. Из Layout  перетащите Panel Collection компонент в  first facet в верхней части сплиттера на вашей странице.

    

    Панель коллекция - компонент, объединяющий коллекцию компонентов, таких как таблицы, treeTable и деревья, чтобы отобразить стандартные/приложения меню, панели инструментов и панели состояния.

12. С использованием Structure , перетащите Panel Tabbed(Панель Вкладок) компонент в second facet сплиттера на вашей странице.

    

13. Дважды щелкните по вкладке DeptEmpPage.jsf в верхней части страницы, чтобы просмотреть его в полном объеме. Страница должна выглядеть как на рисунке ниже.

    

14. Нажмите на значок Save All в JDeveloper меню, чтобы сохранить вашу работу.
    
    

На этом шаге вы свяжете бизнес-компоненты, которые вы создали в Части 1 данного руководства к пользовательскому интерфейсу. Вы можете это сделать простой "drag and drop" операцией; за кулисами ADF Model позаботится и связывании данных для вас.

1. В Design Editor (Редактор Дизайна) нажмите кнопку Departments аккордеона, чтобы развернуть его.

   

2. В Application Navigator раскройте Data Controls (Управление Данными), и в нем раскройте AppModuleDataControl чтобы увидеть бизнес-сервисы, которые вы определили в первой части этого руководства.

   

3. Перетащите DepartmentsView1 контроль данных на аккордеон Departments вашей JSF-страницы. Когда будет предложено выбрать тип компонента, который вы хотите создать, выберите Form > ADF Read-Only Form.

   

4. В диалоговое окно Edit Form Fields, отметьте флажок Include Navigation Controls, и нажмите кнопку OK.

   

5. В дереве Data Controls раскройте DepartmentsView1 чтобы увидеть поля, которые он содержит, а также связанный с ним EmployeesView3 контроль для сотрудников в каждом отделе. Обратите внимание, что это "детали" работников для "мастера" факультетов - они связаны, и поэтому работники, которых вы видите в этом представлении( view object) - те, кто принадлежат определенному департаменту, который вы смотрите.

   

6. Перетащите контроль данных EmployeesView3 на Панель Коллекции ту, что создали в  first facet  PanelSplitter. Создайте ее как ADF Read-Only Table.

   

7. В окне Edit Table Columns, выберите Single Row в Row Selection, и отметьте следующие флажки: Сортировка и Фильтрация. Нажмите кнопку OK.

   

8. Перетащите контроль данных EmployeesView3 еще раз, но на этот раз на ShowDetailItem в компонент panelTabbed во second facet(второй аспект) panelSplitter. Создайте ее как ADF Form.

   

9. В диалоговом окне Edit Form Fields, отметить флажок Include Submit Button. С помощью мыши и клавиши Shift выберите три нижних поля из списка: CommissionPCT, ManagerId, DepartmentID и удалите их, нажав кнопку Delete  в правом верхнем углу диалогового окна. Нажмите кнопку OK.

   

10. Нажмите на Save All в JDeveloper меню, чтобы сохранить вашу работу.
    Щелкните правой кнопкой мыши на странице и выберите Run (Запустить). Это будет компилировать ваш проект, строить его, и стартовать встроенный WebLogic Server, чтобы запустить его. Затем Web-браузер открывает для отображения страницы. Вы можете следить за ходом этих шагов в окне Log (Журнал) в JDeveloper.

    

11. После того как страница отображается в браузере, можно изменить размер страницы, используя сплиттер для отображения данных Министерства. Затем используйте Next кнопка для прокрутки ведомств. Обратите внимание, что данные о сотрудниках измененяются, соответствуя таблице и форме под ней.

    

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

В этих шагах вы улучшите бизнес-услуг путем добавления правил проверки, форматирования и значении по умолчанию.

1. В Application Navigator в дереве проекта Model , найдите сущность Employees  и дважды щелкните , чтобы открыть его для редактирования.

   

2. В окне Employees.xml, нажмите вкладку Attributes и выберите атрибут Salary. Прокрутите вниз страницы, где Validation Rules и нажмите на значок Add , чтобы добавить новое правило проверки.

   

3. В диалоговом окне  Add Validation Rule выберите Range из  выпадающего списка  Rule Type. Заметьте другие различные типы правил, которые вы можете определить здесь. В поле Operator  убедитесь, что значение параметра установлено в Between, и введите 0 в minimum value и 99000 в maximum value.

   

4. Нажмите на вкладку Failure Handling (Обработка Ошибок )для определения сообщения об ошибке, которое будет отображаться в случае сбоя проверки. В  поле Message Text введите сообщение об ошибке, например "Зарплата вне диапазона от 0 до 99 000" и нажмите кнопку OK.

   

5. Затем вы добавляете значение по умолчанию в поле hireDate- так что, когда новый сотрудник нанимается - по умолчанию используется текущая Дата.
   В окне Employees.xml, найдите HireDate атрибут, и выберите его. В Value разделе Property Inspector, найдите Default Value Type и выберите Expression, затем установите свойство Default Value в adf.currentDate. Это позволит обеспечить значение по умолчанию для новой записи установленое на текущий день.

   

6. Вы также можете указать UI Hints( подсказки ) для атрибутов для управления тем, как они отображаются по умолчанию в формах и страницах, которые их используют. В этом шаге вы добавите маску формата по умолчанию для поля даты Наема. Вы также можете указать, этикетки и подсказки.
   В UI Hints раздел Property Inspector  найти Format Type и выберите Simple Date.

   

   Установите свойство Format в dd/MMM/yyyy..

   

7. Запустить страницу еще раз для проверки уточнений, которые вы сделали.

   

8. Тестируйте HireDate поле. Заметьте, что как только вы кликните в поле, вам будет предоставлен в пример формат даты (как вы его определили).

   

9. Попробуйте обновить поле для одного из сотрудников с недопустимой датой,  как 11/11/123 и обратите внимание на сообщение об ошибке, когда вы нажимаете кнопку " Отправить".

   

   Используйте значок Часы/Календарь рядом с полем для отображения всплывающего календаря и выберите корректную дату.

   

10. Введите в поле Salary значение, например, -9, и нажмите кнопку Submit, чтобы увидеть сообщение об ошибке, созданное вами.

    

11. Перейдите в отдел 50 и обратите внимание, что теперь вы можете прокрутить данные в таблице "сотрудники". Щелчок на одном из заголовков столбцов в таблице, чтобы отсортировать данные в таблице.

    

12. Щелкните заголовок столбца в таблице, и перетащите его, чтобы изменить его положение в таблице.

    

    Новый порядок столбцов выглядит следующим образом:

    

13. В поле Filter выше столбца LastName (Фамилия ), введите B% и нажмите Enter чтобы отфильтровать таблицу для отображения только тех сотрудников, чья фамилия начинается с буквы B.

    

14. Экспериментируйте с другим меню и кнопкам и в таблице, чтобы увидеть дополнительные функциональные возможности. Когда вы закончите, закройте окно браузера и возвратитесь в JDeveloper.

В следующем шаге мы будем улучшать интерфейс пользователя, изменив таблицу работников и добавив возможность делать выбор столбца, путем переназначения поля в закладке "Employee", и путем привязывания бизнес-компонентов на графическое представление. Вы можете это сделать простой "drag and drop" операцией -  ADF Model обрабатывает данные для вас.

1. Нажмите на DeptEmpPage.jsf tab, чтобы вернуться на страницу в Редакторе Дизайна. Выберите Employees таблицу в Редакторе Дизайна или в палитре Structure ("Структура"). Установите свойство Column Selection в Single.

   

2. В Структуре выберите panelFormLayout что окружает поля сведений сотрудников во вкладке showDetailItem .

   

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

   
   
   При запуске страницы на более позднем этапе, вы увидите, что поля в закладке сейчас в двух столбцах.Подробнее...
   Обратите внимание, что вы можете контролировать расположение объектов в контейнере макета, путем установки свойства контейнера.

4. Затем вы добавляете график представления информации на странице; это делается с помощью ADF Data Visualization набора компонентов JSF.
   В Редакторе Дизайна нажмите кнопку More Info аккордеона, чтобы развернуть его. Затем перетащите EmployeesView3 контроль данных в аккордеон More Info и создайте его как Graph.

   
   На графике можно отобразить в виде статических изображений в формате PNG или интерактивных Flash-компонент.
   Подробнее...
   Вы контролируете эти модели поведения через свойства компонента "график".

5. В Component Gallery выберите Pie (Пирог) из списка графики слева и Pie снова, как тип диаграммы. В нижней части окна, выберите третий Quick Start Layout.

   

   Затем щелкните OK.

6. В диалоговом окне Create Pie Graph выберите Salary в поле Pie и перетащите LastName в поле Slices (ломтики). Нажмите кнопку OK.

   

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

   

8. Перейдите в отдел 50. Потому, что вы установили выбор столбца на single - один, обратите внимание на дополнительные поведения таблицы, которые доступны, когда вы выбираете столбец - такие, как Freeze и Wrap. Выберите столбец, затем нажмите кнопку Freeze  (Закрепить). Теперь используйте горизонтальную полосы прокрутки чтобы просмотреть самые правые столбцы, не теряя из виду фиксированный.

   

9. В отделе 50 расширьте аккордеон  More Info и обратите внимание на график и подсказку, что он показывает, когда вы наведете на него мышкой.

   

10. Перейдите на showDetailItem1 вкладку, и обратите внимание, что поля были реорганизованы в две колонки.

    

    Когда вы закончите, закройте окно браузера и возвратитесь в JDeveloper.

В этом шаге вы добавите новый бизнес-сервис в приложение для отображения подмножества полей из таблицы Employees, наряду с Департаментом. Вы также можете добавить вычисляемое поле расчета годового заработка работника и список значений поля для названий отделов. Oracle ADF Бизнес-Компоненты позволяют создавать такие сложные обновляемые компоненты декларативным способом.

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

   

2. На странице Name мастера Create View Object, введите EmpDetails как Name и сохранить Entity object по умолчанию как источник данных (data source).

   

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

3. На странице Entity Objects мастера выберите сущность Employees и переместите его вправо, а затем выберите сущность  Departments и добавить его также в Selected.
   Обратите внимание, что только у сущности Employees отмечен флажок Updatable  - сущность departments используется только для чтения данных .

   

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

4. На странице Attributes мастера, переместите  следующие Employees атрибуты в Selected:
   EmployeeId, FirstName, LastName, Email, Salary, HireDate, JobId.
   
   И от сущности Departments переместите следующие атрибуты в Selected:
   DepartmentId, DepartmentName.

   

   Нажмите кнопку Finish для завершения создания представления объекта ( view object ).

5. Затем вы добавляете расчетный атрибут для view object - атрибут, который отображает годовую  заработную плату работника.
   В Application Navigator дважды щелкните EmpDetails чтобы открыть его.

   

6. Нажмите на вкладку Attributes  и из раскрывающегося списка выберите New Attribute.

   

7. В диалоговое окно New View Object Attribute введите AnnualSalary в качестве имени для нового атрибута и нажмите кнопку OK.

   

8. На вкладке Details в нижней части списка атрибутов, установите следующие свойства для атрибута AnnualSalary :

   Поле	Значение
   Name	AnnualSalary
   Type	Number
   Default Value	Expression (Checked)
   Value	Salary * 12

   .

9. На следующих шагах вы добавляете список значений в поле, на основе набора значений, хранящихся в другой таблице. В этом случае вы создаете список значений для возможных названий должностей на основе таблицы Jobs.
   В редакторе EmpDetails.xml нажмите кнопку Attributes и выберите JobId атрибут. Нажмите на  вкладку List Of Values в нижней части списка атрибутов.

   

10. В Списке Значений (List of Values), нажмите на вкладку Add , чтобы создать список значений.

    

11. В  диалоговом окне Create List of Values щелкните на зеленый плюс справа от поля List Data Source. В диалоге View Accessors переместите JobsView на панель  View Accessors.

    

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

12. Снова в диалоговом окне  Create List of Values, выберите JobId в Списке Атрибутов.

    

13. Все еще в диалоговом окне Create List of Values нажмите кнопку UI Hints и выберите  Combo Box with List of Values  как Default List Type и затем переместите атрибут Job Title в Selected.

    

    Нажмите кнопку OK. Сохраните вашу работу.

14. Теперь вы добавляете новый объект, который вы создали в модель данных.
    В Application Navigator дважды щелкните AppModule чтобы открыть его для редактирования и выберите вкладку Data Model (Модель Данных).

    

15. Нажмите на представление EmpDetails и перенесите его в панель Data Model.
    Сохраните вашу работу.

    

16. Используйте  Business Component Browser для тестирования новой функции, которую вы только что образовали через представление EmpDetails. В Application Navigator правой кнопкой мыши AppModel и выберите пункт Run чтобы запустить тестер.

    

17. Дважды щелкните на представление EmpDetails1.

    

18. Обратите внимание, что отображается новое расчетное поле AnnualSalary с полями DepartmentId  и DepartmentName. Ни одно из них недоступно для обновления здесь.

    

19. Используйте выпадающее меню JobId для выбора новой работы.

    

20. Поле заполнено списком работ.

    

21. Закройте окно Business Component Browser, без внесения изменений.

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