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 esses componentes. 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 visã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/visã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 interface do usuário.
Capacidade de renderização do JSF, dependendo das especificações do cliente
Biblioteca principal
Extensão de componentes de interface do usuário disponíveis para adicionar mais componentes e usá-los para atender aos requisitos do cliente.

Tutorial JSF para Iniciantes – Configuração do Ambiente

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

Instalação do JDK

Baixe o JDK do 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 no computador digitando javac na janela de comando, o que deve exibir todas as opções disponíveis, ou “java -version”, que deve mostrar a versão do Java instalada no computador. Para mais detalhes, você pode consultar o seguinte post: Como instalar o Java no Windows

Instalação da IDE

Algumas das 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, o que exibirá a página padrão do Tomcat se instalada 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 aplicação web JSF simples de olá mundo. Baixe os seguintes arquivos JAR que são essenciais para executar código relacionado ao JSF. Estes podem ser baixados do repositório central do Maven https://search.maven.org/. Uma forma mais clara de gerenciar dependências é usando um sistema de construção como o Maven. Para todos os nossos exemplos, estaremos usando o Maven. Consulte o 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 a HttpSession seja válida. 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 melhor prática é sempre fornecer o nome do bean.

JSF Tutorial for Beginners – Página de Visualização

Agora crie uma página JSF chamada helloWorld.xhtml que interaja com o bean HelloWorld e recupere o valor através do método getter e imprima o mesmo 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 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 de faces junto com o mapeamento do servlet para faces, tempo limite de 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 imprime a seguinte saída no navegador. Isso é tudo para o tutorial JSF para iniciantes. Vamos explorar diferentes componentes de página JSF nas próximas postagens. Enquanto isso, você pode baixar o projeto no link abaixo e brincar com ele para aprender mais.

Baixar Projeto JSF Hello World

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