Использование фрагментов страниц

В данном руководстве описана процедура создания приложения в среде IDE NetBeans 6.0 или 6.1 с двумя фрагментами страниц JSF 1.2 (Woodstock). Один фрагмент содержит логотип приложения. Второй фрагмент содержит ссылки для перемещения между страницами в приложении.

Предполагаемая продолжительность: 20 минут

Содержание

• Описание фрагментов страниц
• Разработка страницы с фрагментами
• Создание фрагмента заголовка
• Создание фрагмента переходов
• Добавление фрагментов ко второй странице
• Деактивация ссылки для текущей страницы
• Дополнительно: Добавление фрагмента нижнего колонтитула
• Рекомендации по использованию фрагментов страниц

Пример логотипа компании, используемый в этом руководстве

" sky.jpg

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

Программное обеспечение или ресурс	Требуемая версия
Среда IDE NetBeans	Web & Java EE, версия 6.1 или 6.0
Комплект для разработчика на языке Java (JDK)	версия 6 или версия 5
Элементы JavaServer Faces Платформа Java EE	1.2 с Java EE 5* или 1.1 с J2EE 1.4
Сервер приложений GlassFish	V2
База данных TRAVEL	Не требуется

* Для получения преимуществ благодаря функциональности 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.

Описание фрагментов страниц

Фрагмент страницы является частью страницы. Это может быть заголовок, нижний колонтитул или панель, которые могут повторно использоваться на других страницах. Во фрагмент страницы можно поместить общий элемент, например, рисунок или поле поиска, а затем включить этот фрагмент в качестве заголовка всех страниц в приложении. Во фрагмент страницы можно также включить название компании и информацию об авторском праве, а затем использовать этот фрагмент в качестве нижнего колонтитула приложения. Как и основная страница, фрагмент страницы представляет собой страницу JSP с собственным связанным компонентом; однако фрагмент страницы имеет расширение файла jspf вместо jsp.

Разработка страницы с фрагментами

Данное руководство начинается с создания домашней страницы для приложения. Затем создается фрагмент заголовка и фрагмент переходов. Далее эти фрагменты добавляются к домашней странице.

1. Создайте новый проект веб-приложения и назовите его FragmentExample. Включите инфраструктуру визуальных веб-приложений JavaServer Faces.

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

   

2. Перетащите элемент "Page Fragment Box" из раздела "Layout" окна "Components Palette" в верхний левый угол страницы.

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

3. Нажмите кнопку "Create New Page Fragment". Введите CompanyLogo в поле "Name" и нажмите кнопку "OK".

   На странице появится фрагмент. Кроме того, фрагмент страницы будет добавлен к окну "Projects" и к блоку <div> в окне "Navigator".

4. Для закрытия диалогового окна "Select Page Fragment" нажмите кнопку "Close".

   Пунктирной линией в Visual Designer обозначен размер фрагмента страницы. Размер по умолчанию составляет 400 пикселей в ширину и 200 пикселей в высоту.
5. Поместите второй элемент "Page Fragment Box" в левой части страницы под фрагментом "CompanyLogo". Присвойте этому фрагменту страницы имя Navigation.
6. Перетащите элемент "Static Text" из раздела "Basic" окна "Palette" на страницу, справа от фрагмента страницы "Navigation". Проверьте, что элемент был перемещен на страницу, а не во фрагмент страницы. Измените текст этого элемента на Welcome to Sky Company.
7. Щелкните в Visual Designer в месте, в котором элементы отсутствуют. В окне "Properties" измените значение свойства Title на Sky Company Home.

Создание фрагмента заголовка

Теперь определите содержимое фрагмента "CompanyLogo", как показано на Рис. 2. Любые изменения фрагмента должны вноситься непосредственно в самом фрагменте, а не на странице.

1. Если это еще не было выполнено, сохраните файл JPEG с примером логотипа компании в файловой системе.

2. Дважды щелкните соответствующий элемент в Visual Designer для открытия фрагмента "CompanyLogo".

   Белый фон указывает на размер фрагмента страницы.
3. В окне "Properties" установите для свойства Width значение 720px, а для свойства Height – значение 120px.
4. Перетащите элемент "Image" из раздела "Basic" окна "Palette" во фрагмент страницы в верхнем левом углу.

5. В окне "Properties" нажмите кнопку с многоточием для свойства url элемента "Image". Добавьте логотип компании к фрагменту страницы следующим образом:

   1. В диалоговом окне нажмите кнопку "Add File".
   2. Перейдите к папке, в которой был сохранен логотип компании (sky.jpg), и выберите изображение.
   3. Нажмите кнопку "Add File". В среде IDE изображение копируется в каталог ресурсов проекта, и отображается соответствующий URL-адрес изображения.
   4. Нажмите кнопку "OK".
6. При необходимости перетащите sky.jpg для его размещения в границах фрагмента страницы.
7. Откройте вкладку "Page1" для просмотра обновлений фрагмента "CompanyLogo". При необходимости скорректируйте структуру расположения элементов на странице.

Создание фрагмента переходов

Теперь определите содержимое фрагмента переходов, как показано на следующем рисунке.

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

1. Дважды щелкните соответствующий элемент в Visual Designer для открытия фрагмента "Navigation".
2. В окне "Properties" установите для свойства Width значение 150px, а для свойства Height – значение 100px.
3. Из раздела "Basic" окна "Palette" перетащите элемент "Hyperlink" и поместите его во фрагмент страницы. Измените текст элемента "Hyperlink" на Home.
4. В окне "Properties" установите для свойства id элемента "Hyperlink" значение homeLink, а для свойства url – значение /faces/Page1.jsp.
5. Перетащите второй элемент "Hyperlink" во фрагмент страницы. Измените текст этого элемента на Company News.

