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

В этой документации содержится пошаговое описание основ использования IDE NetBeans для разработки веб-приложений. Также здесь рассматриваются способы создания простого веб-приложения, его развертывания на сервере и просмотра в браузере. В этом приложении будет создана страница JavaServer Pages(tm) (JSP) с запросом на ввод имени пользователя. Для сохранения введенного имени во время сеанса HTTP и повторения имени на другой странице JSP будет использоваться компонент JavaBeans.

Содержание

Содержимое на этой странице применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0

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

Программное обеспечение или материал Требуемая версия
IDE NetBeans Версия 7.2, 7.3, 7.4, 8.0, Java EE
Комплект для разработчика на языке Java (JDK) версия 7 или 8
GlassFish Server Open Source Edition
или
Контейнер сервлетов Tomcat
или
Сервер Oracle Web Logic
4.x
 
7.x или 8.x

11gR1 (10.3.3) или более поздние версии

Примечания

  • Установка Java EE (но не Java SE!) позволяет, при желании, установить сервер GlassFish и контейнер сервлетов Apache Tomcat.
  • Если вы хотите сравнить проект с рабочим решением, можно загрузить демонстрационное приложение.

Настройка проекта веб-приложения

  1. Выберите в главном меню "Файл" > "Новый проект" (CTRL+SHIFT+N). В области "Категории" выберите "Java Web". В области "Projects" (Проекты) выберите "Web Application" (Веб-приложение) и нажмите кнопку "Next" (Далее).
  2. В экране 2 введите HelloWeb в текстовом поле "Project Name" (Имя проекта).
  3. В поле "Project Location" укажите любой каталог на компьютере. В данном учебном курсе этот каталог будет называться $PROJECTHOME.
  4. Установите флажок "Использовать отдельную папку для хранения библиотек" и укажите местоположение папки библиотек (необязательно). Дополнительные сведения об этой функции см. в разделе Создание проектов Java в документе Разработка приложений в IDE NetBeans
  5. Нажмите кнопку "Далее". Откроется панель сервера и параметров настройки. Выберите версию Java EE, которую требуется использовать для приложения.
  6. Выберите сервер, на котором требуется выполнить развертывание приложения. В списке представлены только те серверы, которые зарегистрированы в среде IDE. Обратите внимание, что для поля "Context Path" (например, на сервере) устанавливается значение /HelloWeb в основе которого находится имя проекта, указанное при выполнении предыдущего действия.
  7. Нажмите кнопку "Готово".

    В среде IDE будет создана папка проекта $PROJECTHOME/HelloWeb. Структуру файлов проекта можно просмотреть в окне "Files" (Ctrl+2), а его логическую структуру – в окне "Projects" (Ctrl+1).

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

Папка проекта содержит все исходные файлы и метаданные проекта, например сценарий сборки Ant. После этого проект "HelloWeb" откроется в среде IDE. В главном окне редактора исходного кода откроется страница приветствия index.jsp.

Примечание. В зависимости от версий сервера и Java EE, указанных при создании проекта, IDE может создать страницу index.html в качестве стандартной страницы приветствия для веб-проекта. Вы можете следовать инструкциям этого руководства и использовать файл index.html либо создать файл index.jsp, который будет использоваться в качестве страницы приветствия, в мастере создания файлов. В последнем случае необходимо удалить файл index.html.

Создание и изменение исходных файлов веб-приложения

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

Создание пакета Java и исходного файла Java

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

Создание методов получения и установки

  1. Щелкните правой кнопкой мыши поле name в редакторе исходного кода и выберите "Refactor" > "Encapsulate Fields".

    Откроется диалоговое окно "Encapsulate Fields", в котором имеется поле name. Обратите внимание, что для параметра "Visibility" (Видимость) полей по умолчанию установлено значение "private" (закрытый), а для средств доступа – значение "public" (общедоступный); в результате модификатор доступа для объявления переменной класса будет определен как "private", в то время как методы получения и установки будут созданы с модификаторами public и private, соответственно.

    Диалоговое окно инкапсуляции полей
  2. Нажмите кнопку "Refactor" (Реорганизация).

    Для поля name создаются методы получения и установки. Модификатор для переменной класса определяется как private, в то время как методы получения и установки создаются с модификаторами "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. В палитре (Ctrl+Shift+8), расположенной справа от редактора исходного кода, разверните узел "HTML Forms" и перетащите элемент "Form" в позицию, находящуюся в редакторе исходного кода непосредственно после тегов <h1>.

    Появится диалоговое окно "Insert Form".

  3. Установите следующие значения:
    • Action: response.jsp;
    • Method: GET;
    • Name: Name Input Form.

    Нажмите кнопку "ОК". К файлу index.jsp добавляется форма HTML.

    Диалоговое окно 'Конфигурация'
  4. Перетащите элемент "Text Input" в позицию непосредственно перед тегом </form>, затем установите следующие значения:
    • Name: name;
    • Type: text.
    Нажмите кнопку "ОК". Между тегами <form> будет добавлен тег HTML <input>. Удалите атрибут value из данного тега.
  5. Перетащите элемент "Button" в позицию непосредственно перед тегом </form>. Установите следующие значения:
    • Label: OK;
    • Type: submit.
    Нажмите кнопку "ОК". Между тегами <form> будет добавлена кнопка HTML.
  6. Введите Enter your name: непосредственно перед первым тегом <input>, затем измените текст по умолчанию Hello World!, расположенный между тегами <h1>, на Entry Form.
  7. Щелкните правой кнопкой мыши область редактора исходного кода и выберите "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>
            <h1>Entry Form</h1>
    
            <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. В окне 'Проекты', щелкните правой кнопкой мыши узел проекта HelloWeb и выберите 'Создать' > JSP. Откроется мастер "New JSP File". Назовите файл response и нажмите кнопку "Finish". Обратите внимание на то, что узел файла response.jsp отображается в окне "Projects" под файлом index.jsp, а новый файл открывается в редакторе исходного кода.
  2. На палитре справа от редактора исходного кода разверните узел "JSP" и поместите элемент "Use Bean" непосредственно под тегом <body> в редакторе исходного кода. Откроется диалоговое окно "Insert Use Bean". Укажите значения, как показано на следующем рисунке.

    Диалоговое окно 'Использование компонентов Bean', содержащее определенные поля
    • ID: mybean;
    • Class: org.mypackage.hello.NameHandler;
    • Scope: session.
    Нажмите кнопку "ОК". Обратите внимание на то, что под тегом <body> добавляется тег <jsp:useBean>.
  3. Перетащите элемент "Set Bean Property" из палитры и поместите его непосредственно перед тегом <h1>. Нажмите кнопку "OК". В появившемся теге <jsp:setProperty> удалите пустой атрибут value и измените его следующим образом: Eсли средой IDE был создан атрибут value = "", удалите его. В противном случае значение name, введенное в форме index.jsp, будет перезаписано.
    <jsp:setProperty name="mybean" property="name" />

    Как указано в

    документации <jsp:setProperty>, значение свойства можно задать различными способами. В этом случае вводимые пользователем данные из index.jsp становятся парой имя/значение, передаваемой в объект request. При установке свойства с помощью тега <jsp:setProperty> можно указать значение в соответствии с именем свойства, содержащегося в объекте request. Поэтому при определении property в качестве name можно получить значение, указанное пользователем при вводе.

  4. Измените текст между тегами <h1> следующим образом:
    <h1>Hello, !</h1>
  5. Перетащите элемент "Get Bean Property" из палитры в позицию непосредственно после запятой между тегами <h1>. Укажите следующие значения в диалоговом окне "Insert Get Bean Property":
    • Bean Name: mybean;
    • Property Name: name.

    Нажмите кнопку "ОК". Обратите внимание на то, что между тегами <h1> появился тег <jsp:getProperty>.

    Обратите внимание: имена Property нужно вводить с учетом регистра. Свойство "name" должно быть в одном регистре как в response.jsp, так и в форме ввода index.jsp.

  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" />
        <h1>Hello, <jsp:getProperty name="mybean" property="name" />!</h1>
    </body>

Выполнение проекта веб-приложения

