Содержание   -  Создание проекта -  Добавление веб страниц -  Добавление компонентов на страницу -  Получение справки о IDE -  Построение и тестирование веб-приложения -  Связывание веб страниц и обработка событий -  Редактирование Java кода -  Обработка ввода -  Хранение и передача данных -  Соединение с базами данных -  Отладка веб-приложения

Создание проекта

Для веб-приложений проект является аналогом рабочей среды. Когда вы создаете проект, IDE автоматически создает  все необходимые файлы и директории, соответствующие стандартной структуре файлов в веб-приложении, а также директории для компиляции и запуска веб-приложения.

Для создания проекта выберите File > New Project в главном меню.

Попробуйте

Запустите IDE методом, который соответствует вашей операционной системе:

• Windows. Двойным щелчком мыши на значке Creator на Рабочем столе.

• Mac. Двойным щелчком мыши на значке Creator в установочной директории.

• Solaris (платформы SPARC и x86) и Linux. В окне терминала измените директорию на install-directory/sun/Creator2_1/bin , в командной строке введите ./creator, и нажмите Enter. Помните, что для версии 2 директория bin находится в директории Creator2, а для версии 2 update 1, в директории Creator2_1.

Создайте проект, выбрав File > New Project из главного меню. Обратите внимание на то, что проектом по умолчанию является веб-приложение. Нажмите на кнопку Next. Для подтверждения создания проекта в директории по умолчанию нажмите на кнопку Finish. Таким образом, IDE создаст директорию Creator/Projects/имя-проекта в вашей домашней директории. О том как изменить директорию по умолчанию, обратитесь к разделу справки "Setting the Location of Project Files".

Рассмотрим окно Projects, которое показано на рисунке. В этом окне элементы группируются по категориям. Раскройте каждый из узлов дерева, чтобы увидеть какой тип элементов находится в каждой категории. Посмотрите на значки напротив веток Request Bean, Session Bean и Application Bean. Эти значки означают, что файлы должны быть скомпилированы. IDE скомпилирует эти файлы автоматически при сборке проекта.

Рисунок 1: Окно Projects

В узле Web Pages находится страница Page1.jsp. IDE создает эту страницу и делает ее стартовой по умолчанию. Значок в виде стрелочки показывает, что эта страница является стартовой. Чтобы изменить стартовую страницу, щелкните на другой странице правой кнопкой мыши и выберите Set as Start Page в контекстном меню.

Щелкните мышкой на заголовке Files или выберите View > Files в главном меню для того чтобы сделать видимым окно Files. Это окно показывает размещение элементов проекта на диске. Раскрывайте узлы дерева, чтобы увидеть структуру файлов. Для того чтобы увидеть окно подсказки, наведите курсор мыши на нужный узел.

Рисунок 2: Окно Files

Обратите внимание на узел  WebApplication1 > src > webapplication1 > Page1.java на Рисунке 2.  Этот Java класс  является backing bean  для файла Page1.jsp. Когда вы добавляете новую страницу в проект, IDE создает оба файла .jsp и .java  для этой страницы.
В следующем разделе вы можете больше узнать о файлах  .jsp и .java.

Для дополнительной информации

• Выберите Help > Help Contents > Starting With Projects > About Projects в главном меню.

Добавление веб-страниц

В веб-приложениях, основанных на технологии JavaServer pages (JSP), вместо HTML страниц используются JSP страницы и соответствующие page beans (также известные как backing beans). Для разработки приложения вы в основном используете дизайнер и окно Properties, тогда как IDE автоматически модифицирует JSP код и Java код  в соответствии с вашим дизайном. Большую часть работы можно выполнить используя только дизайнер.

Попробуйте

В окне Projects щелкните правой кнопкой мыши на ветке Web Pages и выбирете New > Page.

Рисунок 3: Узел Web Pages

В открывшемся диалоговом окне наберите Page2 и нажмите кнопку Finish. IDE откроет страницу Page2 в дизайнере как показано на Рисунке 4.

Рисунок 4: Визуальный дизайнер

Для того чтобы увидеть исходный код  page bean-а, соответствующий данной странице, нажмите на кнопку Java в панели инструментов, как показано на Рисунке 5.  После того, как откроется редактор Java-кода, в нижнем левом углу появится окно Navigator, в котором показаны все поля и методы данного класса.  Исходный код также содержит методы для доступа к Application Bean, Session Bean, и Request Bean. Эти три типа bean-ов подробно рассматриваются в разделе Хранение и передача данных.

Также в исходном коде содержатся методы, которые вызываются в определенные моменты, в промежутке времени между запросом (request) страницы и когда передача (rendering) страницы завершена.

Рисунок 5: Исходный код  Page Bean

Совет. Для быстрого перехода к определенному методу в исходном коде, щелкните два раза этот метод в окне Navigator.  Вы также можете щелкнуть мышью на заголовке окна Navigator и набрать на клавиатуре первые буквы данного метода, пока не появится окно быстрого поиска, и, продолжив набирать буквы метода на клавиатуре и затем нажав Enter, вы увидите соответствующие элементы в высветившемся списке, как показано на Рисунке 6.

Рисунок 6: Быстрый поиск в окне Navigator

Чтобы увидеть JSP код страницы, нажмите на кнопку JSP в панели инструментов, как показано на Рисунке 7.

Рисунок 7: JSP код

Для перехода в дизайнер нажмите на кнопку Design в панели инструментов. В окне Outline появится структура страницы, как показано на Рисунке 8. Заметьте, что тэги JSP файла представлены в этом окне как ветки дерева.

Рисунок 8: Outline

Для дополнительной информации

• Выберите Help > Help Contents > Adding Components to Pages> About Pages в главном меню.

• Технология JavaServer Pages - Документация

Добавление компонентов на страницу

Для наполнения веб-страницы, вам необходимо перетаскивать мышью компоненты из палитры на страницу. Рисунок 9 демонстрирует страницу Page2 с компонентами Button, Calendar, Text Field, Message, Drop Down List, and Radio Button Group. Все эти компоненты доступны в палитре, в группе Basic. Некоторые свойства компонентов были изменены. О свойствах компонентов вы узнаете далее.

Рисунок 9: Компоненты в дизайнере

Основные используемые компоненты находятся в палитре в группах Basic, Layout и Composite. Наиболее часто используемые компоненты представлены в таблице внизу.

Компоненты ввода (Input Components)

Компоненты отображения (Display Components)

Компоненты группировки (Grouping Components)

Компоненты действия (Action Components)

Чтобы изменить вид или поведение компонента, а также для связывания компонента с данными и обработчиками событий, редактируйте свойства компонента в окне Properties.

Следующий рисунок показывает свойства компонента Listbox.

Рисунок 10: Окно свойств компонента Listbox

Попробуйте

Создайте новую страницу с именем Page2 или используйте ранее созданную страницу из примера в разделе Попробуйте.

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

1. Перетащите компонент Button из палитры на страницу, наберите Click Me! и нажмите Enter. Обратите внимание на то, что свойство переменной text в окне Properties будет иметь значение Click Me! и будет выделено жирным шрифтом. Таким образом обозначаются свойства, значения которых по умолчанию были изменены на новые. В окне Properties щелкните на переключателе primary и проследите за тем как изменится внешний вид кнопки.

2. Перетащите компонент Calendar на страницу и измените значение свойства label на Expiration Date:.

3. Перетащите компонент Text Field (поле ввода) на страницу. Затем перетащите метку (Label), наберите Name: и нажмите Enter. Удерживая кнопки Ctrl и Shift, щелкните мышкой на компоненте Label и перетащите курсор на компонент Text Field не отпуская кнопку  мыши. В результате свойство for метки будет иметь значение свойства id поля ввода. Измените значение labelLevel на Strong.

4. Перетащите на страницу компонент Message и разместите его справа от поля ввода. Удерживая кнопки Ctrl и Shift, щелкните мышкой на компоненте Message и перетащите курсор на компонент Text Field не отпуская кнопку  мыши. В результате свойство for компонента Message будет иметь значение свойства id поля ввода.

5. Добавьте на страницу компонент Drop Down List (выпадающий список) и измените значение его свойства label на Color. Щелкните правой кнопкой мыши на выпадающем списке и выберите Configure Default Options. 3 раза щелкните на Item 1 и наберите Blue. Таким же образом замените Item 2 на White и Item 3 на Green. Нажмите кнопку OK и вы увидите как это отобразится на компоненте.

6. Таким же образом добавьте на страницу компонент Radio Button Group с тремя опциями Blue, White и Red.

В окне Options Customizer,  в столбце Selected выберите один из переключателей для установки его значения по умолчанию. Нажмите на кнопке OK для подтверждения изменений. Измените значение свойства columns на 3 для того, чтобы переключатели располагались горизонтально

7. Щелкните правой кнопкой мыши на пустой области дизайнера и выберите Preview in Browser для того, чтобы увидеть как будет выглядеть ваша страница в браузере.

• Delving Into Components

• Developing a Web Application

Получение справки о IDE

Для получения справочной информации о IDE и связанных с ним компонетах выберите Help > Help Contents в главном меню.

Когда вы выбираете какие-либо элементы IDE, отображается список тем, связанных с этим элементом в окне Dynamic Help. Для получении справки об окне, диалоге или компонентах палитры нажмите F1. Откроется окно, содержащее справочную информацию об этом элементе.

Попробуйте

1. Создайте страницу с компонентами Text Field и Drop Down List. Выберите поле ввода и в окне Dynamic Help вы сможете увидеть справочную информацию об этом компоненте.
2. Затем выберите Drop Down List и обратите внимание на то, что в окне Dynamic Help появились новые темы.
3. Чтобы открыть окно помощи в окне Dynamic Help два раза щелкните мышкой на узле  Drop Down List Component. Закройте окно помощи.
4. Для получения справки о свойствах Drop Down List'а, выберите окно Properties и нажмите F1.
5. В палитре, в секции Basic выберите Text Field  и нажмите F1 для получения справки о Text Field'е

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

Для запуска приложения нажмите Ctrl-F5 или Run Main Project из главного меню. Далее IDE совершает следующие действия:

• Сохраняет несохраненные файлы.

• Компилирует файлы, которые должны быть скомпилированы.
  
  Если возникают какие либо затруднения, все сообщения об ошибках выводятся в окне Output (Рисунок 11) и процесс сборки и запуска останавливается. Для того чтобы перейти к исходному коду, из-за которого возникла ошибка, щелкните на ссылке в сообщении об ошибке.

• Запускает сервер приложений, если он еще не запущен.

• Загружает (Deploy) приложение на сервер.
  
  Если возникают какие-либо проблемы, все сообщения об ошибках выводятся в окне Output и процесс сборки и запуска останавливается.

• Передает браузеру URL приложения, который, в свою очередь, отображает стартовую страницу.

Рисунок 11: Окно Output

Если ваш проект серьезно изменился, вы удалили несколько элементов или наблюдаете непонятное поведение приложения, вы можете выбрать Build > Clean и затем Build Main Project в главном меню. IDE очистит директории build и dist, удалит приложение с сервера и затем снова соберет его и загрузит на сервер.

Попробуйте

1. Откройте страницу в дизайнере или создайте новую, выбрав New > Page в контекстном меню узла Web Pages в окне Projects. Если в окне Projects эта страница не помечена как стартовая (зеленой стрелочкой), то сделайте ее стартовой, выбрав Set as Start Page в контекстном меню. Добавьте на страницу компонент Hyperlink, наберите Next Page и нажмите Enter. В окне Properties для свойства гиперссылки url установите значение /faces/Page2.jsp.

2. Создайте страницу с именем Page 2, если она еще не создана.

3. Нажмите Ctrl-F5, чтобы собрать и запустить приложение, и наблюдайте за сообщениями в окне Output. Посмотрите на URL, который IDE передало в браузер.

4. Когда стартовая страница загрузится в браузере нажмите на гиперссылку Next Page. Если вы используете страницу из примера "Добавление компонент на веб-страницу", можно проверить работу компонентов, которые вы добавили ранее.

5. В окне Servers раскройте узлы Deployment Server и Deployed Components и убедитесь, что ваш проект присутствует в списке.

6. Нажмите правой кнопкой мыши на узле Deployment Server и выберите View Server Log. Далее нажмите Ctrl-F5 для запуска приложения. В окне Output появятся сообщения сервера. Для того, чтобы переместить окно Output поверх всех окон щелкните мышкой на его заголовке. Для добавления сообщений в server log вы можете использовать метод  log(String).

Рисунок 12: Узел Deployed Components

Для дополнительной информации

• Выбирете Help > Help Contents > Starting With Projects > Building a Project > Building a Project из главного меню.

• Выбирете Help > Help Contents > Deploying Applications > About Deployment из главного меню.

Связывание веб-страниц и обработка событий

Когда пользователь набирает адрес в браузере или нажимает мышью на ссылке или кнопке, браузер посылает на сервер запрос (request). Сервер определяет какой JSP странице соответствует данный запрос, и использует page bean этой JSP страницы для предоставления ответа (response).

Существует два способа связывания страниц:

• Добавьте ссылку на страницу, например гиперссылку (Hyperlink), узел дерева (Tree Node) или закладку (Tab) и установите значение /faces/имя-страницы.jsp для свойства URL.
  
  Примечание: Компонент Tree Node должен быть вложен в компоненты Tree или Tree Node. Закладка (Tab) должна быть частью набора закладок (Tab Set).

• Используйте редактор Page Navigation для создания связей между страницами, а также дизайнер и редактор Java-кода для создания обработчиков событий этих связей.

Чтобы открыть редактор Page Navigation, нажмите правой кнопкой мыши на пустой области дизайнера и выберите в контекстном меню пункт  Page Navigation. В редакторе показаны все страницы проекта. Если щелкнуть мышью на странице, страница развернется и можно увидеть все компоненты этой страницы, имеющие свойство action, такие как кнопка (Button), гиперссылка (Hyperlink) или закладка (Tab). Нажмите мышью на одном из компонентов и переместите курсор на другую страницу, чтобы при нажатии на этом компоненте (request) с сервера в качестве ответа (response) возвращалась эта страница, как показано на следующем рисунке.

Рисунок 13: Редактор Page Navigation

Попробуйте

1. Создайте две страницы с именами LinkPage1 и LinkPage2. Сделайте LinkPage1 стартовой страницей.

2. Добавьте на страницу LinkPage1 компонент Hyperlink ( гиперссылка), наберите Next Page и нажмите Enter.

3. Добавьте компонент Button (кнопка) на страницу LinkPage2, наберите Go, и нажмите Enter.

4. Выполните двойной щелчок мышью на компоненте Button, чтобы перейти к методу реакции на событие. Заметьте, что метод возвращает  null, что означает что текущая страница будет перерисована.

5. В панели инстументов нажмите на кнопку Design для перехода в дизайнер.

6. нажмите правой кнопкой мыши на пустой области дизайнера и выберите в контекстном меню пункт  Page Navigation. В редакторе Page Navigation нажмите на иконке LinkPage1.jsp для того чтобы развернуть страницу. Нажмите мышкой hyperlink1 и перетащите курсор на старницу LinkPage2.jsp, наберите nextPage и нажмите Enter. Появится связь между страницами в виде стрелки с надписью nextPage. Посмотрите в окнe Properties на свойства связи From View, To View и Outcome.

7. Подобным образом создайте связь между кнопкой на странице LinkPage2.jsp и страницей LinkPage1.jsp и назовите ее go.

8. В панели инструментов нажмите кнопку Source, чтобу увидеть XML-код, который размещается на сервере. Закройте Page Navigation и сохраните изменения если необходимо.

9. На странице LinkPage2 двойным щелчком мыши нажмите на компоненте Button, чтобы открыть метод обработки события. Обратите внимание на то, что этот метод возращает строку "go". Эта строка является значением свойства Outcome. Данная связь, созданная в редакторе Page Navigation, позволяет серверу понять, что нужно отобразить LinkPage1.jsp, когда страница LinkPage2.jsp возвращает значение "go."

10. Нажмите Ctrl-F5, чтобы проверить работу приложения.

Для дополнительной информации

• Using Simple Page Navigation.

• Using Dynamic Page Navigation.

• В главном меню выберите Help > Help Contents > Reference > Editors > About the Navigation Editor.

Редактирование Java-кода

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

• Автозавершение кода. Автозавершение позволяет вам набрать на клавиатуре несколько символов и затем выбрать нужный вам  элемент из списка классов, методов и переменных. Чтобы увидеть окно автозавершения, нажмите комбинацию клавиш Ctrl-Space. Окно автозавершения также появляется, когда вы делаете паузу после точки, следующей за именем пакета, переменной или вызовом метода, как показано на следующем рисунке.

Рисунок 14: Автозавершение кода

• Javadoc. В окне автозавершения также отображается Javadoc, если он существует. Нажав правой кнопкой мыши на типе, переменной или методе и выбрав Show Javadoc, вы можете увидеть Javadoc для этого элемента или нажмите Shift-F1, чтобы открыть специальное окно поиска документации. Кроме того, ссылки на документацию по наиболее часто используемому API можно найти в окне Dynamic Help.

• Работа с импортами (Fix Imports). Нажмите Alt-Shift-F, чтобы автоматически добавить необходимые операторы import.

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

Рисунок 15: Обнаружение ошибок

• Горячие клавиши. Вы можете использовать определенные комбинации клавиш для вызова наиболее часто используемых действий.  Для получения информации о комбинациях клавиш, в главном меню выберите Help > Help Contents > Introduction and Setup > Keyboard Shortcuts > Editor Keyboard Shortcuts.

• Аббревиатуры. Аббревиатуры это небольшие группы символов, которые преобразуются в выражения при нажатии клавиши пробел. Некоторые аббревиатуры показаны в следующей таблице. Для полного списка аббревиатур выберите Tools > Options > Editing > Editor Settings > Java Editor. Нажмите на кнопку (...), чтобы увидеть значение аббревиатуры.

• Элементы кода (Code Clips). Закладка Code Clips в окне Palette содержит полезные элементы готового кода, которые можно перетащить мышью в редактор.

• Автокомментарии. Выберите Tools > Auto Comment для добавить документацию Javadoc.

• Быстрый поиск. Как упоминалось ранее, если в окне Navigator набрать первые буквы метода или переменной, появится диалог быстрого поиска и высветится первый совпадающий элемент в списке. Чтобы перейти к найденному методу, нажмите Enter.

Попробуйте

NOTE: В следующих упражнениях вам потребуется добавить код в метод destroy. Данный код используется исключительно в целях иллюстрации возможностей редактирования в IDE. Обычно вы не должны добавлять подобный код в этот метод. Поэтому удалите этот код после окончания работы над упражнениями.

1. Создайте страницу или откройте уже существующую. Добавьте на страницу компонент Hyperlink. В панели инструментов нажмите кнопку Java, чтобы открыть редактор Java кода.

2. Правой кнопкой мыши нажмите на левом столбце и выберите Show Line Numbers. Чтобы перейти на новую строку, в Java редакторе нажмите Ctrl-G, наберите 50 в новом окне Go To Line и нажмите Enter. Нажмите правой кнопкой мыши в коде и выберите Go To в появившемся меню. Обратите внимание на подменю.

