HOME / Docs & Support / NetBeans 6.0 / Web Application Documentation

Переходы по страницам в веб-приложении

В этом руководстве описана настройка переходов по страницам в среде IDE NetBeans 6.0. Сначала в среде IDE создается веб-приложение, в котором используется простой переход между двумя страницами. Кнопка на первой странице позволяет перейти ко второй странице. После изменения приложения можно во время выполнения на основе значения, возвращенного элементом "Drop Down List", определять, какая именно страница отображается. Также в руководстве описан альтернативный и более сложный способ динамических переходов по страницам, который позволяет осуществлять переходы сразу же после выбора варианта из раскрывающегося списка.

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

Содержание

Содержимое на этой странице относится к среде IDE NetBeans 6.0 и 6.1

Создание первой страницы
Переход между двумя страницами
Добавление элементов ко второй странице
Добавление раскрывающегося списка для динамических переходов
Добавление третьей страницы
Реализация динамических переходов по страницам
Развертывание приложения
Реализация расширенных динамических переходов по страницам

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

Программное обеспечение или ресурс	Требуемая версия
Среда IDE NetBeans	Web & Java, версия 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.

Создание первой страницы

В первой части этого руководства создается веб-приложение с двумя страницами, переход между которыми осуществляется посредством кнопки. Далее добавляется элемент "Drop Down List", который позволяет пользователю выбрать целевую страницу во время выполнения.

Сначала создайте страницу, содержащую элементы "Static Text" и "Button".

Создайте новый проект веб-приложения с названием NavigationExample, использующий сервер приложений GlassFish V2 и инфраструктуру визуальных веб-приложений JavaServer Faces.

Новый проект отображается с начальной страницей в Visual Designer. На следующем рисунке показана страница, созданная посредством описанной ниже процедуры:
Перетащите на страницу элемент "Static Text" из раздела "Basic" окна "Palette". Измените значение свойства text этого элемента на Page One путем набора этого текста непосредственно поверх текста по умолчанию.
Перетащите на страницу элемент "Button" из окна "Palette" и измените значение свойства text на Go.
Примечание: Существует известная проблема, связанная с шириной элемента "Button" на основе JSF 1.2 в IE7. Обходным решением является размещение элемента "Button" в элементе структуры ("Grid Panel", "Group Panel" или "Layout Panel"). При изменении размеров элемента структуры автоматически изменяются размеры элемента "Button".

Переход между двумя страницами

Теперь необходимо добавить к приложению еще одну страницу и определить переход между первой и второй страницами путем создания ссылки или связи между страницами.

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

Щелкните правой кнопкой мыши в пустом месте в области изменения в визуальном редакторе и выберите "Page Navigation" в контекстном меню.
Редактор потока операций на странице и значок Page1.jsp , обозначающий страницу, созданную в предыдущем разделе. Обратите внимание, что этот значок имеет четыре компонента:
1. Символ указывает тип страницы, представленной значком. Зеленая стрелка указывает на то, что данная страница является главной страницей проекта.
2. Имя файла позволяет отличать страницы приложения друг от друга.
3. Знак "плюс" используется для разворачивания значка и просмотра элементов на странице.
4. Точка присоединения позволяет создавать пути переходов между страницами.
Создайте новую страницу JSP следующим образом:
1. Щелкните правой кнопкой мыши в области изменения и выберите "New File".
2. В мастере создания файла выберите "JavaServer Faces" в поле "Categories" и "Visual Web JSF Page" в области "File Types", а затем нажмите кнопку "Next".
3. Примите имя по умолчанию "Page2" и нажмите кнопку "Finish".
  Page2.jsp открывается в Visual Designer. Щелкните вкладку Faces-config.xml, чтобы снова открыть редактор потока операций на странице. На Рис. 2 показан редактор потока операций для обеих страниц.
Щелкните знак "плюс" на значке Page1.jsp для увеличения и отображения значка button1.
Щелкните значок button1 и проведите линию к значку Page2.jsp. Появившаяся линия идет от первой странице ко второй странице. По умолчанию ей присваивается имя case1.
Дважды щелкните имя соединительной линии и измените его с case1 на Page 2.

На следующем рисунке показан редактор потока операций на странице с соединительной линией между этими двумя страницами.

Щелкните "XML" на панели инструментов изменения для просмотра кода, созданного в течение последних двух действий. Под кодом управляемого компонента, представленного многоточием (...), добавляется правило перехода (полужирным шрифтом ниже).

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

<?xml version="1.0" encoding="UTF-8"? >
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
   http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
...
    <navigation-rule>
        <from-view-id>/Page1.jsp</from-view-id>
        <navigation-case>
            <from-outcome>Page 2</from-outcome>
            <to-view-id>/Page2.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
                     </faces-config>

Код, добавляемый между тегами faces-config, определяет одно правило перехода для этого веб-приложения. Каждое правило перехода имеет одну исходную страницу и одну или несколько целевых страниц.

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

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

Щелкните "PageFlow" на панели инструментов изменения.
Дважды щелкните значок Page2.jsp.
Страница откроется в Visual Designer.
Поместите элемент "Static Text" на страницу и измените значение свойства text на Page Two, как показано на следующем рисунке.
Выполните развертывание приложения с помощью клавиши F6.
После развертывания веб-приложения в обозревателе откроется страница "Page One", как показано на следующем рисунке:
Нажмите кнопку "Go" для перехода с первой страницы на вторую.

В этом разделе были созданы две страницы и установлен простой переход между ними. В следующем разделе будет настроен переход на основе значения, выбранного в элементе "Drop Down List".

Добавление раскрывающегося списка для динамических переходов

Рассмотрим динамические переходы по страницам. Добавьте элемент "Drop Down List" к первой странице приложения. Элемент "Drop Down List" позволяет пользователю выбрать целевую страницу во время выполнения. Далее к приложению будет добавлены третья страница, и элемент "Drop Down list" будет содержать два варианта выбора.

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

Откройте Page1.jsp в Visual Designer.
Поместите элемент "Drop Down List" ниже элемента "Static Text".
Щелкните правой кнопкой мыши элемент "Drop Down List" и выберите "Configure Default Options".
В диалоговом окне "Options Customizer – dropDown1" замените значения каждого из отдельных вариантов по умолчанию значениями, показанными на следующем рисунке. Щелкните каждую ячейку таблицы для изменения значения и нажмите клавишу Enter после изменения каждого поля для применения изменений.
Для сохранения всех изменений нажмите кнопку "OK".

Добавление третьей страницы

Теперь создадим третью страницу, на которую можно будет перейти с первой страницы.

В окне "Projects" щелкните правой кнопкой мыши узел "NavigationExample > Web Pages" и выберите "New > Visual Web JSF Page". В мастере "New Visual Web JSF Page" нажмите кнопку "Finish". В среде IDE создается и открывается Page3.jsp.
Перетащите на эту страницу элемент "Static Text" из окна "Palette". Измените текст элемента на Page Three.

Реализация динамических переходов по страницам

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

Откройте редактор потока операций на странице.
Щелкните значок Page1.jsp для просмотра его содержимого и проведите соединительную линию от точки присоединения кнопки к значку Page3.jsp.
Измените имя соединения с case1 на Page 3.
Дважды щелкните значок Page1.jsp для открытия страницы в Visual Designer.
Дважды щелкните элемент кнопки "Go" и просмотрите его исходный код для метода-обработчика действия в редакторе Java.

Замените оператор return в методе следующим кодом, выделенным полужирным шрифтом.

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

Пример кода 2: оператор возврата

public String button1_action() {
     return (String) dropDown1.getValue();
                     }

Развертывание приложения

Протестируйте возможности перехода между страницами.

Выполните развертывание приложения с помощью клавиши F6.
На первой странице выберите "Page 2" в раскрывающемся списке и нажмите кнопку "Go" для перехода ко второй странице.
Нажмите кнопку "Back" в обозревателе для возврата к первой странице со страницы "Page 2".
Теперь выберите "Page 3" в раскрывающемся списке и нажмите кнопку "Go" для перехода к третьей странице.

Реализация расширенных динамических переходов по страницам

В предыдущем разделе был описан простой способ обработки динамических переходов по страницам. Пользователь выбирает целевую страницу в раскрывающемся списке и нажимает кнопку "Go". Если требуется переходить на другую страницу при изменении значения в раскрывающемся списке, необходимо внести в проект, созданный в предыдущем разделе, следующие изменения.

Щелкните вкладку "Page1" и нажмите кнопку "Design" на панели инструментов изменения для перехода к Visual Designer.
Щелкните правой кнопкой мыши кнопку "Go" и выберите "Delete".
Дважды щелкните элемент "Drop Down List" для просмотра кода класса Page1 в редакторе Java.

Добавьте следующий код, выделенный полужирным шрифтом, к методу-обработчику dropDown1_processValueChange(). Первые две строки кода используются для получения ссылки на объект приложением. Из объекта приложения можно получить экземпляр обработчика переходов. При вызове метода handleNavigation() в отношении этого объекта указывается значение, которое будет получено из элемента "Drop Down List" для определения целевой страницы.

Пример кода 3: метод-обработчик переходов

public void dropDown1_processValueChange(ValueChangeEvent event) {
    Application application = getApplication();
    NavigationHandler navigator = application.getNavigationHandler();
    FacesContext facesContext = getFacesContext();
    navigator.handleNavigation(facesContext,
        null,(String) dropDown1.getValue());

                     }

Обратите внимание на красные волнистые линии, которые указывают на, что не удается обнаружить классы Application, NavigationHandler и FacesContext. В следующем действии будет выполнен импорт этих классов.

Щелкните правой кнопкой мыши в любом месте в редакторе исходного кода и выберите "Fix Imports" для автоматического добавления следующих операторов импорта в верхней части исходного файла:

Пример кода 4: операторы импорта для метода-обработчика переходов

import javax.faces.application.Application;
import javax.faces.application.NavigationHandler;
import javax.faces.context.FacesContext;

Нажмите кнопку "Design" на панели инструментов изменения для вывода "Page1" в Visual Designer.
Щелкните правой кнопкой мыши элемент "Drop Down List" и выберите "Auto-Submit on Change" для автоматической передачи указанного элемента при его выборе.
Разверните и запустите приложение.
Выберите в раскрывающемся списке элемент "Page 2" для перехода с первой страницы ко второй странице. Для возврата к первой странице нажмите кнопку "Back".
Выберите в раскрывающемся списке элемент "Page 3" для перехода с первой страницы на третью страницу.

Дополнительно: работа с большим количеством страниц

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

В редакторе переходов на странице нажмите кнопку "XML" на панели инструментов изменения.

Добавьте правило перехода как первое значение в следующем коде XML. Для <from-view-id> укажите /*, для <from-outcome> – идентифицирующую строку, для <to-view-id> – целевую страницу.

Пример кода 5: код XML для переходов по страницам для приложений с большим количеством страниц

<?xml version="1.0" encoding="UTF-8"? >
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
    <navigation-rule>
        <from-view-id>/*</from-view-id>
        <navigation-case>
            <from-outcome>login</from-outcome>
            <to-view-id>/Page3.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
    <navigation-rule>
        <from-view-id>/Page1.jsp</from-view-id>
        <navigation-case>
            <from-outcome>case1</from-outcome>
            <to-view-id>/Page2.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
</faces-config>

При возврате к редактору переходов на странице отображаются ошибки, которые можно проигнорировать.

Все методы обработки действий для элементов действий, которые должны передаваться странице, должны возвращать from-outcome (в данном случае "login"), как показано ниже:
```
public String button1_action() {
        return "login";
    }
```

Заключение

Ниже приведена типичная последовательность действий для реализации переходов по страницам:

Создание страниц.
Размещение на странице элементов, поддерживающих переходы, например, кнопок и раскрывающихся списков.
Создание связей между элементами и страницами с помощью редактора потока операций на странице.
Реализация расширенных переходов с помощью метода-обработчика dropDown1_processValueChange().

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

Дата последнего изменения страницы: 15 апреля 2008 г.

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

Bookmark this page