Quantcast
Channel: BL Tecnologia de InformaçãoBL Tecnologia de Informação » Tag » IOS
Viewing all articles
Browse latest Browse all 3

RSS Reader usando HTTPClient [Titanium Mobile]

0
0

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


Viewing all articles
Browse latest Browse all 3

Latest Images





Latest Images