Как создать веб приложение в intellij idea
Вы наверняка слышали о том, что сайты можно делать на PHP, Python и довольно не плохие сайты. Но как же Java? Да на java тоже можно делать очень даже офигенные сайты, а если быть точней то используют java для разработки крупных ресурсов. В этом уроке я покажу как создать простое web-приложение на java.
Что нам потребуется для создания web-приложения?
1) Любой сервер приложений в нашем случае это будет Tomcat 7.0.
2) Верная и надежная Intellij IDEA.
3) Желание создать своё первое WEB-приложение.
Шаг 1
Создаем обычный Maven проект, назовем его MyFirstWebProject. Структура проекта следующая:
Шаг 2
А также не забудьте указать:
это говорит Maven-у что собирать надо в WEB проект, по умолчанию он собирает jar.
Теперь нужно добавить 2 плагина который позволяет откомпилировать и собрать проект в war архив.
Полный листинг pom.xml:
Шаг 3
Шаг 4
Теперь соберите проект в Maven:
Шаг 5
Установка и настройка Tomcat 7.0.
2. Извлекаем с архива;
3. Настроить Intellij IDEA что бы деплоить приложение на сервер с нее.
Дальше заходим во вкладкуDeployment:
И выбираем ваш собранный проект, лежит он в корне проекта в папке target/<name>.war
Шаг 6
Завяжем на наш сервлет jsp страничку.
Для этого мы должны создать в папке src/main/webapp нашу страничку, в нашем случае это index.jsp.
Вот так будет выглядеть наш метод сервлета doGet():
С помощью RequestDispatcher мы отправляем наш response request клиенту.
А так будет выглядеть index.jsp
С помощью конструкции $ мы принимаем данные с сервера.
После этого вы получите ту же по виду страничку, только это уже будет не сервлет отображать а jsp.
Для получения углубленных знаний по Java проходите наш курс «Программирование на языке Java для начинающих», а также читайте серию статей «Spring Data JPA. Работа с БД»: часть 1, часть 2 и часть 3
Уровень знаний, необходимых для понимания статьи: вы уже более-менее разобрались с Java Core и хотели бы посмотреть на JavaEE-технологии и web-программирование.
В настоящее время я использую IntelliJ IDEA Enterprise Edition (это платная расширенная версия IDE, её обычно используют в профессиональной разработке, — прим. ред.). В ней гораздо проще работать с веб-проектами, чем в бесплатной Community Edition. Так, в Enterprise Edition буквально по одному щелчку мышки происходит сборка проекта, заливается в контейнер сервлетов, запускается сервер и даже открывается страничка с запущенным проектом в браузере. В бесплатной версии идеи многое из этого пришлось бы делать самостоятельно, так сказать, «ручками».
Для сборки проекта и управления его жизненным циклом я пользуюсь Apache Maven. В этом я использовал лишь малую толику его возможностей (управление пакетами/зависимостями).
В качестве контейнера сервлетов/сервера приложений (Application server) я выбрал Apache Tomcat версии 9.0.0.М4. Я знаю, что уже есть и более новые версии, но у меня установлена именно эта.
Приступаем
Для начала откроем IntelliJ IDEA и создадим пустой Maven-проект.
Тут слева выбираем Maven, проверяем, чтобы сверху была указана JDK для проекта. Если её нет, выберите необходимую из списка, либо жмите New… и выбирайте напрямую с компьютера.
В середине окна у меня крутится анимация загрузки списка архетипов. Нам они не нужны, поэтому, не дожидаясь загрузки, смело клацаете Next внизу окна.
В этом окне необходимо указать GroupId и ArtifactId.
В том случае, если вы «пилите» проект самостоятельно, а не в составе компании, пишите сюда ваше личное доменное имя (тоже в обратном порядке!). Если оно у вас, конечно же, есть:). Если нет — не расстраивайтесь. В действительности сюда можно написать что угодно.
ArtefactId — это просто название нашего проекта. Можно использовать буквы и некоторые знаки (дефис, например) для разделения слов. Наш «артефакт» будет называться именно так, как мы тут напишем. В этом примере, я пишу my-super-project.
Поле версии пока не трогаем, оставляем как есть.
Ну и стандартное окошко IDEA при создании нового проекта. Назовем его по традиции my-super-project.
Перед нами сразу открылся файл pom.xml. Это файл, с настройками Maven. Если мы хотим «рассказать» Maven’у, что и как делать или откуда что-то брать, мы описываем всё это в этом самом файле pom.xml. Он находится в корне проекта.
Видим, что в нём указаны сейчас именно те данные, которые мы вводили при создании Maven-прокта: groupId, artifactId и version (последний мы не трогали).
Структура нашего проекта
Этот Maven-проект имеет определенную структуру.
Как видим, в корне лежат:
- директория .idea, в которой находятся настройки идеи для текущего проекта;
- директория src, в которой мы создаем наши исходники;
- файл my-super-project.iml, файл проекта, созданный IDEA;
- файл pom.xml, тот самый файл Maven-проекта, о котором я говорил чуть выше, который у нас сейчас открыт. Если я буду где-то упоминать pom.xml или «помник», я буду иметь в виду именно этот файл.
В папке src в свою очередь лежат две подпапки:
- main — для нашего кода;
- test — для тестов для нашего кода.
И в main, и в test есть папка java. Считайте, что это одна и та же папка, только та, что в main —для кода исходников, а та, что в test — для кода тестов соответственно.
Папка resources нам пока вообще не нужна, мы не будем ее использовать. Но пусть полежит.
Превращение в веб-проект
Пришло время наш преобразовать наш Maven-проект в веб-проект. Для этого кликаем правой кнопкой мышки по названию проекта в этом дереве и выбираем пункт Add framework support…
Откроется окно, где мы можем добавить поддержку всяких разных фреймворков для нашего проекта. Но нам нужен только один: Web Application. Его и выбираем.
Проверяем, что стоит галочка напротив Web Application, а в основной части окна отмечено, что мы хотим, чтобы для нас создали сразу ещё и файл web.xml (рекомендую поставить галочку, если её там нет).
После этого мы увидим, что структура нашего проекта пополнилась папочкой web.
Это корень нашего веб-проекта с адресом /. То есть, если мы введем в браузере адрес localhost (когда запустим, конечно же), то это будет обращение именно сюда, в корень веб-проекта. Если введем localhost/addUser, то в папочке web будет искаться ресурс с названием addUser.
Главное, надо понять, что папка web — корень нашего проекта, когда мы его зальем на Tomcat. Сейчас у нас есть определённая структура папок, но в готовом проекте, который мы будем заливать, она будет немного другой, и именно папочка web там будет корнем.
В web лежит обязательная папка с названием WEB-INF, где находится файл web.xml, который мы просили создать на прошлом шаге. Откроем его.
Как видим, в нем пока нет ничего интересного, одна только «шапка». Кстати, если бы мы не просили его создавать, нам бы, возможно, пришлось создавать его вручную, то есть набирать «ручками» всю эту «шапку», или, в крайнем случае искать готовый вариант в интернетах.
Для чего нужен web.xml? Для маппинга. Здесь мы распишем для Tomcat, какие url-запросы передавать на какие сервлеты.
Но это все позже, пока оставляем его пустым. Ещё в папочке web есть файл index.jsp. Откроем его.
Это файл, который будет выполнен по умолчанию, так сказать. То есть когда мы запустим проект, то именно его и узреем. По сути, jsp — обычный html-файл, с той разницей, что в нём можно выполнять java-код.
Немного про статический и динамический контент
Статический контент — такой, который не меняется со временем. Всё то, что мы написали в html файле написали — то и будет отображаться без изменений. Если мы написали hello world — то эта надпись отобразится и как только мы откроем страничку, и через 5 минут, и завтра, и через неделю, и через год. Она не изменится.
Но что, если мы хотим на страничке вывести текущую дату? Если мы просто напишем «27 октября 2017 года» — то и завтра мы увидим такую же дату, и через неделю, и через год. А хотелось бы, чтобы эта дата была все-таки актуальна. Именно тут нам и приходит на помощь возможность выполнять какой-то код прямо внутри страницы. Мы можем получить объект даты, привести его к нужному нам виду и вывести на странице. Тогда каждый день когда бы мы не открыли страничку — дата будет всегда актуальна.
Если нам нужен только статический контент — то нам достаточно обычного веб-сервера и html файлов. Никакой джавы, мавенов, томкатов нам и не нужно.
Но если мы хотим использовать динамический контент — вот тут то нам все это и пригодится.
Но пока вернемся к нашему index.jsp.
Давайте укажем вместо стандартного заголовка что-то свое, например «My super web-app!», а в теле напишем например «I'm alive!».
Мы уже почти готовы к тому, чтобы запустить наш проект! Но, к сожалению, привычный зеленый треугольничек для запуска программы у нас не активен.
Нажмем на кнопку слева от него (указал на скрине красной стрелочкой) и выберем Edit configurations…
Откроется окно, где нам предлагают нажать на зеленый плюсик чтоб добавить какую-то конфигурацию. Нажмем на него, он находится в левом верхнем углу окна.
Выберем пункт Tomcat Server и подпункт Local.
Откроется окно со множеством всяческих параметров, но нас почти все устраивает и дефолтное.
Можем как-нибудь красиво назвать нашу конфигурацию вместо стандартного Unnamed (в самом верху).
Так же необходимо проверить, что идея успешно нашла томкат у нас в системе (вы же его перед этим уже скачали и установили, да?). Если не нашла (что вряд ли) — нажимаем стрелочку вниз и выбираем где он у нас установлен, ну или же другую версию, если у вас их несколько. У меня он один и уже установлен, поэтому выглядит все так, как на скрине.
Жмем на нее и видим, что идея сама все нашла, сама все создала, чего ей не хватало, и сама все настройки проставила.
Видим, что нас со вкладки Server перебросило на вкладку Deployment, в разделе Deploy at the server startup у нас уже указан артефакт, который надо деплоить, ну а внизу указано, что перед деплоем этот артефакт будет билдиться.
Apply, Ok.
И видим, что во первых, внизу окна появился раздел с нашим локальным сервером томкат, в который будет помещен наш артефакт. Свернуть этот раздел можно нажав на соответствующею кнопку в правой части окна.
Так же видим, что зеленый треугольничек для запуска уже активен.
Для тех, кто хочет все проверить — можно нажать на кнопку с настройками проекта (справа от кнопок запуска, помечена красной стрелкой), перейти в раздел Artifacts и убедиться, что артефакт действительно создан. Его не было до того момента, пока мы не нажали ту кнопку Fix, но теперь все ок. И такая конфигурация нас вполне устраивает.
Если в двух словах чем отличается my-super-project:war от my-super-project:war exploded — так это тем, что my-super-project:war создаст только один файл war (который является просто архивом), а вариант с exploded — это просто «распакованный» war. И именно такой вариант лично мне более удобен, так как позволяет быстрее деплоить мелкие изменения на сервер.
По сути, артефакт — это и есть наш проект, только уже скомпилированный, и в котором изменена структура папок так, чтобы его можно было выкладывать уже напрямую на томкат.
Выглядеть она будет примерно вот так:
Ну что ж, теперь все готово для запуска нашего проекта.
Жмем заветную зеленую кнопочку запуска и наслаждаемся результатом! :)
При изучении технологий Ext JS и Java, написал web-приложение «Каталог автомобилей». Хочу поделиться с Вами этим опытом.
Вид и функциональность приложения
Инструменты
Укажите путь к Java в Project SDK:
Укажите путь к своей Maven home directory:
«Maven projects need to be imported» кликаем Enable Auto-Import
Добавим Tomcat Server:
В Application server укажите путь до Tomcat сервера:
Ok -> Apply -> Ok
Проверим, что всё работает:
Клиент (ExtJS)
Добавим файлы фрэймворка Ext JS:
Модель Ext JS MVC:
Создадим файл app.js:
- Метод Ext.application инициализирует приложение Ext JS;
- name: 'CarCatalog' указывает имя приложения, которое будет затем использоваться для создания полных имен классов приложения;
- launch: function()<> тут происходит создание приложения;
Проверим, что всё работает:
Понадобится четыре вида — это вид поиска SearchCarView.js, вид таблицы CarGridView.js, вид формы добавления данных AddCarFormView.js и вид каркаса CarCatalogView.js, куда поместим все виды.
- Метод Ext.define('Имя', ) создает класс-компонент, который может быть унаследован от какого-нибудь компонента. Например в CarGridView.js указали extend: 'Ext.grid.Panel', что будет представлять собой таблицу;
Controller
- С помощью параметра init инициализируются обработчики для компонентов (кнопки, поля и т.д). Связать конпонент с обработчиком помогает функция control;
Модель и хранилище
- 'car' имя, на которое будет замапен java-класс (контролер), который будет обрабатывать GET, POST, PUT, DELETE запросы с клиента;
Укажим контролер CarCatalogController.js и хранилище CarCatalogStore.js в app.js:
Проверим, что всё работает. 404 (Not Found) — это нормально, так как по адресу localhost:8080/car еще ничего нет:
Сервер (Java)
Создадим папку java:
Создадим модель данных и слой доступа к данным (DAO):
- Метод getCars(String search) принимает значение поля поиска и если пусто — вернет все данные;
- Метод findByCar(String name, Long price) используется для поиска дубликата при добавлении данных;
Создадим контролер, который будет замапен на адрес /car для обработки запросов с клиента:
- Каждый метод замапен на соответствующий запрос с клиента. Внедряем зависимость с помощью spring аннотации Autowired и вызываем соответствующие методы у сервиса;
- ExtResult — вспомогательный класс. Используется для ответа клиенту, что сущность, которую пытаемся записать в БД , дубликат или не дубликат;
Проверьте, что всё работает. Соберите проект с помощью maven install и запустите приложение.
- настройками подключения к БД;
- бином EntityManager — объект, через который происходит взаимодействие с БД. Инжектится в CarDaoImpl.java;
- инжектом объекта класса CarDaoImpl.java в объект класса CarServiceImpl.java;
Создадим настройки для spring DispatcherServlet, который будет обрабатывать запросы с клиента:
В этой части мы рассмотрим создание простого приложения для конвертации из метров в дюймы.
Если тема будет интересна, то в следующей статье мы рассмотрим взаимодействие с базами данных.
Создание нового проекта
Исследование структуры проекта
Рассмотрим структуру проекта, созданного IntelliJ IDEA.
В структуре проекта присутствуют два корневых узла:
- JSFDemo. Этот узел представляет из себя Ваш модуль. В этом узле
Папка .idea и файл JSFDemo.iml используются для хранения конфигурации проекта.
Папка lib содержит в себе .jar файлы, которые реализуют библиотеку JSF.
Папка src предназначена для хранения исходных файлов Java.
Папка web содержит в себе ресурсы Web приложений, такие как Web-страницы, изображения, таблицы стилей, конфигурационные файлы и т.д. Эта папка также содержит в себе директорию WEB-INF с конфигурационным файлом faces-config.xml и дескриптор развертывания Web приложений web.xml. Также в папке web содержится файл index.jsp, который представялет из себя одностраничное приложение Hello, World.
- External Libraries. Эта категория представляет из себя все внешние ресурсы необходимые для разработки. Сейчас в этой категории находятся .jar файлы библиотек JDK и GlassFish.
Запуск первого приложения
Для запуска приложения выберите команду Run из меню Run или нажмите сочетание клавиш Shift+F10.
Как результат, IntelliJ IDEA произведет сборку приложения, запустит сервер риложений GlassFish и развернет наше приложение.
После этого запустится браузер и покажет нам такую страницу:
Если это так, то все работает нормально и мы можем приступить к разработке нашего демонстрационного JSF приложения.
Исследование артефакта приложения
Артефакты в IntelliJ IDEA реализует две различные, но взаимосвящанные сущности. Прежде всего артефакты (а, если быть точным, то конфигурация артефакта) является спецификацией сборки нашего проекта. Ее можно просмотреть, создать и отредактировать в секции Artifacts диалогового окна Project Structure.
С другой стороны, артифакты являются выходными файлами, созданными согласно спецификации сборки нашего проекта.
На данный момент уже создана одна конфигурация артефакта. Давайте ее изучим.
1. Откройте диалоговое окно Project Structure (File | Project Structure, сочетанием клавиш CTRL+ALT+SHIFT+S или нажатием соответствующей кнопки на панели инструментов).
2. Выберите пункт Artifacts.
Как вы видите, уже создана одна конфигурация артифакта (JSFDemo:war exploded). Настройки артефакта показаны в правой части диалогового окна.
Артефакт имеет тип Web Application: Exploded. Этот тип соответствует несжатому архиву Web приложения (WAR), структура каталогов которого готова для развертывания на Web сервере.
Для тестирования нашего приложения этот формат является наилучшим.
При построении артефакт помещается в директорию <project_folder>\out\artifacts\JSFDemo_war_exploded, которая определяется полем Output directory.
Содержимое артефакта показано в левой панели вкладки Output Layout.
Пункт <output root> представляет собой корневую директорию (<project_folder>\out\artifacts\JSFDemo_war_exploded). Остальные элементы имеют следующее назначение (и напрямую зависят от соответствующих каталогов с исходным кодом, ресурсами, которые мы видим в окне Project):
Для того, чтобы увидеть более детальную конфигурацию артефакта поставьте галочку напротив пункта Show content of elements.
Для того, чтобы убедиться, что конфигурация артефакта актуальна и соответствует структуре вашего проекта вы можете просмотреть содержимое каталога <project_folder>\out\artifacts\JSFDemo_war_exploded.
3. Нажмите ОК в диалоговом окне Project Structure.
Теперь мы изучим конфигурацию запуска нашего проекта и адаптируем ее для своих нужд.
Изучение конфигурации запуска и изменение ее настроек
Приложения в IntelliJ IDEA запускаются в соответствии с конфигурациями запуска/отладки.
В нашем случае мы не должны создавать конфигурацию запуска. IntelliJ IDEA уже создала конфигурацию для запуска приложений в среде GlassFish. Сейчас мы просмотрим ее настройки и внесем небольшие изменения.
1. Откройте диалоговое окно Run/Debug Configurations. Для этого выберите Edit Configurations из меню Run.
В правой части диалогового окна будут показаны настройки для среды выполнения.
Поле Startup page определяет адрес, который будет открыт в браузере при запуске приложения.
Существующая строка указывает на страницу index.jsp, которую мы увидим при запуске приложения.
2. Изменим адрес на localhost:8080/JSFTutorial_war_exploded/. Этот адрес будет указывать на стартовую страницу демонстрационного приложения.
3. Нажмите ОК в диалоговом окне Run/Debug Configurations.
Разработка демонстрационного JSF приложения
Для демонстрации того, как IntelliJ IDEA поддерживает разработку JSF приложений мы разработаем демонстрационное JSF приложение.
Логика демонстрационного приложения
Структура демонстрационного приложения
Демонстрационное приложение содержит две JSF страницы с именами:
input_number.xhtml, содержащий реализацию рисунка 1. Эта страница ожидает ввода пользователя и отправляет его на сервер.
result.xhtml содержит реализацию рисунков 2а, 2б, 2в. Эта страница показывает результат конвертации или информирует пользователя об ошибке.
Бин converterBean используется для конвертации введеного числа метров в дюймы. Он также содержит заголовчный текст (CONVERSION RESULT или CONVERSION FAILED) и текст для кнопки (Convert another number или Try once more) страницы result. Этот бин реализуется при помощи класса ConverterBean.
Конфигурационный файл faces-config.xml содержит определение converterBean и правила навигации для перехода между страницами.
Дескриптор развертывания web.xml, кроме всего прочего ассоциирует пути сервлета с нашими фэйслетами (страницами xhtml). Он также определяет страницу input_number.xhtml, как стартовую страницу нашего приложения.
Создание первой версии приложения
Начнем с создания приложения, содержащего только одну стартовую страницу (input_number.xhtml).
Создание input_number.xhtml
Для создания стартовой страницы нашего демонстрационного приложения:
1. В окне Project выберите директорию web и нажмите Alt+Insert для открытия меню New. Затем выберите пункт меню JavaEE Web Page.
2. В диалоговом окне Create JavaEE Web Page введите имя страницы (input_number) в поле Name. Выберите Facelets page в списке Kind и нажмите кнопку ОК.
Как результат, файл input_number.xhtml будет создан и открыт в окне редактирования.
Редактирование файла input_number.xhtml
Сейчас мы создадим первоначальную версию нашей страницы, а затем ее протестируем. Первоначальная версия будет "статической" и ее исходный код будет выглядеть таким образом:
1. Изменим содержимое элемента <title> на JSF Demo
2. В элементе <h:body> удалите текст Place your content here.
Теперь мы добавим строку:
Для этого:
3. Введите <h:o и выберите пункт h:outputText из выпадающего меню автозавершения кода.
4. Нажмите пробел, затем наберите v и выберите value (Вы можете использовать клавишу TAB для выбора первого пункта из меню автозавершения.
5. Введите METERS TO INCHES CONVERSION внутри угловых скобок. Перейдите к концу строки (нажмите END) и введите / для закрытия тега. Затем введите <br/><br/> и нажмите Enter для перехода на следующую строку.
6. Используя технику автозавершения, введите оставшиеся строки:
В результате разметка в окне редактирования должна выглядеть следующим образом:
Редактирование файла web.xml
Для связывания сервлета с шаблоном URL-адреса и указания в качестве стартовой страницы приложения файла input_number.xhtml мы должны добавить в файл web.xml следующие строки:
В результате файл web.xml должен выглядеть следующим образом:
1. Откройте файл web.xml в окне редактирования.
2. Поместите курсор после последнего закрывающего тега /servlet-mapping> и нажмите Enter.
3. Сейчас мы воспользуемся возможностью генерации кода, доступ к которой можно получить одним из следующих путей:
— Меню Code | Generate.
— Используйте правую кнопку мыши для открытия контекстного меню и выберите Generate.
— Используйте сочетание клавиш ALT+INSERT.
4. В меню Generate выберите пункт XML Tag.
5. Когда появится меню Choose Tag Name, наберите se для того, чтобы увидеть теги, содержащие сочетание se. Затем выберите servlet-mapping.
Будет сгенерирован элемент <servlet-mapping> и курсор будет помещен между его открывающим и закрывающим тегами. В это же время, в текущей позиции курсора, будет показан список предложений.
6. Выберите из этого списка пункт Faces Servlet.
Будет сгенерировано содержимое элемента <servlet-mapping> и курсор будет помещен между открывающим и закрывающим тегом <url-pattern>.
7. Введите*.xthml и затем нажмите ESCAPE. Нажмите ENTER для начала новой строки.
8. Аналогичным образом добавьте:
Запуск приложения
1. Запустите приложение нажатием сочетания клавиш SHIFT+F10 или соответствующей кнопкой на панели инструментов.
IntelliJ IDEA произведет сборку проекта, запустит сервер приложений и развернет приложение на сервере. Затем произойдет запуск браузера и будет показана следующая страница:
Мы получили нужную страницу, которая выглядит соответствующе.
2. Закройте окно браузера и вернитесь в среду разработки.
Добавление навигации
Сейчас мы превратим наше приложение в двухстраничное и добавим возможность переключения между страницами. Для этого мы внесем измения в input_number.xml, создадим вторую страницу (result.xhtml) и добавим правила навигации в файл faces-config.xml.
Редактирование файла input_number.xhtml
После применения всех изменений код страницы должен выглядеть следующим образом:
Создание файла result.xhtml
Создадим файл result.xhtml аналогично файлу input_number.xhtml.
Редактирование файла result.xhtml
Отредактируем файл result.xhtml следующим образом:
Установка правил навигации
Для установки правил навигации мы добавим соответствующие элементы в конфигурационный файл faces-config.xml. В результате, размеченный файл должен выглядеть следующим образом:
Это упражнение можно выполнить при помощи генерации тегов в сочетании с автодополнением. Но в этом случае мы используем визуальные возможности, предоставляемые средой разработки для редактирования конфигурационных файлов JSF.
1. Откройте для редактирования файл faces-config.xml.
Сейчас мы создадим правило навигации для перехода от input_number.xhtml к result.xhtml.
2. Выберите вкладку Navigation в левой части окна редактирования.
3. Перетащите файл input_number.xhtml из окна Project в редактор. Сделайте тоже самое с файлом result.xhtml.Нарисуйте линию от /input_number.xhtml к /result.xhtml.
4. Переключитесь на вкладку Structure.
5. В левой панели раскройте список Navigation Rules и выберите /input_number.xhtml.
6. В поле From Outcome введите result.
7. Переключитесь на вкладку Text для просмотра сгенерированных правил навигации.
Аналогичным образом создадим правило навигации для перехода от /result.xhtml к /input_number.xhtml.
Переключитесь на вкладку Text для просмотра результата.
Обновление и запуск приложения
Создание управляемого бина и связывание бина с приложением
Сейчас мы создадим первую, очень простую версию управляемого бина для нашего JSF приложения и свяжем его с нашим приложением.
Мы создадим класс бина и определим его в faces-config.xml. Мы будем, однако, следовать нескольким сценариям. Мы начнем с определения бина в faces-config.xml. Затем используем инструмент быстрого определения для создания класса бина.
В конце упражнения файл faces-config.xml должен содержать следующее:
Используем инструменты генерации и автодополнения, которые были рассмотрены нами ранее.
В результате, в каталоге src будет создан файл ConverterBean.java, который откроется в окне редактирования.
Редактирование класса ConverterBean
Сейчас мы добавим одно поле (result) и сгенерируем методы установки и получения значений для него. После выполнения упражнения исходный код класса должен выглядеть следующим образом:
1. Нажмите SHIFT+ENTER для перехода на новую строку после public class ConverterBean
2. Добавьте следующее определение поля:
Добавление ссылки на поле бина в файле input_number.xhtml
После завершения этого упражнения файл input_number.xhtml должен выглядеть следующим образом:
Добавление кода конвертации в класс ConverterBean
Измените код функции setResult следующим образом:
Запустите приложение и проверьте его работу.
Завершение разработки приложения
На заключительном этапе мы добавим код обработки исключений, а также два новых поля и ссылки на них на странице результата.
1. Добавьте код обработки исключений в метод setResult()
2. Добавьте код двух новых полей в класс ConverterBean. Первое поле (conversionSummary) используется для показа первой линии страницы результата, в зависимости от результата конвертации (CONVERSION RESULT или CONVERSION FAILED). Второе поле (buttonLabel) используется для двух различных вариантов надписи на кнопке, в зависимости от результата (Convert another number, если конвертация удалась и Try once more в случае неудачи).
Код класса должен выглядеть следующим образом:
3. Добавьте ссылки на новые поля в файл result.xhtml.
Все. Наше приложение готово к работе.
Запустите и проверьте его работу.
Если тема будет интересна, то в следующей статье мы рассмотрим взаимодействие с базами данных.
Читайте также: