Ajax nedir? Sunucu ile veri alisverisini nasil yapmak istersiniz? Senkron mu Asenkron mu? Senkron olursa, klasik bicimde sunucuya gondermek istediginiz form GET/POST/PUT/UPDATE edilirken sunucu yanitini beklemeniz gerekir. Yani sunucu yeni bir ekran goruntusu olusturup size gonderir. Bunun yerine belki asenkron veri alisverisine ihtiyaciniz olacaktir. Sunucuya verinizi gonderin ve beklemeyin. Istemci (client) sunuyla veri alisverisini XML uzerinden yapadursun; siz sayfanin diger kisimlariyla ilgilenin. Sunucu isini bitirip veri gonderdiginde sayfada sadece istediginiz yerler guncellensin. Isin ozunu dilim dondugumce anlattim sanirim.

AJAX: Asynchronous JavaScript and XML olarak anilabilecegi gibi Hollanda’nin meshur Ajax futbol takimi ya da eski Yunan kahramanlarindan birinin adi olarak da aklimizda bulunabilir.

Bu Makalenin Amaci

• FABridge kullanmasini ogrenmek,
• Yahoo! Maps’i tanimak,
• Yahoo! ASTRA’dan haberdar olmak,

(Makalenin kaynak kodlari eklenti olarak verilmistir)

Neden Flex-Ajax Koprusune Ihtiyacimiz Var ?

Flex uygulamanizi HTML/XHTML sayfanizla entegre etmek istiyorsunuz. Yazdiginiz HTML/Ajax sayfalarini Flex uygulamasi ile nasil konusturacaksiniz? Adobe bizim icin FABridge (Flex-Ajax Bridge) projesini gelistirmis ve bircok dertten kurtarmis.

Iki takima ayrilin. HTML/Ajax takimi ve Flex/Flash takimi. Yaptiginiz isi guzel bir web sitesinde birlestirin. HTML/Ajax ile yapamadiklarini Flex ile yapin; Flex/Flash ile yapabileceginiz ancak cesitli dezavantajlar yasadiginiz (bakiniz: Soru-Cevap Bolumu, "Butun bir web sitesini Flex ile tasarlamak ne kadar dogru/yanlis?") yerde HTML/Ajax ile projenizi guclendirin.

Yahoo! Neler Yapmis?

http://developer.yahoo.com/flash/ adresinde Yahoo! nun Flash, ActionScript ve Flex calismalarini bulabilirsiniz. Cok kullanisli olabilecegini dusundugum, Yahoo! Answers, Yahoo! Search, Yahoo! Weather bilesenlerini denemeden once bu yazimizda Yahoo! Maps uzerinde duracagiz. Basit bir uygulama ve HTML icerisinde FABridge kullanarak Flex ile gelistirdigimiz haritamizi disaridan sorgular hale gelecegiz.

Adim 1: Harita nasil?

http://developer.yahoo.com/flash/packages/yahoo-maps-as3-api-0.9.2.1-beta.zip adresinden Yahoo! Maps kutuphanesini indirin. Icerisinden cikan SWC dosyasini yeni olusturacaginiz Flex 3 projesinin Library bolumune ekleyin.

Adim 2: FABridge ayarlari

Flex SDK’yi kurdugunuz yere FLEXSDKHOME diyelim (benim bilgisayarimda C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.0.0 ). FLEXSDKHOME\frameworks\javascript\fabridge\src dizinini Flex projemizin Build Path dizinleri arasina koyalim. Ardindan disari ile konusmasi icin

<fab:FABridge xmlns:fab="bridge.*" /> 

tagini "application" icerisine yerlestirelim.

Adim 3: Harita uygulamasinin gelistirilmesi.

Temel olarak mantik su: UIComponent sinifindan bir container tanimi yapip, haritamizi bu container’a eklemek. Asagida yorum satirlari iceren kaynak kodu yer almaktadir:

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

    <fab:FABridge xmlns:fab="bridge.*" />  

    <mx:Panel title="MMIstanbul Harita Uygulamasi - Powered by Yahoo! Maps" 
                                                       top="0" left="0" bottom="0" right="0">
        <mx:UIComponent id="mapContainer" width="100%" height="100%"/>
    </mx:Panel>

    <mx:Script>  
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ResizeEvent; 

            import com.yahoo.maps.api.YahooMap; 
            import com.yahoo.maps.api.YahooMapEvent; 
            import com.yahoo.maps.api.core.location.Address; 
            import com.yahoo.maps.webservices.geocoder.GeocoderResult; 
            import com.yahoo.maps.webservices.geocoder.events.GeocoderEvent; 

            private var _yahooMap:YahooMap; 
            private var _address:Address; 

            private function handleCreationComplete():void  
            { 
                // http://developer.yahoo.com/wsregapp/ adresinden kendi appid'iniz aliniz.
                var appid:String = Application.application.parameters.appid;

                // YahooMap nesnesini olustur 
                _yahooMap = new YahooMap(); 

                // Map ilk acildiginda n'olcak ?
                _yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE, handleMapInitialize);

                // haritaya gerekli parametreleri gonder ve calistir
                _yahooMap.init(appid,mapContainer.width,mapContainer.height);

                // daha once olsturdugumuz container'a haritayi ekle 
                mapContainer.addChild(_yahooMap); 
                mapContainer.addEventListener(ResizeEvent.RESIZE, handleContainerResize); 

                // haritada gezinmek icin gerekli kontrolleri ekle 
                _yahooMap.addPanControl(); 
                _yahooMap.addZoomWidget(); 
                _yahooMap.addTypeWidget();  
            } 

            private function handleMapInitialize(event:YahooMapEvent):void  
            { 
                // Harita 'Address' nesneleriyle calisiyor 
                _address = new Address("turkey"); 

                // basarili bir veri getirimi nasil sonuclanir?
                _address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS,  
                                                                   handleGeocodeSuccess);

                // adresi bul!
                _address.geocode(); 
            } 

            private function handleGeocodeSuccess(event:GeocoderEvent):void  
            { 
                // arama sonucu donen yanitlardan ilkini seciyoruz 
                var result:GeocoderResult = _address.geocoderResultSet.firstResult; 

                // yakinlasma/uzaklasma ve merkezilestirme islemlerini yapiyoruz 
                _yahooMap.zoomLevel = result.zoomLevel; 
                _yahooMap.centerLatLon = result.latlon; 

            } 

            private function handleContainerResize(event:ResizeEvent):void {
                // harita boyutu container boyutuyla ayni olsun.
                _yahooMap.setSize(mapContainer.width,mapContainer.height); 
            }

            public function searchFor(addressStr:String):void {
                _address = new Address(addressStr); 
                _address.addEventListener(GeocoderEvent.GEOCODER_SUCCESS, 
                                                             handleGeocodeSuccess);
                _address.geocode(); 
            }

        ]]>  
    </mx:Script>  

</mx:Application>

[Kod Listesi 1: HaritaApp.mxml]

Adim 4: Web Sitesi

Web sitemizi Dreamweaver kullanarak olusturdum. Demo amacli oldugu icin cok ozen gosteremedim. Ancak isimizi goruyor ;) Sol tarafa SWF nesnemizi yani haritamizi yerlestirdik. Sag tarafta ise, bir HTML formu icerisine Sehir adi ve ulke adini secmemize yarayan bir form olusturduk. Kullanici bu formda yer alan "Haritada Bul" butonuna tikladiginda harita aranan yere odaklanacak.

HTML kodu su sekilde:

<form name="haritaForm">
<table width="513" height="143" border="0" bgcolor="#6DAABE">
  <caption align="left">&nbsp;
  </caption>
  <tr>
    <td width="103"><span class="style7">Sehir Adi: </span></td>
    <td width="394">
      <input type="text" id="sehirAdi" />
    </td>
  </tr>
  <tr>
    <td><span class="style7">Ulke Adi </span></td>
    <td>
      <select id="ulkeAdi">
        <option value="Turkey" selected="selected">Turkiye</option>
        <option value="UK">UK</option>
        <option value="USA">USA</option>
        <option value="Germany">Almanya</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <input type="button" name="Submit" value="Haritada Bul" onclick="haritadaBul();"/>
    </td>
  </tr>
</table>
</form>

[Sekil 2: Adobe Flex Bridge Demo – HTML Formu]

Onemli olan kesim ise Flex ile gelistirdigimiz uygulamamiza nasil ulasacagimiz. Bunun icin "Haritada Bul" butonuna tiklandiginda Ajax cagrisi yapmak uzere "haritadaBul()" JavaScript metodunu cagiriyoruz. Asagidaki kod ciktisinda bu fonksiyonu gorebilirsiniz:

[Sekil 3: Adobe Flex Bridge Demo – JavaScript fonksiyonu]

Adim 5: Gerekli JavaScript dosyasi

Yazdigimiz JavaScript fonksiyonundaki FABridge sinifi nerede ? FLEXSDKHOME\frameworks\javascript\fabridge\src\bridge altindaki FABridge.js dosyasini HTML dosyamizin ulasabilecegi bir yere (ben ayni dizine koydum) yerlestirip:

<InvalidTag language="JavaScript" type="text/javascript" src="FABridge.js"></script>

diyerek kullanima hazir hale getirmek.

Adim 6: Calistirma

Butun bunlari Apache sunucumun kok dizini %APACHE_HOME%\htdocs altina kopyaladim. Bunun bir faydasi da su oldu. Dosya sisteminde calisirken, farkli dizinlerde olusturulan SWF dosyasi "security" hatasi veriyor. Bunu web sunucusuna tasiyarak onlemis olduk. Hersey sunucuda oldugu icin "http://localhost" domain’i altindan SWF istedigi dosyaya ulasabiliyor.

Istanbul’u aratinca bakin nasil bir ekran goruntusu cikti:

[Sekil 4: Ekran Goruntusu, Istanbul]

==Analiz==

Ucuncu adimda, kodu yazarken en son metoda disaridan erisim icin kullandik. Satir 80, Fonksiyon "searchFor"

Dorduncu adimda, SWF dosyasini yerlestirirken "embed" tagi icerisinde "flashvars=’bridgeName=haritaPanel’" seklinde bir tanim yaptik. Boylece, erisecegimiz SWF nesnesinin adini belirledik: haritaPanel

Besinci adimda, erisimi yaparken "var flexApp = FABridge.haritaPanel.root();" seklinde Flex uygulamamiza ulastik.

==Sonuclar==

FABridge kullanimi sayesinde, Web sitenizde bulundurmak istediginiz Flex uygulamalarinizin Ajax catisi kullanarak sitenizle haberlesmesini saglayabilirsiniz. Bunu yapmaniz son derece kolay.

Yahoo! Maps ve Yahoo! ASTRA bilesenleri son derece kullanisli Flash bilesenleridir. Varolan bu bilesenleri kullanarak zamandan kazanmalisiniz. En onemlisi, dogrulugu kanitlanmis boyle kutuphaneler sayesinde uygulamalarinizi daha da zenginlestirebilirsiniz.

Konuyla ilgili soru ve dusunceleriniz icin sbozdag@gmail.com adresine yazabilir ya da MMIstanbul soru-cevap kisminda programlama bolumune soru sorabilirsiniz.

Kaynak Kod: yahooharita.zip