Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Разработка JSF приложений при помощи IntelliJ Idea. Часть 2: Разработка простого приложения

Anna | 4.06.2014 | нет комментариев
Часть 1.

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

Создание нового плана

Любая разработка в IntelliJ Idea начинается с создания нового плана. Теперь мы сотворим план, содержащий в себе Java-модуль и поддержку создания Web-приложений и поддержку сервера приложений GlassFish.

Для создания плана:
1. Если не существует плана, открытого в IntelliJ IDEA нажмите Create New Project в стартовом окне. В другом случае выберите New Project в меню File.
Как итог, откроется мастер создания нового плана.
2. В левой части диалогового окна выберите Java Module.
3. В правой части диалогового окна, в поле Project name, введите имя вашего плана.
image
4. Если пакет JDK, тот, что Вы собираетесь применять теснее подключен к IntelliJ IDEA выберите его из спискаProject SDK, нажмите дальше и переходите к дальнейшему шагу.
В другом случае нужно подключить пакет JDK к среде разработки. Для этого:
Нажмите New справа от поля Project SDK и выберите JDK.

В диалоговом окне Select Home Directory for JDK выберите директорию, в которую установлен JDK и после этого нажмите ОК.

Выбранный JDK появится в поле Project SDK

Нажмите кнопку Next.
5. На дальнейшей странице мастера выберите спецтехнологии, которые обязаны поддерживаться в плане.
Так как наше приложение является Web — приложением выберите пункт Web Application.
Когда Вы сделаете это, то сумеете предпочесть версию спецификации Сервлета.

Версию по умолчанию (2.5) подходит для наших упражнений.
Для добавления поддержки JSF, выберите соответствующую опцию. Удостоверитесь в том, что выбрана версия 2.0 и опция Download. Во время создания плана среда разработки механически загрузит нужные библиотеки и ассоциирует их с Вашим модулем.

Подобно, на дальнейшем шаге добавляется помощь сервера приложений GlassFish.
Нажмите кнопку Finish для заключения работы мастера.
Подождите пока IntelliJ IDEA сделает план. Позже этого Вы сумеете увидеть конструкцию плана в окнеProject.

Изыскание конструкции плана

Разглядим конструкцию плана, сделанного IntelliJ IDEA.

В структуре плана присутствуют два корневых узла:

  • JSFDemo. Данный узел представляет из себя Ваш модуль. В этом узле

Папка .idea и файл JSFDemo.iml применяются для хранения конфигурации плана.
Папка lib содержит в себе .jar файлы, которые реализуют библиотеку JSF.
Папка src предуготовлена для хранения начальных файлов Java.
Папка web содержит в себе источники Web приложений, такие как Web-страницы, изображения, таблицы жанров, конфигурационные файлы и т.д. Эта папка также содержит в себе директорию WEB-INF с конфигурационным файлом faces-config.xml и дескриптор развертывания Web приложений web.xml. Также в папке web >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 приложение.

Логика демонстрационного приложения

Наше демонстрационное приложение будет дюже простым. Оно будет конвертировать метры в дюймы.

Пользователю предлагают ввести число метров для конвертации в дюймы (рисунок 1). Если введено правильное значение, приложение осуществляет перевод и показывает итог (рисунок 2а). Если пользователь ввел некорректное значение либо не ввел значение он получает сообщение об ошибке (рисунок 2б, 2в).

Конструкция демонстрационного приложения

Демонстрационное приложение содержит две 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

Теперь мы сделаем изначальную версию нашей страницы, а после этого ее протестируем. Изначальная версия будет “статической” и ее начальный код будет выглядеть таким образом:

  <?xml version="1.0" encoding="UTF-8"?>

  <!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

  <h:head>
  </h:head>

<h:head>
  <title>JSF Demo</title>
</h:head>

  <h:body>
    <h:outputText value="METERS TO INCHES CONVERSION"/><br/><br/>
    <h:outputText value="Enter amount in meters (m):"/> 
    <h:inputText size="16"/><br/><br/>
    <h:commandButton value="Convert into inches"/>
  </h:body>

</html>
  

1. Изменим содержимое элемента <title> на JSF Demo

2. В элементе <h:body> удалите текст Place your content here.
Сейчас мы добавим строку:

<h:outputText value="METERS TO INCHES CONVERSION"/>
<p><br/>
  <br/>
  

Для этого:
3. Введите <h:o и выберите пункт h:outputText из выпадающего меню автозавершения кода.

4. Нажмите пробел, после этого наберите v и выберите value (Вы можете применять клавишу TAB для выбора первого пункта из меню автозавершения.

5. Введите METERS TO INCHES CONVERSION внутри угловых скобок. Перейдите к концу строки (нажмите END) и введите / для закрытия тега. После этого введите <br/><br/> и нажмите Enter для перехода на следующую строку.
6. Применяя технику автозавершения, введите оставшиеся строки:

<h:outputText value="Enter amount in meters (m):"/> 
<h:inputText size="16"/><br/><br/>
<h:commandButton value="Convert into inches"/>

В итоге разметка в окне редактирования должна выглядеть дальнейшим образом:

Редактирование файла web.xml

Для связывания сервлета с образцом URL-адреса и указания в качестве стартовой страницы приложения файла input_number.xhtml мы обязаны добавить в файл web.xml следующие строки:

  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>input_number.xhtml</welcome-file>
  </welcome-file-list>
  

В итоге файл web.xml должен выглядеть дальнейшим образом:

  <?xml version="1.0" encoding="UTF-8"?>
  <web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
		  http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
           version="2.5">

    <servlet>
      <servlet-name>Faces Servlet</servlet-name>
      <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.faces</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
      <welcome-file>input_number.xhtml</welcome-file>
    </welcome-file-list>
  </web-app>

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. Аналогичным образом добавьте:

  <welcome-file-list>
    <welcome-file>input_number.xhtml</welcome-file>
  </welcome-file-list>
  
Запуск приложения

1. Запустите приложение нажатием сочетания клавиш SHIFT F10 либо соответствующей кнопкой на панели инструментов.
IntelliJ IDEA произведет сборку плана, запустит сервер приложений и развернет приложение на сервере. После этого произойдет запуск браузера и будет показана дальнейшая страница:


Мы получили необходимую страницу, которая выглядит соответствующе.
2. Закройте окно браузера и вернитесь в среду разработки.

Добавление навигации

Теперь мы превратим наше приложение в двухстраничное и добавим вероятность переключения между страницами. Для этого мы внесем измения в input_number.xml, сделаем вторую страницу (result.xhtml) и добавим правила навигации в файл faces-config.xml.

Редактирование файла input_number.xhtml

Позже использования всех изменений код страницы должен выглядеть дальнейшим образом:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

<h:head>
    <title>JSF Demo</title>
</h:head>

<h:body>
    <h:outputText value="METERS TO INCHES CONVERSION"/><br/><br/>
    <h:form>
        <h:outputText value="Enter amount in meters (m):"/> 
        <h:inputText size="16"/><br/><br/>
        <h:commandButton action="result" value="Convert into inches"/>
    </h:form>
</h:body>

</html>
  

Для начала мы используем функцию Surround With для того, Дабы завернуть надобные элементы страницы в теги <h:form>…</h:form>.
1. Выберите фрагмент кода, тот, что хотите завернуть.

2. Вызовите функцию Surround With (сочетанием клавиш СTRL ALT T либо предпочтя пункт меню Code | Surround With).

3. Выберите пункт T2. Surround with <tag></tag> in HTML/JSP.
4. Введите h, после этого выберите h:form и нажмите ESCAPE.
5. Добавьте action=”result” в элемент <h:commandButton>.
Сейчас страница готова для связывания с правилами навигации.

Создание файла result.xhtml

Сделаем файл result.xhtml подобно файлу input_number.xhtml.

Редактирование файла result.xhtml

Отредактируем файл result.xhtml дальнейшим образом:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

<h:head>
    <title>JSF Demo</title>
</h:head>

<h:body>
    <h:outputText value="CONVERSION RESULT"/><br/><br/>
    <h:outputText value="1 m = 39.37 inches"/><br/><br/>
    <h:form>
        <h:commandButton action="back" value="Convert another number"/>
    </h:form>
</h:body>

</html>
  

Установка правил навигации

Для установки правил навигации мы добавим соответствующие элементы в конфигурационный файл faces-config.xml. В итоге, размеченный файл должен выглядеть дальнейшим образом:

<?xml version='1.0' encoding='UTF-8'?>

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
              version="2.0">
    <navigation-rule>
        <from-view-id>/input_number.xhtml</from-view-id>
        <navigation-case>
            <from-outcome>result</from-outcome>
            <to-view-id>/result.xhtml</to-view-id>
        </navigation-case>
    </navigation-rule>
    <navigation-rule>
        <from-view-id>/result.xhtml</from-view-id>
        <navigation-case>
            <from-outcome>back</from-outcome>
            <to-view-id>/input_number.xhtml</to-view-id>
        </navigation-case>
    </navigation-rule>
</faces-config>
  

Это упражнение дозволено исполнить при помощи генерации тегов в сочетании с автодополнением. Но в этом случае мы используем визуальные вероятности, предоставляемые средой разработки для редактирования конфигурационных файлов 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 для просмотра итога.

Обновление и запуск приложения

На данном этапе мы проверим навигацию.
1. Нажмите сочетание клавиш CTRL F10 либо соответствующую кнопку на панели Run.

В диалоговом окне Update выберите пункт Redeploy и нажмите кнопку ОК.

Подождите пока приложение обновится.
2. Переключитесь в веб-браузер. Проверьте URL-адрес в адресной строке (http://localhost:8080). Обновите страницу.
3. На стартовой странице приложения нажмите Convert into inches.

Будет показана страница result.
4. Нажмите Convert another number.

Будет показана стартовая страница приложения.

Создание управляемого бина и связывание бина с приложением

Теперь мы сотворим первую, дюже примитивную версию управляемого бина для нашего JSF приложения и свяжем его с нашим приложением.
Мы сотворим класс бина и определим его в faces-config.xml. Мы будем, впрочем, следовать нескольким сценариям. Мы начнем с определения бина в faces-config.xml. После этого используем инструмент стремительного определения для создания класса бина.
В конце упражнения файл faces-config.xml должен содержать следующее:

  <?xml version='1.0' encoding='UTF-8'?>

  <faces-config xmlns="http://java.sun.com/xml/ns/javaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
              version="2.0">
    <managed-bean>
      <managed-bean-name>converterBean</managed-bean-name>
      <managed-bean-class>ConverterBean</managed-bean-class>
      <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
    <navigation-rule>
      <from-view-id>/input_number.xhtml</from-view-id>
      <navigation-case>
        <from-outcome>result</from-outcome>
        <to-view-id>/result.xhtml</to-view-id>
      </navigation-case>
    </navigation-rule>
    <navigation-rule>
      <from-view-id>/result.xhtml</from-view-id>
      <navigation-case>
        <from-outcome>back</from-outcome>
        <to-view-id>/input_number.xhtml</to-view-id>
      </navigation-case>
    </navigation-rule>
  </faces-config>
  

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






В итоге, в каталоге src будет сделан файл ConverterBean.java, тот, что откроется в окне редактирования.

Редактирование класса ConverterBean

Теперь мы добавим одно поле (result) и сгенерируем способы установки и приобретения значений для него. Позже выполнения упражнения начальный код класса должен выглядеть дальнейшим образом:

public class ConverterBean {
    private String result;

    public String getResult() {
        return result;
    }

    public void setResult(String result) {
        this.result = result;
    }
}
  

1. Нажмите SHIFT ENTER для перехода на новую строку позже public class ConverterBean {. 
2. Добавьте следующее определение поля:

private String result;
  

3. Разместите курсор внутри определения result и нажмите сочетание клавиш ALT ENTER, в появившемся меню выберите Create getter and setter for ‘result’.

В итоге будут сгенерированы способы getResult() и setResult(). Теперь оба этих способы помечены, как неиспользуемые (серым).

Теперь мы позволим эту задачу добавлением ссылки на поле result на страницах input_number и result.

Добавление ссылки на поле бина в файле input_number.xhtml

Позже заключения этого упражнения файл input_number.xhtml должен выглядеть дальнейшим образом:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

<h:head>
    <title>JSF Demo</title>
</h:head>

<h:body>
    <h:outputText value="METERS TO INCHES CONVERSION"/><br/><br/>
    <h:form>
        <h:outputText value="Enter amount in meters (m):"/> 
        <h:inputText value="#{converterBean.result}" size="16"/><br/><br/>
        <h:commandButton action="result" value="Convert into inches"/>
    </h:form>
</h:body>

</html>
  

1. Переключитесь в редакторе на вкладку input_number.xhtml.
2. Добавьте value=”#{converterBean.result}” в тег <h:inputText>.

Аналогичным образом поменяйте значение value в файле result.xhtml.
Запустите приложение и проверьте его работу.

Добавление кода конвертации в класс ConverterBean

Измените код функции setResult дальнейшим образом:

public void setResult(String result) {
        double conversionFactor = 39.37;
        double metersToConvert = Double.parseDouble(result);
        double inches = conversionFactor*metersToConvert;
        String inchesString = Double.toString(inches);
        this.result = result   " m = "   inchesString   " inches";
    }
  

Запустите приложение и проверьте его работу.

Заключение разработки приложения

На заключительном этапе мы добавим код обработки исключений, а также два новых поля и ссылки на них на странице итога.
1. Добавьте код обработки исключений в способ setResult()

 public void setResult(String result) {
        double conversionFactor = 39.37;
        try {
            double metersToConvert = Double.parseDouble(result);
            double inches = conversionFactor*metersToConvert;
            String inchesString = Double.toString(inches);
            this.result = result   " m = "   inchesString   " inches";
        } catch (NumberFormatException e) {
            this.result = """   result   "" is not a number.";
            if (result.isEmpty()) this.result = "You forgot to specify the number of meters.";
        }
    } 
  

2. Добавьте код 2-х новых полей в класс ConverterBean. Первое поле (conversionSummary) применяется для показа первой линии страницы итога, в зависимости от итога конвертации (CONVERSION RESULT либо CONVERSION FAILED). Второе поле (buttonLabel) применяется для 2-х разных вариантов надписи на кнопке, в зависимости от итога (Convert another number, если конвертация удалась и Try once more в случае неудачи).
Код класса должен выглядеть дальнейшим образом:

public class ConverterBean {
    private String result;
    private String conversionSummary;
    private String buttonLabel;

    public String getResult() {
        return result;
    }

    public void setResult(String result) {
        double conversionFactor = 39.37;
        try {
            double metersToConvert = Double.parseDouble(result);
            double inches = conversionFactor*metersToConvert;
            String inchesString = Double.toString(inches);
            this.result = result   " m = "   inchesString   " inches";
            setConversionSummary("CONVERSION RESULT");
            setButtonLabel("Convert another number");
        } catch (NumberFormatException e) {
            this.result = """   result   "" is not a number.";
            if (result.isEmpty()) this.result = "You forgot to specify the number of meters.";
            setConversionSummary("CONVERSION FAILED");
            setButtonLabel("Try once more");
        }
    }

    public String getConversionSummary() {
        return conversionSummary;
    }

    public void setConversionSummary(String conversionSummary) {
        this.conversionSummary = conversionSummary;
    }

    public String getButtonLabel() {
        return buttonLabel;
    }

    public void setButtonLabel(String buttonLabel) {
        this.buttonLabel = buttonLabel;
    }
}
  

3. Добавьте ссылки на новые поля в файл result.xhtml.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

<h:head>
    <title>JSF Demo</title>
</h:head>

<h:body>
    <h:outputText value="#{converterBean.conversionSummary}"/><br/><br/>
    <h:outputText value="#{converterBean.result}"/><br/><br/>
    <h:form>
        <h:commandButton action="back" value="#{converterBean.buttonLabel}"/>
    </h:form>
</h:body>

</html>
  

Все. Наше приложение готово к работе.
Запустите и проверьте его работу.



Если тема будет увлекательна, то в дальнейшей статье мы разглядим взаимодействие с базами данных.

Источник: programmingmaster.ru

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB