Создание Web-клиента при помощи Eclipse Web Tools Platform

Опции документа Опции документа, требующие включения JavaScript, не отображаются Выскажите мнение об этой странице Помогите нам улучшить содержание

Уровень сложности: средний

Коллин Конниарней (Colleen Connearney), Инженер програмного обеспечения, IBM

23.11.2004

В данном руководстве рассказывается о создании полноценного Web-приложения аукциона при помощи Eclipse Web Tools Platform. Данное приложение осуществляет доступ к БД Cloudscape (Apache Derby) (в которой хранится сток аукциона) также, как удаленный Web-сервис.

Несколько слов о руководстве

Проект Eclipse Web Tools Platform является совместным проектом разработки программного обеспечения с открытым исходным кодом, предназначенным для обеспечения общей расширяемой платформы инструментов, основанной на стандартах. На базе этой платформы поставщики программного обеспечения могут создавать специализированные дифференцированные предложения для разработки приложений J2EE® и приложений, ориентированных на Web. Вклад IBM в проект Eclipse Web Tools Platform предоставляет отличную основу для набора инструментов Web-разработки, включая инструменты для данных, J2EE, XML, Web-сервисов, а также начальную интегрированную среду разработки для опытных разработчиков J2EE и Web.

В этом руководстве рассказывается о том, как использовать Web Tools Platform на базе Microsoft® Windows® для построения Web-клиента онлайн-аукциона, взаимодействующего с локальной базой данных и удаленными Web-сервисами, предоставленными сервером аукциона. Создаваемый нами сайт позволит:

• Просматривать локальное хранилище
• Исследовать список активных торгов аукциона
• Создавать новые лоты аукциона из элементов хранилища
• Отправлять запросы на сайт аукциона

Перед созданием проекта рекомендуем вам посмотреть рабочую демо-версию приложения на сайте IBM alphaWorks: Auction Web Service and Web Client Demo. Для просмотра нажмите View Demo.

Данное руководство предназначено для профессиональных разработчиков Java™, желающих улучшить свои навыки. Базовые знания в областях баз данных, JSP и Web-сервисов помогут вам в выполнении данной задачи.

При работе с руководством мы создадим и наполним базу данных Cloudscape, используем код примера для создания JavaServer Pages (JSP) и сервлетов, а также научимся тестировать приложение при помощи Apache Tomcat.

В начало

Предпосылки

В данном руководстве раскрывается построение клиента для онлайн-аукциона, однако не затрагивается построение сопутствующего Web-сервиса. Для испытания полноценного приложения, мы укажем вам на уже существующий Web-сервис. В качестве альтернативы вы можете создать свой Web-сервис, следуя рекомендациям статьи Построение Web-сервиса при помощи Eclipse Web Tools Platform.

Для выполнения работ по руководству вам необходимо иметь следующий набор программного обеспечения:

• Eclipse 3.0
• Средства от IBM для Eclipse Web Tools Platform
• Apache Tomcat 4.1.30
• IBM Cloudscape 10.0

Кроме того, вам необходимо загрузить файл sqlscript.zip, содержащий SQL-сценарии, используемые в руководстве.

В начало

Об авторе

Колин Конниарни (Colleen Connearney) является разработчиком программного обеспечения центра IBM SMB Development Center в Research Triangle Park, штат Северная Каролина. На протяжении трех лет работы в IBM Колин являлась разработчиком плагинов Java и Eclipse в команде разработчиков Integrated Runtime. В свободное время она увлекается игрой во фризби.

Получить техническую информацию и ответы на вопросы, высказать комментарии по руководству можно, связавшись с автором по адресу csconnea@us.ibm.com или нажать кнопку Feedback в верхней части страницы.

В начало

Создание локальной базы данных

Перед началом работы над Web-клиентом вам необходимо создать и наполнить локальную базу данных хранилища. Содержимое базы данных представляет ассортимент хранилища элементов аукциона готовых для выставления на продажу.

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

1. Распакуйте содержимое файла sqlscript.zip, содержащего SQL-сценарии, необходимые для работы с руководством.
2. В командной строке перейдите в директорию <инсталляционная директория Cloudscape 10.0 >\frameworks\embedded\bin.
3. Запустите файл setE mbeddedCP.bat.
4. Запустите файл ij.bat.
5. В строке запроса ij> введите: connect 'jdbc:derby:c:\path\warehouseDB;create=true'; (где c:\path\ - путь к создаваемой базе данных).
6. В строке запроса ij> введите: run 'c:\path\warehouseDB.sql'; (где c:\path\ - путь к файлу сценария warehouseDB.sql).
7. В строке запроса ij> введите: run 'c:\path\warehouseDB-populate.sql'; (где c:\path\ - путь к файлу сценария warehouseDB.sql).

В начало

Настройка Eclipse для Tomcat 4.1

Теперь мы используем Apache Tomcat для размещения и тестирования Web-клиента.

Для настройки Eclipse для Tomcat необходимо выполнить следующие действия:

