Создание фиксированного формата страницы на основе CSS – Часть 1

В этом руководстве рассматривается инфраструктура визуальных веб-приложений JSF в среде NetBeans, используемая для создания фиксированного формата страницы на основе CSS. Для форматирования страницы используются различные панели "Layout Panel" и другие элементы HTML из палитры.

Содержание

• Создание приложения
• Добавление содержимого заголовка
• Добавление содержимого левой колонки
• Добавление содержимого правой колонки
• Добавление содержимого нижнего колонтитула
• Добавление содержимого в основную область
• Заключение

Для работы с этим руководством требуется программное обеспечение и ресурсы, перечисленные ниже.

* Для получения преимуществ благодаря функциональности Java EE 5 в среде IDE NetBeans используйте сервер приложений, который является полностью совместимым со спецификацией Java EE 5, например, сервер приложений GlassFish V2 UR2. В случае использования другого сервера см. заметки о выпуске и часто задаваемые вопросы для получения информации об известных проблемах и обходных решениях. Для получения подробной информации о поддерживаемых серверах и платформе Java EE см. заметки о выпуске.

Примечание для пользователей среды IDE NetBeans 6.1:

• При создании проекта в NetBeans 6.1 доступны новые параметры, для которых можно оставить значения по умолчанию. Например, флажок Use Dedicated Folder for Storing Libraries может быть оставлен неустановленным.
• В среде IDE NetBeans 6.1 поддерживается привязка по запросу. В тех местах, где элементы требуют написания кода Java, теперь следует вручную добавить атрибут привязки к элементам в визуальном веб-приложении JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

Создание приложения

В этом руководстве описано создание веб-приложения на основе CSS, состоящего из одной страницы. Начните с создания страницы со структурой, аналогичной представленной на следующем рисунке.

1. Создайте веб-приложение, использующее инфраструктуру визуальных веб-приложений JSF. Дайте проекту имя com.samples.layout, а пакету исходных файлов – fixedpagelayoutex.

   Примечание: При создании проекта в NetBeans 6.1 доступны новые параметры, для которых можно оставить значения по умолчанию. Например, флажок Use Dedicated Folder for Storing Libraries может быть оставлен неустановленным.

   Файл Page1.jsp откроется в Visual Designer.

2. В окне "Projects" разверните узел "Web pages", щелкните правой кнопкой мыши Page1.jsp и выберите "Refactor > Rename".

   Откроется диалоговое окно "Rename".

3. В диалоговом окне "Rename" введите PageLayout1 в качестве нового имени страницы. Убедитесь, что переименование комментариев было выполнено, и нажмите кнопку "Refactor".

   Имя страницы изменится в окне "Project" и на вкладке в Visual Designer.

4. Для открытия редактора JSP щелкните вкладку "JSP". Добавьте следующий тег HTML к элементу<form>.

   Пример кода 1: внесение изменений в JSP

   <div id="container"> <div id="header"> Header </div> <div id="leftBar"> Left Bar </div> <div id="content"> Main Content </div> <div id="rightBar"> Right Bar </div> <div id="footer"> Footer </div> </div>

5. В окне "Projects" щелкните правой кнопкой мыши папку ресурсов и выберите "New > Cascading Style Sheet".

6. В мастере "New Cascading Style Sheet" введите layout в качестве имени файла и нажмите кнопку "Finish".

   В окне "Projects" под узлом ресурсов появится layout.css.
7. Вернитесь к режиму проектирования PageLayout1.jsp. Перетащите элемент "Link" из раздела "Advanced" окна "Palette" в Visual Designer.
8. Выберите элемент ссылки в окне "Navigator". В окне "Property" установите URL-адрес /resources/layout.css.
9. В окне "Projects" дважды щелкните layout.css для открытия этого файла в Visual Designer.

10. Добавьте следующие правила CSS к layout.css.

    Пример кода 2: добавление правил CSS

    #container { margin:auto; width: 760px; background: #ffffff; } #header { background: #DDDDDD; } #leftBar { float: left; width: 150px; background: #EBEBEB; } #content { float:left; width:450px; background-color: #cdcde6; } #rightBar { float:right; width: 160px; background: #EBEBEB; } #footer { clear:both; background:#DDDDDD; }

    
    Обратите особое внимание на свойства CSS, выделенные синим цветом. Они отвечают за размещение контейнеров (
    ) в правильном месте. Правило CSS нижнего колонтитула имеет свойство "clear:both", посредством которого обозревателю сообщается, что оба конца должны быть очищены (это предотвращает смещение элементов с обеих сторон). Таким образом колонтитул всегда помещается между другими смещающимися элементами.
11. Для получения окантовки выберите div:container в окне "Navigator", установите для свойства "Border" style значение solid, ширину в 5 пикселей и оставьте черный цвет по умолчанию.
12. Для развертывания приложения щелкните правой кнопкой мыши узел проекта и выберите "Run". В обозревателе должна появиться страница, похожая на следующую:

Добавление содержимого заголовка

Сначала к странице добавляется заголовок, а потом его содержимое.

1. Перетащите элемент "Layout Panel" из раздела "Layout" окна "Palette" на header <div> в Visual Designer.

   Примечание: Размер элемента "Layout Panel" по умолчанию – 128 x 128 пикселей.

2. Откройте редактор JSP и удалите содержимое Header из header <div>.

3. Выберите "Layout Panel" в Visual Designer. В окне "Properties" для элемента "Layout Panel" нажмите кнопку с многоточием рядом со свойством style.

   Откроется редактор стилей.

4. В редакторе стилей для элемент "Layout Panel" установите высоту в 175px и ширину в 760px.

   Примечание: Эта ширина равна ширине container <div>, указанной в layout.css.

5. При помощи редактора стилей установите фоновое изображение для элемента "Layout Panel".

   Если изображение заголовка отсутствует, можно использовать уже загруженное изображение, размещенное здесь.
6. Для сохранения изменений нажмите кнопку "OK".

7. В окне "Properties" установите для свойства panelLayout значение Grid Layout или Flow Layout.

   Примечание: При выборе GridLayout затем можно помещать элементы на страницу более простым способом. Если предпочтительно использование "Flow Layout", следует использовать другие элементы структуры для форматирования расположения элементов.

8. Перетащите элемент "Static Text" на элемент "Layout Panel" и установите для его свойства text значение Fixed Page Layout 1. Измените стиль текста при помощи редактора стилей.

9. Запустите приложение. Приложение должно напоминать следующий рисунок.

   

Добавление содержимого левой колонки

Затем в левую колонку страницы добавляется панель переходов. Для удобства хранения содержимого будут добавляться только гиперссылки.

1. Перетащите элемент "Grid Panel" на leftBar <div>.

   Примечание: Размер элемента "Grid Panel" по умолчанию – 128 x 128 пикселей. После добавления элемента к элементу "Grid Panel" первоначальный размер игнорируется.

2. В редакторе JSP удалите содержимое Left Bar из leftBar <div>.
3. Перетащите несколько элементов "HyperLink" из раздела "Basic" окна "Palette" на элемент "Grid Panel". В окне "Navigator" проверьте, что все гиперссылки поместились в элемент "Grid Panel" и при необходимости могут быть переупорядочены.

4. Запустите приложение. Приложение должно напоминать следующий рисунок.

   

Добавление содержимого правой колонки