Учебный курс по электронной коммерции в NetBeans. Подготовка представлений страниц и сервлета Controller

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

Также в этой главе для приложения будет создан дескриптор веб-развертывания (файл web.xml). Дескриптор развертывания может использоваться для указания конфигурационной информации, считываемой сервером при развертывании. Хотя спецификации сервлетов версии 3.0, включенные в Java EE 6, позволяют использовать аннотации класса вместо XML, дескриптор развертывания, тем не менее, может потребоваться для настройки определенных элементов приложения. В этой главе в частности будут добавлены директивы для определения верхнего и нижнего колонтитулов и указания, к каким файлам они будут применяться.

Одна из целей этого учебного курса — создать страницы JSP, соответствующие представлениям, указанным в проекте приложения. В соответствии с макетами страниц и блок-схемой процесса, реализация макетов страниц начинается с создания заполнителей всех визуальных и функциональных компонентов. В этом учебном курсе приведено руководство по реализации макета главной страницы. Перечисленные ниже действия можно использовать для создания других страниц по своему усмотрению или можно загрузить снимок 1 проекта, на котором представлены макеты всех страниц.

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

Примечания

• Для работы среды IDE NetBeans требуется корректная работа комплекта для разработчика на языке Java (JDK). Если указанные ресурсы не установлены, JDK следует загрузить и установить в первую очередь.
• Пакет среды Java NetBeans включает в себя технологии Java Web и EE, которые требуются для создаваемого в этом учебном курсе приложения.
• Пакет Java среды IDE NetBeans также включает в себя сервер GlassFish, который необходим для работы с этим учебным курсом. Можно загрузить сервер GlassFish отдельно, но версия, предоставляемая с NetBeans, имеет преимущество, так как автоматически зарегистрирована в среде IDE.

Создание файлов проекта

Для создания файлов проекта воспользуйтесь мастером создания файлов среды IDE. Можно нажать кнопку "Создать файл" (кнопка ), нажать комбинацию клавиш CTRL+N (⌘+N в Mac OS) или щелкнуть правой кнопкой мыши в окне "Проекты" узел родительской папки для нового файла и выбрать в меню "Создать" пункт, соответствующий типу файла. В следующих подразделах будут созданы страницы JSP и таблица стилей проекта.

• Создание страниц JSP
• Создание таблицы стилей

Создание содержимого HTML и CSS

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

Замечание о совместимости обозревателей.В этом учебном курсе используется обозреватель Firefox 3 и не гарантируется совместимость разметки страницы с другими современными обозревателями. В реальности при работе с технологиями создания внешнего интерфейса (HTML, CSS, JavaScript) необходимо принимать меры для обеспечения корректного отображения веб-страниц во всех версиях обозревателей, которые могут использоваться посетителями (как правило, Internet Explorer, Firefox, Safari, Chrome и Opera). При работе в среде IDE можно указать, в каком обозревателе должно открываться приложение. Выберите в меню "Сервис" пункт "Параметры" (в Mac OS — пункт "Параметры" в меню NetBeans) и под вкладкой "Общее" в окне "Параметры" выберите нужный обозреватель в выпадающем списке "Веб-обозреватель". Среда IDE обнаруживает обозреватели, установленные в местоположении по умолчанию. Если установленный на компьютере обозреватель не отображается, нажмите кнопку "Правка" и зарегистрируйте обозреватель вручную.

Подготовка отображения веб-страниц, как правило, итерационный процесс, при котором требуется постоянная обратная связь с потребителем. Следующие действия демонстрируют средства среды IDE на примере макета главной страницы.

1. В окне "Проекты" дважды щелкните файл index.jsp, чтобы открыть его в редакторе.
2. Вначале создайте теги <div> для основных областей страницы. Можно создать пять тегов: четыре для основных областей (верхний и нижний колонтитулы, левый и правый столбец) и пятый, содержащий все остальные. Удалите весь текст внутри тегов <body> и замените его на следующий. Новый код показан полужирным шрифтом.

   <body>
       <div id="main">
           <div id="header">
               header
           </div>
   
           <div id="indexLeftColumn">
               left column
           </div>
   
           <div id="indexRightColumn">
               right column
           </div>
   
           <div id="footer">
               footer
           </div>
       </div>
   </body>

3. Добавьте ссылку на таблицу стилей в заголовке страницы и измените текст заголовка.

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <link rel="stylesheet" type="text/css" href="css/affablebean.css">
       <title>The Affable Bean</title>
   </head>