1. Запустите Eclipse.
2. Выберите Window > Preferences.
3. Выберите Server > Installed Runtimes.
4. Выберите Add.
5. Выберите Apache > Apache Tomcat v4.1 и нажмите Next.
6. Перейдите в инсталляционную директорию Tomcat.
7. Выберите 1.4.2 JRE. Если 1.4.2 JRE не настроен, выберите для его настройки Installed JREs.
8. Нажмите Finish.
9. В диалоговом окне Preferences нажмите OK.
10. Скопируйте файл derby.jar из папки <инсталляционная папка Cloudscape>\Cloudscape_10.0\lib\ в папку <инсталляционная папка Tomcat>\common\lib.

В начало

Создание динамического Web-проекта

1. Переключитесь в перспективу Java, выбрав Window > Open Perspective > Java.
2. Выберите File > New > Project.
3. Выберите Web > Dynamic Web Project.
4. Укажите следующие параметры:
5. Name: AuctionWebClient
6. Web version 2.3
7. Target Server: Apache Tomcat 4.1
8. Add module to EAR project: убрать отметку
9. Context Root: AuctionWebClient
10. Нажмите Finish.

В начало

Создание каскадной таблицы стилей (CSS)

Использование каскадной таблицы стилей (CSS) позволит использовать для всех страниц вашего Web-приложения единый стиль оформления.

Для создания каскадной таблицы стилей необходимо выполнить следующее:

1. Правой кнопкой мыши выберите AuctionWebClient\WebContent.
2. Нажмите New > Folder.
3. В качестве имени папки укажите "theme".
4. Выберите правой кнопкой AuctionWebClient\WebContent\theme.
5. Нажмите New > File.
6. В качестве имени файла укажите style.css.
7. Скопируйте в файл style.css следующий код:

body { font-family: Georgia, "Times New Roman", Times, serif; color: navy; } table {padding:1; spacing:0; width:90%; border-collapse:collapse; } th {font-family:sans-serif; rowspan:2; text-align:left; background:000066; color:white; } td {font-family:sans-serif; border-top:ridge grey thin; border-left:none; border-right:none; padding:3; } .formtd { font-family:sans-serif; border-top:solid black thin; border-left:solid black thin; border-right:solid black thin; border-bottom:solid black thin; padding:3; } .trone{ background: #CCCCFF; } .trtwo{ background: #CCCCCC; }

При желании можете изменить CSS по своему усмотрению.

В начало

Создание домашней страницы Web-клиента

Домашняя страница Web-клиента будет содержать ссылки на основные задачи, реализуемые как часть данного приложения.

Для создания домашней страницы:

1. Правой кнопкой мыши выберите AuctionWebClient\WebContent.
2. Нажмите New > File.
3. В качестве имени файла укажите index.html.
4. Нажмите Finish.
5. Скопируйте в тело файла index.html следующий код:

<html> <link rel="stylesheet" href="theme/style.css"> <head> <title>Seller's Web Client</title> </head> <body> <p align="center"> <FONT face="Comic Sans MS" color="navy" size="+2"> Auction Management Web Client</FONT><BR><BR><HR> </p> <p align="center"> <A href="queryWarehouse">Manage Warehouse Stock</A><BR><BR> <A href="showAuctions.jsp">Manage Auctions</A><BR><BR> <A href="queryAuctionService.html">Query Auction Site</A> </p> </body> </html>

Созданный HTML-файл представляет собой простую страницу с заголовком и тремя ссылками.

В начало

Создание класса WarehouseStockItem

Теперь мы создадим Java-класс (WarehouseStockItem), содержащий свойства элемента склада данных. Список этих Java-объектов будет отображаться Web-клиентом.

1. Создайте новый пакет:
   1. Правой кнопкой мыши выберите AuctionWebClient\JavaSource.
   2. Нажмите New > Package.
   3. В качестве имени пакета введите com.ibm.samples.Webclient.
   4. Нажмите Finish.
2. Создайте Java-класс WarehouseStockItem:
   1. Правой кнопкой мыши выберите AuctionWebClient\JavaSource\com\ibm\samples\Webclient.
   2. Нажмите New > Class.
   3. В качестве имени класса введите WarehouseStockItem.
   4. Нажмите Finish.
3. Реализуйте класс WarehouseStockItem:
   1. Создайте в классе следующие поля private (обратите внимание, что эти переменные соответствуют столбцам в базе данных хранилища):
      1. private int id;
      2. private String shortName;
      3. private String itemDescription;
   2. Сгенерируйте методы get и set для вышеуказанных полей:
      1. В исходном коде выберите правой кнопкой мыши id.
      2. Нажмите Source > Generate Getters and Setters.
      3. Нажмите Select All а затем OK.

В начало

Создание сервлета для соединения с локальной базой данных

В следующих шагах мы создадим сервлет, извлекающий список содержимого из локальной базы данных.

Для создания класса сервлета выполните следующее:

1. Выберите правой кнопкой мыши AuctionWebClient\JavaSource\com\ibm\samples\Webclient.
2. Нажмите New > Class.
3. В качестве имени сервлета введите: QueryWarehouseServlet.
4. Задайте суперкласс: javax.servlet.http.HttpServlet.
5. Задайте интерфейс: javax.servlet.Servlet.
6. Нажмите Finish.

В начало

Реализация сервлета QueryWarehouseServlet

Теперь реализуем сервлет QueryWarehouseServlet следующим образом:

1. Скопируйте следующее определение статических констант в файл QueryWarehouseServlet.java. Измените ссылку URL для указания местоположения вашей базы данных.
   
   

   private final static String DRIVER_CLASS = "org.apache.derby.jdbc.EmbeddedDriver"; private final static String URL = "jdbc:derby:C:\\warehouseDB";

   
   
2. Скопируйте метод the queryDB() в файл QueryWarehouseServlet.java. Этот метод позволяет осуществлять соединение с базой, проводить опрос и возвращать список объектов WarehouseStockItem, созданный из результатов запроса. Код описан в разделе Реализация сервлета QueryWarehouseServlet: Копирование метода queryDB().
3. Скопируйте метод doGet()в файл QueryWarehouseServlet.java. Этот метод вызывается сервером и позволяет сервлету обрабатывать запрос GET. Он вызывает метод queryDB(), устанавливающий результаты как атрибут объекта HttpServletRequest, и переправляет запрос файлу showStock.jsp. Код описан в разделе Реализация сервлета QueryWarehouseServlet: Копирование метода doGet().
4. Правой кнопкой мыши нажмите в любом месте кода и выберите Source > Organize Imports. Это действие позволит добавить релевантные операторы импорта.

Вы можете пропустить описание кода для шагов 2 и 3 и перейти непосредственно к разделу Создание JSP для отображения содержимого хранилища.

В начало

Реализация сервлета QueryWarehouseServlet: копирование метода queryDB()

Скопируйте в сервлет QueryWarehouseServlet.java метод the queryDB(). Этот метод позволяет осуществлять соединение с базой данных хранилища, опрашивать базу данных и возвращать список объектов WarehouseStockItem, созданный из результатов выполнения запроса.

private List queryDB() { List results = new Vector(); try { Class.forName(DRIVER_CLASS).newInstance(); Connection conn = null; Properties props = new Properties(); conn = DriverManager.getConnection(URL, props); Statement s = conn.createStatement(); String query = "SELECT * FROM warehouse.warehouse_item order by id"; ResultSet rs = s.executeQuery(query); while (rs.next()) { WarehouseStockItem ai = new WarehouseStockItem(); ai.setId(rs.getInt(1)); ai.setShortName(rs.getString(2)); ai.setItemDescription(rs.getString(3)); results.add(ai); } conn.close(); } catch (Exception e) { e.printStackTrace(); } return results; }

В начало

Реализация сервлета QueryWarehouseServlet: копирование метода doGet()

Скопируйте в сервлет QueryWarehouseServlet.java метод doGet(). Этот метод вызывается сервером и позволяет сервлету обрабатывать запрос GET. Он вызывает метод queryDB(), устанавливает результаты в качестве атрибута объекта HttpServletRequest и пересылает запрос файлу showStock.jsp.

public void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException, ServletException { List results = queryDB(); RequestDispatcher dispatcher = getServletContext() .getRequestDispatcher("/showStock.jsp"); req.setAttribute("results", results); dispatcher.forward(req, res);

В начало

Создание JSP для отображения содержимого хранилища

Создадим JSP-страницу для отображения результатов, полученных сервлетом QueryWarehouseServlet. В ней будет отображаться содержимое локального хранилища в виде HTML-таблицы.

1. Создайте файл showStock.jsp:
   1. Правой кнопкой мыши выберите AuctionWebClient\WebContent.
   2. Нажмите New > File.
   3. В качестве имени файла задайте showStock.jsp.
   4. Нажмите Finish.
2. Скопируйте код из раздела Создание JSP для отображения содержимого хранилища: код в файл showStock.jsp. Этот JSP извлекает список WarehouseStockItem, связанный с атрибутом "results", а затем выполняет итерацию списка и отображает ID и краткое название для каждой из записей таблицы.

Вы можете пропустить описание кода и перейти прямо к разделу Тестирование Web-клиента.

В начало

Создание JSP для отображения содержимого хранилища: код

Этот JSP-код извлекает список WarehouseStockItem, связанный с атрибутом results, а затем выполняет итерацию списка и отображает ID и краткое название для каждой из записей таблицы.

<%@ page import="java.util.List"%> <%@ page import="java.util.Iterator"%> <%@ page import="com.ibm.samples.Webclient.WarehouseStockItem"%> <html> <link rel="stylesheet" href="theme/style.css"> <head> <title>Warehouse Stock</title> </head> <body> <h2><b>Warehouse Stock</b></h2> <TABLE> <THEAD> <TR> <TH rowspan="2">Item ID <TH rowspan="2">Title <TBODY> <% List list = (List) request.getAttribute("results"); Iterator iterator = list.iterator(); int i = 0; while (iterator.hasNext()) { i++; WarehouseStockItem item = (WarehouseStockItem) iterator.next(); %> <TR> <TD class=trone><%= item.getId()%> <TD class=trtwo><%= item.getShortName()%><% } %> </TABLE> <p><A href="index.html">Home</A></p> </body> </html>

В начало

Тестирование Web-клиента

Перед тестированием приложения вам необходимо добавить сервлет к дескриптору размещения. Обратите внимание, что строка "queryWarehouse" совпадает с первой ссылкой в файле index.html.

1. Откройте файл Web.xml в папке AuctionWebClient\WebContent\WEB-INF
2. Вставьте следующий код сразу после элемента <display-name>:
   
   

   <servlet> <servlet-name>queryWarehouse</servlet-name> <servlet-class>com.ibm.samples.Webclient.QueryWarehouseServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>queryWarehouse</servlet-name> <url-pattern>/queryWarehouse</url-pattern> </servlet-mapping>

   
   
3. Для тестирования Web-клиента:
   1. Правой кнопкой мыши выберите index.html.
   2. Нажмите Run > Run on Server.
   3. Выберите localhost -> Tomcat v4.1 Server @ localhost.
   4. Нажмите Finish.

Файл index.html откроется в окне броузера. Пока единственной работающей ссылкой будет "Manage Warehouse Stock". После нажатия на ссылку откроется страница, похожая на одну из представленных далее.

В начало

Тестирование Web-клиента: стартовая страница

В начало

Тестирование Web-клиента: страница просмотра содержимого хранилища

В начало

Создание ссылок

В этом разделе мы создадим ссылки на страницу showStock.jsp для того, чтобы пользователь мог выбрать из хранилища элемент и создать форму заявки для торга.

1. Откройте файл showStock.jsp.
2. Замените строку:
   
   

   <TD class=trone><%= item.getId()%>

   
   следующей строкой
   
   

   <TD class=trone><A href="showWarehouseStockItem?itemId=<%= item.getId()%>"><%= item.getId()%></A>

   
   

Теперь ID каждого элемента будет являться ссылкой на showWarehouseStockItem. Переменная itemId передается в showWarehouseStockItem как параметр.

В начало

Создание сервлета, извлекающего отдельный элемент хранилища

Создадим сервлет showWarehouseStockItem. Он будет обрабатывать запрос, опрашивать базу данных на предмет получения объекта и перенаправлять запрос к JSP-странице, отображающей результаты.

1. Правой кнопкой мыши выберите AuctionWebClient\JavaSource\com\ibm\samples\Webclient.
2. Нажмите New > Class.
3. В качестве имени задайте: GetWarehouseStockItemServlet
4. Задайте суперкласс: javax.servlet.http.HttpServlet
5. Задайте интерфейс: javax.servlet.Servlet
6. Нажмите Finish.

В начало

Реализация сервлета

Для реализации сервлета необходимо выполнить следующее:

1. Скопируйте в тело GetWarehouseStockItemServlet следующие определения статических констант. Измените URL для указания местонахождения базы данных хранилища. private final static String DRIVER_CLASS = "org.apache.derby.jdbc.EmbeddedDriver"; private final static String URL = "jdbc:derby:C:\\warehouseDB";
2. Скопируйте в сервлет GetWarehouseStockItemServlet.java метод doGet(). Этот метод позволяет извлечь значение параметра itemId, вызвать метод queryDB(), установить результаты как атрибут объекта HttpServletRequest и перенаправить запрос в файл stockItemDetails.jsp. Код представлен в разделе Реализация сервлета: Копирование метода doGet().
3. Скопируйте в сервлет GetWarehouseStockItemServlet.java метод queryDB(). Этот метод осуществляет соединение с базой данных для выполнения запросов и возвращения WarehouseStockItem с ID - itemId. Код представлен в разделе Реализация сервлета: Копирование метода queryDB().
4. Выполните расстановку операторов импорта, нажав Source > Organize Imports.

Вы можете пропустить описание кода для шагов 2 и 3 и сразу перейти к разделу Добавление сервлета GetWarehouseStockItemServlet в дескриптор размещения.

В начало

Реализация сервлета: копирование метода doGet()

Метод doGet() извлекает значение параметра itemId, вызвает метод queryDB(), устанавливает результаты как атрибут объекта HttpServletRequest и перенаправляет запрос в файл stockItemDetails.jsp.

public void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException, ServletException { String itemId = req.getParameter("itemId"); WarehouseStockItem item = queryDB(new Integer(itemId).intValue()); RequestDispatcher dispatcher = getServletContext() .getRequestDispatcher("/stockItemDetails.jsp"); req.setAttribute("results", item); dispatcher.forward(req, res);

В начало

Реализация сервлета: копирование метода queryDB()

Метод queryDB() осуществляет соединение с базой данных, опрашивает базу данных и возвращает WarehouseStockItem с ID itemId.

private WarehouseStockItem queryDB(int itemId) { WarehouseStockItem ai = null; try { Class.forName(DRIVER_CLASS).newInstance(); Connection conn = null; Properties props = new Properties(); conn = DriverManager.getConnection(URL, props); Statement s = conn.createStatement(); String query = "SELECT * FROM warehouse.warehouse_item WHERE id=" + itemId; ResultSet rs = s.executeQuery(query); ai = new WarehouseStockItem(); rs.next(); ai.setId(rs.getInt(1)); ai.setShortName(rs.getString(2)); ai.setItemDescription(rs.getString(3)); conn.close(); } catch (Exception e) { e.printStackTrace(); } return ai; }

В начало

Добавление сервлета GetWarehouseStockItemServlet в дескриптор размещения

1. Откройте файл AuctionWebClient\WebContent\WEB-INF\Web.xml
2. Скопируйте следующий код для определения сервлета QueryWarehouseServlet сразу после записи <servlet>:
   
   

   <servlet> <servlet-name>showWarehouseStockItem</servlet-name> <servlet-class>com.ibm.samples.Webclient.GetWarehouseStockItemServlet</servlet-class> </servlet>

   
   
3. Скопируйте следующий код QueryWarehouseServlet сразу после записи <servlet-mapping>:
   
   

   <servlet-mapping> <servlet-name>showWarehouseStockItem</servlet-name> <url-pattern>/showWarehouseStockItem</url-pattern> </servlet-mapping>

   
   

В начало

Создание страницы для отображения объекта хранилища

Теперь мы осуществим реализацию JSP для отображения результатов, полученных сервлетом GetWarehouseStockItemServlet. На этой странице будут отображаться детали выбранного пользователем объекта локального хранилища.

1. Создайте файл stockItemDetails.jsp:
   1. Правой кнопкой мыши выберите AuctionWebClient\WebContent.
   2. Нажмите New > File.
   3. В качестве имени файла задайте stockItemDetails.jsp.
   4. Нажмите Finish.
2. Скопируйте в файл stockItemDetails.jsp код, представленный далее. Эта JSP-страница извлекает WarehouseStockItem, связанный с атрибутом results, а затем отображает идентификатор элемента (ID), его краткое название и описание в виде формы с полями, защищенными от записи. В форму включено дополнительное поле (Minimum Price) и кнопка, которые будут использоваться для добавления выбранного элемента в список аукциона. Код представлен в разделе Создание страницы для отображения объекта хранилища: Код.
3. Теперь следует остановить работу и протестировать приложение. Нажмите ссылку "Manage Warehouse" в файле index.html. Откройте ссылки в столбце Item Id и просмотрите отдельные объекты хранилища. Страница должна выглядеть примерно так, как показано а разделе Создание страницы для отображения объекта хранилища: Внешний вид страницы.

Вы можете пропустить описание кода и внешнего вида страницы и перейти непосредственно к разделу Соединение Web-клиента с Web-сервисом аукциона.

В начало

Создание страницы для отображения объекта хранилища: код

Эта JSP-страница извлекает WarehouseStockItem, связанный с атрибутом results, а затем отображает идентификатор элемента (ID), его краткое название и описание в виде формы с полями, защищенными от записи. В форму включено дополнительное поле (Minimum Price) и кнопка, которые будут использоваться для добавления выбранного элемента в список аукциона

<%@ page import="com.ibm.samples.Webclient.WarehouseStockItem"%> <html> <link rel="stylesheet" href="theme/style.css"> <head> <title>Stock Item Detail</title> </head> <body> <%WarehouseStockItem item = (WarehouseStockItem)request.getAttribute("results");%> <form name="newAuctionListing" method="post" action="createNewAuctionListing"> <TABLE border="0"> <TBODY> <TR> <TD>Item Id:</TD> <TD><INPUT type="text" name="id" size="5" value=<%=item.getId() %> readonly></TD> </TR> <TR> <TD>Item:</TD> <TD><TEXTAREA rows="1" cols="60" name="short_name" readonly> <%=item.getShortName() %></TEXTAREA></TD> </TR> <TR> <TD>Item Description:</TD> <TD><TEXTAREA rows="3" cols="40" name="description" readonly> <%=item.getItemDescription() %></TEXTAREA></TD> </TR> <TR> <TD>Minimum Price:</TD> <TD><INPUT type="text" name="minPrice" size="20"></TD> </TR> </TBODY> </TABLE> <INPUT type="submit" name="button_auction" value="Put up for auction"> </form> <p><A href="index.html">Home</A></p> </body> </html>

В начало

Создание страницы для отображения объекта хранилища: внешний вид страницы

В начало

Создание клиента Web-сервиса

Созданный Java-код обеспечивает интерфейс удаленного вызова процедуры для Web-сервиса аукциона.

1. Выберите File > New > Other.
2. Выберите Web Services > Web Service Client.
3. Оставьте значения, используемые по-умолчанию, и нажмите Next.
4. Введите ссылку URL ведущую к WSDL запущенного сервиса аукциона: http://demo.alphaworks.ibm.com/AuctionSvr/wsdl/com/ibm/sample/auctionsvr/ws/AuctionService.wsdl. В качестве альтернативы можно попробовать самостоятельно создать Web-сервис, следуя указаниям руководства Построение Web-сервиса при помощи Eclipse Web Tools Platform.
5. В окне выбора укажите WSDL.
6. Нажмите Next.
7. Убедитесь в том, что выбраны следующие значения и нажмите Next:
   • Web service runtime: Apache Axis 1.0
   • Server: Tomcat v4.1 Server @ localhost
   • J2EE version: 1.3
   • Client type: Web
   • Web Project: AuctionWebClient
8. Нажмите Finish.

В начало

Создание страницы для отображения активных торгов

Теперь мы создадим страницу, которая будет отображать все активные торги аукциона. Если вы взглянете на код файла AuctionService.java, созданного Мастером построения клиента Web-сервиса (Web Service Client Wizard), то увидите, что метод getAuctions() позволяет извлекать информацию о торгах по идентификатору продавца (seller ID) и по статусу активности.

1. В файле index.html была создана ссылка "Manage Auctions", ведущая к файлу showAuctions.jsp. Создайте этот файл:
   1. Выберите правой кнопкой AuctionWebClient\WebContent.
   2. Нажмите New > File.
   3. В качестве имени файла введите showAuctions.jsp.
   4. Нажмите Finish.
2. Скопируйте код из следующего раздела в файл showAuctions.jsp. Эта JSP-страница запрашивает у сервиса аукциона информацию обо всех торгах, в которых значением идентификатора продавца (seller ID) является "1" а статусом - значение "OPEN." Метод getAuctions() возвращает массив элементов AuctionListItems. Затем проводится итерация по списку, и отображаются различные атрибуты для каждого элемента в таблице. Взгляните на первый столбец таблицы -- <TD class=trone><A href="showAuctionItemDetails.jsp?itemId=<%=item.getAuctionId()%>"><%= item.getAuctionId()%></A>. Как и в случае с таблицей хранилища, каждая запись в столбце ID является ссылкой, ведущей на подробную информацию о соответствующем элементе. Реализация JSP showAuctionItemDetails будет выполнена позднее.

В начало

Создание страницы для отображения активных торгов: Код

<%@ page import="com.ibm.www.AuctionListItem"%> <jsp:useBean id="auctionService" scope="session" class="com.ibm.www.AuctionServiceProxy"/> <html> <link rel="stylesheet" href="theme/style.css"> <head> <title>All Auctions</title> </head> <body> <h2><b>All Auctions</b></h2> <TABLE> <THEAD> <TR> <TH rowspan="2">ID <TH rowspan="2">Item <TH rowspan="2">Current Price <TH rowspan="2">End Time <TH rowspan="2">Status <TBODY> <% AuctionListItem[] items = auctionService.getAuctions(1,"OPEN"); for (int i = 0; i < items.length; i++) { AuctionListItem item = items[i]; %> <TR> <TD class=trone><A href="showAuctionItemDetails.jsp?itemId=<%= item.getAuctionId()%>"> <%= item.getAuctionId()%></A> <TD class=trtwo><%= item.getShortName()%> <TD class=trone><%= item.getCurrentPrice()%> <TD class=trtwo><%= item.getEndTime().getTime()%> <TD class=trone><%= item.getStatus()%><% }%> </TABLE> <p><A href="index.html">Home</A></p> </body> </html>

В начало

Создание страницы для отображения деталей отдельного лота

Теперь выполним реализацию JSP showAuctionItemDetails, которая будет отображать детали отдельного лота, выбранного в showAuctions.jsp.

1. Создайте файл showAuctionItemDetails.jsp:
2. Правой кнопкой мыши выберите AuctionWebClient\WebContent.
   1. Нажмите File > New.
   2. В качестве имени файла введите showAuctionItemDetails.jsp.
   3. Нажмите Finish.
3. Скопируйте в файл showAuctionItemDetails.jsp код из следующего раздела (Создание страницы для отображения деталей отдельного торга: код). Вначале будет производиться извлечение значения itemId, передаваемое showAuctions.jsp, а затем будет выполняться вызов сервиса аукциона для извлечения объекта AuctionInfo с соответствующим ID. Свойства AuctionInfo будут отображаться в форме, защищенной от записи.
4. Протестируем приложение. В файле index.html откройте ссылку "Manage Auctions". Используйте ссылки в столбце ID для выбора и просмотра отдельных лотов аукциона. Результат можно увидеть в разделах Создание страницы для отображения деталей отдельного лота: страница Manage auctions и Создание страницы для отображения деталей отдельного лота: информация об отдельном лоте.

Вы можете пропустить иллюстрации и описание кода и перейти сразу к разделу Построение сервлета для создания нового лота.

В начало

Создание страницы для отображения деталей отдельного лота: код

<%@ page import="com.ibm.www.AuctionInfo"%> <jsp:useBean id="auctionService" scope="session" class="com.ibm.www.AuctionServiceProxy"/> <html> <link rel="stylesheet" href="theme/style.css"> <head> <title>Auction Item Detail</title> </head> <body> <% Integer id = new Integer(request.getParameter("itemId")); AuctionInfo info= auctionService.getAuctionInfo(id.intValue());%> <form> <TABLE border="0"> <TBODY> <TR> <TD>Id:</TD> <TD><INPUT type="text" name="text_id" size="5" value=<%=info.getAuctionId() %> readonly></TD> </TR> <TR> <TD>Item:</TD> <TD><INPUT type="text" name="text_item" size="20" value=<%=info.getShortName() %> readonly></TD> </TR> <TR> <TD>Item Description:</TD> <TD><TEXTAREA rows="3" cols="20" name="text_description" readonly><%=info.getItemDesc() %></TEXTAREA></TD> </TR> <TR> <TD>Current Price:</TD> <TD><INPUT type="text" name="text_minPrice" size="20" value=<%=info.getCurPrice() %> readonly></TD> </TR> <TR> <TD>Bid Count:</TD> <TD><INPUT type="text" name="text_startTime" size="20"value=<%=info.getBidCount() %> readonly></TD> </TR> <TR> <TD>End Time:</TD> <TD><INPUT type="text" name="text_startTime" size="20"value=<%=info.getEndTime().getTime()%> readonly></TD> </TR> <TR> <TD>Seller:</TD> <TD><INPUT type="text" name="text_startTime" size="20"value=<%=info.getSeller().getName()%> readonly></TD> </TR> <TR> <TD>Buyer:</TD> <TD><INPUT type="text" name="text_startTime" size="20"value=<%=info.getBuyer()%> readonly></TD> </TR> </TBODY> </TABLE> <p><A href="index.html">Home</A></p> </body> </html>

В начало

Создание страницы для отображения деталей отдельного лота: страница Manage auctions

В начало

Создание страницы для отображения деталей отдельного лота: описание лота

В начало

Построение сервлета для создания нового лота

В файле stockItemDetails.jsp мы создали форму и кнопку для создания нового лота. Действие для этой кнопки определено как action="createNewAuctionListing". Теперь построим сервлет, создающий новый лот аукциона.

Для создания класса CreateAuctionListingServlet выполните следующее:

1. Правой кнопкой мыши выберите AuctionWebClient\JavaSource\com\ibm\samples\Webclient.
2. Нажмите New > Class.
3. В качестве имени задайте: CreateAuctionListingServlet
4. Задайте суперкласс: javax.servlet.http.HttpServlet
5. Задайте интерфейс: javax.servlet.Servlet
6. Нажмите Finish.

В начало

Реализация сервлета CreateAuctionListingServlet

Для реализации сервлета необходимо выполнить следующее:

1. Скопируйте в тело файла CreateAuctionListingServlet код из следующего раздела. Метод doPost() является единственным реализованным методом:
   1. Извлеките значения параметров, передаваемых сервлету в файле stockItemDetails.jsp. Метод AuctionService под названием createAuction() принимает два параметра: объект credentials и объект auctionInfo.
   2. Создайте объект credentials, используя жестко заданные строки EMAIL и PASSWORD.
   3. Создайте объект auctionInfo из параметров, извлеченных из объекта request.
   4. Создайте торг.
   5. Перенаправьте запрос в showAuctions.jsp, чтобы пользователь мог видеть обновленную таблицу лота аукциона.
2. Осуществите расстановку операторов импорта, выбрав Source > Organize Imports.

В начало

Реализация сервлета CreateAuctionListingServlet: код

private final static String EMAIL = "person1@ibm.com"; private final static String PASSWORD = "secreta"; private final static int SELLER_ID = 1; public void doPost(HttpServletRequest req, HttpServletResponse res) throws IOException, ServletException { String short_name = req.getParameter("short_name"); String item_description = req.getParameter("description"); double minPrice = new Double(req.getParameter("minPrice")).doubleValue(); Calendar startTime = Calendar.getInstance(); Credentials credentials = new Credentials(); credentials.setEMail(EMAIL); credentials.setPassword(PASSWORD); AuctionInfo auctionInfo = new AuctionInfo(); auctionInfo.setSellerId(SELLER_ID); auctionInfo.setMinPrice(minPrice); auctionInfo.setShortName(short_name); auctionInfo.setItemDesc(item_description); auctionInfo.setStartTime(startTime); startTime.add(Calendar.DATE, 3); auctionInfo.setEndTime(startTime); AuctionServiceProxy service = new AuctionServiceProxy(); service.createAuction(credentials, auctionInfo); RequestDispatcher dispatcher = getServletContext() .getRequestDispatcher("/showAuctions.jsp"); dispatcher.forward(req, res); }

В начало

Добавление сервлета CreateAuctionListingServlet в дескриптор размещения

Теперь необходимо добавить сервлет в дескриптор размещения.

1. Откройте файл AuctionWebClient\WebContent\WEB-INF\Web.xml.
2. Скопируйте следующий код сразу после записи <servlet> в файл дескриптора для определения сервлета GetWarehouseStockItemServlet:
   
   

   <servlet> <servlet-name>createNewAuctionListing</servlet-name> <servlet-class>com.ibm.samples.Webclient.CreateAuctionListingServlet</servlet-class> </servlet>

   
   
3. Скопируйте следующий код для определения сервлета CreateAuctionListingServlet сразу после записи <servlet-mapping>:
   
   

   <servlet-mapping> <servlet-name>createNewAuctionListing</servlet-name> <url-pattern>/createNewAuctionListing</url-pattern> </servlet-mapping>

   
   
4. И снова протестируем проект. В файле index.html выберите ссылку "Manage Warehouse". Выберите объект для помещения его на аукцион. Введите минимальную цену и нажмите кнопку "Put up for auction". Вы должны увидеть запись о новом лоте в таблице активных аукционов (см. иллюстрацию в следующем разделе).

В начало

Добавление сервлета CreateAuctionListingServlet в дескриптор размещения: отдельный элемент хранилища

В начало

Создание страницы запроса для сервиса аукциона

И, наконец, мы добавим возможность осуществлять запросы к сервису аукциона по краткому названию лота.

1. Создайте страницу для сбора строк запросов поиска пользователя:
   1. Правой кнопкой выберите AuctionWebClient\WebContent.
   2. Нажмите New > File.
   3. В качестве имени файла задайте queryAuctionService.html.
   4. Нажмите Finish.
2. Скопируйте в файл queryAuctionService.html код, представленный ниже. Страница состоит из формы с текстовым полем ввода и кнопки подтверждения запроса. При нажатии на кнопку будет осуществляться запрос к showAuctionQueryResults.jsp.

В начало

Создание страницы для отображения результатов поиска

Теперь создадим страницу для осуществления вызова запроса и отображения результатов поиска.

1. Прежде всего:
   1. Выберите правой кнопкой мыши AuctionWebClient\WebContent.
   2. Нажмите New > File.
   3. В качестве имени файла задайте showAuctionQueryResults.jsp.
   4. Нажмите Finish.
2. Скопируйте в файл showAuctionQueryResults.jsp код, представленный в разделе Создание страницы для отображения результатов поиска: код. Вначале страница извлекает значение параметра searchTerm, передаваемого из страницы queryAuctions.html. Затем вызывается метод AuctionService.searchAuctions(), передающий строку searchTerm. Если будет возвращен какой-либо AuctionListItems, то он отобразится в таблице. В противном случае отобразится строка, сообщающая об отсутствии найденных результатов.
3. Протестируем приложение еще раз. В файле index.html выберите ссылку "Query Auction Site". Введите значение для поиска и нажмите Go (см. иллюстрации в разделе Создание страницы для отображения результатов поиска: Страница запроса и Создание страницы для отображения результатов поиска: Страница результатов поиска).

В начало

Создание страницы для отображения результатов поиска: код

<%@ page import="com.ibm.www.AuctionListItem"%> <jsp:useBean id="auctionService" scope="session" class="com.ibm.www.AuctionServiceProxy"/> <html> <link rel="stylesheet" href="theme/style.css"> <body> <% String searchTerm = request.getParameter("searchTerm"); AuctionListItem[] items = auctionService.searchAuctions(searchTerm); if (items != null && items.length > 0) { %> <TABLE summary="This table shows the results of the query."> <CAPTION><EM>The results in a table are:</EM></CAPTION> <THEAD> <TR> <TH rowspan="2">ID <TH rowspan="2">Item <TH rowspan="2">Current Price <TH rowspan="2">End Time <TH rowspan="2">Status <TBODY> <% for (int i = 0; i < items.length; i++) { AuctionListItem item = items[i]; %> <TR> <TD class=trone><A href="showAuctionItemDetails.jsp?itemId=<%= item.getAuctionId()%>"> <%= item.getAuctionId()%></A> <TD class=trtwo><%= item.getShortName()%> <TD class=trone><%= item.getCurrentPrice()%> <TD class=trtwo><%= item.getEndTime().getTime()%> <TD class=trone><%= item.getStatus()%><% }%> </TABLE> <%} else {%> <p>The Search returned <b>0</b> results</p> <%}%> <p><A href="index.html">Home</A></p> </body> </html>

В начало

Создание страницы для отображения результатов поиска: страница запроса

В начало

Создание страницы для отображения результатов поиска: страница результатов поиска

В начало

Резюме

В данном руководстве мы научили вас пользоваться инструментами Eclipse Web Tools Platform для построения Web-клиента онлайн-аукциона. Мы использовали Cloudscape для построения локальной базы данных и инструменты Eclipse для создания JSP-страниц и сервлетов. В результате работы нами был создан клиент, взаимодействующий с базой данных и удаленными Web-сервисами, размещенными на сервере аукциона.

Несмотря на значительный объем требуемого кода, процесс разработки был упрощен за счет использования J2EE, сервера и инструментов Web-сервисов, включенных в Eclipse Web Tools Platform, предоставивших различные Мастера, проекты и структуры.

Для обучения созданию Web-сервиса, взаимодействующего с созданным нами клиентом, обратитесь к руководству "Построение Web-сервиса при помощи Eclipse Web Tools Platform" (developerWorks, Ноябрь 2004) (см. Ресурсы).

Рекомендуем вам также посмотреть рабочую демо-версию приложения на сайте IBM alphaWorks: Auction Web Service and Web Client Demo. Для просмотра нажмите View Demo.

В начало

Ресурсы

• Рабочая демо-версия приложения находится на сайте IBM alphaWorks: Auction Web Service and Web Client Demo. Для просмотра нажмите View Demo.
  
  
• Архив sqlscript.zip содержит файлы SQL-сценариев для создания и наполнения базы данных, используемой в руководстве.
  
  
• Информация о платформе Eclipse Web Tools Platform на странице Eclipse Web Tools Platform home page.
  
  
• Руководство пользователя Getting Started guide рассказывает, кроме всего прочего, о вкладе IBM в Eclipse Web Tools Platform.
  
  
• Сайт сообщества Apache Tomcat, в котором содержатся ссылки для загрузки инсталляционного пакета Tomcat.
  
  
• Статья developerWorks об IBM Cloudscape 10.0 (developerWorks, Сентябрь 2004), в которой представлен список изменений и дополнений в последней версии Cloudscape. В статье содержатся ссылки для загрузки инсталляционного пакета Cloudscape.
  
  
• Сопутствующее руководство developerWorks Построение Web-сервиса при помощи Eclipse Web Tools Platform (developerWorks, Ноябрь 2004), рассказывает о создании Web-сервиса онлайн-аукциона, взаимодействующего с клиентом аукциона, созданным в данном руководстве.
  

В начало

Об авторе

	-*-*-

В начало

Выскажите мнение об этой странице

Пожалуйста, найдите минутку и заполните форму, чтобы повысить уровень сервиса. Помогла ли данная информация достичь Вашей цели? Да Нет Не знаю   Пожалуйста, напишите комментарий, чтобы мы могли улучшить данную страницу: