FLEX ve JS 3

Buradaki açıklamalar http://www.tutorialized.com/tutorials/Adobe-Flex/1 adresindedir

DataGrid içine biraz veri eklemek için Actionscript kullanmak gerekir. Önce DataGrid ilkleme olayına bir işlev bağlanır. Böylece yeni DataGrid biçimi aşağıdaki gibi olur.

Kodlama:

<mx:DataGrid id="dgPeople" x="10" y="10" initialize="initDG()" 

width="422" height="229">

Artık burada gösterilen işlev yazılmalıdır. Burada uygulamaya "script" biçimi eklemekle işe başlanır. Peşinden işlevi yazmak gelir. ArrayCollection kullanabilmek için "import" tanımı yapılır.

"initDG" işlevinin içinde az daha bir miktar veri toplama işlemi vardır. Veriler için bir dizi oluşturulur ve daha sonra birkaç öğe diziye eklenir. Burada: {anahtar1: "değer1", anahtar2: "değer2"...} dil kuralı kullanılır. Burada anahtarlarımızın DataGridColumns değerleriyle uyması gerektiği izlenir. DataGrid kolonların hangi değerlerden oluştuğunu bilir. Bundan sonra yapılacak olan ArrayCollection olup tanımlanan dizinin içine yerleştirilmesidir. Son olarak dgPeople (DataGrid içinde) buna bağlanır. Böylece aşağıdaki kod oluşur. Bu kodlama uygulama açılış biçiminin hemen altında yer alır.

Kodlama:

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

public function initDG():void

{

var people:Array = new Array();

people.push({Name: "Charlie", Age: "23", Sex: "Male"});

people.push({Name: "Brandon", Age: "23", Sex: "Male"});

people.push({Name: "Mike", Age: "23", Sex: "Male"});

people.push({Name: "Caroline", Age: "23", Sex: "Female"});

var peopleCollection:ArrayCollection = 

new ArrayCollection(people);

dgPeople.dataProvider = peopleCollection;

dgPeople.selectedIndex = 0;

}

]]>

</mx:Script>

Evet artık uygulama derlenip çalıştırılabilir. Ve artık dataGrid içinde veri de vardır. Bu oldukça kolaydır. Başlamak için tıklama olayına bir düğmeyi bağlamak gerekir. Düğme de Actionscript işlevini başlatır. Şimdi işin eğlenceli kısmı başlar. Flex içinden Javascript işlevlerini başlatmak için Dışsal Arayüz kullanılır (External Interface api). Temelde bize Javascript işlevlerini kullanmayı sağlar (tersi de olur). Actionscript işlevi "script" biçimi içinde yer alır ve "import" deyimiyle "flashçexternal.*" tanımı yapılır. İşlevin kendisi için fazla birşey yapmak gerekmez. Önce dışsal arayüzün var olup olmadığına bakılır (kısacası kodlama html içinde midir anlamına gelir). Eğer öyleyse, ExternalInterface.call ile işlem başlar. Javascript işlevine ("displayPerson") böylece bilgi iletilmiş olur. Parametreler DataGrid içindeki seçilen öğelerdir (selectedItem). Seçilen öğenin bir veri dizisi olarak Javascript ortamına gönderilmesini sağlar. En son işlem olarak Javascript içine bilginin gönderildiği durum alanına yazılır. İşlem aşağıdaki gibidir:

Kodlama:

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import flash.external.*;

public function initDG():void

{

var people:Array = new Array();

people.push({Name: "Charlie", Age: "23", Sex: "Male"});

people.push({Name: "Brandon", Age: "23", Sex: "Male"});

people.push({Name: "Mike", Age: "23", Sex: "Male"});

people.push({Name: "Caroline", Age: "23", Sex: "Female"});

var peopleCollection:ArrayCollection = 

new ArrayCollection(people);

dgPeople.dataProvider = peopleCollection;

dgPeople.selectedIndex = 0;

}

public function jsDisplayPerson():void

{

if (ExternalInterface.available) {

ExternalInterface.call("displayPerson", 

dgPeople.selectedItem);   

lblMessage.text = "Data Sent!";

} else

lblMessage.text = "Error sending data!";

}

]]>

</mx:Script>