Ir para conteúdo


Foto

Exibir cotações da bovespa em Grid


  • Por favor, faça o login para responder
3 respostas neste tópico

#1 dias

dias

    Novato

  • Membros
  • PipPip
  • 18 posts

Postado 24 May 2015 - 12:18

Segue abaixo um aplicativo simples para exibir cotações da bovespa delay 15 minutos.

Para ver aplicativo acesse: http://www.dias.adm....taBov/index.htm

Para baixar o código: http://www.dias.adm....Bov/CotaBov.rar

 

Fiz a partir da url: www.bmfbovespa.com.br/Pregao-Online/ExecutaAcaoAjax.asp?CodigoPapel=PETR4|VALE5

 

Esta requisição retorna um xml assim:

<ComportamentoPapeis><Papel Codigo="PETR4" Nome="PETROBRAS PN" Ibovespa="#" Data="22/05/2015 17:59:48" Abertura="" Minimo="12,92" Maximo="13,65" Medio="13,11" Ultimo="13,07" Oscilacao="-2,82"/></ComportamentoPapeis>

Utilizei o php abaixo para converter para json:

 

CotaBovAll.php

<?php 
//Script envia requisicao ao web service da bovespa, recebe retorno em xml e converte para json e faz echo.
//Desenvolvido por: Amarildo dias 
//[email protected]
$ativo = $_GET['Ativo'];
if ($ativo == 'ATIVOS'){
	$ativo = 'IBOV|ABEV3|BBAS3|BBDC3|BBDC4|BBSE3|BRAP4|BRFS3|BRKM5|BRML3|BRPR3|BVMF3|CCRO3|CESP6|CIEL3|CMIG4|CPFE3|CPLE6|CRUZ3|CSAN3|CSNA3|CTIP3|CYRE3|DTEX3|ECOR3|ELET3|ELET6|EMBR3|ENBR3|ESTC3|EVEN3|FIBR3|GFSA3|GGBR4|GOAU4|GOLL4|HGTX3|HYPE3|ITSA4|ITUB4|JBSS3|KLBN11|KROT3|LAME4|LIGT3|LREN3|MRFG3|MRVE3|MULT3|NATU3|OIBR4|PCAR4|PDGR3|PETR3|PETR4|POMO4|QUAL3|RENT3|RUMO3|SANB11|SBSP3|SUZB5|TBLE3|TIMP3|UGPA3|USIM5|VALE3|VALE5|VIVT4';
}
$url = 'http://www.bmfbovespa.com.br/Pregao-Online/ExecutaAcaoAjax.asp?CodigoPapel='.$ativo.'';
$retorno = file_get_contents($url);
$retorno = str_replace(array("\n", "\r", "\t"), '', $retorno);
$retorno = trim(str_replace('"', "'", $retorno));
$xml = simplexml_load_string($retorno);
$json = json_encode($xml,TRUE);
echo $json;
?>

model, store, view(grid,timer,grafico), no Ext.onReady() do arquivo abaixo:

 

index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../ext-5.1.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="../ext-5.1.0/build/ext-all.js"></script>
</head> 
<body>