6. Установите для свойства id элемента "Hyperlink" значение newsLink, а для свойства url – значение /faces/News.jsp.

   В следующем разделе будет создана страница "News".

Добавление фрагментов ко второй странице

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

1. В окне "Projects" щелкните правой кнопкой мыши узел "FragmentExample > Web Pages" и выберите "New > Visual Web JSF Page". Назовите новую страницу News и нажмите кнопку "Finish".

   Страница "News" откроется в Visual Designer. Пример разрабатываемой страницы представлен на следующем рисунке.

   
2. Щелкните вкладку "Page1". Скопируйте элементы "Page Fragment" и "Static Text" с этой страницы на страницу "News".
3. В окне "Page 1 – Navigator" выберите элементы div и элемент "Static Text", удерживая нажатой клавишу Ctrl. Проверьте, что выбраны сами элементы div, а не только их дочерние элементы jsp:directive.include.
4. Щелкните правой кнопкой мыши выбираемые записи и выберите "Copy" в контекстном меню.
5. Щелкните вкладку "News".
6. В окне "Navigator" разверните узел "News > page1 > html1 > body1". Щелкните правой кнопкой мыши form1 и выберите "Paste". Элементы, скопированные из Page1.jsp, появятся в Visual Designer.
7. Измените текст элемента "Static Text" на We have a new CEO.
8. Щелкните в пустой области на странице "News". В окне "Properties" измените значение свойства Title на Sky Company News.

9. Нажмите кнопку с многоточием для свойства Background и с помощью функции выбора цвета установите светло-желтый цвет. На этапе выполнения ясно видны различия между страницей "Sky Company News" и домашней страницей "Sky Company".

   Фрагменты "Company Logo" и "Navigation" наследуют цвет фона страницы "News".

Примечание: В среде IDE NetBeans 6.1 поддерживается привязка атрибутов по запросу. Следует вручную добавить требуемый элемент привязки к элементам визуального веб-приложения JSF. Для этого щелкните правой кнопкой мыши каждый элемент и выберите "Add Binding Attribute". Для получения дополнительных сведений см. вики-страницу On-demand Binding Attribute.

Деактивация ссылки для текущей страницы

В этом разделе будет добавлен код для деактивации ссылки "Home" на странице "Page1" и ссылки "Company News" на странице "News".

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

1. Щелкните вкладку "Page1", а затем откройте исходный код Java для страницы.

2. Добавьте следующий код к методу prerender:

   Пример кода 1: код деактивации ссылки для текущей страницы

   public void prerender() { Navigation navigationFragmentBean = (Navigation)getBean("Navigation"); Hyperlink homeLink = navigationFragmentBean.getHomeLink(); homeLink.setDisabled(true); }

3. Щелкните правой кнопкой мыши в редакторе Java и выберите "Fix Imports". Средой IDE будет добавлен следующий оператор импорта:

   import com.sun.webui.jsf.component.Hyperlink;
4. Щелкните вкладку "News" и откройте исходный код Java для страницы.

5. Добавьте следующий код к методу prerender.

   Пример кода 2: код деактивации ссылки для текущей страницы

   public void prerender() { Navigation navigationFragmentBean = (Navigation)getBean("Navigation"); Hyperlink newsLink = navigationFragmentBean.getNewsLink(); newsLink.setDisabled(true); }

6. Щелкните правой кнопкой мыши в редакторе Java и выберите "Fix Imports". Средой IDE будет добавлен следующий оператор импорта:

   import com.sun.webui.jsf.component.Hyperlink;

7. Для запуска приложения нажмите кнопку "Run Main Project" .

   Проверьте, что ссылки "Home" и "Company News" работают правильно.

Дополнительно: Добавление фрагмента нижнего колонтитула

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

Упражнение. Добавьте третью страницу к приложению "FragmentExample". Проверьте, что добавлен еще один элемент "Hyperlink" во фрагмент страницы "Navigation", и установите значение для свойства элемента "Hyperlink" url.

Упражнение. Другим распространенным примером использования фрагмента страницы является добавление информации об авторском праве компании. Добавьте фрагмент страницы в нижнюю часть каждой страницы с шириной 720px и высотой 100px. Добавьте информацию об авторском праве, например, Copyright 1994-2008 Sky Company.

Рекомендации по использованию фрагментов страниц

Ниже приводятся аспекты, которые необходимо учитывать при использовании фрагментов страниц:

• В примере в этом руководстве используются элементы "Hyperlink" с установленным значением для свойства url. Этот подход рекомендуется по причине его простоты, поскольку при этом не требуется устанавливать значение для свойства immediate или настраивать переходы на странице. Альтернативным вариантом является создание фрагмента страницы, содержащего элемент "Button" или "Hyperlink" с установленным значением для свойства action. В этом случае необходимо установить значение для свойства immediate, а также настроить переходы для каждой страницы, которая использует данный фрагмент.

  При наличии большого количества страниц и идентичности результатов переходов "Button" или "Hyperlink" для каждой страницы можно дополнительно изменить исходный файл переходов страницы вместо использования редактора переходов на странице. Для этого нажмите кнопку "XML" на панели инструментов "Page Navigation". В редакторе исходного кода замените определенное имя страницы после тега <from-view-id> (например, /Page1.jsp) на подстановочный символ, например, /*.
• Как показано в этом руководстве, ширину и высоту фрагмента страницы рекомендуется устанавливать в пикселях (например, 100 пикселей). Проценты (например, 100%) можно использовать в веб-обозревателе FireFox, однако в Internet Explorer 6.0 при этом возникают ошибки.

Дополнительная информация

• Использование виртуальных форм
• Переходы по страницам в веб-приложении
• Учебная карта по веб-приложениям

Мы ждем ваших отзывов