Arquivo para categoria PrimeFaces

Criando um componente de popup no jsf 2.0 com primefaces para confirmação

Em pouco tempo usando JSF 2.0 gostei muito de um recurso que já havia com o facelets que é a composição de componentes, ou seja com os componentes do JSF você pode construir um outro componente de forma declarativa e simples.
Irei demonstrar abaixo um exemplo de tela de confirmação que tenho botões sendo renderizado conforme os parâmetros do novo componente.
Começamos colocando a seguinte estrutura no WebContent
estrutura

A seguinte estrutura WebContent– resources – comps é obrigatória para organização dos componentes, comps foi um nome que eu dei onde ficaria os componentes porém pode ser outro nome e conter outras pastas com outros componentes também.
Vamos ver agora o conteúdo do componente de confirmacao.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:cc="http://java.sun.com/jsf/composite"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.prime.com.tr/ui">

    <!-- INTERFACE -->
    <cc:interface>
        <cc:attribute name="mensagemDialog" required="true" />
        <cc:attribute name="widgetVar" required="true" />
        <cc:attribute name="simTitulo" required="true" />
        <cc:attribute name="naoTitulo" required="true" />
        <cc:attribute name="simUpdate" required="true" />
        <cc:attribute name="simOnClick" />
        <cc:attribute name="naoOnClick" />
        <cc:attribute name="naoUpdate" />
        <cc:attribute name="scriptOnComplete" />
        <cc:attribute name="simAction"
            method-signature="java.lang.String action()" />
        <cc:attribute name="naoAction"
            method-signature="java.lang.String action()" />
        <cc:attribute name="notAjaxSim" required="false" />
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        <p:confirmDialog modal="true" header="#{cc.attrs.mensagemDialog}"
            message="#{cc.attrs.mensagemDialog}"
            widgetVar="#{cc.attrs.widgetVar}">
            <h:panelGrid columns="2">
                <p:commandButton style="float:left" value="#{cc.attrs.simTitulo}"
                    action="#{cc.attrs.simAction}" update="#{cc.attrs.simUpdate}"
                    rendered="#{not empty cc.attrs.simUpdate}"
                    title="#{cc.attrs.simTitulo}"
                    oncomplete="#{cc.attrs.widgetVar}.hide();#{cc.attrs.scriptOnComplete}"
                    onclick="#{cc.attrs.simOnClick}" ajax="#{!cc.attrs.notAjaxSim}"/>
                <p:commandButton style="float:left" value="#{cc.attrs.simTitulo}"
                    action="#{cc.attrs.simAction}" title="#{cc.attrs.simTitulo}"
                    rendered="#{empty cc.attrs.simUpdate}"
                    onclick="#{cc.attrs.simOnClick}"
                    oncomplete="#{cc.attrs.widgetVar}.hide();#{cc.attrs.scriptOnComplete}" />
                <p:commandButton style="float:right" value="#{cc.attrs.naoTitulo}"
                    rendered="#{not empty cc.attrs.naoUpdate}"
                    title="#{cc.attrs.naoTitulo}" action="#{cc.attrs.naoAction}"
                    update="#{cc.attrs.naoUpdate}" onclick="#{cc.attrs.naoOnClick}"
                    oncomplete="#{cc.attrs.widgetVar}.hide();#{cc.attrs.scriptOnComplete}" />
                <p:commandButton style="float:right" value="#{cc.attrs.naoTitulo}"
                    rendered="#{empty cc.attrs.naoUpdate}"
                    onclick="#{cc.attrs.naoOnClick}" action="#{cc.attrs.naoAction}"
                    title="#{cc.attrs.naoTitulo}"
                    oncomplete="#{cc.attrs.widgetVar}.hide();#{cc.attrs.scriptOnComplete}" />
            </h:panelGrid>
        </p:confirmDialog>
    </cc:implementation>
</ui:composition>

Começamos a declarar nosso componente com <ui:composition> e suas referencias para podermos utilizar na implementação do componente.

Com o <cc:interface> declaramos os atributos que nosso componente terá para ser utilizado na implementação do componente neste lugar indicamos se o atributo será um método,bean ou requerido. No nosso componente teremos vários atributos mais não vou detelhar o que eles fazem porque não é o foco do post.

Na tag <cc:implementation> será o coração do nosso componente aqui, serão colocados os outros componentes que formaram o novo componente para utilizarmos em nossas páginas para o reaproveitamento de código.

Para referenciarmos nosso atributos declarados na interface usamos o #{cc.attrs}, assim conseguimos obter o valor dos atributos. É importante dizer também que os componentes são precedidos de um id gerado automaticamente pelo jsf, que nada mais é que o id do novo componente, mais é possivel também determinar como vai ser esse id.

Agora como utilizar este componente, primeiramente temos que declarar este componente no cabeçalho para utilizarmos veja como é simples:

xmlns:comps="http://java.sun.com/jsf/composite/comps"

Agora veja como declarar o componente para utilização;

<comps:confirmacao
                    mensagemDialog="#{mes['ged.cidades.municipio.msgSalva']}"
                    widgetVar="confirmCid" simTitulo="#{mes.sim}"
                    naoTitulo="#{mes.nao}" simAction="#{cidadeMBean.salvar}"
                    simUpdate="grow,fieldCidade" scriptOnComplete="popCidades.hide()" />

Neste caso que exemplifiquei de como declarar o componente não coloquei o id assim ele irá gerar automaticamente mas eu poderia ter colocado id=”confirma” para não ser gerado automaticamente.Veja a imagem dela sendo executada:

salvando cidade

Agora onde você for utilizar alguma confirmação é só reutilizar o componente, assim economizando tempo e código.

Simples não, é isso ai bons códigos pessoal

Referências

http://www.primefaces.org/

, ,

10 Comentários

%d blogueiros gostam disto: