Arquivo Discussoes de Programacao e Tecnologia Amigos,
Estou tentando colocar o menu do Primefaces na minha aplicação, mas não sei o que está acontecendo… Ele não fica como no site… Fica sem as imagens, sem os efeitos…
Minha dúvida é: o que tenho q fazer para que os menus fiquem identicos? tenho que baixar algum CSS do site? Qualquer ajuda é bem vinda, pois sou iniciante. Segue as duas imagens dos menus…
E ai cara, blz?
Precisa sim baixar um css do site.
Da uma olha nesse link, http://www.primefaces.org/themes.html
Escolha o teme que mais gostar e baixe o arquivo. Faça também as configurações necessárias, o site explica como fazer isso.
Não sei se é o caso, mas vou aproveitar e contar a solução para o problema que tive esta semana com o menu do primefaces.
Esse exemplo serve também para o caso de querer usar seus próprios ícones e não os dos temas do primefaces:
Eu estava utilizando a versão 2.2RC2 do Primefaces e incluia a url do icon do menu diretamente, assim por exemplo:
<p:menuitem value="Relatório"
action="#{menuLateralBean.actionRelatorio}"
icon="/images/relatorio.png" />
Atualizei o menu para versão 2.2 Final e todos os ícones sumiram. Verifiquei o html gerado e notei que a url do icone estava sendo incluída diretamente como se fosse CSS.
Para corrigir inclui a entrada em um css, sendo essencial incluir o espaço utilizado pelo icone, caso contrário o texto irá sobrepor ele, e o ícone não irá aparecer.
Fica assim para o exemplo acima:
<p:menuitem value="Relatório"
action="#{menuLateralBean.actionRelatorio}"
icon="menu_relatorio" />
E no CSS:
.menu_relatorio {
height: 16px;
width: 20px;
background: url(../images/relatorio.png) 0 0 no-repeat;
}
Muito obrigado pela ajuda, pessoal!
Só que os problemas não acabaram! hehehe!!
Vamos lá…
Entrei na URL indicada, baixei o jar do Theme, coloquei na lib da WEB-INF…
Vi que existem duas configurações no site.
Uma, pelo que entendi, é para quem não fizer o download manualmente (usando MAVEN). Não fiz nada aqui.
A outra é colocar uma tag no web.xml. Fiz isso, substituindo apenas o pelo nome do Thema que baixei (glass-x).
Só que nada aconteceu!
Todo componente do primefaces acompanha um codigo para o xhtml e outro java, o bean. Esse bean é o código interno do componente, certo? Ou eu preciso criar esse bean manualmente em minha aplicacao tb?
Esses temas funcionam em todos os componentes do site?
Estou esquecendo de algo para fazer o meu menu funcionar?
Obrigado.
Amigo, esse .jar to tema você não deve por ele nas bibliotecas se sua aplicação não.
Você deve descompactar o conteúdo do arquivo e colocar dentro da sua pasta onde ficam as páginas (onde fica o index),
Apos isso adicione o seguinte ao seu web.xml
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>aristo</param-value>
</context-param>
substituindo aristo pelo nome do tema escolhido.
Teste, caso não funcione coloque
dentro do head da pagina na qual você deseja utiizar o tema.
Abraços
Olha eu aí de novo!
Blz!! Descompactei o arquivo. Só que foi gerada uma estrutura de diretorios…
Coloquei a pasta raiz, do jeito que foi extraida, em WebContent como solicitado, mas não funcionou. Coloquei a tag no head tb e nada.
Fiz o correto? Ou é preciso pegar alguma pasta especifica do Jar e colocar la?
Obrigado!
Realmente, não sei mais o que devo fazer…
Segue meu WEB.XML
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Resource Servlet</servlet-name>
<servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Resource Servlet</servlet-name>
<url-pattern>/primefaces_resource/*</url-pattern>
</servlet-mapping>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>aristo</param-value>
</context-param>
… meu _template.xhtml
<f:view contentType="text/html"/>
<h:head>
<title> OSs </title>
<h:outputStylesheet library="css" name="grid.css"></h:outputStylesheet>
<h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>
<h:outputStylesheet library="css" name="theme.css"></h:outputStylesheet>
</h:head>
<h:body>
<div id="blocoCabecalho">
<div class="container">
<h:graphicImage library="imagens" name="ltc.png" id="logoCompany"></h:graphicImage>
</div>
</div>
<div id="blocoConteudo">
<div class="container">
<ui:insert name="corpo"></ui:insert>
</div>
</div>
<div id="blocoRodape">
<div class="container">
<p>MSG RODAPE</p>
</div>
</div>
</h:body>
</html>
e coloquei a pasta images dentro da raiz (onde está meu index) assim como o arquivo theme.css. Mas nada funciona 
Amigo, crie uma pasta dentro do seu webcontent com o nome que desejar, por exemplo, css
dentro dessa pasta coloque o arquivo “skin.css” (ou theme.css) e a pasta “images”, ambos vieram junto do pacote do tema que você baixou.
Essa pasta de nome “css” voce deve colocar dentro da sua pasta WebContent… A estrutura ficara
/WebContent/
/WebContent/css/
/WebContent/css/images/
/WebContent/css/skin.css
Dentro do do head de sua pagina coloque
lembrando que ./css/skin.css indica a localiza do seu arquivo skin.css.
Abraços
Fiz exatamente isso… Mas não deu certo. A mensagem de erro pelo menos mudou…
SEVERE: Error Rendering View[/login.xhtml]
javax.faces.FacesException: Error loading theme, cannot find "theme.css" resource of "primefaces-aristo" library
at org.primefaces.renderkit.HeadRenderer.encodeTheme(HeadRenderer.java:114)
at org.primefaces.renderkit.HeadRenderer.encodeBegin(HeadRenderer.java:80)
at javax.faces.component.UIComponentBase.encodeBegin(UIComponentBase.java:823)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1611)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1616)
at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:380)
at com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:126)
at javax.faces.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:273)
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:127)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:313)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:286)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:844)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:583)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
at java.lang.Thread.run(Unknown Source)
14/02/2011 10:41:23 org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: Servlet.service() for servlet Faces Servlet threw exception
javax.faces.FacesException: Error loading theme, cannot find "theme.css" resource of "primefaces-aristo" library
at org.primefaces.renderkit.HeadRenderer.encodeTheme(HeadRenderer.java:114)
at org.primefaces.renderkit.HeadRenderer.encodeBegin(HeadRenderer.java:80)
at javax.faces.component.UIComponentBase.encodeBegin(UIComponentBase.java:823)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1611)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1616)
at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:380)
at com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:126)
at javax.faces.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:273)
at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:127)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:313)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:286)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:844)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:583)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:447)
at java.lang.Thread.run(Unknown Source)
Já troquei o nome do paramtro do Web.xml para “primefaces.SKIN” com o valor “none”. Não dá erro, mas o tema também não é aplicado. Tá sinistro… Batendo cabeça aqui…
Valeu Jamir, sua solução resolveu meu problema que era o mesmo do seu.
Olá galera tudo a riba??? 
Gente eu tenho um jeito mais legal e bacana de fazer isso, igualzinho ao showcase do Prime
Ou seja, vamos utilizar os JAR´s diretamente, ai podemos modificar e/ou criar novos temas e criar o JAR na biblioteca.
Bom vamos lá:
Se voce for criar uma aplicação WEB normal, basta incluir os JAR´s dos themes na sua biblioteca PrimeFaces.
Se voce for utilizar Maven, basta colocar esses comandos no seu PORN:
<properties>
<endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
[b]<theme.version>1.0.0</theme.version>[/b]
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<netbeans.hint.deploy.server>Tomcat70</netbeans.hint.deploy.server>
</properties>
e
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>aristo</artifactId>
<version>${theme.version}</version>
[b]Aqui voce pode colocar todos ou só aqueles que vc quiser utilizar, veja no PORN do showcase ok[/b]
</dependency>
Bom agora voce configura o WEB.XML
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>#{guestPreferences.theme}</param-value>
</context-param>
[b]Aqui usei o mesmo nome do showcase para facilitar minha vida :-)[/b]
No faces-config:
<managed-bean>
<managed-bean-name>guestPreferences</managed-bean-name>
<managed-bean-class>br.jm.financeiro.view.GuestPreferences</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
Agora aqui no guestpreferences eu aproveitei e guardo/recupero o theme de cada usuário do sistema:
public class GuestPreferences implements Serializable {
private String theme = "aristo"; //default
private FacesContext ctx;
private HttpSession session;
private UsuarioJpaController usuarioDAO;
public String getTheme() {
ctx = FacesContext.getCurrentInstance();
session = (HttpSession) ctx.getExternalContext().getSession(false);
usuarioDAO = new UsuarioJpaController();
Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
try {
Usuario user = (Usuario) session.getAttribute("usuarioAutenticado");
if (user != null) {
theme = user.getDscThema();
}
} catch (Exception e) {
e.getMessage();
}
if (params.containsKey("theme")) {
theme = params.get("theme");
}
return theme;
}
public void setTheme(String theme) throws Exception {
try {
ctx = FacesContext.getCurrentInstance();
session = (HttpSession) ctx.getExternalContext().getSession(false);
usuarioDAO = new UsuarioJpaController();
Usuario user = (Usuario) session.getAttribute("usuarioAutenticado");
user.setDscThema(theme);
session.setAttribute("usuarioAutenticado", user);
usuarioDAO.atualizaTema(user.getIdUsuario(), user.getDscThema());
} catch (SQLException e) {
e.getMessage();
}
if (theme == null) {
theme = "aristo";
}
this.theme = theme;
}
}
No template principal, voce copia as pastas do showcase CSS e syntaxhighlighter
No HEAD:
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/syntaxhighlighter/styles/syntaxhighlighter.css" />
Eu fiz igualzinho ao showcase, crio / copio o thememenu e ai basta escolher o seu theme que ele atualiza e já grava no usuário conectado.
Agora se quiser chamar direto, basta descompactar o ( s ) JAR´s no WEBCONTEXT e colocar no HEAD:
Bom galera é isso ai, espero ter ajudado.
Abraços
Jomello
OBS: Tem mais um trem, caso voce queira ficar atualizado nos themes, basta baixar via SVN os themes ok:
Revivendo o topico pois alguem pode estar passando pelo mesmo problema… Aqui resolvi baixando o theme aristo, é o tema padrao do exemplo.
Baixa usar o jar do theme na aplicaçao e configurar o web.xml como abaixo:
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>aristo</param-value>
</context-param>