Primefaces Showcase diferente da minha aplicação

14 de setembro de 2012 8 respostas

alandiniz 14 de setembro de 2012

Bom dia, gostaria de tirar uma dúvida, não sei se alguém já reparou isso.

No primefaces showcase, este por exemplo:
http://www.primefaces.org/showcase-labs/ui/commandButton.jsf

temos alguns botões, entre eles o “Icon only”. Ele tem 26px, 26px. Eu fiz o download do primefaces (ultima versão) e fiz um teste na minha aplicação. O tamanho do botão ficou enorme, ficou o dobro do showcase do primefaces.

Outra coisa é quando você faz alguma ação em ajax. No site do primefaces aparece uma “bola” no canto direito inferior da tela, ela fica girando até terminar a ação. por exemplo:
http://www.primefaces.org/showcase-labs/ui/pprUpdate.jsf
escreva algo e pressione “Submit”. irá aparecer a imagem que falei.

Fiz o mesmo código e na minha página não aparece… e de acordo com o “source code” nao tem nada a mais para aparecer aquela “bola”.

Na verdade tem outra coisa, o GROWL. na página do primefaces ele aparece cinza, pequeno e bonitinho rsrs… no meu aparece grande, azul e feio rsrs…
http://www.primefaces.org/showcase-labs/ui/growl.jsf

PS.: estou usando o mesmo tema ARISTO. porém acredito que não seja ele, pois pelo que eu vi o tema não influencia no tamanho do botão por exemplo e sim apenas na cor.

Alguém sabe me dizer essas duas “diferenças”?

8 Respostas

Rodrigo_Sasaki 14 de set. de 2012

O source não mostra a página toda, né, mas é comum encontrar coisas no showcase que são “estranhas”.

Muito disso aí você consegue resolver com CSS.

rock 14 de set. de 2012

Sobre a “bola”, é um gif que foi gerado aqui: http://preloaders.net/en/3d (preloader hypnotic sphere)
Você precisa utilizar o AjaxStatus http://www.primefaces.org/showcase-labs/ui/ajaxStatusStandard.jsf com esta imagem.
Realmente eles não exibiram o AjaxStatus no source code desse showcase.

alandiniz 14 de set. de 2012

eh realmente eu já percebi que tem mta coisa que eles não mostram no source code do showcase… mais achei mto estranho a diferença do tamanho dos componentes e aquela bolinha girando o canto da dela ^^

o pior é que no docs deles tbm não tem nada… realmente acho que fizeram na mão…

aprendizweb 14 de set. de 2012

Fala Alan!!!

Cara é normal acontecer este tipo de problema no inicio, pois aconteceu a mesma coisa quando iniciei com primeFaces, talvez pode haver algum problema na sua configuração do Prime, algo que vc deixou de adicionar, posta ai para dar uma olhada.

alandiniz 14 de set. de 2012

bom eu to com um ProjetoTeste aqui rsrs, que tá assim:

primefaces 2.2.1
cupertino-1.0.8

o web.xml fora o padrão tem só:

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

e minha página é simples, por exemplo…

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head></head>
<h:body>
<h:form>
<p:commandButton value="A"/>
</h:form>
</h:body>

well.nunes 14 de set. de 2012

TUdo bem ?

Na própia documentação tem explicando como diminuir o tamanho da fonte, realmente eles nao colocam tudo no showCase, ja passei por casos de ter propriedades que não existem no primefaces baixado.
Além de tudo isso, o framework é muito bom.

aprendizweb 14 de set. de 2012

Blz!!
Bom o problema é só css mesmo.
Por enquando para teste vc pode inserir esse codigo css entre o que resolve, mas em se tratando de organização vc deve criar um arquivo css separado:

<h:head>
<style>
.ui-widget,
.ui-widget .ui-widget {
font-size: 11px !important;
}
</style>
</h:head>

testa esse aqui: Cria uma classe GrowlBean:

import javax.faces.application.FacesMessage;  
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;  
import javax.faces.event.ActionEvent;  

@ManagedBean
@SessionScoped 
public class GrowlBean {  
  
    private String text;  
      
    public String getText() {  
        return text;  
    }  
    public void setText(String text) {  
        this.text = text;  
    }  
  
    public void save(ActionEvent actionEvent) {  
        FacesContext context = FacesContext.getCurrentInstance();  
          
        context.addMessage(null, new FacesMessage("Sucesso", "Olá " + text));  
        context.addMessage(null, new FacesMessage("Mensagem", "Layout PrimeFaces"));  
    }  
}

e uma prime.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">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
        <title>Cliente</title>
<style>
.ui-widget,
.ui-widget .ui-widget {
font-size: 11px !important;
}
</style>
    </h:head>
<h:body>

<p:layout fullPage="true">  
   
    <p:layoutUnit position="north" size="100" header="Top"  resizable="true" closable="true" collapsible="true">  
        <h:outputText value="Top unit content." />  
    </p:layoutUnit>  
  
    <p:layoutUnit position="south" size="100"   resizable="true" closable="true" collapsible="true">  
        <h:outputText value="South unit content." />  
    </p:layoutUnit>  
  
    <p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">  
        <h:form>  
       
            <ui:include src="" />  
            
        </h:form>  
    </p:layoutUnit>  
  
    <p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">  
        <h:outputText value="Right unit content." />  
    </p:layoutUnit>  
  
    <p:layoutUnit position="center">  
        <h:form>  
         <p:growl id="growl" showDetail="true" sticky="true" /> 
            Layout do PrimeFaces  
         <p:panel header="Growl">  
             <h:panelGrid columns="2">  
            <h:outputText value="Seu Nome: *" />   
            <p:inputText value="#{growlBean.text}" required="true" label="Name"/>  
            </h:panelGrid>  
  
             <p:commandButton value="Salvar" actionListener="#{growlBean.save}" update="growl"/>  
        </p:panel>
        </h:form>  
    </p:layoutUnit>  
</p:layout>  
</h:body>
</html>

Veja que o xmlns:p do prime muda:
versão 2: xmlns:p="http://primefaces.prime.com.tr/ui"
versão 3: xmlns:p="http://primefaces.org/ui"
No seu caso troque o xmlns para a versão 2, ou baixe o jar da versão 3 e deixe como esta.

alandiniz 14 de set. de 2012

intão aquele esquema da fonte no css com !important eu já faço… já uso primefaces faz um tempo…

na versão 3 eu testei o growl e o meu fica “feio” rsrs, fica maior que o do site e diferente… sei lá… por exemplo, eu coloco o FacesMessage.SEVERITY_INFO ou ERROR no FacesMessage e nao aparece o sinalzinho de exclamação por exemplo…

sei lá, só achei q era alguma configuração a parte… mais na verdade esses problemas eu já resolvi com css… o problema é que fica “feio”, apesar de estar em um arquivo a parte e usando template…

Criado 14 de setembro de 2012

Ultima resposta 14 de set. de 2012

Respostas 8

Participantes 5

8 Respostas

Topicos relacionados