HTTP Service

Talvez alguns se perguntarão, porque HTTP-SERVICE ja no nível iniciante?

Respondo já, é algo prático que mostra resultado de forma a mostrar o que o flex pode fazer, com poucas linhas de código.

Bom, pra muitos só as palavras “HTTP-SERVICE” já dá um nó no cérebro, mas aqui falarei um pouco dele e mostrarei como usar.

Primeiro defino que utilizarei a idéia de componentes, onde voce cria um componente dentro do mesmo projeto e depois em sua aplicacao chama este componente para facilitar o desenvolvimento.

(Obs, ainda nao sei formatar no WordPress de forma que fique bunito que nem nos blogs pagos, se alguem souber, dá um apoio.)

Utilizarei então dois arquivos principais:

• photosFLK
• componenteFLK

Primeiro passo

-Crie um projeto (chamarei de photosFLK), isso gera uma aplicacao com o mesmo nome (File > new > flexProject)

- Após criado o projeto, digite este código dentro de sua aplicação:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
backgroundGradientColors=”[0xFFFFFF, 0xAAAAAA]“
horizontalAlign=”left”
verticalGap=”15″
horizontalGap=”15″ creationComplete=”addListenerToControls()”><mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable]
private var photoFeed:ArrayCollection;

// add a event listener to textInput control using the Event Listeners
// You can search more at addEventListeners on this site
private function addListenerToControls():void {
searchTerms.addEventListener(FlexEvent.ENTER,requestPhotos);
}
// Request photos based on keyword criteria you insert
private function requestPhotos(event:Event):void {
// if the photoService is still loading we cancel to prevent errors
// then we call again.
photoService.cancel();
var params:Object = new Object();
params.format = ‘rss_200_enc’;
params.tags = searchTerms.text;
photoService.send(params);
}
// Handler the result function from HTTPService request you did
// and convert the result into a Array Collection
private function photoHandler(event:ResultEvent):void {
photoFeed = event.result.rss.channel.item as ArrayCollection;
}
// If the HTTPService had errors, we handle it here show an alert message
// like we have in Javascript
private function photoFaultHandler(event:FaultEvent):void {
Alert.show(“Impossible to load or reach photos from services”,”Error”);
}
]]>
</mx:Script>

<mx:HTTPService id=”photoService” showBusyCursor=”true”
url=”http://api.flickr.com/services/feeds/photos_public.gne”
result=”photoHandler(event)” fault=”photoFaultHandler(event)”
/>

<mx:HBox>
<mx:Label text=”Flickr tags or search terms:” />
<mx:TextInput id=”searchTerms” />
<mx:Button label=”Search”
click=”requestPhotos(event)” />
</mx:HBox>

<mx:TileList width=”100%” height=”100%”
dataProvider=”{photoFeed}”
itemRenderer=”componentFlk”>
</mx:TileList>

</mx:Application>

Segundo passo

Agora crie um componente do tipo VBOX, renomeando ele para “componenteFlk”

Digite o código abaixo dentro dos códigos do component.

<?xml version=”1.0″ encoding=”utf-8″?> <mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”

width=”125″ height=”125″

paddingBottom=”5″ paddingLeft=”5″ paddingTop=”5″ paddingRight=”5″

horizontalScrollPolicy=”off” verticalScrollPolicy=”off”

horizontalAlign=”center”>

<mx:Image width=”75″ height=”75″

source=”{data.thumbnail.url}”/>

<mx:Text text=”{data.credit}”/>

</mx:VBox>

Terceiro passo

Pronto, agora é só rodar o projeto, clicando no “Play”.

Como este tutorial é somente para ilustar o uso do HTTP Service, defino que:

1-Criamos um projeto e uma aplicacao

2-Criamos um component

3-Definimos de onde viria os dados via HTTP Service. (exemplo abaixo)

<mx:HTTPService id=”photoService” showBusyCursor=”true”
url=”http://api.flickr.com/services/feeds/photos_public.gne”
result=”photoHandler(event)” fault=”photoFaultHandler(event)”
/>

Agora os dados são puxados do site da FLICKR, onde ja possui uma lista de imagens e as respectivas no servidor.

E nosso TileList está usando o componentFlk criado

<mx:TileList width=”100%” height=”100%”
dataProvider=”{photoFeed}”
itemRenderer=”componentFlk”>
</mx:TileList>

Pronto, espero ter ajudado. Passando como utilizar o HTTP Service.

Observe o exemplo de como ficou abaixo…

Boa Sorte!

Advertisement