3. В окне Navigator двойным щелчком мыши нажмите на методе destroy(), чтобы пеерейти к этому методу в коде. Внутри метода destroy() наберите getSessionBean1(). и дождитесь появления окна автозавершения кода. Нажмите d и курсор перейдет  на метод  destroy().  Нажмите Enter, чтобы выбрать этот метод. Наберите ; и нажмите Enter. Затем наберите this.getH, нажмите Ctrl-Space и в появившемся окне автозавершения кода установите курсор на метод  getHyperlink1() и нажмите Enter. Напечатайте точку и дождитесь появления окна автозавершения кода. Наберите set для перехода к списку методов начинающихся на set, затем наберите te, в списке останется только метод setText(Object text) и нажмите Enter. IDE вставит setText(text) и выделит слово text. Наберите "hello";, заметьте, что IDE заменит слово text словом "hello" а точка с запятой будет напечатана в конце строки.

4. С новой строки наберите слово serr и нажмите пробел, чтобы аббревиатура развернулась в System.err.println(""). Удалите точку с запятой в конце строки и нажмите Shift-F9, чтобы скомпилировать файл. В окне Output появятся несколько ссылок на ошибки. Нажмите на первую ссылку. IDE откроет место в коде, которое содержит ошибку. Напечатайте точку с запятой, которую вы только что удалили.

5. На новой строке наберите getSes и нажмите Ctrl-K. IDE заменит эту строку первым совпавшим словом, найденным выше данной строки.

6. Чтобы удалить строку кода, поместите курсор на первую линию в методе destroy и нажмите Ctrl-E для удаления данной строки. Используйте Ctrl-E для удаления остальных строк в теле данного метода.

7. Установите курсор мыши на значки в панели инструментов редактора. Проверьте их работу.

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

9. Попробуйте перенести элементы кода (code clips) из палитры, чтобы узнать что они из себя представляют.

Для дополнительной информации

• Using the Java Editor.

• В главном меню выберите Help > Help Contents > Working With Java Source Code > Viewing and Editing Code in the Java Editor.

• В главном меню выберите choose Help > Help Contents > Introduction and Setup > Keyboard Shortcuts.

Обработка ввода

В IDE содержатся объекты проверки (validator) и преобразования (converter) для обработки и форматирования ввода. Эти объекты находятся в соответствующих секциях палитры.

Вы можете связать validator с компонентом ввода, таким как поле ввода, при помощи перетаскивания валидатора на поле ввода. Например после того как вы добавили компонент Text Field (поле ввода) на страницу, перетащите Length Validator из секции Validators палитры на поле ввода.

Также вы можете добавить validator на страницу и заменить значение свойства validator для компонента ввода на этот validator. Например, поместив Long Range Validator на пустое место на странице, в окне Outline появится элемент longRangeValidator1. Затем вы можете выбрать в дизайнере какой-либо компонент ввода, например Text Field, и выбрать значение longRangeValidator1 в списке свойств validator . Описанный способ позволяет использовать один и тот же validator для нескольких компонентов.

Этот же механизм может быть использован для объектов преобразования. Вы можете связать их с компонентами вывода, такими как Static Text.

Правила проверки выбираются в свойствах validator'а, где вы можете например задать минимальное и максимальное значение или минимальную и максимальную длину. Подобным образом можно устанавливаются правила преобразования для converters, например  образец с которым должны совпадать значение или метод, вызываемый  для преобразования значения. Конвертер чисел содержит специальный мастер преобразования, который вызывается при первом добавлении Number Converter на страницу или компонент.

В секции Basic палитры содержатся специальные компоненты Message и Message Group для автоматического отображения ошибок преобразования и проверки, а также сообщений заполнения обязательных полей. Компонент Message Group отображает глобальные ошибки и все ошибки компонентов (по выбору). В свою очередь, компонент Message отображает только ошибки компонента с которым он связан. Связывание компонента Message с другим компонентом происходит путем установки его свойства for или перетаскиванием компонента Message, при нажатой комбинации Ctrl-Shift, на компонент с которым вы хотите его связать.

Вы можете программно выводить сообщения в компоненте Message Group, используя методы error, warn, fatal и info. Для дополнительных сведений, смотрите информацию о классе FacesBean в справке Application Model Reference. Чтобы открыть API для класса FacesBean, разверните Javadoc API References в окне Dynamic Help, двойным щелчком нажмите на Application Model Reference и выберите FacesBean из списка All Classes.

Попробуйте

1. Создайте страницу и ператащите на нее кнопку. Замените значение свойства кнопки text на Go.

2. Поместите компонент Text Field (поле ввода) на страницу. В окне Properties выделите переключатель required для поля ввода.

3. Над Text Field поместите компонент Label, наберите Price: и нажмите Enter.

4. В свойствах для компонента Label в поле for выберите textField1. Посмотрите как изменится Label в дизайнере.

5. В палитре раскройте секцию Validators и перетащите Double Range Validator на компонент Text Field. В окне Outline выберите созданный узел doubleRangeValidator1 и в окне Properties установите 10.0 для maximum  и 1.0 для minimum как показано на следующем рисунке.
   

   Рисунок 16: Свойства Double Range Validator

    
   

6. В палитре раскройте секцию Converters и перетащите Number Converter на компонент Text Field. В появившемся диалоге Number Format выберите Currency в поле Type, а также English (United States) в поле Locale и нажмите кнопку OK.

   Рисунок 17: Number Format

    
   
7. Добавьте на страницу компонент Message. Нажмите Ctrl-Shift и перетащите курсор от Message к Text Field.
8. Добавьте компонент Message Group на страницу.
9. Сделайте страницу стартовой и запустите приложение. Наберите $1.50 в поле ввода и кликните на кнопке. Также попробуйте нажимать на кнопку, когда поле ввода пусто или больше чем  $10.00, а также со значением 1.5 или с нечисловым значением.
   Заметьте как приложение принимает значения, которые удовлетворяют числовому формату, и не принимает все остальные. Обратите внимание на то, что сообщения в компонентах Message и Message Group отличаются.
10. Проэкспериментируйте со свойством showGlobalOnly для компонента Message Group.

Для дополнительной информации

• Using Message Components

• Using Converters

• Using Validators

• Customizing a Standard Validator Message

• Adding Your Own Validation Handler

Хранение и передача данных

Для хранения и передачи информации между страницами используются Application Bean, Session Bean и Request Bean.

• Используйте Application Bean для хранения информации, доступной для всех пользовательских сессий, такой как список значений для компонента Drop-Down List (выпадающий список).

• Используйте Session Bean для хранения информации, используемой другими страницами в рамках сессии одного пользователя, например имя пользователя.

• Если вам необходимо передать информацию от одной страницы к другой, используйте Request Bean. (В портлетах нельзя использовать Request Bean.)
  
  Любое значение, которое хранится в Request Bean, исчезает после завершения запроса (request). Запрос - это простая передача HTTP запроса от клиента к серверу и соответствующий ответ сервера. В большинстве случаев запрос начинается с нажатия на кнопке или на ссылке и заканчивается отображением полученной HTML страницы.
  
  Замечание: Request Bean инициализируется только если страница, инициировавшая запрос, хранит значения в Request Bean. Например, когда значение компонента на странице связано с переменной в Request Bean, как это показано в следующем примере.
  
  Внимание: Вы не сможете использовать Request Bean, если для навигации между страницами используется элемент <redirect> внутри <navigation-case> (Эти элементы можно увидеть нажав кнопку Source в панели инструментов в редакторе Page Navigation). Когда страница отсылается на сервер (submit), элемент <redirect> перенаправляет страницу и заканчивает запрос перед тем как полученная страница сможет использовать значения переменных Request Bean.

Для того чтобы добавить переменную в Session Bean, нажмите правой кнопкой мыши на узле Session Bean в окне Projects и выберите Add > Property. Таким же образом можно добавить переменные в Request Bean и Application Bean.

Совет: Если вы увидели синтаксическую ошибку при написании кода, в котором используется новая переменная, скомпилируйте класс в котором находится эта переменная, чтобы она была доступна для остальных частей IDE. Например, если вы добавили новое поле в Session Bean, нажмите правой кнопкой мыши на узле Session Bean в окне Project и выберите Compile File в всплывающем меню.

Для того, чтобы связать компонент с полем в bean'е, нажмите на нем правой кнопкой мыши и выберите Bind To Data. В появившемся диалоге Bind To Data нажмите на закладке Bind to an Object и выберите соответствующее поле, как показано на следующем рисунке.

Рисунок 18: Окно Bind to Data

Попробуйте

1. Нажмите правой кнопкой мыши на узле Request Bean в окне Projects и выберите Add > Property. Назовите поле parm, выберите тип String и нажмите OK.

2. Создайте страницу с именем First и компонентами Button и Text Field.

3. Нажмите правой кнопкой мыши на компоненте Text Field и выберите Bind To Data. Откройте закладку Bind to an Object, выберите RequestBean1 > parm и нажмите OK.

4. Создайте страницу с именем Next. Добавьте на нее компоненты Button и Static Text.

5. Свяжите компонент Static Text на странице Next с полем RequestBean1 > parm, по аналогии с компонентом Text Field на странице First.

6. Используйте Page Navigation для создания связи между кнопкой на странице First и страницей Next. Кнопка на странице Next будет использоваться для перерисовки страницы.

7. Установите страницу First.jsp в качестве стартовой и запустите приложение. Введите значение в поле ввода и нажмите на кнопку. Заметьте, что это значение, введенное на странице First, отобразилось на странице Next. Для хранения значения в поле parm был создан экземпляр RequestBean1. Это значение было передано для ответа сервера (HTML для страницы Next). Как только страница была получена, экземпляр RequestBean1 был уничтожен.

