Учебник по JSF для начинающих

Добро пожаловать в учебник по JSF для начинающих. Технология Java Server Faces (JSF) представляет собой фреймворк фронтенда, который упрощает создание компонентов пользовательского интерфейса путем повторного использования этих компонентов. JSF разработан на основе шаблона Model View Controller (MVC), который разделяет представление, контроллер и бизнес-логику.

Учебник по JSF для начинающих

В шаблоне Model View Controller модель содержит бизнес-логику, необходимую для выполнения бизнес-сценария, представление представляет собой слой представления, такой как JSP или JSF-страницы, а контроллер представляет собой процесс обработки управления моделью/представлением в зависимости от запрошенной операции. JSF предоставляет следующие компоненты для создания пользовательского интерфейса:

  • Стандартные базовые элементы ввода, такие как поля, кнопки и т. д., которые формируют набор базовых компонентов пользовательского интерфейса.
  • Возможность отображения JSF в зависимости от клиентских спецификаций
  • Основная библиотека
  • Расширение доступных компонентов пользовательского интерфейса для добавления дополнительных компонентов и использования их для выполнения требований клиента.

Учебник по JSF для начинающих – Настройка среды

Здесь мы рассмотрим все необходимые шаги для настройки вашего компьютера для создания первого приложения JSF.

Установка JDK

Загрузите JDK с веб-сайта Oracle по следующей ссылке: https://www.oracle.com/technetwork/java/javase/downloads/index.html Установите переменную среды JAVA_HOME, указывающую на путь к каталогу bin установленного JDK. Например, “C:\Program Files\Java\jdk1.7.0_60”. Также добавьте JAVA_HOME\bin в переменную PATH, чтобы можно было легко найти исполняемые файлы Java. Теперь проверьте успешность установки Java на компьютере, введя javac в окне команд, что должно отобразить все доступные опции, или “java -version”, чтобы показать версию установленной Java. Дополнительные сведения можно найти в следующей публикации: Как установить Java на Windows

Установка среды разработки (IDE)

Некоторые из популярных сред разработки, которые доступны, включают Eclipse, NetBeans и IntelliJ IDEA. Скачайте Eclipse по следующей ссылке https://www.eclipse.org/downloads/, запустите скачанный исполняемый файл и установите Eclipse на ваш компьютер. Для NetBeans загрузите NetBeans IDE по ссылке https://netbeans.org/downloads/ и завершите установку.

Установка Apache Tomcat

Скачайте Tomcat по следующей ссылке https://tomcat.apache.org/. Запустите скачанный исполняемый файл и установите переменную CATALINA_HOME, указав путь установки. Теперь запустите сервер и перейдите по адресу https://localhost:8080 в вашем любимом браузере, чтобы увидеть страницу Tomcat, если установка прошла успешно. Настройка основы готова, переходим к созданию нашего первого приложения на JSF.

Учебник по JSF для начинающих – Приложение Hello World

Теперь давайте создадим простое веб-приложение hello world с использованием JSF. Скачайте следующие библиотеки, которые необходимы для выполнения кода, связанного с JSF. Их можно скачать из центрального репозитория Maven https://search.maven.org/. Более понятным способом управления зависимостями является использование системы сборки, такой как Maven. Для всех наших примеров мы будем использовать Maven. Пожалуйста, обратитесь к pom.xml для зависимостей. jsf-api-1.2.jar jsf-impl-2.2.8-04.jar pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.journaldev.jsf</groupId>
    <artifactId>JSF_HelloWorld</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>JSF_HelloWorld</name>

    <properties>
        <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-api</artifactId>
            <version>2.1.13</version>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-impl</artifactId>
            <version>2.1.13</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                    <compilerArguments>
                        <endorseddirs>${endorsed.dir}</endorseddirs>
                    </compilerArguments>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.3</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>2.6</version>
                <executions>
                    <execution>
                        <phase>validate</phase>
                        <goals>
                            <goal>copy</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${endorsed.dir}</outputDirectory>
                            <silent>true</silent>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>javax</groupId>
                                    <artifactId>javaee-endorsed-api</artifactId>
                                    <version>7.0</version>
                                    <type>jar</type>
                                </artifactItem>
                            </artifactItems>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

Учебник по JSF для начинающих – Создание управляемого бина

A managed bean is a java class registered to JSF which makes interaction between the UI and the business logic possible. Create a managed bean named HelloWorld.java using @ManagedBean annotation as

package com.journaldev.jsf.helloworld;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


@ManagedBean(name="helloWorld")
@SessionScoped
public class HelloWorld implements Serializable{
    
    private static final long serialVersionUID = -6913972022251814607L;
	
    private String s1 = "Hello World!!";

    public String getS1() {
        System.out.println(s1);
        return s1;
    }

    public void setS1(String s1) {
        this.s1 = s1;
    }
  
}

Аннотация @ManagedBean указывает, что класс HelloWorld является управляемым бином. Бин @SessionScoped указывает, что бин существует до тех пор, пока действителен HttpSession. Здесь объявляется строка s1 и инициализируется значением “Hello World”, а также определяются методы getter и setter для получения значения строки s1. Можно также указать имя бина, например, @ManagedBean(name="helloWorld"). Если имя не указано, оно определяется в соответствии с правилами именования в Java. Хорошей практикой является всегда указывать имя бина.

Руководство по JSF для начинающих – Страница просмотра

Теперь создайте страницу JSF с именем helloWorld.xhtml, которая взаимодействует с бином HelloWorld и получает значение с помощью метода getter, а затем выводит его на странице ответа. helloWorld.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Hello World JSF Example</title>
</h:head>
<h:body>
       #{helloWorld.s1}
<br /><br />

</h:body>
</html>

Здесь мы вызываем имя бина, за которым следует объявленная в бине строковая переменная “helloWorld.s1”, которая извлекает значение “Hello World”.

Конфигурация дескриптора развертывания

Финальная часть заключается в настройке класса контроллера JSF для обработки запросов клиента. Сервлет контроллера JSF называется FacesServlet, конечная конфигурация web.xml приведена ниже. web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="https://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<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>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
            30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/helloWorld.xhtml</welcome-file>
</welcome-file-list>
</web-app>

Финальная структура проекта “Hello world” JSF будет выглядеть так в Eclipse. В файле web.xml мы указываем запись файла конфигурации faces вместе с сопоставлением сервлета для faces, временем сеанса и файлом приветствия, который загружается при запуске приложения. После выполнения этих изменений мы запустим приложение, которое выведет следующий результат в браузере. Это все для учебника по JSF для начинающих. В следующих сообщениях мы рассмотрим различные компоненты страниц JSF. В это время вы можете загрузить проект по следующей ссылке и поиграть с ним, чтобы узнать больше.

Скачать проект “Hello World” JSF

Source:
https://www.digitalocean.com/community/tutorials/jsf-tutorial-for-beginners