| // |
| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| // |
| |
| = Учебный курс по электронной коммерции в NetBeans. Подготовка представлений страниц и сервлета Controller |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Учебный курс по электронной коммерции в NetBeans. Подготовка представлений страниц и сервлета Controller - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Учебный курс по электронной коммерции в NetBeans. Подготовка представлений страниц и сервлета Controller |
| |
| |
| |
| 1. link:intro.html[+Введение+] |
| 2. link:design.html[+Проектирование приложения+] |
| 3. link:setup-dev-environ.html[+Настройка среды разработки+] |
| 4. link:data-model.html[+Проектирование модели данных+] |
| 5. *Подготовка представлений страниц и сервлета контроллера* |
| 6. link:connect-db.html[+Подключение приложения к базе данных+] |
| 7. link:entity-session.html[+Добавление классов сущностей и сеансных компонентов+] |
| 8. link:manage-sessions.html[+Управление сеансами+] |
| 9. link:transaction.html[+Интеграция транзакционной бизнес-логики+] |
| 10. link:language.html[+Добавление поддержки языков+] |
| 11. link:security.html[+Обеспечение безопасности приложений+] |
| 12. link:test-profile.html[+Тестирование и профилирование+] |
| 13. link:conclusion.html[+Заключение+] |
| |
| image::../../../../images_www/articles/68/netbeans-stamp-68-69.png[title="Содержимое на этой странице применимо к IDE NetBeans, версиям 6.8 и 6.9"] |
| |
| В учебном курсе показано создание файлов проекта в среде IDE и рассмотрены некоторые возможности, применяемые при работе с HTML и CSS. После создания необходимых файлов проекта, начните создание внешнего интерфейса приложения. Для этого поместите файлы JSP в нужные позиции в структуре проекта, создайте верхний и нижний колонтитулы, которые будут применяться ко всем представлениям, и создайте сервлет Controller для обработки входящих запросов. |
| |
| Также в этой главе для приложения будет создан дескриптор веб-развертывания (файл `web.xml`). Дескриптор развертывания может использоваться для указания конфигурационной информации, считываемой сервером при развертывании. Хотя link:http://jcp.org/en/jsr/detail?id=315[+спецификации сервлетов версии 3.0+], включенные в Java EE 6, позволяют использовать аннотации класса вместо XML, дескриптор развертывания, тем не менее, может потребоваться для настройки определенных элементов приложения. В этой главе в частности будут добавлены директивы для определения верхнего и нижнего колонтитулов и указания, к каким файлам они будут применяться. |
| |
| Одна из целей этого учебного курса — создать страницы JSP, соответствующие представлениям, указанным в проекте приложения. В соответствии с link:design.html#mockups[+макетами страниц+] и link:design.html#business[+блок-схемой процесса+], реализация макетов страниц начинается с создания _заполнителей_ всех визуальных и функциональных компонентов. В этом учебном курсе приведено руководство по реализации макета главной страницы. Перечисленные ниже действия можно использовать для создания других страниц по своему усмотрению или можно link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252Fecommerce%252FAffableBean_snapshot1.zip[+загрузить снимок 1 проекта+], на котором представлены макеты всех страниц. |
| |
| Можно просмотреть интерактивную демонстрацию приложения, которое создается в этом учебном курсе: link:http://dot.netbeans.org:8080/AffableBean/[+Демонстрация приложения электронной коммерции NetBeans+] |
| |
| |
| |
| |=== |
| |Программное обеспечение или материал |Требуемая версия |
| |
| |link:https://netbeans.org/downloads/index.html[+IDE NetBeans+] |Набор Java, версия 6.8 или 6.9 |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Комплект для разработчика на языке Java (JDK)+] |версия 6 |
| |
| |<<glassFish,Сервер GlassFish>> |v3 или Open Source Edition 3.0.1 |
| |=== |
| |
| *Примечания:* |
| |
| * The IDE NetBeans requires the Java Development Kit (JDK) to run properly. Если указанные материалы не установлены, JDK следует загрузить и установить в первую очередь. |
| * The IDE NetBeans Java Bundle includes Java Web and EE technologies, which are required for the application you build in this tutorial. |
| * The IDE NetBeans Java Bundle also includes the GlassFish server, which you require for this tutorial. Можно link:https://glassfish.dev.java.net/public/downloadsindex.html[+загрузить сервер GlassFish отдельно+], но версия, предоставляемая с NetBeans, имеет преимущество, так как автоматически зарегистрирована в среде IDE. |
| |
| |
| |
| [[createProjectFiles]] |
| == Создание файлов проекта |
| |
| Для создания файлов проекта воспользуйтесь мастером создания файлов среды IDE. Вы можете нажать кнопку 'Создать файл' ( image:images/new-file-btn.png[] ), нажать Ctrl-N (⌘+N в Mac) или в окне 'Проекты' щелкните правой кнопкой мыши узел папку, в которой будет содержаться новый файл, и выберите папку 'Создать' > [тип_файла]. В следующих подразделах будут созданы страницы JSP и таблица стилей проекта. |
| |
| * <<jsp,Создание страниц JSP>> |
| * <<css,Создание таблицы стилей>> |
| |
| |
| [[jsp]] |
| === Создание страниц JSP |
| |
| Начните работу с создания страниц JSP, соответствующих представлениям, отображенным на link:design.html#business[+блок-схеме+]. |
| |
| Страница `index.jsp`, созданная средой IDE, станет главной страницей проекта. Создайте страницы JSP для оставшихся представлений и на время разместите их в корне проекта вместе с `index.jsp`. |
| |
| 1. Для открытия мастера создания файлов нажмите кнопку 'Создать файл' ( image:images/new-file-btn.png[] ). |
| 2. Выберите категорию Web, затем элемент JSP и нажмите кнопку "Далее". |
| 3. Введите имя файла "`category`". Обратите внимание, что в поле "Местоположение" указано значение `Web Pages`, означающее, что файл будет создан в корневом веб-узле проекта. Это соответствует папке проекта `web`, что можно позже проверить в окне "Файлы" среды IDE. |
| 4. Нажмите кнопку "Завершить". В среде IDE создается и открывается в редакторе новая страница JSP. |
| 5. Повторите действия 1 - 4 для создания оставшихся страниц `cart.jsp`, `checkout.jsp` и `confirmation.jsp`. |
| |
| После завершения окно "Проекты" выглядит следующим образом: |
| |
| image::images/projects-win-views.png[title="Представления содержатся в папке 'WEB-INF/view/'"] |
| |
| |
| [[css]] |
| === Создание таблицы стилей |
| |
| Создайте файл CSS, содержащий все стили приложения. |
| |
| 1. В окне 'Проекты' щелкните правой кнопкой мыши узел 'Веб-страницы' и выберите 'Создать' > 'Папка'. |
| 2. В мастере создания новой папки назовите папку "`css`" и нажмите кнопку "Готово". |
| 3. Щелкните правой кнопкой мыши папку `css` и выберите в меню "Создать" пункт "Каскадная таблица стилей". (Если пункта "Каскадная таблица стилей" нет, выберите "Прочее". В мастере создания файлов выберите категорию Web, затем "Каскадная таблица стилей" и нажмите кнопку "Далее".) |
| 4. Назовите таблицу стилей `affablebean` и нажмите кнопку "Готово". |
| |
| После этого файл `affablebean.css` отображается в окне "Проекты". |
| |
| image::images/projects-win-css.png[title="В окне "Проекты" отображается новая папка 'css' и таблица стилей"] |
| |
| |
| |
| [[implementHTML]] |
| == Создание содержимого HTML и CSS |
| |
| В этом разделе создаются представления страниц для соответствия предлагаемым link:design.html#mockups[+макетам страниц+]. Они будут основой, к которой можно добавить динамическое содержимое на последующих стадиях разработки. Для этого используются редакторы HTML и CSS среды IDE, а также дополнительные окна поддержки CSS. |
| |
| *Замечание о совместимости браузеров.*В этом учебном курсе используется браузер Firefox 3 и _не_ гарантируется совместимость разметки страницы с другими современными браузерами. В реальности при работе с технологиями создания внешнего интерфейса (HTML, CSS, JavaScript) необходимо принимать меры для обеспечения корректного отображения веб-страниц во всех версиях браузеров, которые могут использоваться посетителями (как правило, Internet Explorer, Firefox, Safari, Chrome и Opera). При работе в среде IDE можно указать, в каком браузере должно открываться приложение. Выберите в меню "Сервис" пункт "Параметры" (в Mac OS — пункт "Параметры" в меню NetBeans) и под вкладкой "Общее" в окне "Параметры" выберите нужный браузер в выпадающем списке "Веб-браузер". Среда IDE обнаруживает браузеры, установленные в местоположении по умолчанию. Если установленный на компьютере браузер не отображается, нажмите кнопку "Правка" и зарегистрируйте браузер вручную. |
| |
| Подготовка отображения веб-страниц, как правило, итерационный процесс, при котором требуется постоянная обратная связь с потребителем. Следующие действия демонстрируют средства среды IDE на примере link:design.html#index[+макета главной страницы+]. |
| |
| 1. В окне 'Проекты' дважды щелкните `index.jsp`, чтобы открыть его в редакторе. |
| 2. Вначале создайте теги `<div>` для основных областей страницы. Можно создать пять тегов: четыре для основных областей (верхний и нижний колонтитулы, левый и правый столбец) и пятый, содержащий все остальные. Удалите весь текст внутри тегов `<body>` и замените его на следующий. Новый код показан *полужирным шрифтом*. |
| |
| [source,html] |
| ---- |
| |
| <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> |
| ---- |
| |
| [start=3] |
| . Добавьте ссылку на таблицу стилей в заголовке страницы и измените текст заголовка. |
| |
| [source,xml] |
| ---- |
| |
| <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> |
| ---- |
| |
| [start=4] |
| . Откройте в редакторе таблицу стилей `affablebean.css`. Вначале создайте правила для идентификаторов созданных тегов `<div>`. |
| * Для указания размеров областей используйте свойства `width` и `height`. |
| * Чтобы отличать области при просмотре страницы, используйте свойство `background`. |
| * Для горизонтального центрирования четырех областей на странице, можно добавить параметр `margin: 20px auto` к правилу `body`. (`20px` относится к верхнему и нижнему полю; `auto` создает равные промежутки слева и справа.) Затем добавьте параметр `float: left` к левому и правому столбцу. |
| * В нижнем колонтитуле требуется параметр `clear: left`, чтобы его верхняя граница отображалась после нижних границ выровненных влево и расположенных выше областей (т.е. левого и правого столбца). |
| |
| [source,java] |
| ---- |
| |
| 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; |
| } |
| ---- |
| |
| [start=5] |
| . Нажмите кнопку 'Запустить проект' (image:images/run-project-btn.png[]) на главной панели инструментов IDE. Измененные файлы проекта автоматически сохраняются, код Java компилируется, проект упаковывается и развертывается в GlassFish, затем открывается браузер для просмотра текущего состояния страницы приветствия. |
| |
| image::images/index-page.png[title="Выполните проект для просмотра текущего состояния страниц"] |
| |
| [start=6] |
| . Теперь создайте заполнитель для компонентов страницы в каждой из четырех видимых областей. Начните с верхнего колонтитула. Согласно link:design.html#index[+макету страницы приветствия+], верхний колонтитул должен содержать следующие компоненты: |
| * Логотип |
| * Текст логотипа |
| * Корзина покупок (элемент оформления) |
| * Переключатель языка |
| Внесите в файл `index.jsp` следующие изменения. Новый код отображается *полужирным шрифтом*. |
| |
| [source,html] |
| ---- |
| |
| <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 отображает список предположений, из которого можно выбрать вариант, а также окно документации с определением выбранного элемента и примерами кода. |
| |
| image::images/documentation-popup.png[title="Для просмотра окон автозавершения кода и документации нажмите сочетание клавиш CTRL+ПРОБЕЛ."] |
| |
| При обнаружении ошибок в коде в среде IDE отображаются предупреждения, сообщения об ошибках и, в некоторых случаях, предположения. Предупреждения отображаются желтым цветом, а ошибки — красным. Можно навести указатель мыши на выбранную область для просмотра сообщения во всплывающем окне. |
| |
| image::images/html-hint.png[title="Наведите указатель мыши дляч просмотра подсказки с предупреждением"] |
| |
| Также доступно множество комбинаций клавиш. Выберите в основном меню "Справка" пункт "Таблица сочетаний клавиш". |
| |
| |
| |
| [start=7] |
| . Создайте в таблице стилей правила для новых идентификаторов и классов. После правила `header` добавьте следующие правила. Новый код отображается *полужирным шрифтом*. |
| |
| [source,java] |
| ---- |
| |
| #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+ПРОБЕЛ для вызова всплывающего окна с документацией. |
| |
| image::images/css-doc-support.png[title="Нажмите Ctrl-Space в свойстве CSS для вызова поддержки документации"] |
| |
| Чтобы увидеть, как свойство действует на страницу, можно закомментировать его и обновить страницу в браузере. Чтобы закомментировать наведите курсор на строку или выделите блок кода, а затем нажмите Ctrl-/ (⌘-/ в Mac). |
| |
| |
| [start=8] |
| . Сохраните (Ctrl-S; ⌘-S в Mac) файлы `index.jsp` и `affablebean.css`, затем перейдите к браузеру и обновите страницу для просмотра текущего состояния. |
| |
| *Примечание.* Служебная программа 'Развертывать при сохранении' в IDE автоматически активируется для веб-проектов Java. Это означает, что при каждом сохранении файла, он автоматически компилируется (если это класс Java или страница JSP), и выполняется упаковывание и развертывание проекта на сервере. Поэтому при внесении изменений в HTML и CSS нет необходимости вручную перезапускать проект для просмотра обновленной версии в браузере. Просто сохраните файлы, перейдите к браузеру и обновите страницу. |
| |
| image::images/index-page2.png[title="Заполнители для заголовков отображаются при запуске проекта"] |
| |
| В предыдущих действиях можно уловить закономерность. Для каждой области страницы выполняется три действия. |
| 1. Создание структуры с помощью HTML. |
| 2. Создание набора стилей для определения внешнего вида. |
| 3. Просмотр страницы для анализа результатов этих изменений. |
| Выполняя эти действия, реализуем компоненты в оставшихся областях. |
| |
| [start=9] |
| . Создайте заполнители для компонентов в правом столбце. В соответствии с link:design.html#index[+макетом страницы приветствия+], в правом столбце расположены четыре блока одинакового размера. |
| |
| Создайте структуру четырех блоков. Вставьте следующий текст между тегами `<div id="indexRightColumn">`. Новый код отображается *полужирным шрифтом*. |
| |
| [source,html] |
| ---- |
| |
| <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> |
| ---- |
| |
| [start=10] |
| . Добавьте в файл `affablebean.css` правила стилей для новых классов `categoryBox` и `categoryLabelText`. Новый код отображается *полужирным шрифтом*. |
| |
| [source,java] |
| ---- |
| |
| #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" автоматически обновляется в соответствии с указанными в этом правиле свойствами. |
| |
| image::images/css-preview.png[title="Используйте 'Окно предварительного просмотра CSS' для просмотра визуализированных правил стилей"] |
| |
| Окно "Конструктор стилей CSS" позволяет не набирать правила стилей вручную. Чтобы открыть это окно, выберите в главном меню "Окно" пункт "Прочее", затем "Конструктор стилей CSS". С помощью этого интерфейса можно создавать правила, выбирая свойства и значения в графическом интерфейсе. |
| |
| image::images/style-builder.png[title="Используйте 'Конструктор стилей CSS' для создания правил стилей"] |
| |
| Так же как "Предварительный просмотр CSS", "Конструктор стилей CSS" синхронизирован с редактором. При выборе свойства в "Конструкторе стилей CSS" правило автоматически обновляется в редакторе. Аналогично, при внесении изменений в редакторе выбранные свойства в "Конструкторе стилей CSS" немедленно обновляются. |
| |
| |
| |
| [start=11] |
| . Сохраните (Ctrl-S; ?-S в Mac) файлы `index.jsp` и `affablebean.css`, затем перейдите к браузеру и обновите страницу для просмотра текущего состояния. |
| |
| image::images/index-page3.png[title="Заполнители для заголовков и правого столбца отображаются при запуске проекта"] |
| |
| [start=12] |
| . В левом столбце и нижнем колонтитуле требуются заполнители только для статического текста, поэтому добавьте их одновременно. |
| |
| Вставьте между тегами `<div id="indexLefttColumn">` и `<div id="footer">` следующий код. Новый код отображается *полужирным шрифтом*. |
| |
| [source,html] |
| ---- |
| |
| <div id="indexLeftColumn"> |
| *<div id="welcomeText"> |
| <p>[ welcome text ]</p> |
| </div>* |
| </div> |
| |
| ... |
| |
| <div id="footer"> |
| *<hr> |
| <p id="footerText">[ footer text ]</p>* |
| </div> |
| ---- |
| |
| [start=13] |
| . Внесите изменения в таблицу стилей `affablebean.css`. Нет необходимости учитывать все новые идентификаторы и классы, можно улучшить внешний вид позже, после получения от клиента текста и изображений. |
| |
| Тег горизонтальной линии (`<hr>`) занимает всю ширину родительского элемента (`<div id="footer"`). Поэтому для изменения ширины линии в соответствии с макетом следует изменить ширину элемента `<div id="footer">`. Новый код отображается *полужирным шрифтом*. |
| |
| [source,java] |
| ---- |
| |
| #footer { |
| height: 60px; |
| *width: 350px;* |
| clear: left; |
| background: #aaa; |
| } |
| |
| *hr { |
| border: 0; |
| background-color: #333; |
| height: 1px; |
| margin: 0 25px; |
| width: 300px; |
| }* |
| ---- |
| |
| [start=14] |
| . Сохраните (Ctrl-S; ?-S в Mac) файлы `index.jsp` и `affablebean.css`, затем перейдите к браузеру и обновите страницу для просмотра текущего состояния. |
| |
| image::images/index-page4.png[title="Отображаются заполнители для левого столбца и нижнего колонтитула"] |
| |
| Страница приветствия готова. Созданы все необходимые заполнители для компонентов, которые будут добавлены на страницу. |
| |
| Начальный дизайн страницы приветствия приложения выполнен. Созданы все заполнители для компонентов страницы. Позже в этом учебном курсе, когда будет применяться динамическая логика для представлений страниц, можно будет просто включить выражения JSTL и EL в эти заполнители. |
| |
| Самостоятельно реализуйте начальный проект для остальных страниц в соответствии с link:design.html#mockups[+макетами+]. Для этого следуйте шаблону: |
| |
| 1. Создайте теги `<div>` для основных областей страницы. |
| 2. Для каждой области страницы выполните следующие действия: |
| .. Создание структуры с помощью HTML. |
| .. Создание набора стилей для определения внешнего вида. |
| .. Просмотр страницы для анализа результатов этих изменений. |
| |
| Не забывайте использовать поддержку HTML и CSS среды IDE. <<tipsTricks,Полезные советы>> Если требуется просто получить код для оставшихся страниц и продолжить выполнение учебного курса, можно link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252Fecommerce%252FAffableBean_snapshot1.zip[+загрузить снимок 1 ` проекта AffableBean`+]. Изображения начальной реализации макетов оставшихся страниц. |
| |
| |
| [[categoryPage]] |
| ==== страница категории |
| |
| image::images/category-page.png[title="Заполнители реализованы для страницы категории"] |
| |
| |
| [[cartPage]] |
| ==== страница корзины покупок |
| |
| image::images/cart-page.png[title="Заполнители реализованы для страницы корзины"] |
| |
| |
| [[checkoutPage]] |
| ==== страница проверки |
| |
| image::images/checkout-page.png[title="Заполнители реализованы для страницы изъятия из использования"] |
| |
| |
| ==== страница подтверждения |
| |
| image::images/confirmation-page.png[title="Заполнители реализованы для страницы изъятия из использования"] |
| |
| *Примечание.* Фоновые цвета для всех областей страницы используются только для расположения элементов при разработке приложения. В конце следует удалить их из таблицы стилей и применить более подходящий цвет фона. Для этого измените правило background класса `main`: |
| |
| |
| [source,java] |
| ---- |
| |
| #main { background: #f7f7e9 } |
| ---- |
| |
| |
| [[tipsTricks]] |
| === Полезные советы |
| |
| В редакторе среды IDE есть много полезных возможностей для эффективной работы. Изучение комбинаций клавиш и кнопок панели инструментов увеличит эффективность работы. Следующие советы относятся к правке файлов HTML и CSS. Для просмотра остальных комбинаций клавиш, откройте таблицу сочетаний клавиш среды IDE, выбрав в основном меню "Справка" пункт "Таблица сочетаний клавиш". |
| |
| * *Автозавершение кода.* При вводе тегов и атрибутов во всплывающем окне автоматически отображаются предположения. Нажатие клавиши ВВОД завершает выбранный тег. |
| * *Форматирование кода.* Щелкните правой кнопкой мыши в редакторе и выберите пункт "Формат". |
| * *Переключение номеров строк.* Щелкните правой кнопкой мыши в левом поле редактора и выберите команду "Показать номера строк". |
| * *Найти вхождения:* Выделите блок текста и нажмите Ctrl-F (⌘-F в Mac). Все вхождения текста подсвечиваются в редакторе. Для переключения выделения нажмите кнопку 'Переключение выделения при поиске' ( image:images/toggle-highlight.png[] ) (Ctrl-Shift-H) на панели инструментов редактора. |
| * *Создание закладки.* Нажмите кнопку 'Переключение закладок' ( image:images/toggle-bookmark.png[] ) (Ctrl-Shift-M) для создания закладки в левом поле редактора. Независимо от положения в файле можно перейти к закладке нажатием кнопок "Предыдущая закладка"/"Следующая закладка" на панели инструментов редактора. |
| * *Копирование фрагментов кода вверх или вниз*Выделите фрагмент кода и нажмите комбинацию клавиш CTRL+SHIFT+СТРЕЛКА ВВЕРХ/СТРЕЛКА ВНИЗ. |
| * *Выделение открывающих и закрывающих тегов.* Поместите курсор на открывающий или закрывающий тег, и оба тега будут подсвечены желтым. |
| |
| |
| |
| [[view]] |
| == Размещение страниц JSP в папке WEB-INF |
| |
| В соответствии с созданными link:design.html#mockups[+макетами страниц+], link:design.html#index[+страница приветствия+] всегда должна выглядеть одинаково для всех посетителей. Это означает, что содержимое страницы приветствия не зависит от _сеанса_ пользователя. (Сеансы рассматриваются в главе 8, link:manage-sessions.html[+Управление сеансами+].) Обратите внимание, что всем остальным страницам для верного отображения требуется информация, зависящая от пользователя. Например, на link:design.html#category[+странице категории+] требуется, чтобы пользователь выбрал категорию для отображения, а на link:design.html#cart[+странице корзины+] требуется информация о добавленных пользователем в корзину покупок элементах. Эти страницы не будут отображаться верно, если сервер не свяжет информацию, зависящую от пользователя, с входящим запросом. Поэтому нужно избежать прямого запроса этих страниц путем ввода их адреса в адресной строке браузера. Для этой цели можно использовать папку проекта `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`. |
| |
| image::images/view-folder.png[title="Щелкните и перетащите страницы JSP в папку 'WEB-INF/view/'"] |
| |
| Для демонстрации того, что эти страницы более недоступны из браузера, нажмите кнопку 'Запустить проект' ( image:images/run-project-btn.png[] ) для запуска проекта. После отображения приложения в браузере введите полный путь к одному из этих файлов в строке адреса. Например, введите адрес: |
| |
| |
| [source,java] |
| ---- |
| |
| http://localhost:8080/AffableBean/WEB-INF/view/category.jsp |
| ---- |
| |
| Вы получите статус HTTP 404, означающий, что ресурс недоступен. |
| |
| |
| |
| [[jspf]] |
| == Создание верхнего и нижнего колонтитула |
| |
| Как видно из link:design.html#mockups[+макетов страниц+], у всех пяти представлений есть общее содержание. В верхней части все они содержат логотип компании, переключатель языков и другие элементы оформления, связанные с корзиной покупок. В нижней части они содержат текст о политике конфиденциальности и ссылки на контакты. Вместо того, чтобы включать этот код в исходные файлы всех страниц, можно выделить его в два фрагмента JSP: верхний и нижний колонтитулы. Затем можно включить файлы фрагментов в представления страниц в нужных позициях. |
| |
| Для этих фрагментов создайте новую папку `jspf`, расположенную в папке `WEB-INF`. |
| |
| 1. В окне 'Проекты', щелкните правой кнопкой мыши узел WEB-INF и выберите 'Создать' > 'Папка'. |
| 2. В мастере создания папки введите имя `jspf` и нажмите кнопку "Готово". |
| |
| Поведение элементов меню среды IDE часто зависит от контекста. Например, при щелчке правой кнопкой мыши узла WEB-INF когда отображен мастер создания папок, `web/WEB-INF` был автоматически введен в поле 'Родительская папка'. Точно так же, при щелчке правой кнопкой мыши узла в окне 'Проекты' и выборе 'Создать', список типов файлов частично определяется предыдущими выборками. |
| |
| |
| [start=3] |
| . Создайте два сегмента JSP: `header.jspf` и `footer.jspf`. Для этого щелкните правой кнопкой мыши новую созданную папку `jspf` и выберите 'Создать' > JSP. В мастере создания JSP введите имя файла и под надписью "Параметры" выберите параметр "Создать как сегмент JSP", затем нажмите кнопку "Готово". |
| |
| После этого в окне "Проекты" отображаются файлы `header.jspf` и `footer.jspf`: |
| |
| image::images/projects-win-jspf.png[title="В проекте отображаются фрагменты JSP нижнего и верхнего колонтитулов"] |
| |
| Теперь можно скопировать код верхнего колонтитула из любой страницы JSP и вставить его в файл `header.jspf`. Аналогично, можно скопировать текст нижнего колонтитула из любой страницы JSP и вставить его в файл `footer.jspf`. После этого можно удалить код верхнего и нижнего колонтитулов из всех страниц JSP. |
| |
| [start=4] |
| . Скопируйте код верхнего колонтитула из любой страницы JSP и вставьте его в файл `header.jspf`. Верхний колонтитул должен включать описатель типа документа и открывающие теги `<html>`, `<head>` и `<body>` и текст до закрывающего тега элемента `<div id="header&quot>`. Убедитесь, что добавлены заполнители для элементов, используемых в верхней части представлений страниц: корзины покупок, переключателя языков и кнопки "Переход к проверке". После вставки кода в файл `header.jspf`, он будет выглядеть следующим образом: |
| |
| [source,html] |
| ---- |
| |
| <%@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> |
| ---- |
| |
| [start=5] |
| . Скопируйте код нижнего колонтитула из любой страницы JSP и вставьте его в файл `footer.jspf`. Код нижнего колонтитула должен включать в себя элемент `<div id="footer">` и текст до закрывающего тега `<html>`. После вставки кода в файл `footer.jspf` он будет выглядеть следующим образом: |
| |
| [source,html] |
| ---- |
| |
| <div id="footer"> |
| <hr> |
| <p id="footerText">[ footer text ]</p> |
| </div> |
| </div> |
| </body> |
| </html> |
| ---- |
| |
| [start=6] |
| . Удалите код верхнего и нижнего колонтитулов из всех пяти страниц JSP (`index.jsp`, `category.jsp`, `cart.jsp`, `checkout.jsp` и `confirmation.jsp`). |
| |
| |
| |
| [[dd]] |
| == Добавление директивы к дескриптору развертывания |
| |
| В настоящий момент представления размещены правильным образом и общий код колонтитулов выделен в файлы `header.jspf` и `footer.jspf`. По-прежнему не указано, к каким страницам относятся верхний и нижний колонтитулы. К каждому представлению страницы можно добавить теги `<jsp:include>`. Однако это приведет только к дублированию кода, которое требовалось устранить. В качестве альтернативы можно создать дескриптор развертывания `web.xml` и добавить директиву "Группа свойств JSP" для указания, к каким страницам относятся фрагменты верхнего и нижнего колонтитула. |
| |
| 1. Нажмите сочетание клавиш CTRL+N (⌘-N на компьютере Mac) для открытия мастера создания файлов. Выберите категорию Web, затем выберите тип файла "Стандартный дескриптор развертывания (web.xml)". |
| 2. Нажмите кнопку "Далее". Обратите внимание, что файл называется `web.xml`, и будет помещен в папку `WEB-INF` проекта после завершения работы мастера. |
| 3. Нажмите кнопку "Завершить". Файл `web.xml` создается и добавляется в проект. В редакторе открывается графический интерфейс среды IDE для дескриптора развертывания. |
| |
| Интерфейс разбит на категории в соответствии в областями, которые могут быть настроены в веб-приложении. Эти области (например, "Сервлеты", "Фильтры","Ссылки" и "Безопасность") отображаются на панели инструментов редактора как вкладки. На вкладке XML отображается весь исходный код файла. При любых изменениях, сделанных в графическом интерфейсе, исходный код дескриптора развертывания немедленно обновляется. В этом можно убедиться, открыв вкладку XML. Выполните следующие действия. |
| |
| [start=4] |
| . Выберите вкладку "Страницы", затем нажмите кнопку "Добавить в группу свойств JSP". Открывается диалоговое окно "Добавление группы свойств JSP". |
| |
| [start=5] |
| . Введите в поле "Описание" текст "`header and footer settings`". Оставьте поле "Отображаемое имя" пустым. Поля "Отображаемое имя" и "Описание" являются необязательными для заполнения. |
| |
| [start=6] |
| . В поле "Шаблоны URL" введите пути к пяти представлениям. Введите "`/index.jsp`" и "`/WEB-INF/view/*`". Разделите эти два пути запятой. (Символ "`*`" — это подстановочный знак, обозначающий все файлы в данной папке.) |
| |
| image::images/add-jsp-prop-group-dialog.png[title="Используйте диалоговое окно 'Добавить группу свойств JSP', чтобы указать теги <jsp-config> в дескрипторе развертывания"] |
| |
| [start=7] |
| . Нажмите кнопку "ОК". В категорию "Группа свойств JSP" на вкладке "Страницы" добавляется запись. |
| |
| [start=8] |
| . Переключитесь обратно на вкладку XML. Обратите внимание, что в дескриптор развертывания добавился следующий код. |
| |
| [source,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), чтобы задать для код правильные отступы. |
| |
| |
| [start=9] |
| . Переключитесь снова на вкладку "Страницы" и введите в поля "Включить вводные части" и "Включить заключительные части" пути к файлам `header.jspf` и `footer.jspf` соответственно. Можно нажать кнопку "Обзор" и выбрать файлы в диалоговом окне. |
| [.feature] |
| -- |
| |
| image::images/jsp-prop-groups-small.png[role="left", link="images/jsp-prop-groups.png"] |
| |
| -- |
| |
| [start=10] |
| . Переключитесь обратно на вкладку XML. Обратите внимание, что добавился следующий код. (Изменения *выделены полужирным шрифтом*.) |
| |
| [source,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` добавлен в конец. |
| |
| Определения этих и остальных доступных в дескрипторе веб-развертывания тегов приведены в link:http://jcp.org/en/jsr/detail?id=315[+Спецификации сервлетов+]. |
| |
| |
| [start=11] |
| . Выполните приложение повторно (нажмите клавишу F6; комбинацию клавиш fn+F6 в Mac OS). Код верхнего и нижнего колонтитулов уже удален из файла`index.jsp`, поэтому при запросе этого файла можно убедиться, что код автоматически добавляется. |
| |
| <<welcome-page,Страница приветствия отображается как ранее>>, включая содержимое верхнего и нижнего колонтитулов. |
| |
| |
| |
| [[controller]] |
| == Создание сервлета Controller |
| |
| Сервлет Controller обрабатывает входящие запросы, запуская необходимые для создания модели действия и перенаправляя запрос соответствующему представлению. Визуальное представление приведено на link:design.html#mvcDiagram[+диаграмме MVC для проекта AffableBean+]. |
| |
| Мастер создания сервлета среды IDE позволяет определить компонент сервлета веб-приложения с помощью аннотации `@WebServlet` в создаваемом классе или с помощью добавления необходимых директив в дескриптор развертывания. Далее класс `ControllerServlet` будет создан и определен в контексте приложения с помощью аннотации link:http://java.sun.com/javaee/6/docs/api/javax/servlet/annotation/WebServlet.html[+`@WebServlet`+]. |
| |
| 1. В окне 'Проекты', щелкните правой кнопкой мыши узел проекта `AffableBean` и выберите 'Создать' > 'Сервлет'. |
| 2. В мастере введите в поле "Имя класса" `ControllerServlet`. |
| 3. В поле "Пакет", введите `controller`. (Пакет автоматически создается после завершения работы мастера.) |
| |
| image::images/servlet-wizard.png[title="Используйте мастер создания сервлетов для создания сервлетов для проекта"] |
| |
| [start=4] |
| . Нажмите кнопку "Далее". На третьем экране мастера можно настроить сервлет. Наиболее значимыми являются шаблоны URL-адресов, которые требуется указать. Эти шаблоны определяют URL-адреса, по которым выполняется сервлет. Например, если ввести "`/category`", сервлет будет обрабатывать запросы следующего вида. |
| |
| [source,java] |
| ---- |
| |
| http://localhost/AffableBean*/category* |
| ---- |
| Шаблоны URL-адресов должны соответствовать представлениям и действиям пользователя. В соответствии с link:design.html#index[+макетом страницы приветствия+], пользователь должен иметь возможность выбрать категорию. Поэтому можно связать URL-адрес `/category` с действием нажатия изображения категории. Аналогично, на link:design.html#category[+странице категории+] пользователи должны иметь возможность добавить элемент в корзину покупок. Поэтому можно указать URL-адрес `/addToCart`. |
| |
| [start=5] |
| . В поле "Шаблоны URL-адресов" введите `/category, /addToCart, /viewCart`. Шаблоны разделяются запятыми. Можно создать дополнительные шаблоны непосредственно в классе сервлета после его создания. |
| |
| image::images/servlet-wizard2.png[title="Настройте развертывание сервлета напрямую в мастере"] |
| |
| [start=6] |
| . Нажмите кнопку "Завершить". `ControllerServlet` создается в среде IDE и открывается в редакторе. Сервлет и шаблоны URL-адресов включены в аннотацию `@WebServlet`, расположенную перед сигнатурой класса. |
| |
| [source,java] |
| ---- |
| |
| *@WebServlet(name="ControllerServlet", urlPatterns={"/category", "/addToCart", "/viewCart"})* |
| public class ControllerServlet extends HttpServlet { |
| ---- |
| Если выбрать на предыдущем шаге параметр "`Добавить сведения в дескриптор развертывания (web.xml)`", вместо этого была бы создана такая разметка в файле приложения `web.xml`. |
| |
| [source,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> |
| ---- |
| |
| [start=7] |
| . Добавьте остальные шаблоны URL-адресов прямо в аннотацию `@WebServlet` в элемент `urlPatterns`. В приложении требуются шаблоны URL-адресов для остальных действий и представлений. Можно ввести следующие шаблоны: |
| * `/updateCart` |
| * `/checkout` |
| * `/purchase` |
| * `/chooseLanguage` |
| Запишите шаблоны через запятую. Также можно переформатировать аннотацию таким образом: |
| |
| [source,java] |
| ---- |
| |
| @WebServlet(name="ControllerServlet", |
| urlPatterns = {"/category", |
| "/addToCart", |
| "/viewCart"*, |
| "/updateCart", |
| "/checkout", |
| "/purchase", |
| "/chooseLanguage"*}) |
| ---- |
| |
| [start=8] |
| . Наконец, добавьте элемент `loadOnStartup`, чтобы экземпляр сервлета создавался и инициализировался при развертывании приложения. Для этого задайте значение `0` или большее (по умолчанию используется значение `-1`). |
| |
| [source,java] |
| ---- |
| |
| @WebServlet(name="ControllerServlet", |
| *loadOnStartup = 1,* |
| urlPatterns = {"/category", |
| "/addToCart", |
| "/viewCart", |
| "/updateCart", |
| "/checkout", |
| "/purchase", |
| "/chooseLanguage"}) |
| ---- |
| |
| |
| |
| [[implement]] |
| == Реализация сервлета Controller |
| |
| Сервлет Controller обрабатывает входящие запросы, запуская необходимые для создания модели действия и перенаправляя запрос соответствующему представлению. Визуальное представление приведено на link:design.html#mvcDiagram[+диаграмме MVC для проекта AffableBean+]. |
| |
| Открыв созданный код для поиска нового `ControllerServlet`, можно заметить, что шаблон сервлета IDE использует метод `processRequest`, который вызывается как методом `doGet`, так и `doPost`. (Возможно, потребуется расширить свертывание кода, щелкнув значок плюса ( image:images/code-fold-icon.png[] ) в левом поле редактора, чтобы просмотреть эти методы). Поскольку приложение проводит различие между `doGet` и `doPost`, код добавляется прямо в эти методы и полностью исключается из метода `processRequest`. |
| |
| |
| === Изменение шаблонов файлов с помощью диспетчера шаблонов среды IDE |
| |
| Среда IDE предоставляет простой шаблон для каждого создаваемого файла. Если шаблон не соответствует вашим рабочим шаблонам, можно изменить его в диспетчере шаблонов среды IDE. В среде IDE есть шаблоны практически для каждого типа файлов. |
| |
| Например, для изменения шаблона сервлета выполните следующие действия: |
| |
| 1. Откройте диспетчер шаблонов, выбрав в главном меню "Сервис" пункт "Шаблоны". |
| 2. Разверните категорию Web, затем выберите шаблон "Сервлет". |
| |
| image::images/template-manager.png[title="Доступ и изменение шаблонов файлов с помощью диспетчера шаблонов"] |
| |
| [start=3] |
| . Нажмите кнопку "Открыть в редакторе". |
| |
| [start=4] |
| . Измените шаблон в редакторе. При следующем создании нового сервлета (например, с помощью мастера создания сервлетов), будет применена новая версия. |
| |
| |
| |
| После связывания шаблонов URL-адресов в сервлетом с помощью аннотации `@WebServlet`, настройте `ControllerServlet` для обработки этих шаблонов. Также создайте экземпляр `RequestDispatcher` для перенаправления запроса к соответствующему представлению. |
| |
| 1. Замените код шаблона класса `ControllerServlet` на следующий. |
| |
| [source,xml] |
| ---- |
| |
| public class ControllerServlet extends HttpServlet { |
| |
| /** |
| * Handles the HTTP <code>GET</code> method. |
| * @param request servlet request |
| * @param response servlet response |
| * @throws ServletException if a servlet-specific error occurs |
| * @throws IOException if an I/O error occurs |
| */ |
| @Override |
| protected void doGet(HttpServletRequest request, HttpServletResponse response) |
| throws ServletException, IOException { |
| |
| String userPath = request.getServletPath(); |
| |
| // if category page is requested |
| if (userPath.equals("/category")) { |
| // TODO: Implement category request |
| |
| // if cart page is requested |
| } else if (userPath.equals("/viewCart")) { |
| // TODO: Implement cart page request |
| |
| userPath = "/cart"; |
| |
| // if checkout page is requested |
| } else if (userPath.equals("/checkout")) { |
| // TODO: Implement checkout page request |
| |
| // if user switches language |
| } else if (userPath.equals("/chooseLanguage")) { |
| // TODO: Implement language request |
| |
| } |
| |
| // use RequestDispatcher to forward request internally |
| String url = "/WEB-INF/view" + userPath + ".jsp"; |
| |
| try { |
| request.getRequestDispatcher(url).forward(request, response); |
| } catch (Exception ex) { |
| ex.printStackTrace(); |
| } |
| } |
| |
| /** |
| * Handles the HTTP <code>POST</code> method. |
| * @param request servlet request |
| * @param response servlet response |
| * @throws ServletException if a servlet-specific error occurs |
| * @throws IOException if an I/O error occurs |
| */ |
| @Override |
| protected void doPost(HttpServletRequest request, HttpServletResponse response) |
| throws ServletException, IOException { |
| |
| String userPath = request.getServletPath(); |
| |
| // if addToCart action is called |
| if (userPath.equals("/addToCart")) { |
| // TODO: Implement add product to cart action |
| |
| // if updateCart action is called |
| } else if (userPath.equals("/updateCart")) { |
| // TODO: Implement update cart action |
| |
| // if purchase action is called |
| } else if (userPath.equals("/purchase")) { |
| // TODO: Implement purchase action |
| |
| userPath = "/confirmation"; |
| } |
| |
| // use RequestDispatcher to forward request internally |
| String url = "/WEB-INF/view" + userPath + ".jsp"; |
| |
| try { |
| request.getRequestDispatcher(url).forward(request, response); |
| } catch (Exception ex) { |
| ex.printStackTrace(); |
| } |
| } |
| |
| } |
| ---- |
| Продолжив работу с учебным курсом, вы вернётесь к `ControllerServlet` и реализуете каждый из сопоставленных шаблонов URL-адреса отдельно. |
| |
| [start=2] |
| . Рассмотрим этот код. Следует обратить внимание на следующие моменты: |
| * Сервлет использует переменную экземпляра `userPath` для получения запрошенного шаблона URL-адреса от клиента: |
| |
| [source,java] |
| ---- |
| |
| String userPath = request.getServletPath(); |
| ---- |
| `userPath` используется как методом `doGet`, так и `doPost`. |
| * Шаблоны URL-адресов связаны в первую очередь с запросом страниц и управляются методом `doGet`. Например, запросы `/category`, `/viewCart` и `/checkout` соответственно приведут к отображению страниц категории, корзины покупок и проверки. |
| * Шаблоны URL-адресов. связанные с отправкой форм и передачей конфиденциальной информации пользователей (например,, `/addToCart`, `/updateCart` и `/purchase`) управляются методом `doPost`. |
| * Как для метода `doGet`, так и для `doPost`, путь к соответствующему виду формируется с использованием строки адреса `url`. |
| |
| [source,java] |
| ---- |
| |
| String url = "/WEB-INF/view" + userPath + ".jsp"; |
| ---- |
| * `RequestDispatcher` получается из `HttpServletRequest` и использует `url` для перенаправления запроса: |
| |
| [source,java] |
| ---- |
| |
| request.getRequestDispatcher(url).forward(request, response); |
| ---- |
| * Примечания `TODO` используются для обозначения работы, которую предстоит выполнить. Например: |
| |
| [source,java] |
| ---- |
| |
| // if category page is requested |
| if (userPath.equals("/category")) { |
| // TODO: Implement category request |
| ---- |
| Применение примечаний `TODO` в коде — полезный способ отслеживать задания, которые предстоит выполнить. Можно использовать окно 'Задачи' среды IDE (Ctrl-6; ⌘-6 в Mac), чтобы просмотреть все заметки TODO, а также любой синтаксис или ошибки компиляции, содержащиеся в проекте. |
| |
| image::images/tasks-window.png[title="Отслеживание задач реализации в окне 'Задачи' среды IDE"] |
| |
| Можно управлять ключевыми словами, отображаемыми в окне "Задачи". Откройте окно "Параметры" (в меню "Сервис" пункт "Параметры"; меню NetBeans, пункт "Параметры" в Mac OS), затем выберите "Разное" > "Задания". |
| |
| |
| [start=3] |
| . Выполните проект (нажмите клавишу F6; fn+F6 в Mac OS) и проверьте, что `ControllerServlet` перенаправляет запросы соответствующим представлениям. |
| * Введите в строке адреса браузера `http://localhost:8080/AffableBean/category`. Отображается <<categoryPage,страница категории>> приложения. |
| * Введите в строке адреса браузера `http://localhost:8080/AffableBean/viewCart`. Отображается <<cartPage,страница корзины покупок>>. |
| * Введите в строке адреса браузера `http://localhost:8080/AffableBean/checkout`. Отображается <<checkoutPage,страница проверки>> приложения. |
| |
| *Примечание.* Ввод `http://localhost:8080/AffableBean/purchase` в адресной строке браузера не обеспечивает разрешения для просмотра <<confirmationPage,страницы подтверждения>>. Это происходит потому, что шаблон URL-адреса `/purchase` управляется методом `doPost` сервлета, а запрос формы отправки из адресной строки браузера обычно посылается с помощью метода HTTP GET. |
| |
| В настоящий момент созданы страницы JSP, содержащие заполнители для всех функциональных компонентов. Также создана структура внешнего интерфейса приложения. Страницы JSP теперь расположены в папке `WEB-INF`, верхний и нижний колонтитулы выделены в отдельные файлы, дескриптор развертывания настроен и для обработки входящих запросов создан `ControllerServlet`. В следующей главе учебного курса будет создано подключение приложения к базе данных. |
| |
| Если требуется сравнить результаты выполнения этой главы с образцом, link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252Fecommerce%252FAffableBean_snapshot2.zip[+загрузите снимок 2 проекта AffableBean+]. |
| |
| link:/about/contact_form.html?to=3&subject=Feedback: NetBeans E-commerce Tutorial - Preparing the Page Views and Controller Servlet[+Мы ждем ваших отзывов+] |
| |
| |
| |
| [[seeAlso]] |
| == Дополнительные сведения |
| |
| |
| === Учебные курсы по среде NetBeans |
| |
| * link:../javaee-intro.html[+Введение в технологию Java EE +] |
| * link:../javaee-gettingstarted.html[+Начало работы с приложениями для Java EE+] |
| * link:../../web/quickstart-webapps.html[+Введение в разработку веб-приложений+] |
| * link:../../web/mysql-webapp.html[+Создание простого веб-приложения, использующего базу данных MySQL+] |
| * link:../../screencasts.html[+Video Tutorials and Demos for IDE NetBeans 6.x+] |
| * link:https://netbeans.org/projects/www/downloads/download/shortcuts.pdf[+Таблица комбинаций клавиш и шаблонов кода+] |
| * link:../../../trails/java-ee.html[+Учебная карта по Java EE и Java Web+] |
| |
| |
| === Книги по среде NetBeans |
| |
| * link:https://netbeans.org/kb/articles/netbeans-tips-and-tricks-book.html[+100 IDE NetBeans Tips and Tricks+] |
| * link:http://www.apress.com/book/view/1590598954[+Pro IDE NetBeans 6 Rich Client Platform Edition+] |
| * link:http://apress.com/book/view/1430219548[+Начало работы с платформой Java EE 6 с GlassFish 3: от новичка до профессионала+] |
| * link:https://netbeans.org/kb/articles/books.html[+More books about IDE NetBeans+] |
| |
| |
| === Внешние ресурсы |
| |
| * link:http://jcp.org/en/jsr/detail?id=315[+Спецификация сервлета 3.0+] |
| * link:https://developer.mozilla.org/en/Common_CSS_Questions[+Часто задаваемые вопросы по CSS+] |
| * link:http://quirksmode.org/compatibility.html[+Главная таблица совместимости с браузерами+] |
| * link:http://refcardz.dzone.com/refcardz/netbeans-ide-67-update[+DZone Refcard для редактора Java NetBeans+] |