20 de agosto de 2012

RSS Reader usando HTTPClient [Titanium Mobile]

Por Breno Leonardo

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:

[code lang=”js”]
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’
});
[/code]

Agora vamos declarar algumas variáveis para fazermos a mágica:

[code lang=”js”]
var httpRSS = Titanium.Network.createHTTPClient();
var listaRSS = [];
[/code]

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:

[code lang=”js”]
httpRSS.open(‘GET’,’http://feeds.feedburner.com/OBigola’);
httpRSS.send();

winReader.open();
[/code]

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

[code lang=”js”]
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;
[/code]

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:

[code lang=”js”]
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);
}
[/code]

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.

[code lang=”js”]
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);
});
};
[/code]

Olha só a cara do meninão:

Agora é só personalizar como bem entender.

Por hoje é só!

Enjoy!

Fonte: O Bigola