// 
//     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>
----
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>
----
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;
}
----
5. Нажмите кнопку 'Запустить проект' (image::images/run-project-btn.png[]) на главной панели инструментов IDE. Измененные файлы проекта автоматически сохраняются, код Java компилируется, проект упаковывается и развертывается в GlassFish, затем открывается браузер для просмотра текущего состояния страницы приветствия. 
image::images/index-page.png[title="Выполните проект для просмотра текущего состояния страниц"]
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="Наведите указатель мыши дляч просмотра подсказки с предупреждением"]

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


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).

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. Просмотр страницы для анализа результатов этих изменений.
Выполняя эти действия, реализуем компоненты в оставшихся областях.
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 &amp; veg</span>
        </a>
    </div>*
</div>
----
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" немедленно обновляются.


11. Сохраните (Ctrl-S; ?-S в Mac) файлы `index.jsp` и `affablebean.css`, затем перейдите к браузеру и обновите страницу для просмотра текущего состояния. 
image::images/index-page3.png[title="Заполнители для заголовков и правого столбца отображаются при запуске проекта"]
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>
----
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;
}*
----
14. Сохраните (Ctrl-S; ?-S в Mac) файлы `index.jsp` и `affablebean.css`, затем перейдите к браузеру и обновите страницу для просмотра текущего состояния. 
image::images/index-page4.png[title="Отображаются заполнители для левого столбца и нижнего колонтитула"] 
Страница приветствия готова. Созданы все необходимые заполнители для компонентов, которые будут добавлены на страницу.

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

Самостоятельно реализуйте начальный проект для остальных страниц в соответствии с link:design.html#mockups[+макетами+]. Для этого следуйте шаблону:

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

Не забывайте использовать поддержку 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` был автоматически введен в поле 'Родительская папка'. Точно так же, при щелчке правой кнопкой мыши узла в окне 'Проекты' и выборе 'Создать', список типов файлов частично определяется предыдущими выборками.

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.
4. Скопируйте код верхнего колонтитула из любой страницы JSP и вставьте его в файл `header.jspf`. Верхний колонтитул должен включать описатель типа документа и открывающие теги `<html>`, `<head>` и `<body>` и текст до закрывающего тега элемента `<div id="header&amp;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>
----
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>
----
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. Выполните следующие действия.
4. Выберите вкладку "Страницы", затем нажмите кнопку "Добавить в группу свойств JSP". Открывается диалоговое окно "Добавление группы свойств JSP".
5. Введите в поле "Описание" текст "`header and footer settings`". Оставьте поле "Отображаемое имя" пустым. Поля "Отображаемое имя" и "Описание" являются необязательными для заполнения.
6. В поле "Шаблоны URL" введите пути к пяти представлениям. Введите "`/index.jsp`" и "`/WEB-INF/view/*`". Разделите эти два пути запятой. (Символ "`*`" — это подстановочный знак, обозначающий все файлы в данной папке.) 
image::images/add-jsp-prop-group-dialog.png[title="Используйте диалоговое окно 'Добавить группу свойств JSP', чтобы указать теги <jsp-config> в дескрипторе развертывания"]
7. Нажмите кнопку "ОК". В категорию "Группа свойств JSP" на вкладке "Страницы" добавляется запись.
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), чтобы задать для код правильные отступы.

9. Переключитесь снова на вкладку "Страницы" и введите в поля "Включить вводные части" и "Включить заключительные части" пути к файлам `header.jspf` и `footer.jspf` соответственно. Можно нажать кнопку "Обзор" и выбрать файлы в диалоговом окне. 
[.feature]
--
image::images/jsp-prop-groups-small.png[role="left", link="images/jsp-prop-groups.png"]
--
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[+Спецификации сервлетов+].

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="Используйте мастер создания сервлетов для создания сервлетов для проекта"]
4. Нажмите кнопку "Далее". На третьем экране мастера можно настроить сервлет. Наиболее значимыми являются шаблоны URL-адресов, которые требуется указать. Эти шаблоны определяют URL-адреса, по которым выполняется сервлет. Например, если ввести "`/category`", сервлет будет обрабатывать запросы следующего вида.

[source,java]
----

http://localhost/AffableBean*/category*
----
Шаблоны URL-адресов должны соответствовать представлениям и действиям пользователя. В соответствии с link:design.html#index[+макетом страницы приветствия+], пользователь должен иметь возможность выбрать категорию. Поэтому можно связать URL-адрес `/category` с действием нажатия изображения категории. Аналогично, на link:design.html#category[+странице категории+] пользователи должны иметь возможность добавить элемент в корзину покупок. Поэтому можно указать URL-адрес `/addToCart`.
5. В поле "Шаблоны URL-адресов" введите `/category, /addToCart, /viewCart`. Шаблоны разделяются запятыми. Можно создать дополнительные шаблоны непосредственно в классе сервлета после его создания. 
image::images/servlet-wizard2.png[title="Настройте развертывание сервлета напрямую в мастере"]
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>
----
7. Добавьте остальные шаблоны URL-адресов прямо в аннотацию `@WebServlet` в элемент `urlPatterns`. В приложении требуются шаблоны URL-адресов для остальных действий и представлений. Можно ввести следующие шаблоны:
* `/updateCart`
* `/checkout`
* `/purchase`
* `/chooseLanguage`
Запишите шаблоны через запятую. Также можно переформатировать аннотацию таким образом:

[source,java]
----

@WebServlet(name="ControllerServlet",
            urlPatterns = {"/category",
                           "/addToCart",
                           "/viewCart"*,
                           "/updateCart",
                           "/checkout",
                           "/purchase",
                           "/chooseLanguage"*})
----
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="Доступ и изменение шаблонов файлов с помощью диспетчера шаблонов"]
3. Нажмите кнопку "Открыть в редакторе".
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-адреса отдельно.
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), затем выберите "Разное" > "Задания".

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+]