Primefaces Showcase diferente da minha aplicação

Front-end
#1

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”?

#2

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.

#3

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.

#4

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…

#5

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.
#6

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>
#7

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.

#8

Blz!!
Bom o problema é só css mesmo.
Por enquando para teste vc pode inserir esse codigo css entre o <h:head> 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:

[code]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"));  
}

} [/code]

e uma prime.xhtml

[code]<?xml version='1.0' encoding='UTF-8' ?>

Cliente .ui-widget, .ui-widget .ui-widget { font-size: 11px !important; }

<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>

[/code]

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.

#9

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…

#10