Merhabalar,

Flex bileşenleri ile XML verilerinin kullanımını incelediğimiz bu son yazımızda Tree bileşeni içerisinde XML verilerini nasıl kullanacağımızı göreceğiz. Tree bileşeni öyle her yerde kullanılan bir bileşen olmamakla beraber kullanıldığı yerlerde de oldukça başarılı olan bir bileşendir. Kullanıcıya sunduğu hiyerarşik görünüm ile istenilen yere kolay ve düzenli erişim sağlaması sebebi ile kullanımı tercih edilebilir. Mesela bir web sitesinin site haritası için veya bir AIR uygulamasında işletim sisteminizdeki dosya erişim menüsü için oldukça kullanışlı olacağını düşünüyorum. Tree bileşeni içerisine yüklenen XML dosyası içerisindeki hiyerarşik yapıyı olduğu gibi gövdesine yansıtır.

database.xml :

<?xml version="1.0" encoding="utf-8"?>
<website>
    <altsayfa baslik="Anasayfa">
        <altsayfa2 baslik="Kurumsal"></altsayfa2>
        <altsayfa2 baslik="Firmamız"></altsayfa2>
    </altsayfa>

    <altsayfa baslik="Hakkımızda">
        <altsayfa2 baslik="Kurumsal2"></altsayfa2>
        <altsayfa2 baslik="Firmamız2"></altsayfa2>
    </altsayfa>

    <altsayfa baslik="Referanslar">
        <altsayfa2 baslik="Kurumsal2"></altsayfa2>
        <altsayfa2 baslik="Firmamız2"></altsayfa2>
    </altsayfa>

    <altsayfa baslik="İletişim">
        <altsayfa2 baslik="Kurumsal2"></altsayfa2>
        <altsayfa2 baslik="Firmamız2"></altsayfa2>
    </altsayfa>
</website>

Aşağıdaki kodlar Tree bileşeni içerisinde XML veirlerini görüntülüyor.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF" 
                themeColor="haloSilver" creationComplete="myData.send();" width="500" height="350">

    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            [Bindable]
            private var website:XMLList;

            private function myTreeHandler(event:ResultEvent):void
            {
                website = event.result.altsayfa;
            }
        ]]>
    </mx:Script>

    <mx:HTTPService id="myData" url="data/database.xml" 
                    resultFormat="e4x" result="myTreeHandler(event)" showBusyCursor="true"/>

    <mx:Tree id="myTree" dataProvider="{website}" labelField="@baslik" height="100%" width="100%" />
</mx:Application>

Evet, önceki yazılarımızda da değindiğimiz Flex ve XML konusunu şimdilik burda bitiriyoruz. Gördüğünüz gibi Flex ile XML tipindeki verileri işlemek bukadar kolay ve eğlenceli. Artık bu iki yazıdan sonra Flex uygulamalarınızda XML verilerini rahatlıkla kullanabilirsiniz. Asıl önemli olan husus ise, Flex’in XML tipindeki verilerle bu kadar iyi anlaştığını gördülten sonra, Flex içerisinde kullanacağınız hertürlü verilerinizi de XML formatında almanın güzel bir fikir olduğunu görebilmektir. Bu uygulamanın çalışan örneği aşağıdadır. Kolay Gelsin!

NOT: Sayfada bazan SWF dosyaları çalışmıyor (tarayıcıya göre) yada bağlantılara izin verilmiyor. Eğer kaynağı görüntüle butonlarını çalıştıramıyorsanız, uygulamanın kaynağına buradan ulaşabilirsiniz.