Flex tipy a triky – Webservices

23.11.2006· Autor: Ondřej Brichta· Přidat komentář

V dnešním tipu se podíváme na komunikaci Flex aplikace a webservice služby, která vrací název země dle zadané domény a nebo služby generující chemické prvky.

Web services

Jedná se o webové služby, se kterými lze dle stanovených pravidel komunikovat a získávat z nich potřebná data. Prakticky tak coby uživatelé těchto služeb nemusíme mít žádné informace o jejich pozadí, musíme znát pouze jejich název, umístění a funkce, pomocí kterých se volají jednotlivé požadavky.

Komunikace s webovými službami probíhá na základě předávání XML objektů přes http protokol. Jednoduchý požadavek na webovou službu pak může vypadat takto:

<mx:WebService id="geoIpWebService" wsdl="http://www.webservicex.net/geoipservice.asmx?WSDL">
 <mx:operation name="GetGeoIP" result="result(event)" resultFormat="object">
 <mx:request xmlns="http://www.webservicex.net">
 <IPAddress>"89.102.134.217"</IPAddress>
 </mx:request>
 </mx:operation>
</mx:WebService>

Webová služba je v MXML kódu deklarovaná pomocí vlastnho tagu, s potřebným atributem určujícím adresu s popisem webové služby - wsdl. Dále je vše již otázkou „operation" tagu, který zpřesňuje volanou metodu a funkci, která přebírá výsledky volané služby. Samotný požadavek je definován tagem „request", který obsahuje cestu k webové službě a dále obsahuje v subelementech atributy volané služby.

Praktická ukázka

Abychom si vyzkoušeli webové služby na konkrétním příkladu, využijeme volně dostupné webservices z domény: http://www.webservicex.net

Zdrojový MXM kód aplikace pak bude vypadat takto:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" horizontalAlign="center">
 <mx:Script>
 <![CDATA[
 import mx.controls.List;
 import mx.rpc.soap.Operation;
 import mx.controls.Alert;
 import mx.rpc.events.FaultEvent;
 import mx.rpc.events.ResultEvent;
 private function clickHandler(event:MouseEvent):void
 {
 this.geoIpWebService.getOperation("GetGeoIP").send();
 }
 private function result(event:ResultEvent):void
 {
 var result:Object = event.result;
 Alert.show(
 result.ReturnCodeDetails + " : " + result.IP + "\n\n" +
 "Kód země: " + result.CountryCode + "\n" +
 "Jméno země: " + result.CountryName + "\n");
 }
 private function fault(event:FaultEvent):void
 {
 Alert.show(event.toString(), "Připojení se nezdařilo");
 }
 ]]>
 </mx:Script>
 <mx:TitleWindow id="titleWindow" width="320" height="240" layout="horizontal">
 <mx:Label id="ipLabel" text="IP adresa:" />
 <mx:TextInput id="ipInput" text="89.102.134.217" maxChars="15" />
 <mx:ControlBar id="bar" verticalAlign="middle" horizontalAlign="center">
 <mx:Button id="findButton" label="Odeslat" click="clickHandler(event)"/>
 </mx:ControlBar>
 <mx:horizontalAlign>center</mx:horizontalAlign>
 <mx:verticalAlign>middle</mx:verticalAlign>
 <mx:title>Ukázka </mx:title>
 </mx:TitleWindow>
 <mx:WebService id="geoIpWebService" wsdl="http://www.webservicex.net/geoipservice.asmx?WSDL" showBusyCursor="true">
 <mx:operation name="GetGeoIP" result="result(event)" fault="fault(event)" resultFormat="object">
 <mx:request xmlns="http://www.webservicex.net">
 <IPAddress>{this.ipInput.text}</IPAddress>
 </mx:request>
 </mx:operation>
 </mx:WebService>
</mx:Application>

Volaná služba umožňuje zobrazit název země, dle zadané IP aresy uživatele. Praktickou ukázku lze vyzkoušet zde:webservices

Periodická tabulka

Druhou ukázkou bude zobrazení chemických prvků, včetně jejich značek. Budeme k tomuto potřebovat dvě komponenty, pomocí kterých upravíme vzhled tabulky, kde se budou výsledky zobrazovat:

Kopomenta „popisek_prvek"

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="30">
 <mx:Label x="0" y="0" text="{data.ElementName}" width="150" height="20"/>
</mx:Canvas>

Komponenta „popisek_znacka"

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="60" height="20" show="initApp();" initialize="initApp();">
 <mx:Script>
 <![CDATA[
 import mx.rpc.soap.Operation;
 import mx.rpc.events.FaultEvent;
 import mx.rpc.events.ResultEvent;
 private function initApp():void{
 this.prvky.getOperation("GetElementSymbol").send();
 }
 private function result(event:ResultEvent):void
 {
 var result:XML = new XML(event.result);
 popisek.text = result.Table.Symbol;
 }
 private function fault(event:FaultEvent):void
 {
 popisek.text = "nenalezeno";
 }
 ]]>
 </mx:Script>
 <mx:Label id="popisek" x="0" y="0" width="150" height="20"/>
 <mx:WebService id="prvky" wsdl="http://www.webservicex.net/periodictable.asmx?WSDL" showBusyCursor="true">
 <mx:operation name="GetElementSymbol" result="result(event)" fault="fault(event)" resultFormat="object">
 <mx:request xmlns="http://www.webservicex.net">
 <ElementName>{this.data.ElementName}</ElementName>
 </mx:request>
 </mx:operation>
 </mx:WebService>
</mx:Canvas>

Nakonec skript samotné aplikace bude vypadat takto:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();">
 <mx:Script>
 <![CDATA[
 [Bindable]
 private var mainXML:XML;
 import mx.rpc.soap.Operation;
 import mx.rpc.events.FaultEvent;
 import mx.rpc.events.ResultEvent;
 private function initApp():void{
 this.prvky_all.getOperation("GetAtoms").send();
 }
 private function result(event:ResultEvent):void
 {
 var result:XML = new XML(event.result);
 mainXML = result;
 }
 private function fault(event:FaultEvent):void
 {
 //nenalezeno
 }
 ]]>
 </mx:Script>
 <mx:DataGrid cachePolicy="on" rowHeight="30" dataProvider="{mainXML.Table}" x="54" y="45" height="450">
 <mx:columns>
 <mx:DataGridColumn width="200" headerText="Název prvku" itemRenderer="popisek_prvek"/>
 <mx:DataGridColumn width="200" headerText="Značka prvku" itemRenderer="popisek_znacka"/>
 </mx:columns>
 </mx:DataGrid>
 <mx:WebService id="prvky_all" wsdl="http://www.webservicex.net/periodictable.asmx?WSDL" showBusyCursor="true">
 <mx:operation name="GetAtoms" result="result(event)" fault="fault(event)" resultFormat="object">
 <mx:request xmlns="http://www.webservicex.net">
 </mx:request>
 </mx:operation>
 </mx:WebService>
</mx:Application>