[RESOLVIDO]Como criar pagina para um telão que mude automáticamente as informações

1 de maio de 2013 10 respostas

maurijava 1 de maio de 2013

Ola pessoal,

Bem! eu estou num projeto desenvolvendo sozinho. Como é muita coisa preferi usar componentização e nada melhor do que JSF para fazer isso. Já estou numa etapa bem avançada do projeto, e confesso que esta é minha primeir esperiência com JSF, estou gostando muito.
  Agora terei que atender um requisito que é essencial para o sucesso do projeto, que já está em produção. Eu tenho que disponibilizar alguns gráficos (que já estão em produção e foram feitos com PrimeFaces) em um Telão. O requisito determina que essa informações devem ficar trocando sequencialmente a cada 15 segundos.
   Bom! Eu não tenho ideia de como começar a fazer isso... Qual a melhor forma de implementar ou qual tecnologia devo utilizar.

   Alguem poderia dar uma luz, um link, um tuto?

Sds,

Maurício.

10 Respostas

Valeio_Bezerra 2 de mai. de 2013

Bom para ficar atualizando você vai ter que fazer uma Theard para ficar atualizando os dados do seu grafico e para atualizar eles visualmente para usuário você faz.

org.primefaces.context.RequestContext.getCurrentInstance().update('seuGrafico');

maurijava 2 de mai. de 2013

Valeio Bezerra:
Bom para ficar atualizando você vai ter que fazer uma Theard para ficar atualizando os dados do seu grafico e para atualizar eles visualmente para usuário você faz.

org.primefaces.context.RequestContext.getCurrentInstance().update('seuGrafico');

Beleza cara! Agora se eu quiser que fique mudando para outros gráficos e telas?

Maurício.

Valeio_Bezerra 2 de mai. de 2013

Você pode criar um atributo para usar o rendered(acho que é assim) para deixar visível ou não, então você usa o comando acima para dá o update.

maurijava 2 de mai. de 2013

Hummm… Blz, acendeu a luz. Brigadão cara…

Sds,

Maurício.

Valeio_Bezerra 2 de mai. de 2013

De nada cara, quando consegui aqui posta :]

clarel.filho 2 de mai. de 2013

Se está imagem/gráfico está dentro de uma div… você poder usar ajax ( de preferencia com jquery, via ser mais facil) para atualizar o conteudo da div…
apontando para o endereco do próximo gráfico…

e usar um contador javascript para contar os 15 segundos, antes de executar este ajax…
bem fácil de achar essa parte de ajax… recomendo…

abraço!

maurijava 2 de mai. de 2013

clarel.filho:
Se está imagem/gráfico está dentro de uma div… você poder usar ajax ( de preferencia com jquery, via ser mais facil) para atualizar o conteudo da div…
apontando para o endereco do próximo gráfico…

e usar um contador javascript para contar os 15 segundos, antes de executar este ajax…
bem fácil de achar essa parte de ajax… recomendo…

abraço!

Cara, você não poderia dar um exemplo bobinho de como fazer isso? Tipo, quando vc falar em atualiza a div apontando para o próximo endereço eu teria que ter uma outra pagina com os gráficos para apontar? É tipo o velho Frame?

Abraço!

Maurício.

clarel.filho 2 de mai. de 2013

Não, é div mesmo… pois Frame dizem que é ultrapassado…
Em breve lhe mando um exemplo, ou pelo menos um link…
mas o jquery do ajax deve apontar para o endereço/link de onde está o gráfico…

Já lhe dou algumas informações…

clarel.filho 2 de mai. de 2013

http://www.botecodigital.info/web/introducao-ao-ajax-com-jqurey/#.UYK4zqJsfZ4

foi aqui que eu aprendi a fazer…
claro q voce pode usar paginas html/jsp inves de php…
da uma olhada… muito interessante e facil!
abraço!

maurijava 16 de mai. de 2013

Ai pessoal,

Misturei um pouco das duas dicas e usei alguns recursos legais do PrimeFaces. Também peguei uma dica muito boa aque mesmo em outros topicos: [url]http://www.rponte.com.br/2008/04/10/utilizando-ajax-com-jsf-de-maneira-eficiente/[/url]

Segue o codigo:

Pagina:

<ui:composition template="/bigScreenTvTem.xhtml">
  
    <ui:define name="top">
        
            <h:form>
                <h:panelGrid id="topo" columns="3"  cellspacing="1px" cellpadding="10px" width="1900">
                   <h:graphicImage library="images" name="energisa_1.jpg"  />
                   

                    <h:outputText class="tituloTelao" value="Monitor - Laboratório DEAT"></h:outputText>
                        
                    <p:clock pattern="HH:mm:ss dd.MM.yyyy" mode="server"  />     
               </h:panelGrid>
                
            </h:form>
        
    </ui:define>

    <ui:define name="content">
        <h:form>
            <h:panelGrid id="telas" width="1850">
                <p:lineChart id="RgGprs" value="#{bigScreenTvBean.chartRgGprs}" legendPosition="e" animate="true" zoom="true" 
                             title="Reguladores Via GPRS" minY="40" maxY="120" style="height: 800px" rendered="#{bigScreenTvBean.tela1}"/>
                
                <p:lineChart id="RgRadio" value="#{bigScreenTvBean.chartRgRadio}" legendPosition="e" animate="true" zoom="true" 
                             title="Reguladores Via Rádio" minY="40" maxY="120" style="height: 800px" rendered="#{bigScreenTvBean.tela2}"/>
                <p:lineChart id="RlGprs" value="#{bigScreenTvBean.chartRlGprs}" legendPosition="e" animate="true" zoom="true" 
                             title="Religadores Via GPRS" minY="40" maxY="120" style="height: 800px" rendered="#{bigScreenTvBean.tela3}"/>
                <p:lineChart id="RlRadio" value="#{bigScreenTvBean.chartRlRadio}" legendPosition="e" animate="true" zoom="true" 
                             title="Religadores Via Rádio" minY="40" maxY="120" style="height: 800px" rendered="#{bigScreenTvBean.tela4}"/>
                <p:lineChart id="SfGprs" value="#{bigScreenTvBean.chartSfGprs}" legendPosition="e" animate="true" zoom="true" 
                             title="Sinalizadores Via GPRS" minY="40" maxY="120" style="height: 800px" rendered="#{bigScreenTvBean.tela5}"/>
                
                <p:lineChart id="SfRadio" value="#{bigScreenTvBean.chartSfRadio}" legendPosition="e" animate="true" zoom="true" 
                             title="Sinalizadores Via Rádio" minY="40" maxY="120" style="height: 800px" rendered="#{bigScreenTvBean.tela6}"/>
            </h:panelGrid>
            
            <p:poll interval="30"
                    listener="#{bigScreenTvBean.increment()}" update="telas"/>
                     
            </h:form>
    </ui:define>

    <ui:define name="bottom">
        <marquee behavior="scroll" scrollamount = "15"> 
            <h:outputText value="#{bigScreenTvBean.bottomText}"></h:outputText>
        </marquee>
    </ui:define>

</ui:composition>

e o Bean

@ManagedBean(name = "bigScreenTvBean")
@SessionScoped
public class BigScreenTvBean implements Serializable{

    private int cont = 1;
    private String bottomText = "TEXTO DE INFORM";
    private CartesianChartModel chartIndiceModel;
    private IndSemanalRGGPRSController indSemRGGprsBean;
    private IndSemanalRGRADIOController indSemRGRadioBean;
    private IndSemanalRlGPRSController indSemRLGprsBean;
    private IndSemanalRLRadioController indSemRLRadioBean;
    private IndSemanalSFGPRSController indSemSfGprsBean;
    private IndSemanalSFRadioController indSemSfRadioBean; 

    public BigScreenTvBean() {
    }

    public String getBottomText() {
        return bottomText;
    }

    public void setBottomText(String bottomText) {
        this.bottomText = bottomText;
    }
    
    
   
    private void setIndSemRGGprsBean(){
        if (indSemRGGprsBean == null){
        indSemRGGprsBean = new IndSemanalRGGPRSController();
        }
        chartIndiceModel = indSemRGGprsBean.getChartIndiceModel();
    }
    
    private void setIndSemRGRadioBean(){
        if (indSemRGRadioBean == null){
        indSemRGRadioBean = new IndSemanalRGRADIOController();
        }
        chartIndiceModel = indSemRGRadioBean.getChartIndiceModel();
    }
    
    private void setIndSemRLGprsBean(){
        if (indSemRLGprsBean == null){
        indSemRLGprsBean = new IndSemanalRlGPRSController();
        }
        chartIndiceModel = indSemRLGprsBean.getChartIndiceModel();
    }
    
     private void setIndSemRLRadioBean(){
        if (indSemRLRadioBean == null){
        indSemRLRadioBean = new IndSemanalRLRadioController();
        }
        chartIndiceModel = indSemRLRadioBean.getChartIndiceModel();
    }
    
     private void setIndSemSfGprsBean(){
        if (indSemSfGprsBean == null){
        indSemSfGprsBean = new IndSemanalSFGPRSController();
        }
        chartIndiceModel = indSemSfGprsBean.getChartIndiceModel();
    }
     
     private void setIndSemSfRadioBean(){
        if (indSemSfRadioBean == null){
        indSemSfRadioBean = new IndSemanalSFRadioController();
        }
        chartIndiceModel = indSemSfRadioBean.getChartIndiceModel();
    }
    
    public CartesianChartModel getChartRgGprs(){
        setIndSemRGGprsBean();
        return chartIndiceModel;
    }
    
    public CartesianChartModel getChartRgRadio(){
        setIndSemRGRadioBean();
        return chartIndiceModel;
    }
    
    public CartesianChartModel getChartRlGprs(){
        setIndSemRLGprsBean();
        return chartIndiceModel;
    }
    
     public CartesianChartModel getChartRlRadio(){
        setIndSemRLRadioBean();
        return chartIndiceModel;
    }
     
      public CartesianChartModel getChartSfGprs(){
        setIndSemSfGprsBean();
        return chartIndiceModel;
    }
      
       public CartesianChartModel getChartSfRadio(){
        setIndSemSfRadioBean();
        return chartIndiceModel;
    }
     
    
    public void increment(){
        if (cont == 6)
            cont = 0;
        cont++;
    }  
    
    public boolean isTela1(){
        if (cont == 1){
            return true;
        }else{
            return false;
        }
    }
    
    public boolean isTela2(){
        if (cont == 2){
            return true;
        }else{
            return false;
        }
    }
    
    public boolean isTela3(){
        if (cont == 3){
            return true;
        }else{
            return false;
        }
    }
    
    public boolean isTela4(){
       if (cont == 4){
            return true;
        }else{
            return false;
        }
    }
    
    public boolean isTela5(){
       if (cont == 5){
            return true;
        }else{
            return false;
        }
    }
    
    public boolean isTela6(){
       if (cont == 6){
            return true;
        }else{
            return false;
        }
    }
    
      
}

Brigadão e chau…

Criado 1 de maio de 2013

Ultima resposta 16 de mai. de 2013

Respostas 10

Participantes 3

10 Respostas

Topicos relacionados