Merhabalar,

Bir önceki yazımızda XML dosyalarından, kullanım alanlarından ve Flex’in DataGrid bileşeni içerisinde XML verilerini görüntülemek ve formatlandırmaktan bahsetmiştik. Bu yazımızda ise Flex uygulamalarımızda çeşitli amaçlar ile kullandığımız bileşenlerden TileList bileşeni ile XML verilerinin ilişkilendirilmesinden bahsedeceğiz.

TileList bileşeni Flex’in güçlü veri gösterme yapılarından biridir. İçerisinde farklı formatlardan verileri barındırabilen TileList bileşenine Flex ile geliştireceğiniz uygulamalarınızda sık sık ihtiyaç duyacaksınız. Mesela bir foroğraf galerisinin önizlemesi için oldukça kullanışlı bir bileşen olabilir.

Hazırlayacağımız örneğimizde yine bir XML dosyası kullanacağız. Bu XML dosyamız içerisinde üyeler ve bu üyelere ait isim, meslek, fotoğraf v.b gibi bilgiler yer alıyor. Bu verileri XML’den bir ArrayCollection’a aktaracağız ve bu ArrayCollection’ı ise TileList içerisinde görüntüleyeceğiz.

uyeler.xml :

<?xml version="1.0" encoding="utf-8"?>
<uyeler>
    <uye>
        <resim>images/uye1.jpg</resim>
        <isim>Ömer Dursun</isim>
        <meslek>Öğretmen</meslek>
        <dogum>01-01-1974</dogum>
    </uye>
    <uye>
        <resim>images/uye2.jpg</resim>
        <isim>Ahsen Taşkıran</isim>
        <meslek>Çevre Mühendisi</meslek>
        <dogum>01-05-1980</dogum>
    </uye>
    <uye>
        <resim>images/uye3.jpg</resim>
        <isim>Arif Canayakın</isim>
        <meslek>Mafya</meslek>
        <dogum>24-02-1977</dogum>
    </uye>
</uyeler>

TileList veya diğer bileşenler içerisinde XML verilerini görüntülemek bir önceki örnekte kullandığımız yöntem ile oldukça benzemekte. Flex uygulamalarında çeşitli bileşenler içerisinde herhangi bir veri kaynağından gelen verileri görüntülemek hemen hemen aynı yöntemlerle ve methodlarla sağlanıyor. TileList içerisinde verilerimizi göstermek için öncelikle verilerimizi kullanıcı tanımlı bir Flex bileşeni içerisinde göstereceğiz. Bu bileşeni de TileList bileşeni içerisinde görüntüleyeceğiz. Aşağıdaki kodlar TileList bileşeni içerisine XML dosyamızda belirtilen verileri yükleyerek düzenli olarak görüntülememizi sağlıyor.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="myHTTP.send()" xmlns:comp="comp.*">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;

            [Bindable]
            private var uyeler:ArrayCollection;

            private function myResult(event:ResultEvent):void
            {
                uyeler = event.result.uyeler.uye;
            }
        ]]>
    </mx:Script>

    <mx:HTTPService id="myHTTP" url="data/uyeler.xml" result="{myResult(event)}"/>
    <mx:TileList id="myTile" dataProvider="{uyeler}" itemRenderer="comp.UyeSayfasi" width="362" height="300"/>

</mx:Application>

Burada TileListbileşeninin itemRenderer parametresi UyeSayfasi isimli bileşenimize işaret ediyor. Bu bileşen yine bizim oluşturduğumuz bir bileşendir. Bileşen içerisinde XML dosyamızda belirttiğimiz alanları görüntülüyor ve bir yapı oluşturuyoruz. Bileşenimizin kodları aşağıdaki gibidir.

UyeSayfasi.mxml :

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="120" height="200"
         paddingTop="10" paddingBottom="10" paddingRight="10" paddingLeft="10">

    <mx:Label text="{data.isim}"/>
    <mx:Image source="{data.resim}"/>
    <mx:Label text="{data.meslek}"/>
    <mx:Label text="{data.dogum}"/>
</mx:VBox>

Yukarıdaki örnek TileList içerisinde XML’de belirtilen verileri UyeSayfasi isimli bileşen sayesinde görüntülemektedir. 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.