sexta-feira, 13 de dezembro de 2019

JSF - Java Server Faces


JSF

Usado para trabalhar com MenagedBean, templates, EL / JSTL, MVC.


@ManagedBean - Escopos

@NoneScoped

O bean será instanciado a cada vez que for referenciado.

@RequestScoped

É o padrão, tem vida curta, começando quando é referenciado em uma única requisição HTTP e terminando quando a resposta é enviada de volta ao cliente.

@ViewScoped

A instância permanece ativa até que o usuário navegue para uma próxima página.

@SessionScoped

Mantém a instância durante diversas requisições e até mesmo navegações entre páginas, até que a sessão do usuário seja invalidada ou o tempo limite é atingido. Cada usuário possui sua sessão de navegação, portanto, os objetos não são compartilhados entre os usuários.

@ApplicationScoped

Mantém a instância durante todo o tempo de execução da aplicação. É um escopo que compartilha os
objetos para todos os usuários do sistema.

Ciclo de vida dos componentes do JSF


Restaurar visão
Aplicar valores de requisição
Processar validações
Atualizar os valores do modelo
Invocar a aplicação
Renderizar a resposta

Arquivo de configuração: faces-config.xml
Local do arquivo: src/main/webapp/WEB-INF


Bibliotecas de componentes de interface

Ao criar uma página xhtml, usamos o cabeçalho abaixo para definir as bibliotecas do JSF que iremos
utilizar.
Core: (:f) suporte às outras bibliotecas, não possui componentes visuais.
HTML: (:h) formulários.
Facelets: (:ui) para criação de templates de páginas.
Composite: (:composite) usada para criar componentes customizados.

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:f="http://xmlns.jcp.org/jsf/core"
   xmlns:h="http://xmlns.jcp.org/jsf/html"   xmlns:ui="http://xmlns.jcp.org/jsf/facelets"   xmlns:composite="http://xmlns.jcp.org/jsf/composite">

Layout

O JSF permite que você trabalhe com um layout para não ficar repetindo códigos de cabeçalho e rodapé em todas as páginas.
Devemos criar um arquivo layout.xhtml na pasta: “webapp/WEB-INF/template” do projeto.

Exemplo de arquivo de layout:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<!-- Utilize a “ui” dentro do “<title>” para alterar o título da janela. -->
<title><ui:insert name="titulo">Login</ui:insert></title>
<!-- Utilize a “ui” dentro do “<head>” para adicionar arquivos e scripts. -->
<ui:insert name="head"></ui:insert>
</h:head>
<h:body>
<header>
<h:graphicImage library="images" name="fcm.png" />
</header>
<div id="conteudo">
<!-- Utilize a “ui” dentro da “<div>” para inserir o conteudo da página. -->
<ui:insert name="conteudo"></ui:insert>
</div>
<footer>
<hr />
Login - Developed by .:: Fer Cos Mig ::.
</footer>
</h:body>
</html>



Exemplo de utilização do layout:

<!DOCTYPE html>
<ui:composition template="/WEB-INF/template/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:define name="titulo">Login - Daily</ui:define>
<ui:define name="head">
<h:outputStylesheet library="css" name="estilos.css" />
<h:outputScript library="js" name="scripts.js" target="head" />
</ui:define>
<ui:define name="conteudo">
<h:form id="frmLogin">
<h:panelGrid columns="2">
<f:facet name="header">
<h:outputText value="Formulário de login" />
</f:facet>
<h:outputLabel value="Nome de usuário: " for="username" />
<h:inputText id="username" />
<h:outputLabel value="Senha do usuário: " for="password" />
<h:inputSecret id="password" />
<h:outputLabel />
<h:commandButton id="btnEnviar" value="Enviar"/>
</h:panelGrid>
<h:messages />
</h:form>
</ui:define>
</ui:composition>

Repositorio de arquivos / library

Usando JSF você pode criar um repositório de arquivos, para isso, crie dentro da pasta “webapp” uma pasta chamada “resources”, dentro da pasta resources você pode criar pastas para imagens, css, javascript, etc... 
Exemplo de utilização, imagine que temos tres pastas, uma images, uma css e uma js, podemos usar da
seguinte forma:

<h:outputStylesheet library="css" name="estilos.css" />
<h:outputScript library="js" name="scripts.js" target="head" />
<h:graphicImage library="images" name="fcm.png" />

Backing bean

Criar os objetos do HTML no Bean como atributos, inclusive com getters e setters para que pelo java você possa alterar as propriedades do objeto:

private HtmlInputText inputNome;
private HtmlCommandButton botaoAdicionar;


Adicionar propriedade binding:
<h:inputText value="#{nomesBean.nome}" binding="#{nomesBean.inputNome}" />

Nenhum comentário:

Postar um comentário