Для сборки и выполнения веб-приложений в среде IDE используется сценарий сборки Ant. IDE создаст сценарий сборки на основе параметров, указанных в мастере создания новых проектов, а также проектов в диалоговом окне 'Свойства проектов' (в окне 'Проекты' выберите 'Свойства' в меню правой кнопки мыши узла проекта).

  1. В окне 'Проекты' щелкните правой кнопкой мыши узел проекта HelloWeb и выберите 'Выполнить' (F6). При выполнении веб-приложения среда IDE выполнит следующие действия:

    • Сборка и компиляция кода приложения (см. примечание ниже). Это действие можно выполнить отдельно от прочих, выбрав Build ("Сборка") или Clean and Build ("Очистка и сборка") из контекстного меню узла проекта.
    • Запуск сервера.
    • Развертывание приложения на сервере. Это действие можно выполнить отдельно от прочих, выбрав Deploy ("Развертывание") из контекстного меню узла проекта.
    • Отображение приложения в окне браузера.

    Примечание. По умолчанию, проект создается с включенной функцией 'Компилировать при сохранении', так что не нужно сначала компилировать код.

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

    Окно "Результаты" IDE NetBeans для запуска приложения Hello Web
  3. Среда IDE открывает окно 'Результаты', которое показывает состояние сервера. Взгляните на вкладку в окне вывода с именем сервера.

    Обратите внимание. Если сервер GlassFish не запускается, запустите его вручную и после этого выполните проект снова. Сервер можно запустить вручную из окна 'Службы', щелкнув правой кнопкой мыши узел сервера и выбрав 'Пуск'.

    Окно 'Результаты' для сервера отображает полезную информацию о проблемах при выполнении веб-приложений. Также могут быть полезны журналы сервера. Они расположены в каталоге соответствующего домена сервера. Также можно сделать видимым журнал среды IDЕ, выбрав View ("Представление") > IDE log ("Журнал IDE") и просмотреть его.

    Окно "Результаты" в IDE NetBeans для сервера GlassFish 3 при запуске приложения Hello Web
  4. Страница index.jsp откроется в браузере по умолчанию. Обратите внимание, что окно браузера может открыться до отображения выходных данных сервера средой IDE.

    Файл index.jsp отображается в браузере
  5. Введите имя в текстовом поле и нажмите кнопку "OК". На экране появится страница response.jsp с простым приветствием.

    Файл response.jsp отображается в браузере

Устранение проблем

Я создал и запустил проект. При нажатии кнопки "OК" для index.jsp на экране появляется страница ошибки, указывающая на то, что файл response.jsp недоступен.

Откройте окно 'Результаты' в IDE (Ctrl-4) на вкладке 'Проекты' или на вкладке 'Серверы'. Какие сообщения об ошибках там отображаются? Какой JDK используется в вашем проекте? Какой сервер? Для JDK 7 требуется GlassFish 3.x или Tomcat 7.x. Щелкните правой кнопкой мыши узел проекта в окне 'Проекты' и выберите 'Свойства'. JDK находится в категории 'Библиотеки' в поле 'Платформа Java'. Версию сервера можно посмотреть в категории 'Выполнить'. Наконец, загрузите демонстрационный проект и сравните его с собственным.

Я собрал и выполнил проект, но имя не выводится на экран, отображается только "Привет, !"

В теге <jsp:setProperty> содержится атрибут value = ""? Он перезаписывает значение, введенное в форме index.jsp, и заменяет его пустой строкой. Удалите атрибут value.

Я собрал и выполнил проект, но получаю "Hello, null!"

В первую очередь проверьте окна выходных данных среды IDE как для приложения, так и для сервера, а также журнал сервера. Работает ли сервер? Было ли развернуто приложение? Если сервер работает и приложение было развернуто, возникает ли org.apache.jasper.JasperException: java.lang.NullPointerException? Это обычно означает, что значение в коде неправильно инициализировано. В рамках данного курса это, вероятно, указывает на наличие ошибки где-то в имени свойства в файлах JSP. Помните, что для имен свойств важен регистр!


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

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

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

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2016, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo