Tutorial JSF para Iniciantes

Tutoriais

JSF

Bem-vindo ao Tutorial JSF para Iniciantes. A tecnologia Java Server Faces (JSF) é um framework de front end que facilita a criação de componentes de interface do usuário, reutilizando os componentes de IU. O JSF é projetado com base no padrão Model View Controller (MVC), que separa a apresentação, o controlador e a lógica de negócios.

Tutorial JSF para Iniciantes

No padrão Model View Controller, o modelo contém a lógica de negócios necessária para realizar o cenário de negócios, a visualização representa a camada de apresentação, como as páginas JSP ou JSF, e o controlador representa o processo de manipulação do controle para o modelo/visualização, dependendo da operação solicitada. O JSF fornece os seguintes componentes para criar uma interface do usuário:

Elementos de entrada básicos padrão, como campos, botões, etc., que formam o conjunto de componentes básicos da IU.
Capacidade de renderização do JSF, dependendo das especificações do cliente
Biblioteca principal
Extensão de componentes de IU disponíveis para adicionar mais componentes e usá-los para atender aos requisitos do cliente.

Tutorial JSF para Iniciantes – Configuração do Ambiente

Aqui vamos passar por todos os passos necessários para configurar o seu computador para criar a primeira aplicação JSF.

Instalação do JDK

Faça o download do JDK no seguinte site da Oracle https://www.oracle.com/technetwork/java/javase/downloads/index.html Configure a variável de ambiente JAVA_HOME apontando para o caminho bin do JDK instalado. Por exemplo, “C:\Program Files\Java\jdk1.7.0_60”. Adicione também JAVA_HOME\bin à variável PATH para localizar os binários do Java. Agora verifique se o Java foi instalado com sucesso na máquina digitando javac no prompt de comando, o que deve exibir todas as opções disponíveis, ou “java -version”, que deve mostrar a versão do Java instalada na máquina. Para mais detalhes, você pode consultar o seguinte post: Como instalar o Java no Windows

Instalação do IDE

Alguns dos IDEs populares disponíveis incluem Eclipse, NetBeans e IntelliJ IDEA. Baixe o Eclipse no seguinte link https://www.eclipse.org/downloads/ e execute o arquivo binário baixado e instale o Eclipse em sua máquina. Para o NetBeans, baixe o NetBeans IDE em https://netbeans.org/downloads/ e conclua a instalação.

Instalação do Apache Tomcat

Baixe o Tomcat no seguinte link https://tomcat.apache.org/. Execute o arquivo binário baixado e defina a variável CATALINA_HOME para apontar para o caminho de instalação. Agora inicie o servidor e vá para https://localhost:8080 em seu navegador favorito, que exibirá a página padrão do tomcat se instalado com sucesso. Nossa configuração básica está pronta, vamos avançar para a criação de nossa primeira aplicação JSF.

Tutorial JSF para Iniciantes – Aplicação Olá Mundo

Vamos agora criar uma simples aplicação web JSF olá mundo. Baixe os seguintes arquivos JAR que são essenciais para executar o código relacionado ao JSF. Eles podem ser baixados do repositório central do Maven https://search.maven.org/. Uma maneira mais clara de gerenciar as dependências é usando um sistema de construção como o Maven. Para todos os nossos exemplos, estaremos usando o Maven. Consulte o arquivo pom.xml para as dependências. 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>

Tutorial JSF para Iniciantes – Criar um Bean Gerenciado

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;
    }
  
}

A anotação @ManagedBean indica que a classe HelloWorld é um bean gerenciado. O bean @SessionScoped indica que o bean está vivo até que o HttpSession seja válido. Aqui, uma string s1 é declarada e inicializada com “Hello World” e os métodos getter e setter são definidos para recuperar o valor da string s1. Também podemos fornecer o nome do bean, como @ManagedBean(name="helloWorld"). Se nenhum nome for fornecido, ele é derivado de acordo com os padrões de nomenclatura do Java. A prática recomendada é sempre fornecer o nome do bean.

Tutorial JSF para Iniciantes – Página de Visualização

Agora crie uma página JSF chamada helloWorld.xhtml, que interage com o bean HelloWorld e recupera o valor por meio do método getter e o imprime na página de resposta. 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>

Aqui chamamos o nome do bean seguido da variável de string declarada no bean como “helloWorld.s1”, que busca o valor “Hello World”.

Configuração do Descritor de Implantação

A parte final é configurar a classe do controlador JSF para lidar com as solicitações do cliente. O servlet do controlador JSF é FacesServlet, e a configuração final do web.xml é fornecida abaixo. 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>

A estrutura final do projeto JSF Hello World agora ficará assim no Eclipse. No web.xml, especificamos a entrada do arquivo de configuração faces juntamente com o mapeamento do servlet para faces, o tempo limite da sessão e o arquivo de boas-vindas que é carregado ao iniciar a aplicação. Depois de concluirmos essas alterações, executaremos a aplicação, que imprimirá a seguinte saída no navegador. Isso é tudo para o tutorial JSF para iniciantes. Vamos explorar diferentes componentes de página JSF nos próximos posts. Enquanto isso, você pode baixar o projeto pelo link abaixo e brincar com ele para aprender mais.

Baixe o Projeto JSF Hello World

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