Простий шлях створення Web-сайту за допомогою WebSphere Studio Web Site Designer та шаблонів сторінок

IBM WebSphere Studio має потужні інструментальні засоби керування Web-сайтом - Web Site Designer та шаблони сторінок. У цій статті розглядається приклад створення Web-сайту за допомогою Web Site Designer і шаблонів сторінок, а також описується процес створення шаблону сторінки та призначення кількох сторінок.

Шаблони сторінок є однією з нових функціональних можливостей WebSphere Studio Web Site Designer. Використовуючи шаблони сторінок ви зможете:

Керувати загальним вмістом кількох Web-сторінок, наприклад, областями заголовка та виноски, використовуючи окремий файл, який називається файлом шаблону сторінки.
Керувати схемами кількох Web-сторінок.
Одночасно та автоматично оновлювати групу Web-сторінок шляхом простого оновлення шаблону сторінки та його збереження.

Використовуючи Web Site Designer ви можете:

У цій статті розглядаються головним чином динамічно генеровані навігаційні панелі, хоча Web Site Designer має інші корисні функції управління Web-сайтом. Використовуючи панель навігації та шаблони сторінок спільно, ви можете створювати кілька сторінок із загальною схемою, загальними секціями, наприклад заголовками та виносками, та динамічно генерувати навігаційні панелі.

Цей огляд показує взаємозв'язки між Web Site Designer, шаблонами сторінок та HTML/JSP-сторінками:

Малюнок 1. Огляд Web Site Designer та шаблонів сторінок

У цій статті розглядається використання Web Site Designer для імпорту існуючого Web-сайту за допомогою функціїImportWebSphere Studio.

C Web Site Designer ви зможете:

Створити структуру Web-сайту шляхомдодавання, переміщення та видалення іконок Web-сторінки.
Автоматично генерувати посилання навігаційної панелі з урахуванням структури Web-сайта.
Зберігати однаковий зовнішній вигляд та поведінку ваших веб-сторінок з використанням шаблонів сторінок.

Створіть новий Web-проект у WebSphere Studio V5.1, відкрийте Web Site Designer, двічі натиснувшиWeb Site Navigationу вікні Project Navigator. Потім імпортуйте існуючі Web-сторінки:

Малюнок 2. Web Site Designer - вікно навігації

Ви можете додати веб-сторінки до Web Site Designer, натискаючиConvert to Web site. Якщо ваш проект маєWeb site navigation, ви можете додати існуючі Web-сторінки, використовуючиAdding existing pagesзамістьConverting to Web site.

Призначаючи шаблон сторінки, можна підтримувати однаковий зовнішній вигляд та поведінку вашого веб-сайту. Для призначення шаблону сторінки з використанням прикладу шаблону Web Site Designer:

Вибраний шаблон (B-03_blue.htpl) повинен бути призначений всім сторінкам вашого сайту. На всіх сторінках має відображатися синя лінія, яка вказує на те, що шаблон призначено:

Малюнок 4. Шаблон призначений всім сторінкам

Після призначення шаблону вміст тіла кожної сторінки розташовуватиметься в області bodyarea шаблону сторінки:

Малюнок 5

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

Малюнок 6. Навігаційна панельгенерується автоматично

Відкрийте Web Site Designer.
Виберіть сторінку, яка містить синю лінію (призначений шаблон) у Web Site Designer.
ВиберітьPage template => Open Template With => Page Designer for Templateз контекстного меню. У Page Designer відкриється шаблон сторінки (B-03_blue.htpl).

Потім ви повинні змінити призначення посилання:

Малюнок 9. Навігаційна панель сторінки Company після зміни атрибутів

Таким чином, ви можете змінювати призначення посилань у структурі сайту (рисунок 4), змінюючи атрибути навігаційної панелі тегів.

На цьому етапі ви завершили створення Web-сайту з використанням шаблону сторінки та навігаційної панелі! Але цей шаблон є прикладом шаблону, який постачається у WebSphere Studio. Для створення шаблону сторінки Web-сайту на ваш смак існує три шляхи:

Зміна прикладу шаблону - приклад шаблону був скопійований у ваш проект і призначений сторінкам Web-сайту. Тому можна створити власний шаблон шляхом зміни цього прикладу шаблону у вашому проекті.
Створення шаблону сторінки з існуючої веб-сторінки - Існує функція збереження файлу веб-сторінки як шаблону сторінки. Відкрийте звичайну сторінку вашого сайту, видаліть специфічний для цієї сторінки вміст та збережіть загальний вміст. Збережіть файл як шаблон сторінки, вибравшиFile => Save As page template.
Створення шаблону сторінки з нуля за допомогою майстра New file.

Ця стаття описує створення шаблону сторінки з нуля. Ви можете створити або змінити шаблон сторінки, так само як і інші Web-сторінки, використовуючи Page Designer: перемістити та відпустити об'єкт із палітри, ввести текстовий вміст у закладціDesign і т.д.

Для створення нового шаблону сторінки:

У вікні Project Navigator view виберіть папку теми у папці WebContent.
ВиберітьFile => New => Page template Fileіз системного меню. Відкриється майстер нового шаблону сторінки.
Вкажіть назву файлу newTemplate.
У спискуModelвиберітьTemplate containing only HTML.
Натисніть Finish.

У папці теми буде створено новий файл шаблону newTemplate.htpl і відкриється в Page Designer. Ви побачите наступне вікно повідомлення:

Малюнок 10. Вікно повідомлення, що показується при відкритті нового файлу шаблону сторінки

Новостворений шаблон не містить області, яка надалі заповнювалася б кожною Web-сторінкою (званою Content Area). Дане вікно повідомлення нагадує, що ви повинні визначити одну або кілька Content Area у вашому шаблоні. Натисніть OK і почніть редагувати шаблон сторінки.

Область вмісту після редагування шаблону сторінки можна визначити аналогічно HTML або JSP-сторінкам таким чином:

ВиберітьContent Areaу вікніPaletteview областіPage template.
Перемістіть та відпустіть (drag and drop) вибраний елемент палітри кудись за вашим бажанням для заповнення вмістом кожної Web-сторінки. Відкриється діалогове вікноInsert Content Area for page template.
НатиснітьOK.
Збережіть шаблон сторінки, вибравшиFile-Save.

Малюнок 11. Додавання області вмісту до шаблону сторінки

Різні типи шаблонів сторінок

При створенні файлу шаблону сторінки з нуля ви могли помітити список, що випадаєModelу майстріNewpage template File. WebSphere Studio надає три варіанти створення шаблонів:

Template containing only HTML

У цьому варіанті шаблонів ви можете додавати до них лише HTML-теги, JSP-теги заборонені. Це стосується і HTML-сторінок і JSP-сторінок. Ви можете підтримувати однаковий вигляд і поведінку Web-проекту, який використовує HTML і JSP-сторінки, а також статичного Web-проекту. Цей тип шаблонів використовує розширення HTPL-файлу.

Template containing JSP

У цьому варіанті шаблону ви можете додавати до нього і JSP-теги та HTML-теги. Але цей шаблон застосовується лише в JSP-сторінках. Якщо ваш проект не має статичних (HTML) сторінок, цей варіант найкращий. Цей тип шаблонів використовує розширення JTPL.

Template containing Faces Components

Цей тип шаблону в основному аналогічний варіантуTemplate containing JSP, але в шаблоні вже визначені директиви taglib і теги користувача Faces Components. Цей тип шаблонів використовує розширення JTPL.

Малюнок 12. Майстер New page template file

Додавання навігаційної панелі до шаблону сторінки

Оскільки щойно створений шаблон створювався з нуля, він не містить панелі навігації. Тому ви маєте додати її. Щоб додати навігаційну панель, виконайте такі дії:

Відкрийте шаблон сторінки в Page Designer, двічі натиснувши на щойно створений файл newTemplate.htpl.
Перемістіть та відпустіть об'єктNavigation barз областіWeb site navigation. Ви можете вибрати будь-яку навігаційну панель, але для цього прикладу перемістіть Horizontal Bar в загальну область. Зазвичай панель навігації використовується у спільній областіаналогічно заголовку та виносці. Отже, ви повинні вставити навігаційну панель у загальну область.
Після додавання панелі навігації змініть значення її атрибутів для навігації по потрібних сторінках.

Малюнок 13. Файл шаблону сторінки з навігаційною панеллю в другому рядку і в лівій синій колонці таблиці

Заміна шаблону сторінки

Ви тільки-но створили ваш власний шаблон сторінки! Останньою дією, яку ви повинні виконати, є призначення нового шаблону сторінки файлам Web-сторінок. Існуючі файли Web-сторінок вже використовують приклад шаблону, тому ми замінимо його. Так само, як і при призначенні шаблону сторінки ви можете замінити шаблони одночасно кількох сторінок за допомогою Web Site Designer. Для заміни шаблонів сторінок:

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

Малюнок 14. Файли Web-сторінок з новим шаблоном сторінки