4. Откройте в редакторе таблицу стилей affablebean.css. Вначале создайте правила для идентификаторов созданных тегов <div>.
   • Для указания размеров областей используйте свойства width и height.
   • Чтобы отличать области при просмотре страницы, используйте свойство background.
   • Для горизонтального центрирования четырех областей на странице, можно добавить параметр margin: 20px auto к правилу body. (20px относится к верхнему и нижнему полю; auto создает равные промежутки слева и справа.) Затем добавьте параметр float: left к левому и правому столбцу.
   • В нижнем колонтитуле требуется параметр clear: left, чтобы его верхняя граница отображалась после нижних границ выровненных влево и расположенных выше областей (т.е. левого и правого столбца).

   body {
       font-family: Arial, Helvetica, sans-serif;
       width: 850px;
       text-align: center;
       margin: 20px auto;
   }
   
   #main { background: #eee }
   
   #header {
       height: 250px;
       background: #aaa;
   }
   
   #footer {
       height: 60px;
       clear: left;
       background: #aaa;
   }
   
   #indexLeftColumn {
       height: 400px;
       width: 350px;
       float: left;
       background: #ccc;
   }
   
   #indexRightColumn {
       height: 400px;
       width: 500px;
       float: left;
       background: #eee;
   }

5. Нажмите кнопку "Выполнить проект" () на главной панели инструментов среды IDE. Измененные файлы проекта автоматически сохраняются, код Java компилируется, проект упаковывается и развертывается в GlassFish, затем открывается обозреватель для просмотра текущего состояния страницы приветствия.
   
6. Теперь создайте заполнитель для компонентов страницы в каждой из четырех видимых областей. Начните с верхнего колонтитула. Согласно макету страницы приветствия, верхний колонтитул должен содержать следующие компоненты:
   • Логотип
   • Текст логотипа
   • Корзина покупок (элемент оформления)
   • Переключатель языка
   Внесите в файл index.jsp следующие изменения. Новый код отображается полужирным шрифтом.

   <div id="header">
       <div id="widgetBar">
   
           <div class="headerWidget">
               [ language toggle ]
           </div>
   
           <div class="headerWidget">
               [ shopping cart widget ]
           </div>
   
       </div>
   
       <a href="#">
           <img src="#" id="logo" alt="Affable Bean logo">
       </a>
   
       <img src="#" id="logoText" alt="the affable bean">
   </div>

   В этом коде элемент <div id="widgetBar"> будет содержать переключатель языков и корзину покупок.
   
   

   Поддержка правки HTML в среде NetBeans

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

   При вводе тегов и атрибутов можно нажатием комбинации клавиш CTRL+ПРОБЕЛ вызывать автодополнение кода и документацию. Среда IDE отображает список предположений, из которого можно выбрать вариант, а также окно документации с определением выбранного элемента и примерами кода.

   

   При обнаружении ошибок в коде в среде IDE отображаются предупреждения, сообщения об ошибках и, в некоторых случаях, предположения. Предупреждения отображаются желтым цветом, а ошибки — красным. Можно навести указатель мыши на выбранную область для просмотра сообщения во всплывающем окне.

   

   Также доступно множество комбинаций клавиш. Выберите в основном меню "Справка" пункт "Таблица сочетаний клавиш".

   
   
7. Создайте в таблице стилей правила для новых идентификаторов и классов. После правила header добавьте следующие правила. Новый код отображается полужирным шрифтом.

   #header {
       height: 250px;
       background: #aaa;
   }
   
   #logo {
       height: 155px;
       width: 155px;
       float: left;
       margin-left: 30px;
       margin-top: -20px;
   }
   
   #logoText {
       float: left;
       margin: 20px 0 0 70px;
       /* font styles apply to text within alt tags */
       font-family: 'American Typewriter', Courier, monospace;
       font-size: 50px;
       color: #333;
   }
   
   #widgetBar {
       height: 50px;
       width: 850px;
       float: right;
       background: #ccc;
   }
   
   .headerWidget {
       width: 194px;
       margin: 20px 2px;
       font-size: small;
       float: right;
       line-height: 25px;
       background: #aaa;
   }

   Для правила logo примените свойства margin-left и margin-top для указания позиции компонента на странице.
   
   Если требуются сведения о свойствах в этом коде, поместите курсор на нужное свойство и нажмите комбинацию клавиш CTRL+ПРОБЕЛ для вызова всплывающего окна с документацией.
   
   

   Чтобы увидеть, как свойство действует на страницу, можно закомментировать его и обновить страницу в обозревателе. Чтобы закомментировать код, поместите курсор в нужную строку или выделите блок кода и нажмите комбинацию клавиш CTRL+/ (⌘+/ в Mac OS).