<script type="text/javascript"> 
Ext.onReady(function(){		

	//Model CotaBov
	Ext.define('modelCotaBov', {
	     extend: 'Ext.data.Model',
	     fields: [ {name:'Codigo', mapping: '["@attributes"].Codigo'},
	      	       {name:'Nome', mapping: '["@attributes"].Nome'},
	      	       {name:'Data', mapping: '["@attributes"].Data'},
	      	       {name:'Abertura', mapping: '["@attributes"].Abertura'},
	      	       {name:'Minimo', mapping: '["@attributes"].Minimo'},
	      	       {name:'Maximo', mapping: '["@attributes"].Maximo'},
	      	       {name:'Medio', mapping: '["@attributes"].Medio'},
	      	       {name:'Ultimo', mapping: '["@attributes"].Ultimo'},
	      	       {name:'Oscilacao', mapping: '["@attributes"].Oscilacao'}
	      	      ]
	});
		 
	//Store CotaBov
	var storeCotaBov = Ext.create('Ext.data.Store', {
	     model: 'modelCotaBov',
	     autoLoad: false,
	     proxy: {
	         type: 'ajax',
	         url: './service/php/CotaBovAll.php',
	         method: 'GET',
	         reader: {       		
	             type: 'json',
	             root: 'Papel'
	         }
	     }	     
	});

	//Timer atualiza store a cada 10 segundos
	var runner = new Ext.util.TaskRunner();
        var task = runner.start({
         run: function(){
    		var ativo = Ext.ComponentQuery.query('#txtAtivo')[0].getValue();
	    	if (ativo === ''){
			    ativo = 'ATIVOS';
	    		storeCotaBov.load({params: {Ativo: ativo}});
			}else{
	    		storeCotaBov.load({params: {Ativo: ativo}});
			}
         },
         interval: 10000 //equivale a 10 segundos
    });
	
	//Janela principal Grid Cotacoes
	var winCotaBov = Ext.create('Ext.window.Window', {
	    title: '[AppCotaBov][Cotacoes Bovespa] delay 15 minutos',
	    layout: 'fit',
	    width: 1000,
	    height: 700,
	    autoScroll: false,
	    maximizable: true,
	    closeAction:'hide',
	    buttonAlign : 'center',
	    items: [{                        
    			xtype: 'gridpanel',
    			itemId: 'gridCotaBov',
     			columnLines: true,
   				loadMask: false,
   				autoScroll: true,
				autoSizeColumns: true,
				autoSizeGrid: true,
 		  		store: storeCotaBov,
 		  		selModel: Ext.create('Ext.selection.RowModel', {mode: 'MULTI', checkOnly: true}),
   				plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
   					clicksToEdit: 1
  				})],
  				listeners: { 
  					cellclick: function (grd, rowIndex, colIndex, e) {
	    				var panelAtivo = Ext.ComponentQuery.query('#tabGraf')[0];
	    				var record = this.getSelectionModel().getSelection()[0];
  			        	var selAtivo = record.data.Codigo;
  			        	var tabAtivo = {
  		  			        title: selAtivo,
  		  			        itemId: selAtivo,
  		  			        closable: true,
                                                        //Como exemplo coloquei no iframe abaixo um atalho para o gráfico da bovespa, para colocar outra fonte edite a url abaixo.
							html: '<iframe src="http://pregao-online.bmfbovespa.com.br/Noticias.aspx?idioma=pt-BR&Papel='+selAtivo+'&KeepThis=true&TB_iframe=true&height=520&width=945" height=100% width=100%></iframe>'
  	  	  	  	  	  		};
  			        	winCotaGraf.show();
  			        	panelAtivo.setActiveTab(tabAtivo);
						winCotaGraf.doLayout();
  			    	}
	    		},
    			columns:[
       	 		  {header: 'Codigo',  sortable: true, dataIndex: 'Codigo', flex: 1},
       	 		  {header: 'Ultimo',  sortable: true, dataIndex: 'Ultimo', flex: 1},
       	 		  {header: 'Oscilacao',  sortable: true, dataIndex: 'Oscilacao', flex: 1},
       	 		  {header: 'Abertura',  sortable: true, dataIndex: 'Abertura', flex: 1},
       	 		  {header: 'Minimo',  sortable: true, dataIndex: 'Minimo', flex: 1},
       	 		  {header: 'Maximo',  sortable: true, dataIndex: 'Maximo', flex: 1},
       	 		  {header: 'Medio',  sortable: true, dataIndex: 'Medio', flex: 1},
       	 		  {header: 'Nome',  sortable: true, dataIndex: 'Nome', flex: 3},
       	 		  {header: 'Data/hora',  sortable: true, dataIndex: 'Data', flex: 2},
       	 		]
     	}
   	 	],
		dockedItems: [{
    	xtype: 'toolbar',
    	dock: 'top',
    	itemId:'barraMenu',
    	ui: 'footer',
    	items: [{
        		xtype: 'label',
            	html: '<h2>:: LOGO :-) </h2>'
            	},'->',{
                xtype: 'textfield',
                width: 200,
                itemId: 'txtAtivo',
                fieldLabel: 'Buscar um ativo',
                labelAlign: 'right',
                emptyText: 'ex:PETR4'
   			    },{
   				text: 'Buscar/Atualizar',
				handler: function () {
   			    	var ativo = Ext.ComponentQuery.query('#txtAtivo')[0].getValue();
   			    	if (ativo === ''){
   	   			    	ativo = 'ATIVOS';
   			    		storeCotaBov.load({params: {Ativo: ativo}});
   	   			    }else{
   			    		storeCotaBov.load({params: {Ativo: ativo}});
   	   			    }
   			    }
   			}				
   		]
		}],   	 	
	 	buttons: [{
	     		xtype: 'label',
	        	html: '*Escolha um Ativo para exibir o Grafico.  (reflesh 10 segundos)'	
	        },'->',{
		     	xtype: 'label',
		        html: 'desenvolvido por: [email protected]'	
		    },{
   		        text: 'Fechar',
   		    	handler: function(){
   			 		winCotaBov.close();
   		    	}				
   		    	}   
	    ]
	});

	//Janela exibe detalhes e grafico do ativo
	var winCotaGraf = Ext.create('Ext.window.Window', {
	    title: '[AppCotaBov][Detalhes/Grafico]',
	    layout: 'fit',
	    width: 1000,
	    height: 700,
	    autoScroll: false,
	    maximizable: true,
	    closeAction:'close',
	    buttonAlign : 'center',
	    items: [{
		    xtype: 'tabpanel',
		    itemId: 'tabGraf',
		    items:[]
		}],
		dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    		itemId:'barraMenuGraf',
    		ui: 'footer',
    		items: [{
        		xtype: 'label',
            	html: '<h3>:: LOGO :-)... O gráfico deste aplicativo esta em desenvolvimento...</h3>[O gráfico exibido no iframe abaixo é do site da bovespa, para exibir de outra fonte basta alterar a url na propriedade html no iframe linha 89 do index.htm]'
            }]
		}],   	 	
	 	buttons: [{
	     	xtype: 'label',
	        html: 'texto......'	
	        },'->',{
		    xtype: 'label',
		    html: 'texto......'	
		    },{
   		    text: 'Fechar',
   		    handler: function(){
   			 winCotaGraf.close();
   		    }				
   		   }   
	    ]
	});
	
winCotaBov.show();	
	
});
</script>
</body>
</html>


#2 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3496 posts
  • LocationBelo Horizonte

Postado 02 June 2015 - 07:54

Boa dias obrigado por compartilhar.

 

Te perguntar, você tentou utilizar XmlReader ao invés de mudar o XML para JSON? Só questão de dúvida mesmo, pois achei que poderia ter alguma limitação.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#3 dias

dias

    Novato

  • Membros
  • PipPip
  • 18 posts

Postado 04 June 2015 - 10:22

Boa dias obrigado por compartilhar.

 

Te perguntar, você tentou utilizar XmlReader ao invés de mudar o XML para JSON? Só questão de dúvida mesmo, pois achei que poderia ter alguma limitação.

 

Olá Legolas

Obrigado pela dica.

Realmente sou novato em Extjs tenho muito que aprender.
Sei que Extjs trabalha muito bem com xml ou json. Acontece que a maioria dos exemplos extjs que vi na internet trabalha json que me parece mais claro e fácil de entender, já o xml me parece meio confuso.

Mas seguindo sua dica, estou a desenvolver um outro aplicativo simples como esse, mas agora utilizarei XmlReader:
É um formulário onde digita o CEP, acessa ao webservice dos correios, e automaticamente preenche o endereço rua/bairro/cidade.
Esta quase pronto em breve publicarei aqui.

Agradeço por comentar, é compartilhando que se aprende.


 



#4 dias

dias

    Novato

  • Membros
  • PipPip
  • 18 posts

Postado 06 June 2015 - 17:48

Olá Legolas

Obrigado pela dica.

Realmente sou novato em Extjs tenho muito que aprender.
Sei que Extjs trabalha muito bem com xml ou json. Acontece que a maioria dos exemplos extjs que vi na internet trabalha json que me parece mais claro e fácil de entender, já o xml me parece meio confuso.

Mas seguindo sua dica, estou a desenvolver um outro aplicativo simples como esse, mas agora utilizarei XmlReader:
É um formulário onde digita o CEP, acessa ao webservice dos correios, e automaticamente preenche o endereço rua/bairro/cidade.
Esta quase pronto em breve publicarei aqui.

Agradeço por comentar, é compartilhando que se aprende.


 

Fiz algumas alterações:

Agora funciona para CEP acessa WebService dos Correios e retorna Rua/Bairro/Cidade/Uf e preenche o Formulário.

Coloquei em um novo tópico:

http://forum.extjs.c...tomaticamente/






0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos