Авторы: Java Studio Creator Tutorials Team
Перевод: Роман Мостыка
Январь 2006 [Номер редакции: V2-3] |
|
|
| В этом учебном пособии мы будем использовать
интегрированную среду разработки (IDE) Sun Java Studio Creator для
создания приложения, включающего два фрагмента страниц (page fragments). Первый
фрагмент содержит логотип приложения, второй – ссылки
для навигации по его страницам. |
|
Содержание
|
![[spacer]](pagefragments_files/a.gif) |
 |
О фрагментах страниц
Фрагмент страницы это такая ее часть, которая может быть использована на других страницах, например, верхний
колонтитул, нижний колонтитул или панель навигации. Часто встречающиеся элементы, такие как строка поиска или графический объект, можно выполнить в виде фрагмента и потом включать этот фрагмент как верхний колонтитул во все
страницы приложения. В качестве нижнего колонтитула страниц приложения можно использовать фрагмент с названием компании и информацией об авторских правах. Как
и основная страница, фрагмент это JSP страница, ассоциированная со своим собственным компонентом page bean. Файл фрагмента, однако, имеет расширение jspf,
а не jsp.
Построение страницы с фрагментами
В этом учебном пособии мы начнем с построения стартовой
страницы для приложения.
Потом мы создадим фрагменты верхнего колонтитула и панели
навигации и добавим их на стартовую страницу.
- Создайте новый проект web-приложения и назовите его
FragmentExample.
На Рис. 1 показана страница, которая будет создана в этом разделе.
Рис.
1: Стартовая страница приложения
|
- Из секции Layout закладки Components палитры перетащите мышкой компонент Page Fragment Box в левый верхний угол страницы.
Появится диалоговое окно Select Page Fragment.
- Нажмите на кнопку Create New Page Fragment. Наберите
CompanyLogo
в поле Name
и нажмите на кнопку OK.
Фрагмент появится на странице. Вдобавок, фрагмент
будет добавлен в окно Projects, а также в блок <div> в окне
Outline.
- Нажмите на кнопку Close, чтобы закрыть диалоговое окно Select
Page Fragment.
Пунктирная линия в дизайнере показывает размер фрагмента. Размер по умолчанию 400 пикселей в ширину и 200 пикселей в высоту.
- Поместите второй компонент Page Fragment Box на левую
сторону страницы под фрагментом CompanyLogo. Назовите этот фрагмент
Navigation.
- Из секции Basic палитры перетащите мышкой компонент Static
Text
на страницу и поместите его справа от фрагмента Navigation.
Убедитесь что компонент помещен на страницу, а не на фрагмент.
Измените текст этого компонента на
Welcome to Sky Company.
Создание фрагмента верхнего колонтитула
Теперь мы определим содержимое фрагмента CompanyLogo, как
показано на Рис. 2. Любые изменения фрагмента должны быть сделаны в самом фрагменте, а не на странице.
Рис. 2:
Фрагмент страницы CompanyLogo
|
- Сохраните JPEG файл с примером
логотипа компании в вашей файловой системе.
- Откройте фрагмент CompanyLogo, дважды щелкнув левой кнопкой
мышки на компоненте в дизайнере.
Белый фон показывает размер фрагмента.
- В окне Properties задайте в поле свойства
Height
значение 120px, а в поле свойства Width
значение 720px.
- Из секции Basic палитры перетащите мышкой компонент Image
в левый верхний угол фрагмента.
- В окне Properties нажмите на кнопку (...) в поле свойства
url.
Добавьте логотип компании на фрагмент следующим образом:
- В диалоговом окне нажмите на кнопку Add File.
- Откройте папку, где Вы сохранили логотип компании, и
выберите изображение.
- Нажмите на кнопку Add File. IDE скопирует изображение в
папку ресурсов проекта.
- Нажмите на кнопку OK.
- Перейдите на закладку Page1, чтобы увидеть обновленный фрагмент CompanyLogo. При необходимости отрегулируйте расположение компонентов на странице.
Создание фрагмента панели навигации
Теперь мы определим содержимое фрагмента панели навигации,
как показано на Рис. 3.
Рис. 3:
Фрагмент Navigation
|
Для этого необходимо выполнить следующие действия:
- Откройте фрагмент Navigation, дважды щелкнув левой кнопкой
мышки на компоненте в дизайнере.
- В окне Properties задайте в поле свойства
Height
значение 100px и в поле свойства Width
значение 150px.
- Из секции Basic палитры перетащите мышкой компонент
Hyperlink
и поместите его на фрагмент. В качестве текста компонента Hyperlink укажите
Home.
- В окне Properties в поле свойства
id
компонента Hyperlink укажите значение homeLink, а в поле свойства
url
значение /faces/Page1.jsp
- Перетащите мышкой на фрагмент еще один компонент Hyperlink.
В качестве текста этого компонента укажите
Company News.
- Задайте в поле свойства
id
компонента Hyperlink значение newsLink, а в поле свойства
url значение /faces/News.jsp.
Страницу News мы создадим в следующем разделе.
Добавление фрагментов на вторую страницу
В этом разделе мы создадим вторую страницу с фрагментами верхнего колонтитула и панели навигации. Мы зададим цвет фона этой страницы, чтобы показать, как
установки стиля страницы наследуются фрагментом.
- В окне Projects щелкните правой кнопкой мышки на узле
FragmentExample > Web Pages и выберите New > Page. Наберите
News в поле имени
страницы и нажмите на кнопку Finish.
Страница News откроется в дизайнере. Мы сделаем нашу страницу такой, как показано на Рис. 4.
Рис. 4:
Страница News
|
- Перейдите на закладку Page1. Скопируйте фрагменты
и компонент Static Text из этой страницы на страницу News. Для этого
Вам необходимо выполнить следующие действия:
- В окне Outline нажмите на клавиатуре кнопку
Control и, удерживая
ее, выберите оба элемента
div и компонент Static Text.
Убедитесь, что выбраны сами элементы div, а не только
их дочерние элементы jsp:directive.include.
- Щелкните правой кнопкой мышки на выделенных объектах и выберите Copy
во всплывающем меню.
- Перейдите на закладку News.
- Щелкните правой кнопкой мышки на дизайнере и выберите Paste
во всплывающем меню. При необходимости отрегулируйте расположение компонентов на странице.
- Измените текст компонента Static Text на
We have a new Chief Executive Officer.
- Щелкните мышкой на свободном месте на странице News. В окне
Properties нажмите на кнопку (...) в поле свойства
Background
и с помощью диалога выбора цвета установите светло-желтый цвет.
Фрагменты CompanyLogo и Navigation унаследуют цвет фона страницы News.
Отключение ссылки на текущую страницу
В этом разделе мы добавим код, отключающий ссылку Home на странице
Page1 и ссылку Company News на странице News.
- Перейдите на закладку Page1 и откройте исходный
Java-код страницы.
- Добавьте следующий код в метод
prerender:
| Пример кода 1: Код для
отключения ссылки на текущую страницу |
public void prerender() {
Navigation navigationFragmentBean = (Navigation)getBean("Navigation");
Hyperlink homeLink = navigationFragmentBean.getHomeLink();
homeLink.setDisabled(true);
}
|
- Щелкните правой кнопкой мышки в редакторе Java-кода и
выберите Fix Imports.
- Перейдите на закладку News и откройте исходный Java-код
страницы.
- Добавьте следующий код в метод
prerender:
| Пример кода 2: Код для
отключения ссылки на текущую страницу |
public void prerender() {
Navigation navigationFragmentBean = (Navigation)getBean("Navigation");
Hyperlink newsLink = navigationFragmentBean.getNewsLink();
newsLink.setDisabled(true);
}
|
- Щелкните правой кнопкой мышки в редакторе Java-кода и
выберите Fix Imports.
- Запустите приложение.
Проверьте правильность работы ссылок> Home и Company News.
Идем дальше: добавление фрагмента нижнего колонтитула
Это учебное пособие показывает, как использовать фрагменты в простом двухстраничном приложении. В действительности в приложении
обычно больше страниц.
Попробуйте: Добавьте третью страницу к приложению
FragmentExample. Добавьте компонент Hyperlink во фрагмент
Navigation и установите свойство url этого
компонента.
Попробуйте: Фрагменты страниц также часто содержат информацию об авторских правах компании.
Добавьте фрагмент в нижнюю часть каждой страницы. Задайте
размеры фрагмента: ширина 720px и высота 100px.
Добавьте информацию об авторских правах, например, Copyright
1994-2007 Sky Company.
Советы по использованию фрагментов страниц
Используя фрагменты страниц, стоит учесть следующее:
- В этом учебном пособии мы использовали компоненты
Hyperlink с заданным свойством
url. Рекомендуется использовать этот подход из-за его простоты: в этом случае не
нужно устанавливать свойство immediate
или задавать правила навигации между страницами. Можно использовать
альтернативный метод, который заключается в создании фрагмента с компонентом Button или Hyperlink с указанным
свойством action. В этом случае нужно установить
свойство immediate
и задать правила навигации между страницами для каждой страницы,
которая использует фрагмент. Если в приложении большое количество
страниц, и результат навигации для компонента Button или Hyperlink один
и тот же для каждой страницы, можно выборочно отредактировать файл
исходного кода правил навигации между страницами вместо использования
визуального редактора правил навигации. Редактор исходного кода открывается с помощью нажатия на кнопку Source на панели редактора правил навигации. В редакторе
исходного кода после тега <from-view-id> замените заданное
имя страницы (например, /Page1.jsp) на регулярное
выражение, такое как /*.
- Обычно фрагмент наследует установки стиля страницы, в
которую он включен. Эти установки определяются в таблице стилей
страницы (CSS - Cascading Style Sheets).
Компоненты внутри фрагмента могут использовать классы стилей,
определенные в этой таблице. В целом, любой компонент в Java
Studio Creator может быть связан с классом стиля, определенным в таблице
стилей.
- Если вы пользуетесь последней версией интегрированной среды
разработки Java Studio
Creator, то обновления, которые вы делаете во фрагменте во
время разработки, автоматически появляются в страницах, в которые этот
фрагмент включен. Если же вы используете более ранние версии IDE,
то необходимо обновить страницу, щелкнув правой кнопкой мышки и
выбрав Refresh во всплывающем меню.
- Виртуальные формы (virtual form) во фрагментах не поддерживаются. Для конфигурации выборочной обработки компонентов во фрагменте нужно задать для этих компонентов значение True свойства
immediate. Этого достаточно для большого количества
вариантов использования фрагментов; однако, при таком решении все
еще остаются ограничения, так как возможна конфигурация выборочной
обработки только одной группы компонентов.
- В качестве примера использования компонентов Layout для
расположения фрагментов и других компонентов на странице смотрите
блог Уинстона Пракаша (Winston Prakash)
CSS Layout Technique.
- Как показано в этом учебном пособии, для задания высоты и
ширины фрагмента лучше использовать пиксели (например, 100px).
Если задать размеры в процентах (например, 100%), то в браузере
Firefox приложение будет работать хорошо, но оно не будет
работать, например, в Internet Explorer 6.0.
См. также:
|
