İlk Anlatım

Örnek nasıl çalışır

Adım 1 - XML ve Uygulama tanımlama

XML dosyasını XML tanımıyla başla ve sonra mx:Application biçimini kullan;

<?xml version="1.0" ?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

Adım 2 - HTTpService tanımı yapılır

Bu adımda RSS beslemesini kullanacak HTTPService tanımı yapılır. Burada kullanılan httpRSS için bir değişken kullanılır ki sonra bu değişkenle httpRSS erişimi sürdürülebilsin.

<mx:HTTPService id="httpRSS" url="http://www.petefreitag.com/rss/" resultFormat="object" />

Adım 3 - Denetimleriniz bir panel içine yerleştirin

"panel" denetimleri (burada DataGrid, Yazı Alanı ve Düğmelerden oluşur) bir arada tutar. Bu panel için bazı özellikler de tanımlanır:

<mx:Panel id="reader" title="Pete Freitag's Blog Reader" width="500">

Adım 4 - DataGrid tanımlama

DataGrid parçası tarihleriyle blog satırları listesini görüntülemek için kullanılır.

En karmaşık olan satır burasıdır. Çünkü burada RSS xml DataGrid ile bağlanacaktır. Ayrıca Olay ele alan adım satırlar tıklanınca devreye girecektir.

DataGrid özelliklerinde değişkenler kullanılmaktadır (kıvrımlı parantezler içinde).

<mx:DataGrid id="entries" width="{reader.width-15}" dataProvider="{httpRSS.result.rss.channel.item}" cellPress="{body.htmlText=httpRSS.result.rss.channel.item[entries.selectedIndex].description}">
  <mx:columns>
    <mx:Array>
      <mx:DataGridColumn columnName="title" headerText="Title" />
      <mx:DataGridColumn columnName="pubDate" headerText="Date" />
    </mx:Array>
  </mx:columns>	
</mx:DataGrid>

Burada anlatılacak çok şey var. Herşey sırayla anlatılacaktır:
En (width)
Burada panel büyüklüğüne göre en dinamik olarak ayarlanır. Biz panelden 15 piksel daha küçük olmasını öngörmüş olduk.
veri Sağlar (dataProvider)
dataProvider niteliğinde burada grid için veri httpRSS adlı HTTPServisi sonuçuna bağlanır. Daha başka bir anlatımla XML dosyalarını dataGrid satırlarından birine bağlamış oluruz. Öğe biçimleri rss içinde olduğundan ve gösterdiğimiz kanal biçimleri öğeler dizisi olduğundan onlara httpRSS.result.rss.channel.item ile erişiriz.

hücre Basma (cellPress)
Daha sonra bir olay göstergesi yaratılır. Bununla açıklama biçimi görüntülenir. entries.selectedIndex değişkeni kullanılarak hangi öğeden tıklama yapıldığı anlaşılır ve açıklamaya erişimi (giriş alanı) için httpRSS.result.rss.channel.item[entries.selectedIndex].description kullanılır.

Şimdi yazı alanı için bilgi girme durumundayız. Bunu rss öğesinin sonraki adımı olarak tanımlarız. Yazı alanı için htmlText özelliği değerine girilen değerin ataması yapılır.

Kolonlar (columns)
Şimdi datagrid içinde hangi kolonların görüntüleneceği tanımlanır. columnName biçim adıyla uyuşmalıdır.

Adım 5 - Yazı alanını tanımlama

mx:TextArea biçimi yazı alanı için kullanılır. Giriş alanı şöyledir:

<mx:TextArea id="body" editable="false" width="{reader.width-15}" height="300" />

Adım 6 - Düğme yaratma

Son kontrolumuz HTTPService isteği için kullanılacak düğmeyi yaratmaktır.

<mx:Button label="Load Blog Entries" click="{httpRSS.send()}" />

Olayı tıklama göstergesinde HTTPService nesnesinin send() yöntemini çağırırız.

Adım 7 - Paneli ve Uygulamayı kapatma

Şimdi bazı biçimler kapatılır ve işiniz biter.

</mx:Panel>
</mx:Application>

Bir Uyarı

Flex 1.5 HTTPService çağrılarını başlatmak için proxy kullanır. Güvenlik nedeniyle proxy HTTP çağrılarını engeller. Bu durumda RSS besleme adresini (ya da http://* değerini) flex-config.xml listesine eklemeniz gerekir.
MXML kaynak kodu şöyledir:

<?xml version="1.0" ?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

 <mx:HTTPService id="httpRSS" url="http://www.petefreitag.com/rss/" resultFormat="object" />

 <mx:Panel id="reader" title="Pete Freitag's Blog Reader" width="500">

  <mx:DataGrid id="entries" width="{reader.width-15}" dataProvider="{httpRSS.result.rss.channel.item}" cellPress="{body.htmlText=httpRSS.result.rss.channel.item[entries.selectedIndex].description}">
    <mx:columns>
      <mx:Array>
        <mx:DataGridColumn columnName="title" headerText="Title" />
        <mx:DataGridColumn columnName="pubDate" headerText="Date" />
      </mx:Array>
    </mx:columns>	
  </mx:DataGrid>

  <mx:TextArea id="body" editable="false" width="{reader.width-15}" height="300" />

  <mx:Button label="Load Blog Entries" click="{httpRSS.send()}" />
  
 </mx:Panel>
</mx:Application>