8. Нажмите на кнопке на странице Next. Заметьте, что компонент Static Text больше не отображает значение с предыдущей страницы. Это произошло потому что RequestBean1, в котором хранилось это значение, существовал только после начала запроса, когда страница First была отправлена на сервер, и до момента когда HTML код для страницы Next был послан с сервера на клиент.

Для дополнительной информации

• Sharing Data Between Two Pages

• Understanding Scope and Managed Beans

Соединение с базами данных

В окне Servers находится узел Data Sources, в котором располагаются все источники данных, добавленные в IDE (см. рисунок внизу). В Java Studio Creator встроена система управления базами данных , в которой содержатся некоторые примеры схем.

Рисунок 19: Источники данных

Для получения доступа к источникам данных, необходимо запустить сервер баз данных.

Если на значке источника данных появляется красный крест и выдается ошибка когда вы пытаетесь развернуть соответствующий узел, сервер баз данных не запущен. Чтобы запустить сервер баз данных, нажмите правой кнопкой мыши на узле Bundled Database Server в окне Server Navigator и выберите Start Bundled Database из контекстного меню. Затем щелкните правой кнопкой мыши на источнике данных и выберите Refresh.

Примечание: Если вы открываете существущий проект, дизайнер может выдать окно ошибки. Это может быть вызвано тем, что дизайнеру необходимо получить информацию из базы данных, а сервер баз данных не запущен. Попытайтесь запустить сервер баз данных и нажать на кнопку Continue в окне с сообщением об ошибке.

Источники данных добавляются в IDE щелчком правой кнопкой мыши на узле Data Sources и нажатием на меню Add Data Source. В появившемся диалоговом окне вы можете ввести информацию об источнике данных, например имя хоста, имя базы данных, имя пользователя и пароль. После добавления источника данных вы можете разворачивать его узел и его подузел Tables, чтобы получить доступ к таблицам схем.

Для того, чтобы связать страницу или компонент с базой данной, нужно перетащить необходимую таблицу из Data Sources и бросить ее либо на компонент или на страницу. После этого IDE добавит data provider и rowset в класс SessionBean1, как показано на рисунке. С помощью примера, приведенного внизу, вы научитесь добавлять data provider на страницу и связывать его с компонентом за один шаг. 

Рисунок 20: Data Provider and Row Set

Объект rowset отвечает за связь с базой данных, обработку запросов к базе данных и предоставление ответов. Объект data provider предоставляет общий интерфейс для доступа к различным типам данных из таблиц баз данных, массивов и объектов Enterprise JavaBeans. Обычно rowset используется, при выборе параметров запроса к базе данных. В остальных случаях для доступа к данным и управления ими вы будете использовать data provider.

Для того чтобы связать компонент с базой данных, нажмите на нем правой кнопкой мыши и выберите Bind To Data. В открывшемся диалоге Bind To Data откройте закладку Bind to Data Provider.  В выпадающем списке Choose a Data Provider показаны все источники данных, с которыми можно связать компонент. Для того, чтобы связать компонент с данными вне этого списка нажмите на кнопке Add Data Provider и выберите необходимую таблицу данных в появившемся диалоге.  После выбора источника данных, выберите столбец, который будет связан с компонентом. Для некоторых компонентов, например Drop Down List,  необходимо установить оба значения Value field и Display field.

Для доступа к данным вы можете использовать редактор SQL запросов, как показано на рисунке.

Рисунок 21: Query Editor

Попробуйте

1. Создайте страницу сделайте ее стартовой и добавьте на нее компонент Listbox.

2. Нажмите правой кнопкой мыши на компоненте Listbox и выберите Bind To Data. Откройте закладку Bind to Data Provider и нажмите кнопку Add Data Provider. В открывшемся окне выберите Data Sources > Travel > Tables > TRIPTYPE и нажмите Add.

3. В окне Bind to Data для Value Field установите значение TRIPTYPE.TRIPTYPEID, а для Display Field TRIPTYPE.DESCRIPTION. Нажмите OK.

4. Запустите приложение и посмотрите как listbox заполнен данными из таблицы.

5. Разверните SessionBean1 в окне Outline и двойным щелчком мыши нажмите на узле triptypeRowSet, чтобы открыть редактор SQL запросов. В таблице, в ряду DESCRIPTION  выберите Ascending в столбце Sort Type. Закройте редактор и снова запустите приложение. Убедитесь, что теперь элементы располагаются в алфавитном порядке.

6. (Опционально) Java код, который связывает data provider с rowset находится в исходном коде страницы в методе _init.
   
   Двойным щелчком мыши на узле Session Bean откройте исходный код для Session Bean. В методе _init содержится код SQL запроса. Нажмите правой кнопкой мыши на методах объектов data provider и rowset и выберите Show Javadoc, чтобы увидеть документацию по этим методам.

7. (Опционально) Чтобы получить полную документацию откройте в окне Dynamic Help заголовки Data Provider Reference и RowSet Reference.

Для дополнительной информации

• Developing a Web Application.

• Using Databound Components to Access Databases.

• Выберите в главном меню Help > Help Contents > Connecting Components to Data.

Отладка веб-приложения

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

Для установки точки остановки необходимо кликнуть на левом столбце в редакторе Java кода. Чтобы следить за значениями переменной или выражения необходимо нажать на нем правой кнопкой мыши и выбрать New Watch. Для запуска отладчика нажмите либо  на Run > Debug Main Project  или Run > Run to Cursor в главном меню.

Рисунок 22: Отладчик

Совет: Ниже перечислены некоторые возможности, которые вы можете использовать для диагностики и решения проблем:

• Используйте HTTP Monitor, чтобы следить за взаимодействием клиента с сервером и перезапускать HTTP запросы. Способность перезапуска запроса полезна когда ваша страница имеет несколько полей ввода и вы хотите перезапустить запрос без заполнения всех полей.

• Для вывода сообщений и ошибок в компонентах добавьте на страницу компонент Message Group и используйте методы error, warn, fatal и info.

• В окне Servers правой кнопкой мыши нажмите на узле Deployment Server и выберите View Server Log. Вы также можете использовать метод log, чтобы послать сообщение в лог файл.

Попробуйте

1. Создайте или используйте недавно созданную стартовую страницу. Добавьте компонент Static Text, установите для свойства text  значение Hello и для свойства id значение helloText.
2. Добавьте кнопку на страницу. Двойным щелчком мыши нажмите на кнопке, чтобы с генерировать метод обработки события (button1_action)  и замените его тело следующим кодом:

String oldString = (String) this.helloText.getText();
this.helloText.setText("Good Bye");
String newString = (String) this.helloText.getText();
return null;

3. Щелкните правой кнопкой мыши на переменной oldString, выберите New Watch  и нажмите OK. Сделайте тоже самое для перемнной newString.  Щелкните левой кнопкой мыши на свободном поле слева от первого оператора этого метода, чтобы задать для него точку останова.
4. Выберите Run > Debug Main Project в главном меню.
5. Когда страница отобразится в браузере, нажмите на кнопку. Когда отладчик остановит приложение в методе button1_action, откройте закладку Watches в окне Debugger, чтобы увидеть текущие значения пераметров newString и oldString.
6. Выберите Run > Step Over в главном меню или нажмите F10, чтобы перейти к следующему оператору. Посмотрите значения перемнных на закладке Watches. Нажмите F10 еще пару раз и следите за значениями на закладке Watches.
7. Просмотрите закладки Local Variables и Call Stack.
8. Чтобы завершить процесс отладки выберите Run > Finish Debugger Session в главном меню.

    

   Для дополнительной информации

   • Using the Debugger.

   • Раздел Monitor the Application в учебном пособии Developing a Web Application.

   • В гланом меню выберите Help > Help Contents > Debugging Applications.

    

   Заключение

   • Разработка веб-приложения начинается с создания проекта.

   • Чтобы добавить страницы выберите Web Pages > New > Page в окне Projects.

   • Чтобы создать готовую страницу, просто перетащите компоненты из палитры на дизайнер.

   • Нажмите кнопку Run Main Project в панели инструментов, чтобы сохранить, построить, отправить на сервер и запустить приложение.

   • Используйте редактор Page Navigation для создания навигации между страницами. Также в редакторе вы можете добавлять компоненты на страницу и устанавливать их свойства url. (Помните, что в портлетах вы не можете использовать свойство url для навигации между страницами)

   • Для установки правил проверки и преобразования добавьте на страницу объекты Validator и Converter.

   • Для отображения сообщений об ошибках используйте компоненты Message и Message Group.

   • Используйте переменные в RequestBean1, SessionBean1 и ApplicationBean1 для хранения и передачи значений между страницами.

   • Используйте один из следующих способов для создания объекта data provider и ассоциированного с ним объекта rowset для таблицы базы данных:

     • Щелкните правой кнопкой мыши на компоненте и выберите Bind to Data, откройте закладку Bind to Data Provider, нажмите кнопку Add Data Provider и выберите таблицу базы данных.

     • Перетащите таблицу из секции Data Sources в окне Servers на страницу или на один из компонентов на странице для создания data provider'a и rowset'a для таблицы.

   • Используйте опцию Bind To Data для создания связей между компонентом и полями data provider'а, а также для создания связей между компонентами и переменными.

   • Откройте редактор SQL-запросов для изменения SQL-запроса, который используется в объекте rowset.

   • Используйте отладчик, HTTP монитор, Server Log и компонент Message Group для диагностики проблем исполнения приложения.

    

   Другие полезные разработчикам ресурсы:

Другие пособия, обзорные статьи, полезные советы, форумы, обновления, рекомендации экспертов для разработчиков вы можете найти в разделе Java Studio Creator developer resources Sun Developer Network (SDN) на сайте http://developers.sun.com/jscreator/

 

---

Дата изменения:  7 декабря 2006