domingo, 3 de março de 2013

Utilizando CSS + Primefaces + Temas

No post de hoje vou mostrar como utilizar css e temas em paginas feitas com primefaces, o que deixa as paginas com ar mais profissional.

Com css ou sem css, com tema ou sem tema, o primefaces já vale bastante a pena, porem para dar um ar mais profissional ao seu trabalho de forma simples, existe estes dois artifícios. Vou mostrar como utilizar o css nativo dos exemplos do show case do primefaces, e como utilizar os temas.
Requisitos:

Considerações iniciais
  • CSS: È uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em linguagem de marcação, no nosso caso o xhtml.
  • Prime Faces: biblioteca de componentes open source para JSF.
Temas primefaces, como utilizar?

Existem diversos temas no site do prime, o processo para utilizar o tema escolhido é bem simples, você pode baixar apenas o tema escolhido ou baixar todos os temas, no nosso caso indiquei baixar todos os temas (link em requisitos). No próprio site você pode ver os componente com o tema que você escolher antes de setar no seu projeto. Ao entrar no show case (http://www.primefaces.org/showcase/ui/home.jsf), no canto superior direito você pode selecionar que tema você deseja visualizar.

Apos escolher o tema, vamos criar um projeto no netbeans:

Arquivo > novo projeto > java web > aplicação web > próximo
Escreva o nome da aplicação > próximo
Deixe selecionado o servidor GlassFish e java EE6 web> próximo
Selecione o framework JSF 2.0 e deixe as configurações default, não precisa selecionar nenhum componente visual, adicionaremos posteriormente, clique em finalizar
Adicionando os JAR's a biblioteca
Agora vamos adicionar a biblioteca com os componentes visuais que iremos utilizar:
  1. Adicione os JAR's baixados do primefaces, e dos temas

...se você chegou até aqui a estrutura do projeto deve estar assim:

Incluindo cabeçalho
Abra a pagina index.xhtml gerada automaticamente na criação do projeto, e faça a inclusão do cabeçalho do primefaces.   xmlns:p="http://primefaces.org/ui"
Feito isso você esta apto a fazer uso de qualquer componente do primefaces 3.5, para o uso dos componentes a sintaxe é semelhante a sintaxe padrão dos componentes do JSF, a diferença é que em vez da letra "h" utilizaremos "p". 

Setando o tema utilizado
Após escolher o tema que você irá utilizar, você deve setar no seu projeto, basta adicionar o seguinte código no arquivo web.xml.

 <context-param>   
     <param-name>primefaces.THEME</param-name>   
     <param-value>start</param-value>   
   </context-param>  

No caso start é o tema que estou utilizando, mas você pode setar qualquer outro, basta trocar onde tem start pelo tema que você quer, o arquivo web.xml se encontra dentro de WEB-INF.

Se você chegou até aqui você já esta utilizando tema no primefaces, para testar inclua o seguinte código dentro de <h:body>...
  1. <p:breadCrumb>  
  2.     <p:menuitem value="Categories" url="#" />  
  3.     <p:menuitem value="Sports" url="#" />  
  4.     <p:menuitem value="Football" url="#" />  
  5.     <p:menuitem value="Countries" url="#" />  
  6.     <p:menuitem value="Spain" url="#" />  
  7.     <p:menuitem value="F.C. Barcelona" url="#" />  
  8.     <p:menuitem value="Squad" url="#" />  
  9.     <p:menuitem value="Lionel Messi" url="#" />  
  10. </p:breadCrumb>  

Quando você executar o projeto o que você deve ver é isso:
Menu retirado do show case do primefaces.
CSS no primefaces como utilizar?
Geralmente quando visualizamos algum exemplo no show case e vamos levar tal código para nosso projeto, não fica exatamente igual, isso se da pelo fato de não notarmos que os exemplos do show case utilizam css, que muitas vezes ficam invisíveis a nós. 

Estrutura 

Crie um diretório chamado css no seu projeto:

Agora vamos criar duas folhas de estilo, uma chamada default e outra de principal.


Web > folha de estilo em cascata > próximo

Inclua o seguinte cabeçalho na pagina index: xmlns:f="http://java.sun.com/jsf/core"

O código de principal.css fica assim:
 .dp-highlighter  
 {  
     font-family: "Consolas", "Courier New", Courier, mono, serif;  
     font-size: 12px;  
     background-color: #E7E5DC;  
     width: 99%;  
     overflow: auto;  
     margin: 18px 0 18px 0 !important;  
     padding-top: 1px; /* adds a little border on top when controls are hidden */  
 }  
 /* clear styles */  
 .dp-highlighter ol,  
 .dp-highlighter ol li,  
 .dp-highlighter ol li span   
 {  
     margin: 0;  
     padding: 0;  
     border: none;  
 }  
 .dp-highlighter a,  
 .dp-highlighter a:hover  
 {  
     background: none;  
     border: none;  
     padding: 0;  
     margin: 0;  
 }  
 .dp-highlighter .bar  
 {  
     padding-left: 45px;  
 }  
 .dp-highlighter.collapsed .bar,  
 .dp-highlighter.nogutter .bar  
 {  
     padding-left: 0px;  
 }  
 .dp-highlighter ol  
 {  
     list-style: decimal; /* for ie */  
     background-color: #fff;  
     margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */  
     padding: 0px;  
     color: #5C5C5C;  
 }  
 .dp-highlighter.nogutter ol,  
 .dp-highlighter.nogutter ol li  
 {  
     list-style: none !important;  
     margin-left: 0px !important;  
 }  
 .dp-highlighter ol li,  
 .dp-highlighter .columns div  
 {  
     list-style: decimal-leading-zero; /* better look for others, override cascade from OL */  
     list-style-position: outside !important;  
     border-left: 3px solid #6CE26C;  
     background-color: #F8F8F8;  
     color: #5C5C5C;  
     padding: 0 3px 0 10px !important;  
     margin: 0 !important;  
     line-height: 14px;  
 }  
 .dp-highlighter.nogutter ol li,  
 .dp-highlighter.nogutter .columns div  
 {  
     border: 0;  
 }  
 .dp-highlighter .columns  
 {  
     background-color: #F8F8F8;  
     color: gray;  
     overflow: hidden;  
     width: 100%;  
 }  
 .dp-highlighter .columns div  
 {  
     padding-bottom: 5px;  
 }  
 .dp-highlighter ol li.alt  
 {  
     background-color: #FFF;  
     color: inherit;  
 }  
 .dp-highlighter ol li span  
 {  
     color: black;  
     background-color: inherit;  
 }  
 /* Adjust some properties when collapsed */  
 .dp-highlighter.collapsed ol  
 {  
     margin: 0px;  
 }  
 .dp-highlighter.collapsed ol li  
 {  
     display: none;  
 }  
 /* Additional modifications when in print-view */  
 .dp-highlighter.printing  
 {  
     border: none;  
 }  
 .dp-highlighter.printing .tools  
 {  
     display: none !important;  
 }  
 .dp-highlighter.printing li  
 {  
     display: list-item !important;  
 }  
 /* Styles for the tools */  
 .dp-highlighter .tools  
 {  
     padding: 3px 8px 3px 10px;  
     font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;  
     color: silver;  
     background-color: #f8f8f8;  
     padding-bottom: 10px;  
     border-left: 3px solid #6CE26C;  
 }  
 .dp-highlighter.nogutter .tools  
 {  
     border-left: 0;  
 }  
 .dp-highlighter.collapsed .tools  
 {  
     border-bottom: 0;  
 }  
 .dp-highlighter .tools a  
 {  
     font-size: 9px;  
     color: #a0a0a0;  
     background-color: inherit;  
     text-decoration: none;  
     margin-right: 10px;  
 }  
 .dp-highlighter .tools a:hover  
 {  
     color: red;  
     background-color: inherit;  
     text-decoration: underline;  
 }  
 /* About dialog styles */  
 .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }  
 .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }  
 .dp-about td { padding: 10px; vertical-align: top; }  
 .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }  
 .dp-about .title { color: red; background-color: inherit; font-weight: bold; }  
 .dp-about .para { margin: 0 0 4px 0; }  
 .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }  
 .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }  
 /* Language specific styles */  
 .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }  
 .dp-highlighter .string { color: blue; background-color: inherit; }  
 .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }  
 .dp-highlighter .preprocessor { color: gray; background-color: inherit; }  

E o código do arquivo default.css fica assim:

 body {  
     margin: 0px;  
     padding: 0;  
     color: #616161;  
 }  
 h1, h2, h3 {  
     margin-top: 0;  
 }  
 h1 {  
     font-size: 1.6em;  
     font-weight: normal;  
 }  
 h2 {  
     font-size: 1.6em;  
 }  
 h3 {  
     font-size: 1em;  
     margin-top:20px;  
 }  
 ul {  
 }  
 a {  
     text-decoration: none;  
 }  
 a:hover {  
     text-decoration: underline;  
 }  
 a img {  
     border: none;  
 }  
 img.left {  
     float: left;  
     margin: 0 20px 0 0;  
 }  
 img.right {  
     float: right;  
     margin: 0 0 0 20px;  
 }  
 /* Header */  
 #header {  
   padding: 4px 0px;  
   height: 75px;  
   position: relative;  
 }  
 #logo {  
   text-align: left;  
 }  
 /* Menu */  
 #menu {  
   position: absolute;  
   top:25px;  
   right:15px;  
     padding: 0;  
     height: 59px;  
   overflow: hidden;  
 }  
 #menu ul {  
     margin: 0;  
     list-style: none;  
 }  
 #menu li {  
     display: inline;  
 }  
 #menu li a {  
     display: block;  
     float: left;  
     height: 42px;  
     margin: 0;  
     padding: 18px 40px 0 40px;  
     text-decoration: none;  
     font-size: 20px;  
 }  
 #menu li a:hover {  
     text-decoration: underline;  
 }  
 #globalthemeswitcher {  
   position:absolute;  
   top:5px;  
   right:50px;  
 }  
 /* Page */  
 #page {  
     padding: 10px 0px;  
     background: #FFFFFF;  
 }  
 /* Content */  
 #content {  
     width: 70%;  
   float:left;  
 }  
 .post {  
     padding-bottom: 15px;  
 }  
 .post h1 {  
     font-weight: normal;  
 }  
 .title {  
     height: 30px;  
     margin-left: 10px;  
     padding: 8px 0 0 20px;  
 }  
 .title a {  
     border-bottom: none;  
     color: #FFFFFF;  
 }  
 .title a:hover {  
     border-bottom: 1px dotted #000000;  
 }  
 .submenu-title {  
   padding: 4px 10px;  
 }  
 .submenu-content {  
   text-align:center;  
 }  
 .byline {  
     margin: -60px 20px 20px 20px;  
 }  
 .byline a {  
     color: #DC8700;  
 }  
 .tag {  
     padding: 0 15px;  
 }  
 .entry {  
     padding: 0 20px;  
 }  
 .entry p {  
     line-height: 200%;  
 }  
 .links {  
     padding: 4px 0px;  
     text-align: right;  
     font-weight: bold;  
 }  
 .links a {  
     border: none;  
 }  
 .links a:hover {  
 }  
 #sidebar {  
     float: left;  
     width: 25%;  
     padding: 0 10px;  
     margin-left: -1px;  
   overflow: hidden;  
 }  
 #sidebar a.ui-state-hover,   
 #sidebar a.ui-state-highlight {  
   border:0 none;  
   text-decoration: none;  
   font-weight: normal;  
 }  
 #sidebar table {  
   width: 100%;  
 }  
 #sidebar table td {  
   vertical-align: top;  
 }  
 #sidebar ul {  
   padding: 0;  
   margin: 0;  
 }  
 #sidebar ul li {  
   list-style-type: none;  
   padding: 1px;  
 }  
 /* Footer */  
 #footer {  
     height: 70px;  
     margin: 0 auto;  
     padding: 0 20px;  
   font-size: 14px;  
 }  
 #footer p {  
     margin: 0;  
     padding: 25px 0 0 0;  
     text-align: center;  
 }  
 #footer a {  
 }  
 #footer .link {  
     float: right;  
 }  
 #footer .copyright {  
     float: left;  
 }  
 .homeText {  
     line-height: 175%;  
 }  
 .homeMenu {  
     width:200px;  
     float:left;  
     margin-right:10px  
 }  
 .themeMenu {  
   overflow: auto;  
   height:300px;  
   width:200px;  
 }  
 .dp-xml {  
   width:1000px;  
 }  
 .ui-themeswitcher a.ui-selectonemenu-label-container {  
   text-decoration: none !important;  
 }  
 .ui-widget {  
   font-size: 12px !important;  
 }  

