corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

Введение в Разработку Веб приложений

Этот документ проведет Вас по основам использования NetBeans IDE для разработки веб приложений. Он демонстрирует, как создать простое веб приложение, развернуть его на сервере и посмотреть его представление в браузере. Приложение использует JavaServer Pages™ (JSP) страницу с просьбой к Вам о вводе своего имени. Затем этот ввод использует JavaBeans™ компонент для сохранения имени во время сеанса HTTP, и восстанавления его для вывода на второй странице JSP.

Содержание

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

Для выполнения этой обучающей программы требуется следующее программное обеспечение и ресурсы.

Программное обеспечение или Ресурс Необходимая Версия
NetBeans IDE Web and Java EE installation
версия 6.1 или версия 6.0
Java Development Kit (JDK) версия 6 или
версия 5
сервер приложений GlassFish
или
servlet контейнер Tomcat
V2
 
версии 6.x

Примечания:

  • Web and Java EE installation дает возможность Вам свободно установить сервер приложения GlassFish V2 и Apache Tomcat servlet контейнер 6.0.x. Для работы с этой обучающей программой Вы должны установить один из них.
  • Используйте сервер приложений, который полностью соответствует требованиям спецификации Java EE 5, такой как GlassFish Application Server V2 UR2 , и Вы используете возможности NetBeans IDE для Java EE 5. Если вы используете другой сервер , проконсультируйтесь с Замечаниями к Выпуску (Release Notes) и FAQs по поводу известных проблем и их обходов. Подробную информацию о поддерживаемых серверах и Java EE платформе смотрите в Замечаниях к Выпуску (Release Notes).
  • Для сравнения Вашего проекта с работающим решением можно загрузить готовый пример.

Постановка Проекта Веб Приложения

  1. Выберите File > New Project (Ctrl-Shift-N) из главного меню. Из Categories выберите Web. Из Projects выберите Web Application, затем щелкните Next.
  2. В окне Step 2 введите HelloWeb в текстовое поле Project Name. Провертье, что Context Path (т.е., на сервере) установился в /HelloWeb.
  3. Задайте расположение проекта (Project Location) в каком-нибудь каталоге вашего компьютера. В нашей обучающей программе этот каталог упоминается как $PROJECTHOME.

    Примечание: Создание проекта в NetBeans IDE 6.1 включает новые настройки, которые можно оставить установленными IDE по умолчанию. Например, флажок Использовать Специальную Папку для Хранения Библиотек (Use Dedicated Folder for Storing Libraries) можно оставить неотмеченным.

  4. Если у Вас NetBeans IDE 6.1, щелкните Next; иначе переходите к шагу 5.
  5. Выберите сервер, на котором предполагаете развернуть приложение. Перечислены только зарегистрированные в IDE серверы.
  6. Выберите желаемую для использования с Вашим приложением версию Java EE и нажмите Next.
  7. В панели Frameworks щелкните Finish чтобы создать проект.

    IDE создаст папку проета $PROJECTHOME/HelloWeb . Папка проекта содержит все Ваши исходные данные и метаданные проекта, такие, как сценарий построения (Ant build script) проекта . В IDE откроется проект HelloWeb. В главном окне Редактора Исходных кодов откроется страница приветствия index.jsp. Файловую структуру проекта можно видеть в окне Files (Ctrl-2), а логическую структуру в окне Projects (Ctrl-1):

    Логическая структура проекта HelloWeb отображается в окне Projects

Создание и Редактирование Исходных Файлов Веб Приложения

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

Создание Пакета Java и Исходного Файла Java

  1. В окне Projects разверните узел Source Packages. Заметьте, что узел Source Packages содержит пустой узел пакета по умолчанию.
  2. Щелкните правой кнопкой мыши узел Source Packages и веберите New > Java Class. Введите NameHandler в текстовое поле Class Name, затем напечататайте org.mypackage.hello в поле со списком Package. Нажмите Finish. Отметим, что новый файл NameHandler.java откроется в Редакторе Исходных кодов.
  3. В Редакторе объявите Строковую (String) переменную напечатав следующую строку непосредственно ниже объявления класса:
    String name;
  4. Добавьте в класс следующий конструктор:
    public NameHandler()
  5. Добавьте следующую строку в конструктор NameHandler() :
    name = null;

Порождение Методов Getter и Setter

  1. Щелкните правой кнопкой мыши поле name в Редакторе Исходного кода и выберите Refactor > Encapsulate Fields. Откроется диалог, в списке поле name. Заметьте, что поле Visibility по умолчанию установлено в private, и Accessors' Visibility в public, указывая, что модификатор доступа для декларации переменной класса будет определен как частный (private), тогда как методы getter и setter будут порождены с модификаторами общий (public) и частный (private) , соответственно.
  2. Щелкните Refactor. Выполнится порождение методов getter и setter для поля name . Модификатор для переменной класса установлен в private , в то время как методы getter и setter порождены с модификаторами public. Класс Java должен теперь выглядеть подобно следующему:
    package org.mypackage.hello;
    
    
    
    /**
    
     *
    
     * @author nbuser
    
     */
    
    
    
    public class NameHandler {
    
    
    
        private String name;
    
    
    
        /** Creates a new instance of NameHandler */
    
        public NameHandler() {
    
           name = null;
    
        }
    
    
    
        public String getName() {
    
           return name;
    
        }
    
    
    
        public void setName(String name) {
    
           this.name = name;
    
        }
    
    
    
    }

Редактирование Файла JavaServer Pages по Умолчанию

  1. Активизируйте файл index.jsp щелкнув вкладку, отображенную наверху Редактора Исходного кода.
  2. В палитре (Palette) (Ctrl-Shift-8), расположенной справа от Редактора Исходных кодов, расширьте HTML Forms и перетащите элемент Form в точку после тэга <h2> в Редактор Исходных кодов. Отобразится панель диалога Insert Form:

    Отображение диалога Insert Form  после щелчка элемента Form в палитре (Palette)

    Определите следующие значения:
    • Action: response.jsp
    • Method: GET
    • Name: Name Input Form
    Нажмите OK. HTML форма добавится в файл index.jsp.
  3. Перетащите элемент Text Input в точку перед тэгом </form>, затем определите следующие значения:
    • Name: name
    • Type: text
    Нажмите OK. Тэг HTML <input> добавится между тэгами <form>.
  4. Перетащите элемент Button в точку перед тэгом </form>. Определите следующие значения:
    • Label: OK
    • Type: submit
    Нажмите OK. HTML button (кнопка) добавится между тэгами <form>.
  5. Напечатайтеe Enter your name: перед тэгом <input>, затем измените текст по умолчанию Hello World! между тэгами <h2> на Entry Form.
  6. Щелкните правой кнопкой мыши в пределах Редактора Исходных кодов и выберите Format (Alt-Shift-F), чтобы привести в порядок формат Вашего кода. Ваш файл index.jsp должен выглядеть теперь примерно так:
    <html>
    
        <head>
    
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
            <title>JSP Page</title>
    
        </head>
    
        <body>
    
            <h2>Entry Form</h2>
    
    
    
            <form name="Name Input Form" action="response.jsp">
    
                Enter your name:
    
                <input type="text" name="name" />
    
                <input type="submit" value="OK" />
    
            </form>
    
        </body>
    
    </html>

Создание Файла JavaServer Pages

  1. В окне Projects щелкните правой кнопкой мыши по узлу проекта HelloWeb и выберите New > JSP. Откроется мастер New JSP File. Назовите файл response и нажмите Finish. Заметьте, что узел файла response.jsp отображается в окне Projects ниже index.jsp, и новый файл открыт в Редакторе Исходных кодов .
  2. В палитре , расположенной справа от Редактора Исходных кодов, расширьте JSP и перетащите элемент Use Bean в точку ниже тэга <body>в Редакторе Исходных кодов. Откроется мастер Insert Use Bean. Определите следующие значения:

    Диалог Use Bean содержит заданные поля
    • ID: mybean
    • Class: org.mypackage.hello.NameHandler
    • Scope: session
    Нажмите OK. Заметьте, что тэги <jsp:useBean> добавились ниже тэга <body>.
  3. Перетащите элемент Set Bean Property с палитры в точку между тэгами <h2> и нажмите OK. В тэге <jsp:setProperty>, который появился, удалите пустые атрибуты value и измените следующие:
    <jsp:setProperty name="mybean" property="name" />
    Как указано в документации по <jsp:setProperty>, Вы можете установить значение свойства различными способами. В этом случае, пользовательский ввод, прибывающий из index.jsp , становится парой имени/значения (name/value ), которую передают к объекту запроса (request). Когда Вы устанавливаете свойство, используя тэг <jsp:setProperty> , Вы можете определить значение согласно имени свойства, содержавшегося в объекте запроса (request). Поэтому, устанавливая свойство (property) в имя (name), Вы можете возвратить значение, определенное пользовательским вводом.
  4. Измените текст между тэгами <h2> чтобы получилось так:
    <h2>Hello, !</h2>
  5. Перетащите элемент Get Bean Property с палитры и вставьте его после запятой между тэгами <h2>. Определите следующие значения в диалоге Insert Get Bean Property:
    • Bean Name: mybean
    • Property Name: name
    Нажмите OK. Заметьте, что тэг <jsp:getProperty> добавился между тэгами <h2>.
  6. Щелкните правой кнопкой мыши в пределах Редактора Исходных кодов и выберите Format (Alt-Shift-F), чтобы привести в порядок формат Вашего кода. Тэг <body> Вашего файла response.jsp должен теперь выглядеть подобно следующему:
    <body>
    
        <jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />
    
        <jsp:setProperty name="mybean" property="name" />
    
        <h2>Hello, <jsp:getProperty name="mybean" property="name" />!</h2>
    
    </body>

Построение и Выполнение Проекта Веб Приложения

Для построения и запуска Вашего веб приложения IDE использует сценарий построения ( Ant build script). IDE порождает сценарий построения на основе настроек, которые вы задали в мастере New Project, а также настроек проекта из панели диалога Project Properties (В окне Projects из контекстного меню узла проекта выберите Properties).

  1. В окне Projects, щелкните правой кнопкой мыши по узлу проекта HelloWeb и выберите Run (F6). IDE построит веб приложение и развернет его на сервере, который Вы определили, создавая проект. Страница index.jsp откроется в Вашем браузере по умолчанию:
    index.jsp отображается в браузере
  2. Введите свое имя в текстовом поле, затем нажмите OK. Отобразится страница response.jsp, показывая Вам простое приветствие:
    response.jsp отображается в браузере

Поиск Неисправностей

Я построил и выполнил проект. Когда я нажимаю кнопку OK на странице index.jsp, страница сообщений об ошибках отображает сообщение, что файл response.jsp недоступен (is not available).

Вы используете версию 5 JDK или выше? Выберите Help > About из главного меню, чтобы проверить версию JDK, которую использует IDE. Вы используете версию 5.x Tomcat или выше? Выберите Tools > Servers из главного меню. Выберите сервер, который будет использован в проекте и отметьте поле для Типа Сервера (Server Type), которое отображается около верхушки диалога. Вы можете еще попробовать загрузить проект-пример и сравнить его со своим.


См. Также

На этом завершим обучающую программу Введение в Разработку Веб приложений. Этот документ продемострировал, как создать простое веб приложение , используя NetBeans IDE, развернуть эго на сервере, и посмотреть его представление в браузере. Он также показал, как использовать JavaServer Pages и JavaBeans в Вашем приложении для сбора, сохранения, и вывода пользовательских данных.

Связанную с разратокой веб приложений в NetBeans IDE и дополнительную информацию см. на следующих ресурсах:

Bookmark this page

del.icio.us furl simpy slashdot technorati digg
Companion
Projects:
MySQL Database Server   GlassFish Community: an Open Source Application Server   Open Solaris  Open JDK: an Open SourceJDK   Mobile & Embedded Community     Sponsored by 
Sponsored by Sun Microsystems