Categoria 1: Serviciul HTTP cu returnarea unui text

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0"
    backgroundImage="" >
	<mx:Script>
		<![CDATA[
		import mx.rpc.events.ResultEvent;
		import mx.rpc.events.FaultEvent;
		import mx.controls.Alert;

	        public function handlePlain(event:ResultEvent):void
	        {
	            shippingOptions.htmlText = event.result.toString();
	        }

	        public function handleFault(event:FaultEvent):void
	        {
	           Alert.show(event.fault.faultString, "Error");
	        }
		]]>
	</mx:Script>

	<mx:HTTPService result="handlePlain(event);" fault="handleFault(event);" id="plainRPC" resultFormat="text"
	    url="http://examples.adobe.com/flex3/exchangingdata/text/plainHttpService.php"
	    useProxy="false">
	    <mx:request xmlns="">
	        <zipcode>{zipcode.text}</zipcode>
	        <pounds>{weight_lb.text}</pounds>
	    </mx:request>
	</mx:HTTPService>

	<mx:Label x="56" y="32" text="Zip Code" width="55" height="18" textAlign="right" fontWeight="bold"/>
	<mx:Label x="56" y="58" text="Weight" width="55" height="18" textAlign="right" fontWeight="bold"/>
	<mx:TextInput x="130" y="32" id="zipcode" width="160" height="22"/>
	<mx:TextInput x="130" y="58" id="weight_lb" width="160" height="22"/>
	<mx:Button x="130" y="95" label="Get Shipping Options" click="plainRPC.send();" width="160" height="22"/>

	<mx:Text x="56" y="150" id="shippingOptions" width="310" height="133" fontWeight="bold"/>

</mx:Application>

Categoria 2: Serviciul HTTP cu returnarea unui XML

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

	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			import mx.controls.Alert;

                           [Bindable]
                           private var shippingInfo:XMLList;

	        public function handleXML(event:ResultEvent):void
            {
                shippingInfo = event.result.option as XMLList;
            }

	        public function handleFault(event:FaultEvent):void
	        {
	           Alert.show(event.fault.faultString, "Error");
	        }
		]]>
	</mx:Script>

    <mx:HTTPService result="handleXML(event);" fault="handleFault(event);" id="xmlRPC" resultFormat="e4x"
    	url="http://examples.adobe.com/flex3app/flex3samples/exchangingdata/xml/xmlHttpService.jsp" useProxy="false">
	    <mx:request xmlns="">
	        <zipcode>{zipcode.text}</zipcode>
	        <pounds>{weight_lb.text}</pounds>
	    </mx:request>
	</mx:HTTPService>

	<mx:Label x="56" y="32" text="Zip Code" width="55" height="18" textAlign="right" fontWeight="bold"/>
	<mx:Label x="56" y="58" text="Weight" width="55" height="18" textAlign="right" fontWeight="bold"/>
	<mx:TextInput x="130" y="32" id="zipcode" width="160" height="22"/>
	<mx:TextInput x="130" y="58" id="weight_lb" width="160" height="22"/>
	<mx:Button x="130" y="95" label="Get Shipping Options" click="xmlRPC.send();" width="160" height="22"/>
	<mx:DataGrid
		dataProvider="{shippingInfo}"
		x="80" y="141" width="262" height="92" id="shippingOptionsList" editable="false" enabled="true">
	    <mx:columns>
	        <mx:DataGridColumn headerText="Service" dataField="service" />
	        <mx:DataGridColumn headerText="Price" dataField="price" />
	    </mx:columns>
	</mx:DataGrid>

</mx:Application>

Fisierul ColdFusion

PlainHttpService.cfm

<cfsetting enablecfoutputonly="true" />

<cfinvoke component="Shipping"
          method="getShippingOptions" argumentcollection="#url#"
	 returnvariable="myResult" />

<cfloop index="i" from="1" to="#ArrayLen(myResult)#">
	<cfoutput>#myResult[i].service#: #dollarFormat(myResult[i].price)#<br /></cfoutput>
</cfloop>

XmlHttpService.cfm

<cfsetting enablecfoutputonly="true" />

