A todo momento trabalhamos com Primefaces, mas agora vamos criar nosso próprios componentes em JSF.
O toolbar que nós usamos em todas as páginas, poderiamos usar um componente criado por nós mesmos.
No JSF por padrão, temos uma pasta com o nome resources para esses componentes. Dentro dela crie uma pasta com o nome imagens e coloque uma imagen com o nome logo_carro, e coloque esse código no template.xhtml:
<h:panelGrid columns="2">
<h:graphicImage library="imagens" name="logo-carro.png" width="100px"></h:graphicImage>
<h1>&Sistema Carros</h1>
</h:panelGrid>
Usando o graphicImage, o JSF é responsável por procurar a pasta e colocar o arquivo no seu site, sem ter que voltar ou avançar pastas.
Outra forma, é usando o próprio Netbeans, vamos selecionar a tag toolbarGroup toda da página gerenciar-carros, clicar com o botão direito e ir em refatorar e em criar componente, esse componente terá o nome toolbarCrud, a pasta ezcomp (dentro de resources), e o prefixo ez).
Observe que no lugar da tag está a chamada do nosso componente (ez:toolbarCrud) e a importação na tag principal do XHTML.
No caso, os actions no nosso toolbar serão alterados para funcionar em todas as páginas. Nos XHTML de todo o site, como o controle-tela, coloque a tag ez:toolbarCrud e a importação da mesma no código principal.
No toolbarCrud coloque isso:
<cc:interface>
<cc:attribute name="crudBean" required="true"></cc:attribute>
</cc:interface>
E na página gerenciar-carro.xhtml altere a toolbarCrud assim:
<ez:toolbarCrud crudBean="#{carroBean}"/>
Da mesma forma, coloque usuarioBean em controle-tela.xhtml.
E no toolbarCrud altere todos os componentes, no lugar de carroBean/usuarioBean, para cc.attrs.crudBean, por exemplo:
action="cc.attrs.crudBean.novo()"
PS: Podemos colocar ícones usando a propriedade icon nos botões, no caso, seroa ui-icon-document para novo, ui-icon-disk para salvar e ui-icon-sear para buscar.
No toolbarCrud.xhtml, podemos colocar essa tag, abaixo do primeiro toolbarGroup:
<p:toolbarGroup align="right">
<cc:insertChildren></cc:insertChildren>
</p:toolbarGroup>
Com a tag insertChildren, podemos colocar qualquer coisa dentro das tags do nosso elemtno em qualquer página que desejarmos, por exemplo:
<ez:toolbarCrud crudBean="#{carroBean}">
<p:inputText value="Texto"></p:inputText>
</ez:toolbarCrud>