8. Сохраните файлы (сочетание клавиш CTRL+S; ⌘+S в Mac OS) index.jsp и affablebean.css, переключитесь к обозревателю и обновите страницу для просмотра ее текущего состояния.
   
   

   Примечание. Возможность "Развертывание при сохранении" среды IDE автоматически включена для веб-проектов Java. Это означает, что при каждом сохранении файла, он автоматически компилируется (если это класс Java или страница JSP), и выполняется упаковывание и развертывание проекта на сервере. Поэтому при внесении изменений в HTML и CSS нет необходимости вручную перезапускать проект для просмотра обновленной версии в обозревателе. Просто сохраните файлы, перейдите к обозревателю и обновите страницу.

   
   В предыдущих действиях можно уловить закономерность. Для каждой области страницы выполняется три действия.
   1. Создание структуры с помощью HTML.
   2. Создание набора стилей для определения внешнего вида.
   3. Просмотр страницы для анализа результатов этих изменений.
   Выполняя эти действия, реализуем компоненты в оставшихся областях.
9. Создайте заполнители для компонентов в правом столбце. В соответствии с макетом страницы приветствия, в правом столбце расположены четыре блока одинакового размера.
   
   Создайте структуру четырех блоков. Вставьте следующий текст между тегами <div id="indexRightColumn">. Новый код отображается полужирным шрифтом.

   <div id="indexRightColumn">
       <div class="categoryBox">
           <a href="#">
               <span class="categoryLabelText">dairy</span>
           </a>
       </div>
       <div class="categoryBox">
           <a href="#">
               <span class="categoryLabelText">meats</span>
           </a>
       </div>
       <div class="categoryBox">
           <a href="#">
               <span class="categoryLabelText">bakery</span>
           </a>
       </div>
       <div class="categoryBox">
           <a href="#">
               <span class="categoryLabelText">fruit & veg</span>
           </a>
       </div>
   </div>

10. Добавьте в файл affablebean.css правила стилей для новых классов categoryBox и categoryLabelText. Новый код отображается полужирным шрифтом.

    #indexRightColumn {
        height: 400px;
        width: 500px;
        float: left;
        background: #eee;
    }
    
    .categoryBox {
        height: 176px;
        width: 212px;
        margin: 21px 14px 6px;
        float: inherit;
        background: #ccc;
    }
    
    .categoryLabelText {
        line-height: 150%;
        font-size: x-large;
    }

    Поддержка CSS в среде NetBeans

    Рассмотрим два окна, которые важно использовать при работе с таблицами стилей. Окно "Предварительный просмотр CSS" позволяет просмотреть правила стилей так, как они отображаются в обозревателе. Чтобы открыть это окно, выберите в главном меню "Окно" пункт "Прочее", затем "Предварительный просмотр CSS". Если поместить курсор внутри правила стиля в редакторе, пример текста в окне "Предварительный просмотр CSS" автоматически обновляется в соответствии с указанными в этом правиле свойствами.

    

    Окно "Конструктор стилей CSS" позволяет не набирать правила стилей вручную. Чтобы открыть это окно, выберите в главном меню "Окно" пункт "Прочее", затем "Конструктор стилей CSS". С помощью этого интерфейса можно создавать правила, выбирая свойства и значения в графическом интерфейсе.

    

    Так же как "Предварительный просмотр CSS", "Конструктор стилей CSS" синхронизирован с редактором. При выборе свойства в "Конструкторе стилей CSS" правило автоматически обновляется в редакторе. Аналогично, при внесении изменений в редакторе выбранные свойства в "Конструкторе стилей CSS" немедленно обновляются.

    
    
11. Сохраните файлы (сочетание клавиш CTRL+S; ⌘+S в Mac OS) index.jsp и affablebean.css, затем переключитесь в обозреватль и просмотрите текущее состояние страницы.
    
12. В левом столбце и нижнем колонтитуле требуются заполнители только для статического текста, поэтому добавьте их одновременно.
    
    Вставьте между тегами <div id="indexLefttColumn"> и <div id="footer"> следующий код. Новый код отображается полужирным шрифтом.

    <div id="indexLeftColumn">
        <div id="welcomeText">
            <p>[ welcome text ]</p>
        </div>
    </div>
    
    ...
    
    <div id="footer">
        <hr>
        <p id="footerText">[ footer text ]</p>
    </div>

13. Внесите изменения в таблицу стилей affablebean.css. Нет необходимости учитывать все новые идентификаторы и классы, можно улучшить внешний вид позже, после получения от клиента текста и изображений.
    
    Тег горизонтальной линии (<hr>) занимает всю ширину родительского элемента (<div id="footer"). Поэтому для изменения ширины линии в соответствии с макетом следует изменить ширину элемента <div id="footer">. Новый код отображается полужирным шрифтом.

    #footer {
        height: 60px;
       width: 350px;
        clear: left;
        background: #aaa;
    }
    hr {
        border: 0;
        background-color: #333;
        height: 1px;
        margin: 0 25px;
        width: 300px;
    }

14. Сохраните файлы (сочетание клавиш CTRL+S; ⌘+S в Mac OS) index.jsp и affablebean.css, затем переключитесь в обозреватль и просмотрите текущее состояние страницы.
    
    Страница приветствия готова. Созданы все необходимые заполнители для компонентов, которые будут добавлены на страницу.

Начальный дизайн страницы приветствия приложения выполнен. Созданы все заполнители для компонентов страницы. Позже в этом учебном курсе, когда будет применяться динамическая логика для представлений страниц, можно будет просто включить выражения JSTL и EL в эти заполнители.

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

1. Создайте теги <div> для основных областей страницы.
2. Для каждой области страницы выполните следующие действия:
   1. Создайте структуру с помощью HTML.
   2. Создание набора стилей для определения внешнего вида.
   3. Просмотр страницы для анализа результатов этих изменений.

Не забывайте использовать поддержку HTML и CSS среды IDE. Полезные советы Если требуется просто получить код для оставшихся страниц и продолжить выполнение учебного курса, можно загрузить снимок 1 проекта AffableBean. Изображения начальной реализации макетов оставшихся страниц.

страница категории

страница корзины покупок

страница проверки

страница подтверждения

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

#main { background: #f7f7e9 }

Полезные советы

В редакторе среды IDE есть много полезных возможностей для эффективной работы. Изучение комбинаций клавиш и кнопок панели инструментов увеличит эффективность работы. Следующие советы относятся к правке файлов HTML и CSS. Для просмотра остальных комбинаций клавиш, откройте таблицу сочетаний клавиш среды IDE, выбрав в основном меню "Справка" пункт "Таблица сочетаний клавиш".

• Автозавершение кода. При вводе тегов и атрибутов во всплывающем окне автоматически отображаются предположения. Нажатие клавиши ВВОД завершает выбранный тег.
• Форматирование кода. Щелкните правой кнопкой мыши в редакторе и выберите пункт "Формат".
• Переключение номеров строк. Щелкните правой кнопкой мыши в левом поле редактора и выберите команду "Показать номера строк".
• Поиск вхождений текста. Выделите блок текста и нажмите комбинацию клавиш CTRL+F (⌘+F в Mac OS). Все вхождения текста подсвечиваются в редакторе. Для переключения подсветки нажмите кнопку "Переключить подсветку" (кнопка ) (сочетание клавиш CTRL+SHIFT+H) на панели инструментов редактора.
• Создание закладки. Нажмите кнопку "Переключить закладку" (кнопка ) (сочетание клавиш CTRL+SHIFT+M) для создания закладки в левом поле редактора. Независимо от положения в файле можно перейти к закладке нажатием кнопок "Предыдущая закладка"/"Следующая закладка" на панели инструментов редактора.
• Копирование фрагментов кода вверх или внизВыделите фрагмент кода и нажмите комбинацию клавиш CTRL+SHIFT+СТРЕЛКА ВВЕРХ/СТРЕЛКА ВНИЗ.
• Выделение открывающих и закрывающих тегов. Поместите курсор на открывающий или закрывающий тег, и оба тега будут подсвечены желтым.

Размещение страниц JSP в папке WEB-INF

В соответствии с созданными макетами страниц, страница приветствия всегда должна выглядеть одинаково для всех посетителей. Это означает, что содержимое страницы приветствия не зависит от сеанса пользователя. (Сеансы рассматриваются в главе 8, Управление сеансами.) Обратите внимание, что всем остальным страницам для верного отображения требуется информация, зависящая от пользователя. Например, на странице категории требуется, чтобы пользователь выбрал категорию для отображения, а на странице корзины требуется информация о добавленных пользователем в корзину покупок элементах. Эти страницы не будут отображаться верно, если сервер не свяжет информацию, зависящую от пользователя, с входящим запросом. Поэтому нужно избежать прямого запроса этих страниц путем ввода их адреса в адресной строке обозревателя. Для этой цели можно использовать папку проекта WEB-INF: все ресурсы, содержащиеся в папке WEB-INF недоступны из обозревателя напрямую.

Создайте папку view и поместите ее в папку WEB-INF. Затем переместите все страницы JSP, кроме страницы приветствия, в эту папку.

1. В окне "Проекты", щелкните правой кнопкой мыши узел WEB-INF и выберите в меню "Создать" пункт "Папку".
2. В мастере создания папки введите название view и нажмите кнопку "Готово". Обратите внимание, что созданная папка отображается в окне "Проекты".
3. Переместите страницы category.jsp, cart.jsp, checkout.jsp и confirmation.jsp в папку view.
   
   Для этого щелкните файл cart.jsp для его выбора, затем, удерживая нажатой клавишу SHIFT, щелкните файл confirmation.jsp. При этом будут выделены четыре файла. Когда эти файлы выделены, щелкните их и перетащите в папку WEB-INF/view.
   

Чтобы убедиться, что эти страницы теперь недоступны в обозревателе, нажмите кнопку "Выполнить проект" (кнопка ) для выполнения проекта. После отображения приложения в обозревателе введите полный путь к одному из этих файлов в строке адреса. Например, введите адрес:

http://localhost:8080/AffableBean/WEB-INF/view/category.jsp

Вы получите статус HTTP 404, означающий, что ресурс недоступен.

Создание верхнего и нижнего колонтитула

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

Для этих фрагментов создайте новую папку jspf, расположенную в папке WEB-INF.

1. В окне "Проекты" щелкните правой кнопкой мыши узел WEB-INF и выберите в меню "Создать" пункт "Папку".
2. В мастере создания папки введите имя jspf и нажмите кнопку "Готово".
   
   

   Поведение элементов меню среды IDE часто зависит от контекста. Например, поскольку перед отображением мастера создания папки был выбран узел WEB-INF, в мастере автоматически вводится имя родительской папки web/WEB-INF. Аналогично, если щелкнуть правой кнопкой мыши в окне "Проекты" и выбрать пункт "Создать", список типов файлов частично зависит от ранее выбранных элементов.

3. Создайте два сегмента JSP: header.jspf и footer.jspf. Для этого щелкните правой кнопкой мыши созданную папку jspf и выберите в меню "Создать" пункт "JSP". В мастере создания JSP введите имя файла и под надписью "Параметры" выберите параметр "Создать как сегмент JSP", затем нажмите кнопку "Готово".
   
   После этого в окне "Проекты" отображаются файлы header.jspf и footer.jspf:
   
   
   Теперь можно скопировать код верхнего колонтитула из любой страницы JSP и вставить его в файл header.jspf. Аналогично, можно скопировать текст нижнего колонтитула из любой страницы JSP и вставить его в файл footer.jspf. После этого можно удалить код верхнего и нижнего колонтитулов из всех страниц JSP.
4. Скопируйте код верхнего колонтитула из любой страницы JSP и вставьте его в файл header.jspf. Верхний колонтитул должен включать описатель типа документа и открывающие теги <html>, <head> и <body> и текст до закрывающего тега элемента <div id="header&quot>. Убедитесь, что добавлены заполнители для элементов, используемых в верхней части представлений страниц: корзины покупок, переключателя языков и кнопки "Переход к проверке". После вставки кода в файл header.jspf, он будет выглядеть следующим образом:

   <%@page contentType="text/html" pageEncoding="UTF-8"%>
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
   
   <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
           <link rel="stylesheet" type="text/css" href="css/affablebean.css">
           <title>The Affable Bean</title>
       </head>
       <body>
           <div id="main">
               <div id="header">
                   <div id="widgetBar">
   
                       <div class="headerWidget">
                           [ language toggle ]
                       </div>
   
                       <div class="headerWidget">
                           [ checkout button ]
                       </div>
   
                       <div class="headerWidget">
                           [ shopping cart widget ]
                       </div>
   
                   </div>
   
                   <a href="#">
                       <img src="#" id="logo" alt="Affable Bean logo">
                   </a>
   
                   <img src="#" id="logoText" alt="the affable bean">
               </div>

5. Скопируйте код нижнего колонтитула из любой страницы JSP и вставьте его в файл footer.jspf. Код нижнего колонтитула должен включать в себя элемент <div id="footer"> и текст до закрывающего тега <html>. После вставки кода в файл footer.jspf он будет выглядеть следующим образом:

               <div id="footer">
                   <hr>
                   <p id="footerText">[ footer text ]</p>
               </div>
           </div>
       </body>
   </html>

6. Удалите код верхнего и нижнего колонтитулов из всех пяти страниц JSP (index.jsp, category.jsp, cart.jsp, checkout.jsp и confirmation.jsp).

Добавление директивы к дескриптору развертывания

В настоящий момент представления размещены правильным образом и общий код колонтитулов выделен в файлы header.jspf и footer.jspf. По-прежнему не указано, к каким страницам относятся верхний и нижний колонтитулы. К каждому представлению страницы можно добавить теги <jsp:include>. Однако это приведет только к дублированию кода, которое требовалось устранить. В качестве альтернативы можно создать дескриптор развертывания web.xml и добавить директиву "Группа свойств JSP" для указания, к каким страницам относятся фрагменты верхнего и нижнего колонтитула.

1. Нажмите комбинацию клавиш CTRL+N (⌘+N в Mac OS) для открытия мастера создания файлов. Выберите категорию Web, затем выберите тип файла "Стандартный дескриптор развертывания (web.xml)".
2. Нажмите кнопку "Далее". Обратите внимание, что файл называется web.xml, и будет помещен в папку WEB-INF проекта после завершения работы мастера.
3. Нажмите кнопку "Готово". Файл web.xml создается и добавляется в проект. В редакторе открывается графический интерфейс среды IDE для дескриптора развертывания.
   
   Интерфейс разбит на категории в соответствии в областями, которые могут быть настроены в веб-приложении. Эти области (например, "Сервлеты", "Фильтры","Ссылки" и "Безопасность") отображаются на панели инструментов редактора как вкладки. На вкладке XML отображается весь исходный код файла. При любых изменениях, сделанных в графическом интерфейсе, исходный код дескриптора развертывания немедленно обновляется. В этом можно убедиться, открыв вкладку XML. Выполните следующие действия.
4. Выберите вкладку "Страницы", затем нажмите кнопку "Добавить в группу свойств JSP". Открывается диалоговое окно "Добавление группы свойств JSP".
5. Введите в поле "Описание" текст "header and footer settings". Оставьте поле "Отображаемое имя" пустым. Поля "Отображаемое имя" и "Описание" являются необязательными для заполнения.
6. В поле "Шаблоны URL" введите пути к пяти представлениям. Введите "/index.jsp" и "/WEB-INF/view/*". Разделите эти два пути запятой. (Символ "*" — это подстановочный знак, обозначающий все файлы в данной папке.)
   
7. Нажмите кнопку "ОК". В категорию "Группа свойств JSP" на вкладке "Страницы" добавляется запись.
8. Переключитесь обратно на вкладку XML. Обратите внимание, что в дескриптор развертывания добавился следующий код.

   <jsp-config>
       <jsp-property-group>
           <description>header and footer settings</description>
           <url-pattern>/index.jsp</url-pattern>
           <url-pattern>/WEB-INF/view/*</url-pattern>
       </jsp-property-group>
   </jsp-config>

   Примечание. Может потребоваться добавить в код переводы строк, чтобы он отображался на нескольких строках. Чтобы расставить в коде отступы, можно щелкнуть правой кнопкой мыши в редакторе и выбрать пункт "Формат" (сочетание клавиш ALT+SHIFT+F; CTRL+SHIFT+F в Mac OS).

9. Переключитесь снова на вкладку "Страницы" и введите в поля "Включить вводные части" и "Включить заключительные части" пути к файлам header.jspf и footer.jspf соответственно. Можно нажать кнопку "Обзор" и выбрать файлы в диалоговом окне.
   
10. Переключитесь обратно на вкладку XML. Обратите внимание, что добавился следующий код. (Изменения выделены полужирным шрифтом.)

    <jsp-config>
        <jsp-property-group>
            <description>header and footer settings</description>
            <url-pattern>/index.jsp</url-pattern>
            <url-pattern>/WEB-INF/view/*</url-pattern>
            <include-prelude>/WEB-INF/jspf/header.jspf</include-prelude>
            <include-coda>/WEB-INF/jspf/footer.jspf</include-coda>
        </jsp-property-group>
    </jsp-config>

    Эти директивы означают, что для всех файлов, расположенных по указанным шаблонам путей, файлheader.jspf будет добавлен в начало, а файл footer.jspf добавлен в конец.
    
    

    Определения этих и остальных доступных в дескрипторе веб-развертывания тегов приведены в Спецификации сервлетов.

11. Выполните приложение повторно (нажмите клавишу F6; комбинацию клавиш fn+F6 в Mac OS). Код верхнего и нижнего колонтитулов уже удален из файлаindex.jsp, поэтому при запросе этого файла можно убедиться, что код автоматически добавляется.
    
    Страница приветствия отображается как ранее, включая содержимое верхнего и нижнего колонтитулов.

Создание сервлета Controller

Сервлет Controller обрабатывает входящие запросы, запуская необходимые для создания модели действия и перенаправляя запрос соответствующему представлению. Визуальное представление приведено на диаграмме MVC для проекта AffableBean.

Мастер создания сервлета среды IDE позволяет определить компонент сервлета веб-приложения с помощью аннотации @WebServlet в создаваемом классе или с помощью добавления необходимых директив в дескриптор развертывания. Далее класс ControllerServlet будет создан и определен в контексте приложения с помощью аннотации @WebServlet.

1. В окне "Проекты" щелкните правой кнопкой мыши узел проекта AsynchSpellCheckClient и выберите в меню "Создать" пункт "Сервлет".
2. В мастере введите в поле "Имя класса" ControllerServlet.
3. В поле "Пакет", введите controller. (Пакет автоматически создается после завершения работы мастера.)
   
4. Нажмите кнопку "Далее". На третьем экране мастера можно настроить сервлет. Наиболее значимыми являются шаблоны URL-адресов, которые требуется указать. Эти шаблоны определяют URL-адреса, по которым выполняется сервлет. Например, если ввести "/category", сервлет будет обрабатывать запросы следующего вида.

   http://localhost/AffableBean/category

   Шаблоны URL-адресов должны соответствовать представлениям и действиям пользователя. В соответствии с макетом страницы приветствия, пользователь должен иметь возможность выбрать категорию. Поэтому можно связать URL-адрес /category с действием нажатия изображения категории. Аналогично, на странице категории пользователи должны иметь возможность добавить элемент в корзину покупок. Поэтому можно указать URL-адрес /addToCart.
5. В поле "Шаблоны URL-адресов" введите /category, /addToCart, /viewCart. Шаблоны разделяются запятыми. Можно создать дополнительные шаблоны непосредственно в классе сервлета после его создания.
   
6. Нажмите кнопку "Готово". ControllerServlet создается в среде IDE и открывается в редакторе. Сервлет и шаблоны URL-адресов включены в аннотацию @WebServlet, расположенную перед сигнатурой класса.

   @WebServlet(name="ControllerServlet", urlPatterns={"/category", "/addToCart", "/viewCart"})
   public class ControllerServlet extends HttpServlet {

   Если выбрать на предыдущем шаге параметр "Добавить сведения в дескриптор развертывания (web.xml)", вместо этого была бы создана такая разметка в файле приложения web.xml.

   <servlet>
       <servlet-name>ControllerServlet</servlet-name>
       <servlet-class>controller.ControllerServlet</servlet-class>
   </servlet>
   <servlet-mapping>
       <servlet-name>ControllerServlet</servlet-name>
       <url-pattern>/category</url-pattern>
   </servlet-mapping>
   <servlet-mapping>
       <servlet-name>ControllerServlet</servlet-name>
       <url-pattern>/addToCart</url-pattern>
   </servlet-mapping>
   <servlet-mapping>
       <servlet-name>ControllerServlet</servlet-name>
       <url-pattern>/viewCart</url-pattern>
   </servlet-mapping>

7. Добавьте остальные шаблоны URL-адресов прямо в аннотацию @WebServlet в элемент urlPatterns. В приложении требуются шаблоны URL-адресов для остальных действий и представлений. Можно ввести следующие шаблоны:
   • /updateCart
   • /checkout
   • /purchase
   • /chooseLanguage
   Запишите шаблоны через запятую. Также можно переформатировать аннотацию таким образом:

   @WebServlet(name="ControllerServlet",
               urlPatterns = {"/category",
                              "/addToCart",
                              "/viewCart",
                              "/updateCart",
                              "/checkout",
                              "/purchase",
                              "/chooseLanguage"})

8. Наконец, добавьте элемент loadOnStartup, чтобы экземпляр сервлета создавался и инициализировался при развертывании приложения. Для этого задайте значение 0 или большее (по умолчанию используется значение -1).

   @WebServlet(name="ControllerServlet",
               loadOnStartup = 1,
               urlPatterns = {"/category",
                              "/addToCart",
                              "/viewCart",
                              "/updateCart",
                              "/checkout",
                              "/purchase",
                              "/chooseLanguage"})

Реализация сервлета Controller

Сервлет Controller обрабатывает входящие запросы, запуская необходимые для создания модели действия и перенаправляя запрос соответствующему представлению. Визуальное представление приведено на диаграмме MVC для проекта AffableBean.

Открыв созданный код для поиска нового ControllerServlet, можно заметить, что шаблон сервлета IDE использует метод processRequest, который вызывается как методом doGet, так и doPost. Для просмотра методов может понадобиться развернуть код, щелкнув значок "плюс" () на левом поле редактора. Поскольку приложение проводит различие между doGet и doPost, код добавляется прямо в эти методы и полностью исключается из метода processRequest.

После связывания шаблонов URL-адресов в сервлетом с помощью аннотации @WebServlet, настройте ControllerServlet для обработки этих шаблонов. Также создайте экземпляр RequestDispatcher для перенаправления запроса к соответствующему представлению.

1. Замените код шаблона класса ControllerServlet на следующий.

   public class ControllerServlet extends HttpServlet {
   
       /**
        * Обрабатывает HTTP-метод <code>GET</code>.
        * @param request — запрос сервлета
        * @param response — ответ сервлета
        * @throws ServletException — при возникновении ошибки сервлета
        * @throws IOException — при возникновении ошибки ввода/вывода
        */
       @Override
       protected void doGet(HttpServletRequest request, HttpServletResponse response)
       throws ServletException, IOException {
   
           String userPath = request.getServletPath();
   
           // если запрашивается страница категорий
           if (userPath.equals("/category")) {
               // СделайЭто: выполнить запрос категории
   
           // если запрашивается страница корзины
           } else if (userPath.equals("/viewCart")) {
               // СделайЭто: выполнить запрос страницы корзины
   
               userPath = "/cart";
   
           // если запрашивается страница отладки
           } else if (userPath.equals("/checkout")) {
               // СделайЭто: выполнить запрос страницы отладки
   
           // если пользователь переключает языковую раскладку
           } else if (userPath.equals("/chooseLanguage")) {
               // СделайЭто: выполнить запрос языка
   
           }
   
           // использовать RequestDispatcher для внутренней отправки запроса
           String url = "/WEB-INF/view" + userPath + ".jsp";
   
           try {
               request.getRequestDispatcher(url).forward(request, response);
           } catch (Exception ex) {
               ex.printStackTrace();
           }
       }
   
       /**
        * Обрабатывает HTTP-метод <code>POST</code>.     * @param request — запрос сервлета
        * @param response — ответ сервлета
        * @throws ServletException — при возникновении ошибки сервлета
        * @throws IOException — при возникновении ошибки ввода/вывода
        */
       @Override
       protected void doPost(HttpServletRequest request, HttpServletResponse response)
       throws ServletException, IOException {
   
           String userPath = request.getServletPath();
   
           // если вызывается действие addToCart
           if (userPath.equals("/addToCart")) {
               // СделайЭто: добавить продукт в корзину
   
           // если вызывается действие updateCart
           } else if (userPath.equals("/updateCart")) {
               // СделайЭто: обновить корзину
   
           // если вызывается действие purchase
           } else if (userPath.equals("/purchase")) {
               // СделайЭто: выполнить покупку
   
               userPath = "/confirmation";
           }
   
           // использовать RequestDispatcher для внутренней отправки запроса
           String url = "/WEB-INF/view" + userPath + ".jsp";
   
           try {
               request.getRequestDispatcher(url).forward(request, response);
           } catch (Exception ex) {
               ex.printStackTrace();
           }
       }
   
   }

   Продолжив работу с учебным курсом, вы вернётесь к ControllerServlet и реализуете каждый из сопоставленных шаблонов URL-адреса отдельно.
