Neste artigo (adaptado a partir de algumas especificações da Adobe) vamos construir uma aplicação que vai ler o RSS feed de um determinado blog, mostrando os temas, alguma descrição dos mesmos e link para o conteúdo completo de cada um deles.

Esta aplicação será feita inteiramente em linguagem MXML (linguagem do Flex) e suporte no Flex Builder 2. Para quem está iniciando nesta linguagem, pode dar uma lida na coluna do Igor Costa, onde explica de forma detalhada o que é o MXML e como funciona.

Vamos então criar a nossa aplicação. Deverá tercriado um projeto Flex. Em seguida vá ao menu New > MXML Application, dê o nome LeitorRss e selecione o botão Finish. Será criado o arquivo LeitorRss.mxml.

Em seguida defina as dimensões do layout do projeto para 500×500 no painel Layout no mx:Application (à direita).

No modo Source, deverá ter o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="500">
	
</mx:Application>

Acrescente a tag mx.Panel da seguinte forma:

<mx:Panel  x="10" y="10" width="475" height="400" layout="absolute"></mx:Panel>

Esta tag irá colocar um painel posicionado a 10 pixels do eixo x e do eixo y em relação ao layout e com 475 por 400 pixels de dimensão. Esse painel poderá ser criado pela forma gráfica, no modo Design, bastando para isso arrastar o componente Panel da categoria Layout e colocar as características acima descritas nas propriedades do Panel (lado direito).

Em seguida, no modo Design, arrastamos para cima do painel criado, um Data Grid, uma tabela dinâmica (Components > Controls). No modo de visualização Source poderemos ver as seguintes tags:

<mx:columns>
	<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
	<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
	<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>

Apagamos a última coluna “Column 3”, uma vez que não será necessária. Voltamos ao modo Design, selecionamos a tabela (Data Grid) e, no painel de propriedades, colocamos o nome dgPosts no Id, a largura de 400 pixels (width) e posicionamos a grelha a x=20 e y=20.

Arraste uma área de texto (TextArea), com a dimensão de 400 pixels de largura (width), 60 pixels de altura e na posição x=20 e y=180.

Arraste agora um LinkButton para a parte de baixo da caixa de texto com o texto “Ler Post Inteiro”.

Grave e execute a aplicação no botão Run. A aparência da nossa aplicação deverá ficar parecida com a da imagem:

O próximo passo será fazer com que a aplicação vá buscar os últimos posts de um blog para os carregar na tabela dinâmica (Data grid). Para fazer essa operação, iremos utilizar um componente chamado HTTPService. Logo após a tag <mx:Application … escrevemos a tag HTTPService do seguinte modo:

<mx:HTTPService id="feedRequest" url="http://www.paulosilva.net/blog/?feed=rss2" useProxy="false" />

Este componente enviará um pedido de resposta ao servidor por meio de um HTTP GET ou POST e depois lerá os dados recebidos. Neste caso estou incluindo a URL do RSS feed do meu blog, um RSS 2.0. A propriedade useProxy=”false” indica que não será utilizado um servidor proxy para que o Flash Player possa aceder aos dados. Em seguida iremos fazer com que a aplicação envie resposta um URL específico. Para isso vamos colocar na tag mx:Aplication a propriedade creationComplete=”feedRequest.send()”.

Com isto, mal a aplicação inicie, o HTTPService envia uma chamada ao servidor, este envia a resposta HTTP GET ou POST para o URL específico e é retornado uma resposta HTTP. Ou seja, neste caso é enviado um RSS feed em formato XML.

Agora vamos colocar o título do blog na janela principal (e única) da nossa aplicação.

Na tag <mx:Panel> acrescente a propriedade title=”{feedRequest.lastResult.rss.channel.title}”

Esta propriedade vai colocar o título do blog no topo da janela. A linha {feedRequest.lastResult.rss.channel.title} vai buscar ao nó “title” do documento XML o título do blog o qual irá aparecer na janela.

Agora grave e teste (Run). Deverá aparecer o título do blog na janela.

Em seguida vamos popular a tabela (Data grid) com os dados do blog, títulos e datas.

Para isso vamos colocar o componente dataProvider nas tags <mx:DataGrid>, componente este que vai buscar os dados pretendidos, títulos e datas dos posts.

Logo, na primeira coluna, altere o título da coluna (headerText) para “Título dos Posts” e o dataField para “title”:

<mx:DataGridColumn headerText="Título dos Posts" dataField="title"/>

Na segunda coluna, troque o título para “Data” e o dataField para “pubDate”:

<mx:DataGridColumn headerText="Data" dataField="pubDate"/>

Grave e teste (Run). Deverão aparecer os últimos títulos do blog e respectivas datas na tabela.

Para que, ao selecionar um dos títulos na tabela, possa aparecer uma descrição do post na área de texto, vamos acrescentar a propriedade htmlText na tag<mx:TextArea>. Acrescentamos então htmlText=”{dgPosts.selectedItem.description}”:

<mx:TextArea htmlText="{dgPosts.selectedItem.description}" x="20" y="180" height="60" width="400"/>

Grave e veja se, ao selecionar uma linha da tabela, aparece o texto na área de texto.

Agora, para que as colunas da tabela recebam os dados, vamos acrescentar na tag <mx:DataGrid> o id=”dgPosts” e o componente dataProvider=”{feedRequest.lastResult.rss.channel.item}” que irá receber os dados do XML:

<mx:DataGrid id="dgPosts" dataProvider="{feedRequest.lastResult.rss.channel.item}" x="20" y="20" width="400">

Neste momento apenas nos falta fazer com que o text link possa abrir uma página com o post escolhido completo. Para isso vamos acrescentar a propriedade click na tag <mx:LinkButton>. Esta propriedade irá buscar o URL do post e abrir uma nova janela com o mesmo. Para isso, colocamos: click=”navigateToURL(newURLRequest(dgPosts.selectedItem.link)); pelo que a tag deverá ficar:

<mx:LinkButton click="navigateToURL(newURLRequest(dgPosts.selectedItem.link));" x="20" y="264" label="Ler Post Inteiro"/>

Neste momento o código da nossa aplicação deverá estar assim:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()" width="500" height="500">
<mx:HTTPService id="feedRequest" url="http://www.paulosilva.net/blog/?feed=rss2" useProxy="false" />
	<mx:Panel title="{feedRequest.lastResult.rss.channel.title}" x="10" y="10" width="475" height="400" layout="absolute">
		<mx:DataGrid id="dgPosts" dataProvider="{feedRequest.lastResult.rss.channel.item}" x="20" y="20" width="400">
			<mx:columns>
				<mx:DataGridColumn headerText="Título dos Posts" dataField="title"/>
				<mx:DataGridColumn headerText="Data" dataField="pubDate"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:TextArea htmlText="{dgPosts.selectedItem.description}" x="20" y="180" height="60" width="400"/>
		<mx:LinkButton click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));" x="20" y="264" label="Ler Post Inteiro"/>
	</mx:Panel>
</mx:Application>

Grave e teste a aplicação. A mesma deverá ter o aspecto da imagem seguinte.

Este artigo mostra como o MXML é uma linguagem de fácil compreensão. Espero que tenham gostado!