IBM Rational Application Developer: Введення в шаблони даних JavaServer Faces, CASE-засоби (моделювання), Програмування, статті

Опис:Генерування елементів управління JavaServer Faces (JSF), заснованих на існуючих компонентах JavaBeans або інших джерелах даних, є простою і швидкою процедурою. У даній статті пояснюється, як використовувати шаблони даних, включені в IBM Rational Application Developer версії 7.5.4 і вище, які надають великі можливості управління генерацією елементів управління і видом формованої сторінки.


IBM Rational Application Developer Version 7.5.4 полегшує створення елементів управління JavaServer Faces (JSF), заснованих на існуючих компонентах JavaBeans або інших джерелах даних. Після реєстрації даних у поданні Page Data можна перетягнути їх на сторінку Faces, де можна використовувати майстер вибору типів елементів управління, які ви хочете помістити на сторінку (поля Input Text (введення тексту), поля Output Text (висновок тексту), Combo Boxes (комбіновані списки), Data Tables (таблиці даних) і т.д.). Після вибору елементів управління Rational Application Developer створює їх на сторінці, і вони автоматично зв'язуються з вашими даними.


Шаблони даних надають можливість керувати інформацією, яка відображається в цьому майстрі. Можна відредагувати існуючі варіанти, наприклад, змінити атрибут styleClass всіх тегів Check Box або додати мінімальну і максимальну довжину всіх елементів Input Text. Можна також видалити всі існуючі варіанти шаблонів, додати свої власні або надати їх для загального доступу співробітникам відділу або організації.


Початкова настройка


Почнемо зі створення Web-проекту, створення сторінки Faces JavaServer Page (JSP) та імпорту компонента JavaBeans, який буде використовуватися.


Створіть Web-проект:



  1. Виберіть в меню File > New > Project > Dynamic Web Project.

У майстрі New Project (див. малюнок 1):



  1. Введіть Employee в якості назви проекту.

  2. Виберіть конфігурацію JavaServer Faces IBM Enhanced Project.

  3. Натисніть кнопку Finish.

Малюнок 1. Новий Web-проект


Створення Web-сторінки:



  1. Клацніть правою кнопкою миші на назві проекту у вікні Enterprise Explorer.

  2. Виберіть New > Web Page у спадаючому меню.

  3. У полі File Name майстра New Web Page введіть viewEmployee в якості назви сторінки (див. малюнок 2).

  4. Натисніть кнопку Finish.

Рисунок 2. Нова Web-сторінка


Виконайте імпорт JavaBeans:



  1. Завантажити й зберегти на своєму комп'ютері файл Employee.zip (див. розділ Завантаження).

  2. Під Employee розгорніть Java Resources у вікні Enterprise Explorer.

  3. Клацніть правою кнопкою миші на src і виберіть Import.

  4. У майстрі Import виберіть General > Archive file і натисніть кнопку Next.

  5. Оберіть місцерозташування файлу Employee.zip.

  6. Натисніть кнопку Finish.

Додайте компонент TestEmployee до подання Page Data:



  1. У поданні Page Data клацніть правою кнопкою миші на Page Bean.

  2. Виберіть New > JavaBean.

  3. У майстрі Add JavaBean введіть emp як ім'я і com.MyCompany.TestEmployee як класу.

  4. Натисніть кнопку Finish.

Малюнок 3. Додавання Java-компонента


Додайте метод в bean-компонент:



  1. У поданні Page Data клацніть правою кнопкою миші на emp (com.MyCompany.TestEmployee).

  2. Виберіть Add new JavaBean Method.

  3. На екрані Select Method виберіть employeeInfo (String).

  4. Натисніть кнопку OK.

Малюнок 4. Додавання методу


Огляд подання Page Data


Дослідіть bean-компонент в поданні Page Data:



  1. У поданні Page Data розгорніть emp (com.MyCompany.TestEmployee) і employee (com.MyCompany.Employee).

Це простий bean-компонент, який представляє співробітника компанії. Він містить інформацію про співробітника: ім'я, рік народження, статус, ідентифікаційний номер, історія займаних посад. Є також метод, повертає основну інформацію про співробітника (ім'я та ідентифікатор).


Перетягніть bean-компонент на сторінку:



  1. У поданні Page Data виберіть emp, Перетягніть його на Web-сторінку і відпустіть кнопку миші.

З'явиться майстер Insert JavaBeans. Цей майстер містить варіанти розміщення елементів управління на сторінці. Ці елементи управління будуть пов'язані з полями bean-компонента TestEmployee.



  1. Встановіть перемикач в положення Displaying data (read only).

Погляньте на інформацію під "Fields to display". Ви побачите, що для властивості employee.Name, Яке має тип string, що генеруються за замовчуванням елементом управління є Display Text.



  1. Натисніть на піктограму зі стрілкою вниз поруч із Display Text для перегляду інших варіантів.

Замість Display Text можна було б вибрати елемент керування Formatted Text. Для властивості employee.dob, Яке має тип date, єдиним варіантом є Display Date. Для властивості employee.positionsHeld, Яке має тип array, варіантами є Data Table with Multiple Columns (таблиця даних з декількома стовпцями), Data Table with a Single Column (таблиця даних з одним стовпцем) і Data Table with an Unformatted Single Column (таблиця даних з одним неформатований стовпцем).


Оскільки ми вибрали "Displaying data", під "Fields to display" відобразиться варіант Output fields for displaying read-only data (поля для відображення даних, доступних тільки для читання).



  1. Встановіть перемикач в положення Inputting data для перегляду варіантів редагування даних.

Ви побачите, що замість елемента керування Display Text для поля employee.Name можливий варіант змінився на полі Input Text.


Натисніть на піктограму зі стрілкою вниз поруч з полем Input Text для перегляду інших варіантів. Наприклад, можна вибрати елементи керування Combo Box, Display Text, Formatted Text або Input Text Area. Вибір перемикача "Inputting data" активізує вибір варіантів для елементів управління Input і Output.


Ми збираємося переглядати інформацію про співробітника, але не змінювати її на сторінці.



  1. Виберіть варіант Displaying data (Рисунок 5).

  2. Зніміть відмітку з прапорця Invoking a Method.

  3. Натисніть кнопку Finish.

Малюнок 5. Майстер Insert JavaBeans


Перевірка доданих на сторінку елементів


Подивимося, що було додано на сторінку. Сторінка тепер містить HTML-таблицю з чотирма елементами управління Output Text (для імені співробітника, дати народження, статусу зайнятості та ідентифікатора) і таблицю Data Table зі списком минулих посад. Всі ці елементи управління пов'язані з властивостями компонента TestEmployee. Наприклад, поле Output Text для імені пов'язано з властивістю name, що видно з його атрибуту value: value=”#{pc_ViewEmployee.emp.employee.name}”. Не написавши жодного коду, ви створили сторінку з елементами управління JavaServer Faces, що представляють дані про співробітників (див. малюнок 6).

Малюнок 6. Отримані елементи управління


Додавання поля для відображення додаткової інформації


Тепер додамо поле для відображення інформації про співробітника.



  1. У поданні Page Data розгорніть employeeInfo().

  2. Виберіть doEmployeeInfoAction(), Перетягніть його на Web-сторінку нижче інших елементів управління і відпустіть кнопку миші.

На сторінку буде додано кнопку з атрибутом action, відповідним наступного методу:
action=”#{pc_ViewEmployee.doEmpEmployeeInfoAction}”


Ця кнопка тут принесе мало користі, але в реальному додатку метод employeeInfo() міг би використовуватися для збору основної інформації про співробітника.


Але що робити, якщо ви не хочете, щоб генерувалися ці конкретні елементи управління JavaServer Faces? Що якщо ви хочете бачити в майстрі інші варіанти? Далі ви дізнаєтеся про те, як налаштувати майстер за допомогою шаблонів даних JavaServer Faces.


Дослідження шаблонів даних JavaServer Faces



  1. У поданні Page Data виберіть emp і перетягніть його на сторінку після кнопки.

Коли з'явиться майстер Insert JavaBeans, зверніть увагу, що він містить посилання "Configure Control Types" (настроювання типів елементів управління) поряд з кнопками All, None і Options.



  1. Виберіть посилання Configure Control Types.

Відкриється діалогове вікно Preferences, що містить варіанти для зміни поведінки Rational Application Developer. Відкрилося діалогове вікно Preferences відповідає сторінці Data Templates (рисунок 7).

Малюнок 7. Екран Preferences


У діалоговому вікні Preferences є чотири сторінки, що мають відношення до шаблонів даних JavaServer Faces, і ці шаблони визначають варіанти, які відображаються в майстрі Insert JavaBeans:



Шаблони містять статичний текст (наприклад, ім'я додається тега), а також змінні. Ці змінні є елементами, які будуть динамічно обчислюватися при використанні шаблону. Змінні, починаються з символів ${ і закінчуються }, Дозволяють виконувати такі дії як зв'язування елемента управління з певною частиною даних (наприклад, з ім'ям співробітника), гарантувати унікальність ідентифікаторів елементів керування на сторінці, створювати мітки для них і т.д. Ці шаблони аналогічні іншим шаблонам Eclipse, наприклад тим, які можна виявити в діалоговому вікні Preferences для Java > Editor > Templates. Хоча приклади, наведені в цій статті, мають справу тільки з сторінкою bean-компонентів, ці шаблони використовуються для всіх типів даних, що з'являються в поданні Page Data (наприклад керованих Faces bean-компонентів, Java Persistence API (JPA), Web-сервісів і т.д.).


Давайте розглянемо в загальному плані, що є на кожній сторінці Preferences шаблонів даних JavaServer Faces:






Анатомія шаблону


Давайте коротко розглянемо один шаблон і вивчимо його найбільш важливі частини.



  1. Перейдіть на сторінку Data Templates.

  2. Виберіть перший шаблон в списку (див. малюнок 8).

Малюнок 8. Елемент керування Output text для шаблону boolean


Ім'я шаблону Display Text – це мітка, яка відображається у майстра. Тип даних (Data Type), boolean, вказує тип даних, з якими працює шаблон. Тепер розглянемо розділ Preview даного діалогового вікна. У ньому показується актуальне вміст шаблону:





 <$ {H}: outputText styleClass = "outputText" id = "$ {id}" value ="#{${ value}} ">
</${h}:outputText>


Вивчаючи шаблон, можна помітити, що він буде генерувати стандартний тег JavaServer Faces Output Text. Шаблон або вміст шаблону містить певні спеціальні символи, наприклад ${}. Ці символи оточують змінні шаблону. Змінні – це ділянки шаблону, які будуть обчислюватися динамічно під час застосування шаблона. Значення змінної буде залежати від фрагмента даних, з яким шаблон використовується, а також від сторінки, на якій шаблон знаходиться.


Наприклад, ідентифікатор тега повинен бути унікальним, а атрибут value тега повинен бути пов'язаний з фрагментом даних подання Page Data. Щоб це реалізувати, id і value повинні бути змінними. Третя змінна, яка використовується в цьому шаблоні, ${h}, Являє собою змінну Tag Library (Бібліотека тегів). Змінні Tag Library вказують, що певний URI, наприклад, <%@taglib uri=”http://java.sun.com/jsf/html” prefix=”h”%>, "%>, Повинен додаватися на сторінку, якщо його ще немає. Змінні Tag Library можуть також при необхідності копіювати в проект JAR-файли та інші ресурси, наприклад таблиці стилів (style sheets). Ми розглянемо інші змінні в процесі роботи. Крім того, в кінці статті є довідкова таблиця зі списком всіх змінних шаблону і прикладами їх використання. Змінні можна комбінувати і підбирати, створюючи потрібні сполучення для конкретного тега.


Сторінка Data Templates


Давайте більш детально розглянемо сторінку Data Templates. Можна помітити, що деякі шаблони з'являються двічі. Наприклад, є два шаблони з назвою Display Text і типом даних boolean. Причина цього полягає в тому, що Rational Application Developer має два різних набору шаблонів: один для проектів JavaServer Faces IBM-Enhanced і один для стандартних проектів JavaServer Faces. Оскільки ми вибрали конфігурацію JavaServer Faces IBM-Enhanced при створенні Web-проекту, що автоматично встановило функціональність JavaServer Faces (IBM-Enhanced), ми збираємося використовувати набір Enhanced facet.


Змініть фільтр, щоб відображався лише набір шаблонів Enhanced.



  1. Знайдіть комбінований список Show, який в даний час встановлений в значення "All templates".

  2. Поміняйте значення на Enhanced templates.

Ви побачите, що таблиця шаблонів автоматично змінилася і відображається менша кількість шаблонів. Тепер видно тільки один шаблон з міткою Display Text і типом даних boolean.


Щоб зрозуміти, що показує ця таблиця, знайдіть шаблон, який використовували раніше для співробітника. Поле activeEmployee в тесті одно java.lang.Boolean (Не примітив boolean). У майстрі Insert JavaBean показувався тільки один варіант при виборі перемикача "Display data": Display Text. Щоб знайти цей конкретний шаблон, потрібно або переглянути таблицю шаблонів на предмет відповідного імені і типу даних, або виконати операцію пошуку:



  1. Знайдіть поле Filter.

  2. Тип Boolean.

З'явиться чотири шаблону: Display Text for boolean, Check Box for boolean, Display Text for java.lang.Boolean і Check Box for java.lang.Boolean. Скоротіть ще цей список:



  1. Введіть java.lang.Boolean в полі Filter search.

Ми могли б також знайти конкретний шаблон по імені, наприклад Combo Box. Тепер є тільки два варіанти:




    • Display Text for java.lang.Boolean

    • Check Box for java.lang.Boolean


  1. Виберіть Display Text для java.lang.Boolean.

Малюнок 9. Відфільтровані шаблони


Давайте подивимося, що показує сторінка Preferences для цього шаблону. Ви вже знаєте його назву і тип даних. Даний шаблон має також відзначений прапорець. Це означає, що шаблон активний. Якби шаблон був не відзначений, він був би не активний і не пропонувався б в якості варіанту в майстрі Insert JavaBeans. Четвертий стовпець таблиці не має піктограми, але шаблон Check Box має. Відсутність цієї піктограми означає, що шаблон Display Text не є шаблоном для введення даних; він буде відображатися в майстрі при виборі перемикача "Displaying data". Шаблон Check Box є шаблоном для введення даних, тому буде показуватися тільки при виборі перемикача "Inputting data". Шаблон Check Box показується також жирним шрифтом. Це означає, що він буде шаблоном за замовчуванням для типу даних java.lang.Boolean. При виборі перемикача "Inputting data" Check Box буде знаходитися на вершині списку типів елементів управління.


Під таблицею розташована область попереднього перегляду, в якій відображається вміст даного шаблону. Поруч зі словом Preview є короткий опис цього шаблону: Display Text for Booleans. Ви також побачите наступне вміст:





 <$ {H}: outputText styleClass = "outputText" id = "$ {id}" value ="#{${ value}} ">
</${h}:outputText>


При використанні для поля activeEmployee цей шаблон генерує:





 <H: outputText styleClass = "outputText" id = "activeEmployee1"
value=”#{pc_ViewEmployee.emp.employee.activeEmployee}”>
</h:outputText>


Цей шаблон містить змінні:



При використанні цього шаблону мінлива ${h} була замінена на h (Літера "h" у нижньому регістрі). Ця змінна була також сигналом для Rational Application Developer помістити тег <%@taglib uri=”http://java.sun.com/jsf/html” prefix=”h”%> на сторінку. Мінлива ${id} була замінена на activeEmployee1 (Назва даних плюс унікальний ідентифікатор). Мінлива ${value} була замінена на pc_ViewEmployee.emp.employee.activeEmployee.


Редагування шаблону


Одне з основних переваг шаблонів полягає полягає в легкості їх зміни. Припустимо, що ви хочете виділити на сторінці поле activeEmployee, Використовуючи похилий шрифт. Давайте змінимо шаблон і зробимо цю зміну.



  1. Виберіть шаблон під назвою Display Text.

  2. Натисніть кнопку Edit для виклику вікна Edit Template (рисунок 10).

Малюнок 10. Екран Edit Template


Діалогове вікно Edit Template містить інформацію, що стосується цього конкретного шаблоном: ім'я шаблону, клас шаблону (показаний як Data Type на сторінці Data Templates), чи є цей шаблон шаблоном за замовчуванням для його класу (відзначається жирним шрифтом на сторінці Data Templates), чи є шаблон шаблоном для введення даних (такі шаблони мають піктограму input на сторінці Data Templates), опис шаблону і його схему або вміст. При натисканні кнопки Insert Variable відобразяться всі доступні змінні шаблону. Деякі з них вже готові для використання в шаблоні, наприклад id і value. Інші, наприклад label і odc (змінна бібліотеки тегів odc), не використовуються, оскільки вони не є необхідними для тега Output Text.


Тепер змінимо схему і додамо атрибут style в шаблон, а також встановимо значення цього атрибута в .



  1. У полі Pattern після value введіть:

У результаті повинно вийти наступне:





<${h}:outputText styleClass=”outputText” id=”${id}”
value=”#{${value}}” >
</${h}:outputText>



  1. Натисніть кнопку OK, Щоб закрити цей екран і зберегти зміни.

Поверніться на сторінку Data Templates і погляньте на область Preview. Ви побачите, що в ній відображається оновлений шаблон. Цей шаблон тепер має піктограму Edit поруч з ним в таблиці (піктограма олівця, показана на малюнку 11). Це означає, що ваш шаблон змінився в порівнянні з первинною формою.


Шаблон Check Box, який не редагувався, не має цієї піктограми. Ви побачите також, що для шаблону Display Text тепер активна піктограма Revert to Default. Якщо ви приймете рішення відмінити всі виконані в певному шаблоні зміни, просто натисніть цю кнопку. Але поки залиште похилий шрифт.

Малюнок 11. Змінений шаблон Output Text



  1. Натисніть кнопку OK, Щоб закрити діалогове вікно Preferences.

Давайте розглянемо ці зміни. Змінювався лише один шаблон, отже, ми збираємося використовувати тільки цей шаблон.


Діалогове вікно Insert JavaBean буде як і раніше відображатися. Але оскільки ми змінили тільки шаблон java.lang.Boolean, Просто згенеруйте елементи керування для поля activeEmployee.



  1. Натисніть кнопку Cancel в майстрі Insert JavaBeans.

  2. У вікні Page Data розгорніть emp і employee.

  3. Виберіть activeEmployee і перетягніть його на сторінку поруч із кнопкою Command.

З'явиться діалогове вікно Insert JavaBeans.



  1. Переконайтеся, що вибрано перемикач Displaying data, І натисніть кнопку Finish.

  2. Збережіть сторінку.

На сторінку буде добавлена ​​HTML-таблиця разом з елементом Output Text, пов'язаних з activeEmployee. Шрифт цього елементу управління буде похилим (див. малюнок 12):





<h:outputText styleClass=”outputText”
id = "activeEmployee2" value = "# {pc_ViewEmployee.emp.employee.activeEmployee}"
>
</h:outputText>

Малюнок 12. Елемент керування Output text з похилим шрифтом


Змінивши шаблон, можна зробити так, що всі елементи управління Output Text для файлів java.lang.Boolean будуть використовувати похилий шрифт. Ми зробили зміна в одному місці, але можемо використовувати його результати багаторазово.


Пошук шаблонів


Тепер знайдемо інші шаблони, які використовувалися з метою створення елементів управління для компонента TestEmployee. На цей раз відкрийте сторінку Preferences самостійно.



  1. Виберіть меню Window, А потім Preferences.

Враховуючи, що останньою сторінкою вікна Preferences була сторінка Data templates, діалогове вікно Preferences відкриється на цій сторінці. Якщо цього не сталося або ви хочете знайти цю сторінку згодом, розгорніть Web> JavaServer Faces Tools> Generation Templates> Data Templates.


Тепер знайдемо елемент керування, який використовується для EmployeeId.


EmployeeId має тип integer (java.lang.Integer). Якщо переглянути таблицю або ввести Integer в полі Filter, ви побачите, що для java.lang.Integerнемає зареєстрованих шаблонів. Який же шаблон використовувався? Якщо не вдається знайти точну відповідність для класу, перевіряється супертіп для цього класу (якщо точний збіг не знаходиться для примітивного типу, наприклад, int, Будуть використовуватися шаблони, зареєстровані для "primitive"). Супертіпа supertype java.lang.Integer є java.lang.Number. Для java.lang.Number є зареєстровані шаблони (щоб їх побачити, введіть це у полі Filter), тому саме ці шаблони відповідають варіантам, що відображаються в майстрі.


Далі знайдемо елементи керування, використовувані для Name.


Name має тип string (java.lang.String). Безпосередньо для string не зареєстровано жодних шаблонів, тому перевіримо супертіп String: java.lang.Object. Для java.lang.Object є шаблони, тому вони відображаються як варіанти для Name. У даному прикладі ми вибрали в майстрі Display Text for java.lang.Object.


Давайте знайдемо елемент керування, який використовується для Dob (Дата народження).


Dob має тип date (java.util.Date). Є шаблони, зареєстровані для java.util.Date, Тому вони відображалися в якості варіантів для Dob. Ми вибрали Display Date for java.lang.Object в майстра, тому генерувався елемент керування Output Text з конвертором Date / Time.


Position[] – Це більш складний шаблон, тому, щоб розглянути його докладніше, необхідно перейти на сторінку Iterative Templates.


Ітераційні шаблони


Давайте знайдемо шаблон Data Table, що використовується для Positions[].



  1. Виберіть Iterative Templates в діалоговому вікні Preferences.

Сторінка Iterative Templates містить більш складні шаблони, які використовуються, наприклад, для створення тегів Data Table.


На цій сторінці немає шаблонів, спеціально зареєстрованих для Position[], Тому потрібно почати з перегляду ієрархії класів. Супертіпа com.MyCompany.Position є java.lang.Object, Тому для com.MyCompany.Position[] використовувалися шаблони для java.lang.Object[].



  1. Введіть Object[] в полі Filter.

У майстрі ми вибрали Data Table with multiple columns, Тому подивимося на результат.



  1. Виберіть Data Table with multiple columns для java.lang.Object[] (Див. малюнок 13).

Малюнок 13. Ітераційні шаблони


Що відразу кидається в очі – цей шаблон має дві області попереднього перегляду. Причина полягає в тому, що шаблони на сторінці Iterative Templates складаються з двох частин: шаблону Wrapper і шаблону Iterative. Шаблон Wrapper є зовнішньою частиною шаблону. Він генерує тег JavaServer Faces Data Table. Шаблон Wrapper включає в себе шаблон Iterative.


Шаблон iterative вставляється в шаблон wrapper. Тут ми збираємося генерувати тег JavaServer Faces Column всередині Data Table. Але, як було видно на JSP, буде використовуватися за одним шаблоном Iterative для кожної властивості Object[]. Position[] має три властивості: PositionCode, Title і PayrollCode, тому Data Table має три колонки (по одному для кожної властивості).


Оскільки шаблони Wrapper і Iterative призначаються для складніших ситуацій, вони мають свій власний набір змінних. Давайте розглянемо їх.


Натисніть кнопку Edit для виклику екрану Edit Template.

Малюнок 14. Редагування ітераційного шаблону



  1. Натисніть кнопку Insert Variable під схемою Wrapper.

Деякі з відображених змінних повинні бути знайомі, наприклад змінні Tag Library, id і value. Інші унікальні для шаблонів Wrapper. Мінлива iterativeTemplate використовується для позиціонування ітераційних шаблонів у шаблоні Wrapper. У даному прикладі шаблон поміщає змінну iterativeTemplate всередину тегів Data Table, оскільки саме туди повинні поміщатися стовпці таблиці Data Table. Ще одна унікальна змінна – var. Вона використовується для елементів управління, подібних Data Table, Які використовують додатковий атрибут reference для зв'язування даних (у випадку з Data Table дочірні елементи управління зазвичай використовують значення атрибута var у своїх рядках value).



  1. Натисніть кнопку Insert Variable під схемою Iterative.

Деякі з цих змінних знову будуть знайомі. Унікальна для ітераційних шаблонів змінна – propertyTemplate. Кожен шаблон, який відображається на сторінці Data templates Preferences, насправді є шаблоном Property. Мінлива propertyTemplate використовується для пошуку шаблону property в шаблоні iterative (наприклад, для позиціонування тега Output Text всередині тега Column).


Погляньте на вкладення всіх трьох типів шаблонів:






	<Wrapper>
<Iterative>
<Property></Property>
</Iterative>
</Wrapper>


Ось що знаходиться в прикладі Employee:





<Data Table bound to PositionsHeld>
<Column for PositionCode>
<Output Text bound to PositionCode></Output Text>
</Column>
<Column for Title>
<Output Text bound to Title></Output Text>
</Column>
<Column for PayrollCode>
<Output Text bound to PayrollCode></Output Text>
</Column>
</Data Table>


Якщо зробити зміну в шаблоні Wrapper, це вплине тільки на Data Table, що з'являється тільки один раз. Якщо зробити зміну в шаблоні Iterative, це вплине на кожен з трьох стовпців. Спробуйте змінити шаблони Wrapper і Iterative і подивіться, як це працює.


Редагування шаблону Iterative


Ми дамо таблиці Data Table більш товсту рамку і зробимо фон мітки стовпця синім.


Для потовщення рамки Data Table ми змінимо значення border тега Data Table з 0 на 10.



  1. В області Preview шаблону Wrapper перейдіть дані вправо до тих пір, поки не з'явиться border=”0″.

  2. Поставте border=”10″.

Тепер оновимо тег Column. Column містить фасет (facet) Header, всередині якого є тег Output Text, що використовується для мітки стовпця.



  1. В області Preview шаблону Iterative безпосередньо після outputText ID введіть .

У результаті ви повинні отримати наступний код:





<${hx}:columnEx id=”${id}column”>
<${f}:facet name=”header”>
<${h}:outputText styleClass=”outputText” value=”${label}”
id=”${id}text” ></${h}:outputText>
</${f}:facet>
${propertyTemplate}</${hx}:columnEx>



  1. Натисніть кнопку OK для закриття діалогового вікна Edit.

  2. Натисніть кнопку OK для закриття діалогового вікна Preferences.


  1. У вікні Page Data розгорніть emp і employee.

  2. Виберіть positionsHeld і перетягніть його на сторінку безпосередньо після інших елементів управління.

На цей раз ви побачите, що майстер має трохи інший вигляд. Оскільки ми генеруємо тільки елементи управління для Position[], Майстер автоматично показує тільки варіанти, що мають відношення до масиву.



  1. У комбінованому списку виберіть Data Table with multiple columns.

  2. Натисніть кнопку Finish.

  3. Збережіть сторінку.

Як показано на малюнку 15, ви побачите нову таблицю Data Table з товщою рамкою і синіми позначками.

Малюнок 15. Data Table


Шаблони методів


На цей раз погляньте на четверту шаблони JavaServer Faces Generation сторінки Preferences – шаблони Method.



  1. Виберіть Window > Preferences.

Востаннє на сторінці Preferences відображалися ітераційні шаблони, тому діалогове вікно Preferences відкриється саме на цій сторінці. Якщо це не так, або якщо ви хочете знайти цю сторінку потім, розгорніть Web> JavaServer Faces Tools> Generation Templates> Iterative Templates.



  1. Виберіть Method Templates (Рисунок 16).

Сторінка Method Templates містить шаблони, застосовувані для дій в поданні Page Data. Шаблон Button використовувався для генерування Command Button, пов'язаної з методом employeeInfo.



  1. Виберіть шаблон Button.

  2. Натисніть кнопку Edit.

Малюнок 16. Шаблон Button


На сторінці Edit Template можна відредагувати вміст шаблону точно так само, як це ми робили раніше для Data Table і Output Text. При виборі Insert Variables ви побачите ті ж самі змінні, які показувалися в діалоговому вікні Edit для Output Text шаблону java.lang.Boolean. Причина полягає в тому, що шаблони Method насправді є шаблонами Property, як шаблони Data є шаблонами Property.



  1. Натисніть кнопку Cancel, Щоб закрити це діалогове вікно.

Створення нового шаблону


Уявімо, що в майбутньому нам знадобиться вводити інформацію про нових співробітників компанії, а не тільки переглядати інформацію про існуючі співробітників. Серед іншого потрібно буде вводити дату народження кожного співробітника. Створіть елемент керування Input Text, до якого приєднаний Date Picker. В результаті у вас повинно вийти приблизно наступне:





<h:inputText styleClass=”inputText” id=”text1″
value = "# {pc_Page.bean.date}" size = "45"> <hx: convertDateTime
date />
<hx:inputHelperDatePicker id=”datePicker1″ />
</h:inputText>


Тепер створіть новий шаблон.



  1. Виберіть Data Templates, А потім New.

  2. Введіть наступну інформацію:



  1. Вставте в Рattern:




 <$ {H}: inputText styleClass = "inputText" id = "$ {id}" value ="#{${ value}} "size =" 45 ">
<${hx}:convertDateTime date />
<${hx}:inputHelperDatePicker id=”${id}datePicker” />
</${h}:inputText>


Для шаблонів ви можете або вводити змінні самостійно (обов'язково оточуючи їх символами ${}), Або натиснути Insert Variables і потім вибрати із списку (див. малюнок 17).

Малюнок 17. Новий шаблон



  1. Натисніть кнопку ОК для збереження цього шаблону.

Повернувшись назад до сторінки Data Templates, ви побачите, що фільтр вгорі автоматично переключився на показ спеціалізованих шаблонів (custom template). Оскільки це новий шаблон, який ви ввели самостійно, він не з'являється в списку Enhanced Templates. Список Custom Templates також включає шаблон Display Text для java.lang.Boolean, Який ви редагували раніше.



  1. Натисніть кнопку OK для виходу з вікна Preferences.

  2. У вікні Page Data розгорніть emp і employee.

  3. Виберіть dob і перетягніть його на сторінку відразу після другої таблиці Data Table.

  4. На екрані Insert JavaBeans виберіть перемикач Inputting data.

  5. Виберіть піктограму стрілки вниз у стовпці Control Type і знайдіть ваш шаблон Input Date Picker.

  6. Виберіть його і натисніть кнопку Finish.

  7. Збережіть сторінку.

Буде згенерована нова HTML-таблиця з вашим новим елементом управління:





<h:inputText styleClass=”inputText” id=”dob2″
value=”#{pc_ViewEmployee.emp.employee.dob}” size=”45″>
<hx:convertDateTime date />
<hx:inputHelperDatePicker id=”dob2datePicker” />
</h:inputText>


Ви успішно створили новий шаблон і використовували його на своїй сторінці.


Спільне використання, заборона і видалення шаблонів


Припустимо, ви хочете надати спільний доступ колегам до свого шаблоном. Давайте розглянемо, як виконувати імпорт і експорт шаблонів.



  1. Завантажте вікно Preferences і перейдіть на сторінку Data Templates.

Зверніть увагу на праву частину екрану, в якій розташовані кнопки Import і Export.



  1. Виберіть ваш шаблон Input Date Picker.

  2. Натисніть кнопку Export.

Завантажиться діалогове вікно з питанням, чи хочете ви зберегти експортований шаблон.



  1. Натисніть кнопку Cancel.

При бажанні експортований шаблон можна надіслати колегам, які можуть використовувати його, натиснувши кнопку Import.


Що робити, якщо майстер Insert JavaBeans містить шаблони, які ви ніколи не захочете використовувати? Шаблони можна тимчасово заборонити або видалити назавжди. Для заборони шаблону зніміть прапорець поруч із ним. Наприклад, ви можете вибрати ваш новий шаблон Input Date Picker і зняти відмітку з прапорця. Якби ви зробили це і перетягнули dob на сторінку, шаблон Input Date Picker не з'являвся б у майстра.


Якби замість цього ви б вирішили назавжди видалити шаблон, можна було б натиснути кнопку Remove. Для шаблонів, що поставляються з Rational Application Developer, можна скасувати таке видалення, вибравши Restore Removed. Проте створені користувачем шаблони (наприклад, наш шаблон Input Date Picker) при цьому не відновлюються, тому не видаляйте їх, якщо не цілком упевнені, що не будете їх використовувати знову.


Враховуючи, що ми не хочемо видаляти або забороняти будь-які шаблони, закрийте це діалогове вікно:



  1. Натисніть кнопку Cancel для закриття діалогового вікна Preferences.

Довідник з перемінним:


Нижче наведено довідник за доступними змінним шаблонів. Крім змінних, перерахованих у таблиці, будь-який шаблон може використовувати змінні бібліотеки тегів (Tag Library). Список змінних Tag Library буде різним в залежності від доступних бібліотек у вашому проекті.


Таблиця 1. Змінні шаблонів властивостей


Змінні шаблонів властивостей відображаються на сторінці Data Template та сторінці Method Template.





























Мінлива


Опис


Приклад результату


Використовуваний шаблон

action Дія для виконання #{pc_ViewEmployee.
doEmpPrintEmployeeInfoAction} 
Button
id Унікальний ідентифікатор для елемента керування name1  Display Text for java.lang.Object
label Мітка для елемента керування MyByteArray:  Link for byte[]
value Зв'язування даних pc_ViewEmployee.emp.employee.name  Display Text for java.lang.Object


Таблиця 2. Змінні шаблонів Wrapper


Змінні шаблонів Wrapper відображаються на сторінці Iterative Templates.


































Мінлива


Опис


Приклад результату


Використовуваний шаблон

id  Унікальний ідентифікатор для елемента керування positionsHeld1  Data table with multiple columns for java.lang.Object[] 
iterativeTemplate  Ітераційний шаблон. Ця змінна повинна використовуватися тільки один раз. <hx:columnEx id=”positionCode1column”> <f:facet name=”header”> <h:outputText styleClass=”outputText” value=”PositionCode” id=”positionCode1text”> </h:outputText> </f:facet> <h:outputText styleClass=”outputText” id=”positionCode1″ value=”#{varpositionsHeld.positionCode}”> <hx:convertNumber /> </h:outputText> </hx:columnEx>  Data table with multiple columns java.lang.Object[] 
label  Мітка для елемента керування PositionsHeld:  Data Table with a single column for java.lang.Object[] 
value  Зв'язування даних pc_Test.emp.employee.positionsHeld  Data Table with multiple columns for java.lang.Object[] 
var  Зв'язування повторюваних даних varpositionsHeld  Data Table with multiple columns for java.lang.Object[] 


Таблиця 3.Переменние ітераційних шаблонів


Змінні ітераційних шаблонів відображаються на сторінці Iterative Templates.





























Мінлива


Опис


Приклад результату


Використовуваний шаблон

id  Унікальний ідентифікатор для елемента керування positionCode1  Data Table with multiple columns java.lang.Object[] 
label  Мітка для елемента керування PositionCode  Data Table with multiple columns java.lang.Object[]
propertyTemplate  Дочірній шаблон. Ця змінна повинна використовуватися тільки один раз. <h:outputText styleClass=”outputText” id=”positionCode1″ value=”#{varpositionsHeld.positionCode}”> <hx:convertNumber /> </h:outputText>  Data Table with multiple columns java.lang.Object[] 
space  Чи не розриває пробіл    Data Table with a single column for java.lang.Object[] 


Резюме з вивченого матеріалу


З даної статті ви дізналися, як використовувати шаблони даних, перетягуючи їх з уявлення Page Data на сторінку, а також навчилися шукати їх в діалоговому вікні Preferences. Ви досліджували різні варіанти налаштування і спільного використання шаблонів, змінили наявний шаблон і навіть створили свій власний. Збройні цими знаннями, ви тепер готові до створення шаблонів, які ідеально підходять для вас і вашої організації.


Завантаження














Опис


Ім'я


Розмір


Метод завантаження

Приклад даних Employee для цієї статті Employee.zip 2 KБ HTTP 

Інформація про методи завантаження


Ресурси



Отримати продукти та технології


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*