Google Git
Sign in
apache / netbeans-website / 44443f9641a4bc18331d3d9c0e0f178c417e52be / . / netbeans.apache.org / src / content / kb / docs / javaee / ecommerce / page-views-controller_ru.asciidoc
blob: 026412c254c096e025dc960814d5fc25f561caa7 [file] [log] [blame]
//
// 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 &amp; 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&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>
----
[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+]