2. Рассмотрим этот код. Следует обратить внимание на следующие моменты:
   • Сервлет использует переменную экземпляра userPath для получения запрошенного шаблона URL-адреса от клиента:

     String userPath = request.getServletPath();

     userPath используется как методом doGet, так и doPost.
   • Шаблоны URL-адресов связаны в первую очередь с запросом страниц и управляются методом doGet. Например, запросы /category, /viewCart и /checkout соответственно приведут к отображению страниц категории, корзины покупок и проверки.
   • Шаблоны URL-адресов, связанные с представлениями форм и передачей конфиденциальных данных пользователя (такие как, /addToCart, /updateCart и /purchase), управляются методом doPost.
   • Как для метода doGet, так и для doPost, путь к соответствующему виду формируется с использованием строки адреса url.

     String url = "/WEB-INF/view" + userPath + ".jsp";

   • RequestDispatcher получается из HttpServletRequest и использует url для перенаправления запроса:

     request.getRequestDispatcher(url).forward(request, response);

   • Примечания TODO используются для обозначения работы, которую предстоит выполнить. Например:

     // if category page is requested
     if (userPath.equals("/category")) {
         // TODO: Implement category request

     Применение примечаний TODO в коде — полезный способ отслеживать задания, которые предстоит выполнить. Для просмотра всех примечаний TODO можно использовать окно "Задачи" среды IDE (сочетание клавиш CTRL+6; ⌘+6 в Mac OS). В этом окне также отображаются ошибки синтаксиса и ошибки компиляции.
     
     

     Можно управлять ключевыми словами, отображаемыми в окне "Задачи". Откройте окно "Параметры" (в меню "Сервис" пункт "Параметры"; меню NetBeans, пункт "Параметры" в Mac OS), затем выберите "Разное" > "Задания".

3. Выполните проект (нажмите клавишу F6; fn+F6 в Mac OS) и проверьте, что ControllerServlet перенаправляет запросы соответствующим представлениям.
   • Введите в строке адреса обозревателя http://localhost:8080/AffableBean/category. Отображается страница категории приложения.
   • Введите в строке адреса обозревателя http://localhost:8080/AffableBean/viewCart. Отображается страница корзины покупок.
   • Введите в строке адреса обозревателя http://localhost:8080/AffableBean/checkout. Отображается страница проверки приложения.

   Примечание. Переход по адресу http://localhost:8080/AffableBean/purchaseв адресной строке обозревателя не позволит увидеть страницу подтверждения. Это происходит потому, что шаблон URL-адреса /purchase управляется методом doPost сервлета, а запрос формы отравки из адресной строки обозревателя обычно посылается с помощью метода HTTP GET.

В настоящий момент созданы страницы JSP, содержащие заполнители для всех функциональных компонентов. Также создана структура внешнего интерфейса приложения. Страницы JSP теперь расположены в папке WEB-INF, верхний и нижний колонтитулы выделены в отдельные файлы, дескриптор развертывания настроен и для обработки входящих запросов создан ControllerServlet. В следующей главе учебного курса будет создано подключение приложения к базе данных.

Если требуется сравнить результаты выполнения этой главы с образцом, загрузите снимок 2 проекта AffableBean.

Дополнительные сведения