<cfsilent>
	<cfinvoke component="Shipping"
          method="getShippingOptions" argumentcollection="#url#"
	 returnvariable="myResult" />
  <cfoutput>
	<cfxml variable="userXML">
	  <options>
		<cfloop index="i" from="1" to="#ArrayLen(myResult)#">
			<option>
			    <service>#myResult[i].service#</service>
			    <price>#myResult[i].price#</price>
			</option>
		</cfloop>
	  </options>
	</cfxml>
  </cfoutput>
</cfsilent>
<cfcontent reset ="yes" type="text/xml; charset=UTF-8">
<cfoutput>#userXML#</cfoutput>

Shipping.cfc

<cfcomponent>
	<cffunction name="getShippingOptions" access="remote" returntype="array">
		<cfargument name="zipcode" type="any" required="yes" >
		<cfargument name="pounds" type="any" required="yes">

		<cfset var options=ArrayNew(1)>
		<cfset var baseCost=(zipcode / 10000) + (pounds * 5)>

		<cfset options[1] = structNew() />
		<cfset options[1].service="Next Day">
		<cfset options[1].price=baseCost * 4>
		<cfset options[2] = structNew() />
		<cfset options[2].service="Two Day Air">
		<cfset options[2].price=baseCost * 2>
		<cfset options[3] = structNew() />
		<cfset options[3].service="Saver Ground">
		<cfset options[3].price=baseCost>

		<cfreturn options>
	</cffunction>

	<cffunction name="getShippingOptions_CFQuery" access="remote" returntype="query">
		<cfargument name="zipcode" type="any" required="yes" >
		<cfargument name="pounds" type="any" required="yes">

		<cfset var options=ArrayNew(1)>
		<cfset var baseCost=(zipcode / 10000) + (pounds * 5)>

          <cfscript>
	   qOptions = queryNew("service, price");
	   newRow = QueryAddRow(qOptions, 3);
            temp = QuerySetCell(qOptions, "service", "Next Day", 1);
            temp = QuerySetCell(qOptions, "price", baseCost * 4, 1);
            temp = QuerySetCell(qOptions, "service", "Two Day Air", 2);
            temp = QuerySetCell(qOptions, "price", baseCost * 2, 2);
            temp = QuerySetCell(qOptions, "service", "Saver Ground", 3);
            temp = QuerySetCell(qOptions, "price", baseCost, 3);
	 </cfscript>
	  <cfreturn qOptions>
	</cffunction>
</cfcomponent>

Fisiere PHP

In aceasta parte a tutorialului vom parcurge pasii pentru realizarea unei aplicatii Shipping Costs (costuri de transport).

Aplicatia va contine doua campuri: campul pentru afisarea codului postal din 5 cifre si un camp pentru afisarea greutatii care poate fi transportata maritim. In partea de jos vom constru un buton a carui apasare va determina afisarea unui mesaj text simplu intr-o caseta de text.

Primii pasi in invatare

Descoperiti cum trimiteti parametrii furnizati de utilizator de la serverul sitului si cum se pot prelua rezultatele atat ca text simplu cat si ca XML.

Puncte cheie in realizarea aplicatiei de Shipping Costs

• Aplicatiile Flex sunt fisiere SWF.
• Flex este un mediu de programare centrat pe programator folosit pentru a crea aplicatii internet bogate.F
• Aplicatiile realizate in Flex sunt redate folosind Flash Payer 9.
• Fisierele Flash RIAs, Flex SWF sunt prelucrate de utilizator..
• Flex se poate conecta la servere de aplicatii folosind ColdFusion, PHP, ASP.NET si Java.
• Se poate prelua text simplu sau XML prin HTTP.
• Puteti prelua mesaje Simple Object Access Protocol (SOAP) folosind servicii WEB.
• Puteti utiliza obiecte Java la distanta (POJOs, JavaBeans, EJBs and ColdFusion Components) folosind serviciul de date LiveCycle.

In acest modul veti invata sa lucrati cu serviciile HTTP. Folosirea serviciului de date LiveCycle face obiectul altui tutorial.

Ce veti invata in cadrul aplicatiei Shipping Costs?

Veti invata sa:

• Creati o interfata de utilizator folosind MXML care sa poata accepta furnizarea unui cod postal si a unei greutati.
• Sa scrieti o metoda si o rutina de tratare a evenimentelor folosind ActionScript.
• Sa trimiteti datele furnizate de un utilizator prin serviciul HTTP printr-un apel de la ColdFusion, PHP, Java sau ASP.NET.
• Sa returnati raspunsul prin text simplu sau XML.
• Sa populati un camp de text provenind de la un apel de la serviciul HTTP cu date returnate.
• Sa populati un DataGrid provenind de la apel de la serviciul HTTP cu date returnate.

1. In modul Design folositi componenta TileList. Dupa componenta HBox si inainte de inchiderea tagului Application adaugati componenta TileList cu latimea si lungimea de 100%.

Legarea datelor photoFeed XML cu componenta TileList

2. Folosind modul Source, localizati componenta TileList si adaugatii atributul dataProvider cu valoarea {photoFeed} pentru a lega datele de componenta tile. (Amintiti-va  sa inchideti linia pentru dataProvider.)

 dataProvider="{photoFeed}">

Crearea in componenta Tile a motorului de randare a miniaturilor (thumbnails)

3. Acest item randeaza fiecare item din TileList. In interiorul componentei TileList adaugati proprietatea itemRenderer.

4. Creati o componenta layout pentru fiecare item randat. In interiorul proprietatii itemRenderer, adaugati componenta Component.

<mx:TileList width="100%" height="100%"
    dataProvider="{photoFeed}">
    <mx:itemRenderer>
        <mx:Component>

        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

5.Creati layout (aspectul) elementului (itemului) rendere care se va folosi. In interiorul componentei Component, adaugati componenta VBox care sa aiba atributele: width=125, height=125. Adaugati paddingBottom, paddingTop, paddingRight and paddingLeft fiecare cu valoarea 5.

6.In interiorul componentei VBox, creati o componenta Image cu atributele width=75 si height=75. ItemRenderer transmite valorile componentei Image. Adaugati in componenta Image atributul source cu valoarea {data.thumbnail.url} pentru a o popula cu imagini.

7. Dupa componenta Image, creati o componenta Text cu atributul txt avand valoarea {data.credit} pentru ca pe ecran sa apara numele autorului.

<mx:TileList width="100%" height="100%"
    dataProvider="{photoFeed}">
    <mx:itemRenderer>
        <mx:Component>
            <mx:VBox width="125" height="125"
                paddingBottom="5"
                paddingLeft="5"
                paddingTop="5"
                paddingRight="5">

                <mx:Image width="75" height="75"
                    source="{data.thumbnail.url}"/>

                <mx:Text text="{data.credit}"/>
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

8. Salvati si rulati aplicatia. Ar trebui sa vedeti o forma. Dati un termen de cautare. Ar trebui ca pe ecran sa apara imagini.

Separa afisarea thumbnailurilor intr-o componenta separata

9. Creati o noua componenta: File > New > MXML Component parcurgand urmatorii pasi.

1. Numele fisierului este  FlickrThumbnail.
2. Componenta de baza este VBox.
3. Setati dimensiunile (latimea si lungimea) la 125.

10. Folosind modul Source, localizati componenta TileList.

11. Taiati componentele Image si Text din componenta VBox din TileList, si lipiti-o in  FlickrThumbnail.mxml.

12. Adaugati urmatoarele atribute in componenta VBox:  paddingBottom, paddingTop, paddingRight si paddingLeft fiecare avand valoarea 5; horizontalScrollPolicy si verticalScrollPolicy, ambele fiind setate pe valoarea off; si horizontalAlign cu valoarea center.

13. Folosind modul Source, localizati componenta TileList in template FlickrRIA.mxml.

14. Stergeti din cod componentele  itemRenderer, Component, and VBox .

15. Adaugati atributul itemRenderer la componenta TileList avand valoarea FlickrThumbnail.

<mx:TileList width="100%" height="100%"
		dataProvider="{photoFeed}"
		itemRenderer="FlickrThumbnail">

</mx:TileList>

16. Compilati si rulati aplicatia creata.