Os dois códigos foram retirados do repositório do primefaces no google code. Se você chegou até aqui a estrutura do projeto deve estar assim:
Chegando aqui só falta mais um passo, precisamos dizer para nossa pagina para utilizar essas folhas de estilo, e a forma de fazer isso é a seguinte, dentro de <h:head> insira o seguinte código:
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
            <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/principal.css" />

            <style type="text/css">
                   .ui-layout-north {
                          z-index:20 !important;
                         overflow:visible !important;;
                    }

                  .ui-layout-north .ui-layout-unit-content {
                        overflow:visible !important;
                   }
            </style>

Agora vamos ver o resultado:

Ex: Sem tema e sem CSS
Ex: Apenas com tema
Ex: Com tema e CSS

Conclusão
Com essa simples postagem, agora você  sabe como utilizar temas e css no seu projeto, e fica claro quanta diferença faz quando utilizamos tal recurso.  


Até a próxima.
-->

7 comentários:

  1. Ótimo post, em poucas palavras passou muita informação!
    Agora me diz, tem alguma dica de sobrescrever o CSS somente de alguns componentes?

    Abraços!

    ResponderExcluir
    Respostas
    1. Olá Augusto, grato pelo comentário, em relação a sua duvida,
      ah duas soluções, a primeira é baixar o user guide nesse endereço, http://primefaces.org/documentation.html, lá tem todas as styleClasses que cada componente recebe, assim você pode alterar propriedades do componente que deseja no css, utilizando o nome da styleClasses. Outra forma bem mais simples é você ir no site http://jqueryui.com/themeroller/ la você pode personalizar todos os componentes, feito isso baixe o novo tema gerado, dentro do RAR baixado a um pasta css, basta importar na sua pagina, la tem o css de todos os componentes que você quiser. Espero ter lhe respondido Att.

      Excluir
  2. Excelente post cara!!! Ajudou muito! Abraço

    ResponderExcluir
    Respostas
    1. Grato pelo comentário Leonardo, bons estudos!

      Excluir
  3. Cara, estou começando a estudar JSF + Primefaces, e seu exemplo me ajudou bastante, parabéns pela iniciativa e muito obrigado.

    ResponderExcluir
    Respostas
    1. Olá Cedrick, que bom que gostou. Em breve estarei retornando com as atividades do blog. Terá muito material sobre desenvolvimento de software. Att..

      Excluir

Deixe um comentário!