Contas Pagar/Receber - Parte V - Configuração Dashboard

Introdução

Nesse quinto post vou mostrar como configurar o dashboard na página de bem vindo.

Dashboard

O dashboard é um componente para dar informações resumidas de uma determinada lógica, por exemplo, a quantidade de bancos cadastrados, centro custos, etc. O Componente dashboard contém card's que possuem ícones, segue o print atual do dashboard de exemplo gerado:

Segue a códificação desse primeiro card dentro da pagina:

<e:dashboardUnity icon="pe-7s-id fa-5x"
              classMinHeight="h100"
              title="Titulo 1"
              labelButtonLink="#{e:bundle('label.acessar')}"
              link="../login/bemVindo.jsf"
              descriptionLink="#{e:bundle('message.acessarPagina')}"/>

Na codificação acima temos a definição do primeiro card no dashboard. Vou alterar esse primeiro card para colocar a quantidade de bancos, alterando também o ícone e o link:

<e:dashboardUnity icon="fa fa-bank fa-5x"
                  classMinHeight="h100"
                  title="#{bemVindoAction.quantidadeBancos}"
                  labelButtonLink="#{e:bundle('label.acessar')}"
                  link="../banco/bancoList.jsf"
                  descriptionLink="#{e:bundle('message.acessarPagina')}"/>

Segue a implementação do #{bemVindoAction.quantidadeBancos} na action:

@JArchViewScoped
public class BemVindoAction implements Serializable {

    @Inject
    private BancoFacade bancoFacade;

    public String getQuantidadeBancos() {
        return BundleUtils.messageBundle("label.bancos") + " " + bancoFacade.count();
    }
}

E adicionado a referência label.bancos no bundle_pt_BR.properties:

label.siglaEmpresa=SGE
label.nomeEmpresa=Nome Empresa
label.siglaSistema=GCPR
message.descricaoSistema=Contas a Pagar e Receber
label.cadastro1=Cadastro 1
label.lancamento1=Lan\u00E7amento 1
label.relatorio1=Relat\u00F3rio 1
label.banco=Banco
label.codigo=C\u00f3digo
label.nome=Nome
label.centroCusto=Centro Custo
label.descricao=Descri\u00E7\u00E3o
label.categoria=Categoria
label.pessoa=Pessoa
label.rgIm=RG/IM
label.cpfCnpj=CPF/CNPJ
label.bancos=Banco(s)

O resultado será o novo card conforme configurado anteriormente:

Vou implementar agora para os demais CRUD's Centro Custo, Categoria e Pessoa bemVindo.xhtml:

<e:dashboardUnity icon="fa fa-balance-scale fa-5x"
                  classMinHeight="h100"
                  title="#{bemVindoAction.quantidadeCentroCustos}"
                  labelButtonLink="#{e:bundle('label.acessar')}"
                  link="../centrocusto/centroCustoList.jsf"
                  descriptionLink="#{e:bundle('message.acessarPagina')}"/>

<e:dashboardUnity icon="fa fa-object-group fa-5x"
                  classMinHeight="h100"
                  title="#{bemVindoAction.quantidadeCategorias}"
                  labelButtonLink="#{e:bundle('label.acessar')}"
                  link="../categoria/categoriaList.jsf"
                  descriptionLink="#{e:bundle('message.acessarPagina')}"/>

<e:dashboardUnity icon="fa fa-male fa-5x"
                  classMinHeight="h100"
                  title="#{bemVindoAction.quantidadePessoas}"
                  labelButtonLink="#{e:bundle('label.acessar')}"
                  link="../pessoa/pessoaList.jsf"
                  descriptionLink="#{e:bundle('message.acessarPagina')}"/>

Agora a implementação no BemVindoAction.java:

@JArchViewScoped
public class BemVindoAction implements Serializable {

    @Inject
    private BancoFacade bancoFacade;

    @Inject
    private CentroCustoFacade centroCustoFacade;

    @Inject
    private CategoriaFacade categoriaFacade;

    @Inject
    private PessoaFacade pessoaFacade;

    public String getQuantidadeBancos() {
        return BundleUtils.messageBundle("label.bancos") + " " + bancoFacade.count();
    }

    public String getQuantidadeCentroCustos() {
        return BundleUtils.messageBundle("label.centroCustos") + " " + centroCustoFacade.count();
    }

    public String getQuantidadeCategorias() {
        return BundleUtils.messageBundle("label.categorias") + " " + categoriaFacade.count();
    }

    public String getQuantidadePessoas() {
        return BundleUtils.messageBundle("label.pessoas") + " " + pessoaFacade.count();
    }
}

E para finalizar as declarações das chaves no bundle_pt_BR.properties:

label.bancos=Banco(s)
label.centroCustos=Centro Custo(s)
label.categorias=Categoria(s)
label.pessoas=Pessoa(s)

E o resultado final do dashboard ficou:

E pra fechar com chave de ouro essa implementação do Dashboard vou mudar a estilização do "Bem Vindo" e "Contas a Pagar e Receber". Vou ajustar o tamanho da fonte e a cor. Para isso preciso definir um seletor CSS. Vou inspecionar o html gerado pelo navegador:

 

Com essa inspeção consigo identificar que o Bem Vindo é um elemento <h2> dentro de uma <div>, que também está dentro de outra <div>, que por sua vez está dentro de outra <div> com a classe css jarch__dashboard-conteiner. O Contas a Pagar e Rebecer é um <p> que está junto com o <h2>. Sendo assim vou criar o arquivo bemVindo.css dentro de contas-web/src/main/webapp/resources/css e definir o seletor CSS alterando os atributos cor e tamanho. Segue o print com exemplo:

bemVindo.css

div.jarch__dashboard-conteiner > div > div > h2 {
    font-weight: bold;
    color: #8B4513;
}

div.jarch__dashboard-conteiner > div > div > p {
    font-size: 2.5em;
    font-weight: bold;
    color: #5F83B9;
}

Agora preciso somente fazer essa referência dentro do meu bemVindo.xhtml. Para isso basta adicionar o seguinte trecho de código <ui:define name="afterCss">, conforme print abaixo:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:e="http://jarch.com.br/ui/extension" xmlns:h="http://java.sun.com/jsf/html">

<ui:composition template="/paginas/templates/templatePrincipalV2.xhtml">

    <ui:define name="afterCss">
        <h:outputStylesheet name="bemVindo.css" library="css"/>
    </ui:define>

    <ui:define name="panelBodyTemplatePrincipal">

Agora nossa página de bem vindo ficou com a seguinte aparência:

Dentro da pasta css existe um arquivo com nome de local.css. Esse arquivo deve ser usado para criar regras CSS para ser aplicado em todas as páginas. O template do JARCH está configurado para referenciar esse arquivo em todas páginas que herdam de seu template. Então sempre que existir uma necessidade de estilização geral utiliza-se o arquivo local.css, para uma estilização em uma página específica se cria um arquivo CSS com o mesmo nome da página e faz a referência desse arquivo na própria página.

Conclusão

Nesse post vimos como podemos customizar o dashboard da aplicação, com pequenas alterações tornamos nosso dashboard funcional e com dados reais da nossa aplicação. Foi mostrado também como fazer estilização personalizada no componente Dashboard, essa forma de estilização pode ser usada para qualquer tipo de componente ou página, bastando somente definir o seletor CSS corretamente. 

Segue o link dessa da video aula desse post: https://youtu.be/pp_hZw2EYRA

Até mais,