Eylül 21

JSON ve ActionScript

JSON Mustafa Ahmet KARA

Uygulamayı Flex ile geliştireceğimiz için Flex’in sunduğu RUI bileşenlerini kullanacağız. Flex Builder Eclipse Framework’ü üzerinde geliştirildiği için Eclipse kullananların aşina olduğu geliştirme ortamını size sunar, ama gördüğüm en güzel ve kolay kullanılabilir Eclipse modülüdür. Beta sürümünde script tagında derleme sırasında hata almamak için işletim sisteminizin tüm dil ayarlarının İngilizce olması gerekmektedir. Tanıtımdan sonra geliştirmeye ilk adımdan başlayalım:

FlexBuilder’i çalıştırınız ve Flex Development Perspective’inde olduğunuzdan emin olunuz. (Window > Open Perspective > Flex Perspective).

Navigator görünümün açık olduğundan emin olunuz. Eğer açık değil ise Window > Show View > Navigator ile açınız.

Navigator’e sağ tıklayarak New Flex Project’i seçiniz. JSONExample olarak isimlendiriniz ve Next düğmesine tıklayınız. Kaydedilecek yer için Use default location seçeneğini seçiniz ve Next düğmesine tıklayınız. Add SWC düğmesi ile JSON işlemleri için gerekli olan corelib.swc yi ekleyiniz. Bu SWC kütüphanesi AS2corelib ‘i indirdiğiniz klasörde bin klasörünün altındadır. Finish düğmesine tıklayarak projenizi oluşturunuz.

İlk yapacağımız işler, sonuçlar için List, resim için Image ve JSON sonuçları için de Text eklemek olacaktır. Bunun için JSONExample.mxml dosyasına çift tıklayarak editörde açınız. Design (sol üst köşede) moduna geçiniz. Editörün sol alt köşesinde Components listesi olacaktır. Yok ise (Window > Show View > Components) ile gösterebilirsiniz.

Components ‘ten bir List alıp forma bırakınız. Properties ( yok ise Window > Show View > Flex Properties) ekranında idsini lst1 ve On change için ise onListChange(event) yazınız. Yerleşimini ayarlayınız.

Components’ten bir Image alıp forma bırakınız.Properties ekranında idsini img1 olarak ayarlayınız ve yerleşimini ayarlayınız.

Components’ten bir textarea alıp forma bırakınız. Properties ekranında idsini txt olarak ayarlayınız ve yerleşimini ayarlayınız. Editörün sol üst köşesinden Source düğmesine tıkladığınızda aşağıdaki gibi gözükecektir.

PLAIN TEXT
PHP:
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  4.  
  5.     <mx:TextArea id="txt" wordWrap="true" bottom="0" right="0"
  6.                       left="0" height="77"/>
  7.     <mx:List top="0" bottom="76" left="0" width="240" id="lst1"
  8.                       change="onListChange(event)"></mx:List>
  9.     <mx:Image left="239" right="0" top="0" bottom="76" id="img1" />
  10.    
  11. </mx:Application>

Şimdi Yahoo search apisinden sonuçları alacak olan bağlantıyı yapalım mx:Application tag’ı altına aşağıdaki satırı ekleyiniz.

PLAIN TEXT
PHP:
  1. <mx:HTTPService id="service"
  2.                resultFormat="text"
  3. url="http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&amp;query=makara&amp;results=50&amp;output=json"
  4.         result="onJSONLoad(event)" />

Bu satır ise belirtilen adrese bir çağrı yapılacağını sonucun text olacağını ve sonucun onJSONLoad fonksiyonuna gönderileceğini belirtir.

Şimdi tek ihtiyacımız fonksiyonları yazmak olacaktır. Bunun için bir Script bloğu’nu mx:Application etiketi altına ve mx:HTTPService üzerine ekleyelim. Sonuçta oluşacak kodumuz ise aşağıdaki gibi olacaktır.

PLAIN TEXT
PHP:
  1. <mx:Script>
  2.     <![CDATA[
  3.             
  4.         import mx.events.ListEvent;
  5.         import mx.rpc.events.ResultEvent;
  6.         import com.adobe.serialization.json.JSON;
  7.            
  8.             // Yahoo sonuçlarını tutacak olan nesne
  9.             private var JSONObject:Object = null;
  10.            
  11.             //List üzerinde bir değişiklik olduğunda JSON nesnesi üzerinden resmi al
  12.             //ve resmi değiştir.
  13.             private function onListChange(event:ListEvent):void
  14.             {
  15.                 img1.source = JSONObject.ResultSet.Result[event.rowIndex].Url;
  16.                
  17.             }
  18.             //Servis yüklemesi yaptıktan sonra bu fonksiyon çalışır
  19.         private function onJSONLoad(event:ResultEvent):void
  20.         {
  21.             //JSON datasını event üzerinden al ve string olarak işle
  22.             var rawData:String = String(event.result);
  23.  
  24.             //string datayı txt isimli JSON sonuç göstericisine ata
  25.             txt.text=rawData;
  26.            
  27.             //Gelen datajı AS3CoreLib'in sunduğu statik fonksiyona gönder
  28.             //ve JSONObject değişkenine ata            
  29.             JSONObject = (JSON.decode(rawData) as Object);
  30.                
  31.             //Sonuçlardan Title alanı liste içinde gösterilecektir.
  32.             lst1.labelField = "Title";
  33.                
  34.             //listenin veri kaynağı olarak Yahoo sonuçlarını bağla
  35.                         // Sonuçlar artık actionscript nesnesidir direkt kullanabilirsiniz
  36.             lst1.dataProvider = JSONObject.ResultSet.Result;
  37.                
  38.         }
  39. ]]>
  40. </mx:Script>

Sizinde göreceğiniz gibi Internetten aldığımız tüm sonuçları JSON ile decode ettikten sonra herhangi bir ActionScript nesnesi olarak herhangi bir ek işleme maruz bırakmadan kullanabiliyoruz.

Bu işlemden sonra tek ihtiyacımız Application nesnesi oluşturulduktan sonra HTTPService ile Yahoo Search’e çağrı yapmaktır. Bunun için mx:Application etiketine yükleme sonrasında çağrı yapmasını sağlayan özelliği ekleyelim:

creationComplete = “service.send()”

Bu adımdan sonra yapmamız gereken bir işlem kalmamıştır. Çalıştırıp sonucu görebilirsiniz.
Bu projenin tüm kodlarını ve çalışan halini görmek isterseniz ek dosyalar kısmından örneği indirebilirsiniz. Çalıştırmak için bin klasöründeki JSONExample.html dosyasını bir tarayıcı ile açabilirsiniz. Flash Playeriniz eski sürüm ise Adobe sistesinden yüklemeniz için sayfa sizi uyaracaktır.

Bu yazımda Adobe’un AJAX javascript kütüphanesi olan Spry Framework for Ajax (JSON desteği şu anda betasında mevcuttur), Flex-Ajax Brige, Flash Ajax-Video Component konularından çok ayrıntılı olacağı ve yazıyı çok uzatacağı için bahsedemiyorum. JSON serilerimizi bitirdikten sonra, Flex’in JavaScript ve AJAX dünyasına neler kazandırabileceklerini bir başka yazımda birleştirmeyi planlıyorum. O zamana kadar şimdilik hoşçakalın, tekrar görüşmek üzere.

Uygulama Örneği

JSONExample - Yazımızda geliştirmiş olduğumuz uygulama

Sayfalar: 1 2

Toplamda 3099 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 4 kişi aynı anda okumuş.
Bugün 14 kez okunmuş.

Etiketler: , 

1 oy2 oy3 oy4 oy5 oy (3 oy, ortalama 5) Oylanıyor ... Oylanıyor ...

  1. Sağlamlığı Kanıtlanmış Tekniklerle Web 2.0 AJAX
  2. Same Origin Policy ( Aynı Kaynak Politikası)
  3. JSON ve XML

Trackback Yorumları takip et Baskı Önizleme

2 yorum var

  1. # sinan | 22 Eylül 2007, 19:30 Gravatar

    ellerinize sağlık diyorum inş daha güzel şeyler olacak.

  2. # Cem | 22 Nisan 2008, 13:28 Gravatar

    Slm gerçekten güzel bir yazı. Buradan anladığım kadarıyla sanırım JSON sayesinde php dosyalarındaki functionları da çalıştırıp dönen datayı elde edebiliyoruz. Ve dolayısıyla Action Script ‘in en hoşlanmadığım yanı olan veritabanı bağlantısına izin vermeyişide böylece aşılmış oluyor. Böylece php dosyasındaki function ı çalıştırıp veritabanını sorgulatarak dönen dataları almak yada data yazmak mümkün olacak.
    Yalnız bunun AS3 ile Flashta nasıl yapılacağı konusunda da kısa bir bilgi verirseniz sevinirim
    Teşekkürler…

Yorum yazın

sayfa sayacı