Na última aula (que faz tempo por sinal), aprendemos a fazer um simples “Hello World!” com o Titanium Mobile. Hoje aprenderemos a fazer um leitor simples de Feeds RSS usando o HTTPClient.
Falo sobre o HTTPClient, pois na próxima aula faremos o mesmo leitor RSS porém usando o YQL, mas na próxima aula eu explico melhor do que o YQL se trata, mas para os apressadinhos de plantão que quiserem dar uma olhada, é só clicar aqui.
Vamos pra aula!
Começaremos com o de prache, criando uma window no “app.js”para que possamos visualizar os feeds e um botão “Voltar” que usaremos depois:
Titanium.UI.setBackgroundColor('#000'); var winReader = Titanium.UI.createWindow({ title:'RSS Reader', backgroundColor:'#fff', modal:true, barColor: '#000', }); var btnVoltar = Ti.UI.createButton({ title: 'Voltar' });
Agora vamos declarar algumas variáveis para fazermos a mágica:
var httpRSS = Titanium.Network.createHTTPClient(); var listaRSS = [];
O “httpRSS” vai ser o nosso HTTPClient, e o “listaRSS” será nosso array onde iremos colocar o título de um feed.
Agora faremos as chamadas para que o HTTPClient seja iniciado e traga os feeds, e logo em seguida abriremos nossa window para exibição:
httpRSS.open('GET','http://feeds.feedburner.com/OBigola'); httpRSS.send(); winReader.open();
Agora e só rodar e ver o que acontece…NADA!
Não acontece nada pois ainda não implementamos o que o HTTPClient vai fazer, pois ele não é exclusivo para ler feeds, mas sim para uma série de coisas que envolva chamadas HTTP.
Tudo certo e nada resolvido, vamos implementar a exibição dos feeds, para isso, vamos usar o evento “onload” do “httpRSS”:
httpRSS.onload = function() { var rssXML = this.responseXML; var rssCanal = rssXML.documentElement.getElementsByTagName("channel"); var rssTitulo = rssCanal.item(0).getElementsByTagName("title").item(0).text; var rssItens = rssXML.documentElement.getElementsByTagName("item"); winReader.title = rssTitulo;
Coloquei nomes bem óbvios para ficar fácil de entender, mas para ficar claro, essas variáveis serão atribuídas da seguinte forma:
- rssXML: Terá o XML retornado da requisição feita em “httpRSS.open()”, que no nosso caso é os feeds do meu blog;
- rssCanal: É possível que o link requisitado tenha mais de um canal, mas normalmente feeds de sites possuem somente um, então pegamos somente o primeiro, onde contém as informações do blog;
- rssTitulo: É onde teremos o nome do site em questão, vamos usar pra colocar como título da nossa window;
- rssItens: É um array onde terá as postagens do blog;
Agora vamos criar um laço para percorrer os itens recuperados e inserir em um TableView:
for (var i = 0; i < rssItens.length; i++) { var rssPostTitulo = rssItens.item(i).getElementsByTagName("title").item(0).text; var rssPostLink = rssItens.item(i).getElementsByTagName("link").item(0).text; var rssLinha = Ti.UI.createTableViewRow({ top:0, hasChild: true, borderColor:'#000', link: rssPostLink }); if (i % 2 == 0){ rssLinha.backgroundColor='#cddae2'; } else { rssLinha.backgroundColor='#fff'; } var rssLabel = Ti.UI.createLabel({ text: rssPostTitulo, textAlign:'left', left:0, height:40, width:'auto', top:3, color:'#000', font:{fontSize:'x-small'} }); rssLinha.add(rssLabel); listaRSS.push(rssLinha); }
No laço, iremos pegar o título do post e o link. O link iremos inserir em um objeto TableViewRow, que nada mais é que uma linha que iremos inserir em nosso TableView.
O legal no Titanium, é que a propriedade “link” não existe no objeto TableViewRow, porém podemos criar uma propriedade de forma implícita, e nesta propriedade iremos guardar o link do post para que possamos abrí-lo posteriormente em um WebView.
Aquele IF que coloquei ali no meio é só pra fazer um efeito zebrado. Fica mais bonito
E logo abaixo é apenas o label que iremos inserir no TableViewRow através do método “Add”. E o método “Push” do array serve para inserir o “rssLinha” gerado naquele momento como um item do array.
Agora pra finalizar, vamos criar e inserir o TableView na window. Vamos também implementar o evento “click” nele para que abra a página referente ao feed em um WebView. Aquele botão “Voltar” que criamos lá no começo iremos usar aqui para voltar a lista de feeds depois que abrir a página do feed.
var tvRSS = Titanium.UI.createTableView({ data:listaRSS, top:0 }); winReader.add(tvRSS); tvRSS.addEventListener('click',function(e) { var webFeed = Titanium.UI.createWebView({ url: e.rowData.link }); btnVoltar.addEventListener('click',function(){ winReader.remove(webFeed); winReader.leftNavButton = null; }); winReader.leftNavButton = btnVoltar; winReader.add(webFeed); }); };
Olha só a cara do meninão:
Agora é só personalizar como bem entender.
Por hoje é só!
Enjoy!
Fonte: O Bigola