Знакомство с JavaServer Faces (JSF) 2

[volkodavav]

Хотел бы познакомить читателей с технологией JSF 2. В данной статье я постараюсь провести обзор возможностей JSF 2, которыми обладает данная технология, а также ее сравнение со стандартными технологиями JSP и servlet.
Вступление

JSF 2 является Java стандартом (JSR 314), реализацией которого занимаются Oracle Mojarra и Apache MyFaces. JSF 2 предоставляет разработчику большое количество новых возможностей, таких как стандартный механизм поддержки AJAX, проверку входных данных с помощью аннотаций, библиотеку facelets, как стандартный движок для шаблонизации страниц, множество готовых компонентов. Все это можно свободно использовать при построении web приложений любой сложности.

Из наиболее известных third-party JSF компонентов, хотелось бы отметить PrimeFaces, ICEfaces, RichFaces, PrettyFaces, OpenFaces. Хотя JSF 2 по своей сути является компонентно ориентированной платформой, однако с её помощью можно писать и MVC ориентированные приложения. При этом модель (Model) - это коллекция классов, которые служат для сохранения, изменения и получения данных; представление (View) - это jsf страница в xhtml формате; поведение (Controller) - это managed bean, который интерпретирует данные, введённые пользователем, и информирует модель о необходимости соответствующей реакции. JSF также хорошо интегрируется со Spring.
JSF 2 компоненты:

Сравнение JSF 2 с MVC (servlet + jsp)
Преимущества JSF 2 по сравнению с MVC (servlet + jsp):

• JSF обеспечивает программиста хорошим набором API, что даёт возможность создавать свои компоненты. Также можно воспользоваться уже готовыми компонентами, такими как: PrimeFaces, ICEfaces, RichFaces, PrettyFaces, OpenFaces и др.
• С помощью JSF легко указать, с помощью какого Java кода будет обрабатываться форма.
• В JSP мы можем использовать property="*" c jsp:setProperty тегом, чтоб автоматически наполнить bean отправленными в форме параметрами. JSF расширяет это свойство, а также добавляет возможность валидировать/конвертировать значения.
• JSF дает вам возможность без использования JavaScript, а также AJAX ориентированных фреймворков, таких, как Jquery, EXT-JS, Prototype и др. писать AJAX ориентированное приложение, используя простые в использовании компоненты JSF.
• JSF имеет встроенную возможность валидировать поля форм, конвертировать string поля ко многим другим типам данных. Если валидация/конвертация прошла с ошибкой, форма может быть автоматически показана с ошибкой вместе с предыдущими установленными значениями. Валидация/конвертация проходит на серверной стороне.
• Хотя у JSP есть jsp:include тег для вставки контента, однако JSF имеет полноценную поддержку системы шаблонизации страниц, которая позволяет создавать макет страницы, либо ее часть для дальнейшего использования.
• Централизованная файловая конфигурации JSF, что позволяет вместо жесткого кодирования данных в программе Java выносить ее в конфигурационный файл. Что позволяет без редактирования Java кода и перекомпиляции изменить эти данные.
• В JSF также можно использовать MVC подход.
• Быстрая и легкая разработка со старта.

Недостатки JSF 2 по сравнению с MVC (servlet + jsp):

• Если у вас уже есть приложение, которое написано на servlet + jsp, и у вас есть необходимость сделать в нем некоторый AJAX функционал, то гораздо проще использовать, например, Jquery (если вы знаете JavaScript), чем перевести это приложение на JSF.
• По сравнению с JSP и servlet на JSF написано заметно меньше документации.
• У JSF приложения есть много моментов, которые тяжело отследить, понять и оптимизировать, например генерация html/css/javascript кода выбранным компонентом, и др.
• Существует большое количество IDE, которые поддерживают стандартный JSP и servlet, однако JSF 2 начали поддерживать недавно, так как это достаточно новая технология. Последний на данный момент релиз JSF 2 был выпущен 2009-06-28.
• Поддержка REST находится на стадии разработки. Посмотреть спецификацию можно тут.

На мой взгляд, JSF 2 лучше использовать:

• Когда проект только начался.
• Вам необходимо использовать отправку данных на сервер, при этом использовать серверную валидацию/конвертацию.
• AJAX.
• Богатый выбор готовых компонентов (PrimeFaces, ICEfaces, RichFaces, PrettyFaces, OpenFaces и др).
• Вы не хотите писать много JavaScript кода.

Сравнение JSF 2 с JSF 1.2
Новые возможности JSF 2 по сравнению с JSF 1.2:

• Библиотека facelets и View Declaration Language.
• Composite Components.
• Ajax.
• Частичное сохранение состояния (State Saving).
• System Events.
• Улучшенная навигация.
• Поддержка GET.
• View Scope.
• Flash Scope.
• Custom Scopes.
• Аннотации над Managed Bean.
• Аннотации над компонентами.

Пример приложения на JSF 2
Описание приложения:

• Функциональность.
  • Ввеcти идентификатор клиента.
  • Показать имя, фамилию, и баланс банковского счета клиента с указанным ID.
  • Показать сообщение об ошибке, если ID не существует.
• Цели.
  • Не перегружая страницы показать результат действия.
  • Использование стандартных JSF компонентов без применения JavaScript.
• Подход.
  • Использование JSF 2 тега.

POJO класс:

1. 
   public class BankCustomer implements Serializable
2. 
   {
3. 
       private static final long serialVersionUID = -7049641989661118136L;
4. 
       private int id;
5. 
       private String firstName, lastName, password;
6. 
       private double balance;
7. 
      
8. 
       // Getters/Setters for instance variables
9. 
       ...
10. 
    }

DAO класс - модель (Model) в MVC:

1. 
   public class BankCustomerLookup implements Serializable
2. 
   {
3. 
       private static final long serialVersionUID = -6263276550285838301L;
4. 
       private static int serial;
5. 
       private static Map<Integer, BankCustomer> customers;
6. 
      
7. 
       static
8. 
       {
9. 
           // Populate map with some sample customers
10. 
        }
11. 
       
12. 
        public static BankCustomer getCustomer(Integer id)
13. 
        {
14. 
            return customers.get(id);
15. 
        }
16. 
       
17. 
        ...
18. 
    }

Managed bean класс - поведение (Controller) в MVC:

1. 
   @ManagedBean(name = "bankingBeanAjax")
2. 
   @SessionScoped
3. 
   public class BankingBeanAjax implements Serializable
4. 
   {
5. 
       private static final long serialVersionUID = -4168278299644178280L;
6. 
       private String message;
7. 
       private Integer customerId;
8. 
       private String password;
9. 
       private String tooltip;
10. 
       
11. 
        public void showBalance(ActionEvent actionEvent)
12. 
        {
13. 
            BankCustomer customer = BankCustomerLookup.getCustomer(customerId);
14. 
           
15. 
            if (customer == null)
16. 
            {
17. 
                message = "Unknown customer";
18. 
            }
19. 
            else if (!customer.getPassword().equals(password))
20. 
            {
21. 
                message = "Incorrect password";
22. 
            }
23. 
            else
24. 
            {
25. 
                message = String.format("Balance for %s %s is $%,.2f",
26. 
                customer.getFirstName(), customer.getLastName(),
27. 
                customer.getBalance());
28. 
            }
29. 
        }
30. 
       
31. 
        // Getters/Setters for instance variables
32. 
        ...
33. 
    }

JSF страница - представление (View) в MVC:

1. 
   ...
2. 
   >
3. 
   Customer ID: value="#{bankingBeanAjax.customerId}"
4. 
           required="true"
5. 
           requiredMessage="You did not specify an id. (The id parameter is missing)"
6. 
           converterMessage="Invalid id. (The id parameter is not a number)"
7. 
           validatorMessage="Invalid id. (The id parameter is not a positive number)">
8. 
           minimum="0" />
9. 
       >
10. 
    
    />
11. 
       
12. 
    Password: value="#{bankingBeanAjax.password}" />
13. 
    
    />
14. 
        value="Show Current Balance"
15. 
            actionListener="#{bankingBeanAjax.showBalance}">
16. 
            execute="@form" render="ajaxMessage :applicationMessages" />
17. 
        >
18. 
    
    />
19. 
     
20. 
        >
21. 
            id="ajaxMessage" value="#{bankingBeanAjax.message}" />
22. 
        >
23. 
    >
24. 
    
    />
25. 
    id="applicationMessages" style="color: red;" />
26. 
    ...

Схематично работу этого приложения можно показать следующим образом:


Вариант с использованием JSP + servlet будет выглядеть так:

Итоги

Кому интересна данная технология, тому я рекомендую посмотреть проект Scrum Toys.
График сравнения спроса по технологиям jsf, struts, spring mvc, gwt:


Рабочий demo проект, который я описывал в данной статье, можно скачать здесь.
Для запуска проекта в системе обязательно должен быть установлен maven. Проект запускается с помощью команды: 'mvn jetty:run'. После запуска проекта его можно посмотреть, перейдя по адресу: 'http://localhost:8080/bank-example/'.
В целом же, забигая вперед, библиотеки jsf-api.jar и jsf-impl.jar нужны, если вы используйте контейнер Tomcat 6/7. Если же вы используйте сервер Java EE 6(например Glassfish 3, JBoss 6, WebLogic 11g ...), то он уже имеет встроенную поддержку JSF 2.0.

Также к статье я приложил небольший JSF 2 Reference Card, который можно скачать здесь.

Благодарю за внимание. Литература

1. http://balusc.blogspot.com/
2. http://www.laliluna.de/articles/jsf-2-evaluation-test.html
3. http://www.mkyong.com/tutorials/jsf-2-0-tutorials/
4. http://www.coreservlets.com/JSF-Tutorial/jsf2/
5. http://andyschwartz.wordpress.com/2009/07/31/whats-new-in-jsf-2/