В этой части урока вы создадите JSF-страницы для доступа к бизнес-компонентам, которые вы создали в предыдущей части.
Вы создадите форму, которые могут быть использованы для отображения и изменения данных. Вы будете использовать master-detail отношения для отображения информации о сотрудниках в отделе. Чтобы создать страницу, то можете использовать Oracle ADF Faces Rich Client компоненты. Эти компоненты позволяют создавать пользовательский Ajax-Веб-интерфейс, без написания HTML и Javascript-кода низкого уровня .
-
Щелкните правой кнопкой мыши на ViewController проект в Application Navigator и выберите New...
Веб-часть приложения, разработанные в отдельный проект под названием " Viewcontroller проекта, который вы создали в предыдущей части этого руководства вы создали Fusion Web-приложений. Подробнее...
Поддержание разделение уровня Модели и пользовательского интерфейса путем их развития в отдельных проектов, делает бизнес услуги слоя более многоразового использования. -
В New Gallery, перейдите к JSF/Facelets под узел Web Tier, и выберите Page. Нажмите кнопку OK.
-
В диалоге Create JSF Page , переименовать страницу в DeptEmpPage.jsf: убедитесь, что переключатель Document Type установлен в Facelets, и на вкладке "Page Layout" выберите кнопку Page Template и выберите Oracle Three Column Layout ( Oracle Три Колонки).
Нажмите кнопку OK.
-
На странице отображается Редактор Дизайна. Шаблон состоит из трех столбцов, но вам нужно только два на странице, так что удалите третий.
Поместите курсор в крайний правый раздел end и щелкните правой кнопкой мыши, чтобы выбрать Delete.С af:pageTemplate, выбранной в панели Structure, в Property Inspector установите startColumnSize в 350.
-
Добавить некоторые внутренние компоненты на стр.
В Component Palette раскройте Layout группу компонентов и найдите компонент Panel Accordion(Панель-Гармошка) в разделе Interactive Containers and Headers. Перетащите его в start вашей страницы. -
Выберите af:showDetailItem (в panel accordion кот. вы только что добавили на страницу, на предыдущем шаге), в панели Structure и в Property Inspector измените его свойство Text в Departments.
-
Щелкните правой кнопкой мыши на этом новом Departments и выберите Insert after Show Detail Item - Departments > Show Detail Item. Это добавляет еще одну "складку" аккордеона на вашу страницу.
-
Изменить Текст на More Info.
Это еще один способ добавления компонентов на странице - используя контекстные меню непосредственно в Design Editor (вместо перетаскивания из Палитры Компонентов).
-
От Layout компонентов, нажмите и перетащите Panel Splitter(Панель Сплиттер) компонент в секцию центр (center facet) вашей страницы.
-
В Property Inspector (Инспектор Свойств) изменить Orientation (Ориентация) нового splitter на vertical (вертикальная).
-
Из Layout перетащите Panel Collection компонент в first facet в верхней части сплиттера на вашей странице.
Панель коллекция - компонент, объединяющий коллекцию компонентов, таких как таблицы, treeTable и деревья, чтобы отобразить стандартные/приложения меню, панели инструментов и панели состояния.
-
С использованием Structure , перетащите Panel Tabbed(Панель Вкладок) компонент в second facet сплиттера на вашей странице.
-
Дважды щелкните по вкладке DeptEmpPage.jsf в верхней части страницы, чтобы просмотреть его в полном объеме. Страница должна выглядеть как на рисунке ниже.
-
Нажмите на значок Save All в JDeveloper меню, чтобы сохранить вашу работу.
На этом шаге вы свяжете бизнес-компоненты, которые вы создали в Части 1 данного руководства к пользовательскому интерфейсу. Вы можете это сделать простой "drag and drop" операцией; за кулисами ADF Model позаботится и связывании данных для вас.
-
В Design Editor (Редактор Дизайна) нажмите кнопку Departments аккордеона, чтобы развернуть его.
-
В Application Navigator раскройте Data Controls (Управление Данными), и в нем раскройте AppModuleDataControl чтобы увидеть бизнес-сервисы, которые вы определили в первой части этого руководства.
-
Перетащите DepartmentsView1 контроль данных на аккордеон Departments вашей JSF-страницы. Когда будет предложено выбрать тип компонента, который вы хотите создать, выберите Form > ADF Read-Only Form.
-
В диалоговое окно Edit Form Fields, отметьте флажок Include Navigation Controls, и нажмите кнопку OK.
-
В дереве Data Controls раскройте DepartmentsView1 чтобы увидеть поля, которые он содержит, а также связанный с ним EmployeesView3 контроль для сотрудников в каждом отделе. Обратите внимание, что это "детали" работников для "мастера" факультетов - они связаны, и поэтому работники, которых вы видите в этом представлении( view object) - те, кто принадлежат определенному департаменту, который вы смотрите.
-
Перетащите контроль данных EmployeesView3 на Панель Коллекции ту, что создали в first facet PanelSplitter. Создайте ее как ADF Read-Only Table.
-
В окне Edit Table Columns, выберите Single Row в Row Selection, и отметьте следующие флажки: Сортировка и Фильтрация. Нажмите кнопку OK.
-
Перетащите контроль данных EmployeesView3 еще раз, но на этот раз на ShowDetailItem в компонент panelTabbed во second facet(второй аспект) panelSplitter. Создайте ее как ADF Form.
-
В диалоговом окне Edit Form Fields, отметить флажок Include Submit Button. С помощью мыши и клавиши Shift выберите три нижних поля из списка: CommissionPCT, ManagerId, DepartmentID и удалите их, нажав кнопку Delete в правом верхнем углу диалогового окна. Нажмите кнопку OK.
-
Нажмите на Save All в JDeveloper меню, чтобы сохранить вашу работу.
Щелкните правой кнопкой мыши на странице и выберите Run (Запустить). Это будет компилировать ваш проект, строить его, и стартовать встроенный WebLogic Server, чтобы запустить его. Затем Web-браузер открывает для отображения страницы. Вы можете следить за ходом этих шагов в окне Log (Журнал) в JDeveloper. -
После того как страница отображается в браузере, можно изменить размер страницы, используя сплиттер для отображения данных Министерства. Затем используйте Next кнопка для прокрутки ведомств. Обратите внимание, что данные о сотрудниках измененяются, соответствуя таблице и форме под ней.
-
Закройте окно браузера.
В этих шагах вы улучшите бизнес-услуг путем добавления правил проверки, форматирования и значении по умолчанию.
-
В Application Navigator в дереве проекта Model , найдите сущность Employees и дважды щелкните , чтобы открыть его для редактирования.
-
В окне Employees.xml, нажмите вкладку Attributes и выберите атрибут Salary. Прокрутите вниз страницы, где Validation Rules и нажмите на значок Add , чтобы добавить новое правило проверки.
-
В диалоговом окне Add Validation Rule выберите Range из выпадающего списка Rule Type. Заметьте другие различные типы правил, которые вы можете определить здесь. В поле Operator убедитесь, что значение параметра установлено в Between, и введите 0 в minimum value и 99000 в maximum value.
-
Нажмите на вкладку Failure Handling (Обработка Ошибок )для определения сообщения об ошибке, которое будет отображаться в случае сбоя проверки. В поле Message Text введите сообщение об ошибке, например "Зарплата вне диапазона от 0 до 99 000" и нажмите кнопку OK.
-
Затем вы добавляете значение по умолчанию в поле hireDate- так что, когда новый сотрудник нанимается - по умолчанию используется текущая Дата.
В окне Employees.xml, найдите HireDate атрибут, и выберите его. В Value разделе Property Inspector, найдите Default Value Type и выберите Expression, затем установите свойство Default Value в adf.currentDate. Это позволит обеспечить значение по умолчанию для новой записи установленое на текущий день. -
Вы также можете указать UI Hints( подсказки ) для атрибутов для управления тем, как они отображаются по умолчанию в формах и страницах, которые их используют. В этом шаге вы добавите маску формата по умолчанию для поля даты Наема. Вы также можете указать, этикетки и подсказки.
В UI Hints раздел Property Inspector найти Format Type и выберите Simple Date.Установите свойство Format в dd/MMM/yyyy..
-
Запустить страницу еще раз для проверки уточнений, которые вы сделали.
-
Тестируйте HireDate поле. Заметьте, что как только вы кликните в поле, вам будет предоставлен в пример формат даты (как вы его определили).
-
Попробуйте обновить поле для одного из сотрудников с недопустимой датой, как 11/11/123 и обратите внимание на сообщение об ошибке, когда вы нажимаете кнопку " Отправить".
Используйте значок Часы/Календарь рядом с полем для отображения всплывающего календаря и выберите корректную дату.
-
Введите в поле Salary значение, например, -9, и нажмите кнопку Submit, чтобы увидеть сообщение об ошибке, созданное вами.
-
Перейдите в отдел 50 и обратите внимание, что теперь вы можете прокрутить данные в таблице "сотрудники". Щелчок на одном из заголовков столбцов в таблице, чтобы отсортировать данные в таблице.
-
Щелкните заголовок столбца в таблице, и перетащите его, чтобы изменить его положение в таблице.
Новый порядок столбцов выглядит следующим образом:
-
В поле Filter выше столбца LastName (Фамилия ), введите B% и нажмите Enter чтобы отфильтровать таблицу для отображения только тех сотрудников, чья фамилия начинается с буквы B.
-
Экспериментируйте с другим меню и кнопкам и в таблице, чтобы увидеть дополнительные функциональные возможности. Когда вы закончите, закройте окно браузера и возвратитесь в JDeveloper.
В следующем шаге мы будем улучшать интерфейс пользователя, изменив таблицу работников и добавив возможность делать выбор столбца, путем переназначения поля в закладке "Employee", и путем привязывания бизнес-компонентов на графическое представление. Вы можете это сделать простой "drag and drop" операцией - ADF Model обрабатывает данные для вас.
-
Нажмите на DeptEmpPage.jsf tab, чтобы вернуться на страницу в Редакторе Дизайна. Выберите Employees таблицу в Редакторе Дизайна или в палитре Structure ("Структура"). Установите свойство Column Selection в Single.
-
В Структуре выберите panelFormLayout что окружает поля сведений сотрудников во вкладке showDetailItem .
-
В Инспекторе свойств установите Rows в 5.
При запуске страницы на более позднем этапе, вы увидите, что поля в закладке сейчас в двух столбцах.Подробнее...
Обратите внимание, что вы можете контролировать расположение объектов в контейнере макета, путем установки свойства контейнера. -
Затем вы добавляете график представления информации на странице; это делается с помощью ADF Data Visualization набора компонентов JSF.
В Редакторе Дизайна нажмите кнопку More Info аккордеона, чтобы развернуть его. Затем перетащите EmployeesView3 контроль данных в аккордеон More Info и создайте его как Graph.На графике можно отобразить в виде статических изображений в формате PNG или интерактивных Flash-компонент.
Подробнее...
Вы контролируете эти модели поведения через свойства компонента "график". -
В Component Gallery выберите Pie (Пирог) из списка графики слева и Pie снова, как тип диаграммы. В нижней части окна, выберите третий Quick Start Layout.
Затем щелкните OK.
-
В диалоговом окне Create Pie Graph выберите Salary в поле Pie и перетащите LastName в поле Slices (ломтики). Нажмите кнопку OK.
-
Нажмите Save All значок в JDeveloper меню, чтобы сохранить вашу работу, и затем нажмите правой кнопкой мыши на странице и выберите Run из контекстного меню.
-
Перейдите в отдел 50. Потому, что вы установили выбор столбца на single - один, обратите внимание на дополнительные поведения таблицы, которые доступны, когда вы выбираете столбец - такие, как Freeze и Wrap. Выберите столбец, затем нажмите кнопку Freeze (Закрепить). Теперь используйте горизонтальную полосы прокрутки чтобы просмотреть самые правые столбцы, не теряя из виду фиксированный.
-
В отделе 50 расширьте аккордеон More Info и обратите внимание на график и подсказку, что он показывает, когда вы наведете на него мышкой.
-
Перейдите на showDetailItem1 вкладку, и обратите внимание, что поля были реорганизованы в две колонки.
Когда вы закончите, закройте окно браузера и возвратитесь в JDeveloper.
В этом шаге вы добавите новый бизнес-сервис в приложение для отображения подмножества полей из таблицы Employees, наряду с Департаментом. Вы также можете добавить вычисляемое поле расчета годового заработка работника и список значений поля для названий отделов. Oracle ADF Бизнес-Компоненты позволяют создавать такие сложные обновляемые компоненты декларативным способом.
-
В Application Navigator нажмите правой кнопкой мыши на demo.model пакет, и выберите New View Object.
-
На странице Name мастера Create View Object, введите EmpDetails как Name и сохранить Entity object по умолчанию как источник данных (data source).
Нажмите кнопку Next.
-
На странице Entity Objects мастера выберите сущность Employees и переместите его вправо, а затем выберите сущность Departments и добавить его также в Selected.
Обратите внимание, что только у сущности Employees отмечен флажок Updatable - сущность departments используется только для чтения данных .Нажмите кнопку Next.
-
На странице Attributes мастера, переместите следующие Employees атрибуты в Selected:
EmployeeId, FirstName, LastName, Email, Salary, HireDate, JobId.
И от сущности Departments переместите следующие атрибуты в Selected:
DepartmentId, DepartmentName.Нажмите кнопку Finish для завершения создания представления объекта ( view object ).
-
Затем вы добавляете расчетный атрибут для view object - атрибут, который отображает годовую заработную плату работника.
В Application Navigator дважды щелкните EmpDetails чтобы открыть его. -
Нажмите на вкладку Attributes и из раскрывающегося списка выберите New Attribute.
-
В диалоговое окно New View Object Attribute введите AnnualSalary в качестве имени для нового атрибута и нажмите кнопку OK.
-
На вкладке Details в нижней части списка атрибутов, установите следующие свойства для атрибута AnnualSalary :
Поле Значение Name AnnualSalary
Type Number
Default Value Expression (Checked)
Value Salary * 12
-
На следующих шагах вы добавляете список значений в поле, на основе набора значений, хранящихся в другой таблице. В этом случае вы создаете список значений для возможных названий должностей на основе таблицы Jobs.
В редакторе EmpDetails.xml нажмите кнопку Attributes и выберите JobId атрибут. Нажмите на вкладку List Of Values в нижней части списка атрибутов. -
В Списке Значений (List of Values), нажмите на вкладку Add , чтобы создать список значений.
-
В диалоговом окне Create List of Values щелкните на зеленый плюс справа от поля List Data Source. В диалоге View Accessors переместите JobsView на панель View Accessors.
Нажмите кнопку OK.
-
Снова в диалоговом окне Create List of Values, выберите JobId в Списке Атрибутов.
-
Все еще в диалоговом окне Create List of Values нажмите кнопку UI Hints и выберите Combo Box with List of Values как Default List Type и затем переместите атрибут Job Title в Selected.
Нажмите кнопку OK. Сохраните вашу работу.
-
Теперь вы добавляете новый объект, который вы создали в модель данных.
В Application Navigator дважды щелкните AppModule чтобы открыть его для редактирования и выберите вкладку Data Model (Модель Данных). -
Нажмите на представление EmpDetails и перенесите его в панель Data Model.
Сохраните вашу работу. -
Используйте Business Component Browser для тестирования новой функции, которую вы только что образовали через представление EmpDetails. В Application Navigator правой кнопкой мыши AppModel и выберите пункт Run чтобы запустить тестер.
-
Дважды щелкните на представление EmpDetails1.
-
Обратите внимание, что отображается новое расчетное поле AnnualSalary с полями DepartmentId и DepartmentName. Ни одно из них недоступно для обновления здесь.
-
Используйте выпадающее меню JobId для выбора новой работы.
-
Поле заполнено списком работ.
-
Закройте окно Business Component Browser, без внесения изменений.