Tip cepat: Menggunakan Datagrid dengan XML

Saya akan menunjukkan bagaimana untuk menggunakan komponen datagrid dengan xml file. Ketika Anda perlu untuk menampilkan tabel data yang  tidak ada yang lebih cepat dan lebih mudah cara untuk menggunakan datagrid, dan ketika dipasangkan dengan xml file itu membuat hal-hal menjadi lebih baik.

Langkah 1: Menyiapkan dokumen Flash

Buat sebuah file flash baru (Actionscript 3.0). Atur dokumen 600x400px dengan latar belakang putih.

Simpan file ini dengan nama xmlDatagrid.fla

Langkah 2: Menambahkan komponen ke dokumen

Buka jendela komponen dengan pergi ke Menu > Window > Components atau menekan Ctrl + F7.

Seret tombol, combobox dan komponen datagrid ke stage.

Hapus tombol, komponen combobox dan datagrid dari stage; mereka adalah sekarang di perpustakaan Anda.

Berikut adalah preview struktur dokumen xml yang akan kami gunakan:

<?xml version="1.0"?>
<books>
  <book>
		<title>Learning ActionScript 3.0: A Beginner's Guide</title>
		<instock>yes</instock>
		<price>26.39</price>
	</book>
	<book>
		<title>Essential ActionScript 3.0</title>
		<instock>yes</instock>
		<price>34.64</price>
	</book>
</books>

Source download berisi tiga file XML: flash.xml, ajax.xml dan php.xml; masing-masing mengikuti struktur yang sama sebagai potongan di atas, tetapi berisi buku yang berbeda. Anda akan perlu untuk menempatkan mereka dalam folder yang sama dengan file fla Anda

Langkah 3: Buka File ActionScript baru

Buka file actionscript baru dan Simpan dengan nama XMLDataGrid.as

Sekarang buka Deklarasi paket dan mengimpor kelas yang akan kita gunakan:

package {
	import flash.display.MovieClip;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import fl.controls.DataGrid;
	import fl.controls.ComboBox;
	import fl.controls.Button;

Langkah 4: Extend kelas MovieClip dan mendeklarasikan variabel

Dokumen utama kelas harus extend Sprite atau kelas MovieClip; di sini kami extend kelas MovieClip. Deklarasikan variabel-variabel yang akan kami gunakan:

package {
	public class XMLDataGrid extends MovieClip {
		var dg:DataGrid;
		var cb:ComboBox;
		var urlLoader:URLLoader = new URLLoader();
		var loadButton:Button;
		var bookXML:XML;

Langkah 5: Mengatur Constructor

Di sini kami memgatur constructor dengan tiga fungsi yang akan digunakan:

public function XMLDataGrid():void {
		setupGrid();
		setupComboBox();
		setupButton();
}

Langkah 6: Mendefinisikan Fungsi

Di sini kita mendefinisikan fungsi yang kita gunakan di constructor:

private function setupGrid():void {
	dg=new DataGrid();

	dg.addColumn("Title");
	dg.addColumn("InStock");
	dg.addColumn("Price");
	//This sets the size of the datagrid
	dg.setSize(600,100);
	//This is how many rows you want the datagrid to show
	dg.rowCount=5;
	//When we add colums they are put into an array
	//Here we set the first column "Title" width to 450
	dg.columns[0].width=450;
	
	//This set the x and y position of the datagrid
	dg.move(0,100);

	addChild(dg);
}

private function setupComboBox():void {
	cb = new ComboBox();
	//This adds item to the comboBox
	cb.addItem({label: "Flash" });
	cb.addItem({label: "Ajax" });
	cb.addItem({label: "Php" });
	//This sets the x and y positions
	cb.move(200,50);

	addChild(cb);
}

private function setupButton():void {
	loadButton = new Button();
	loadButton.label = "Load Books";
	loadButton.addEventListener(MouseEvent.CLICK, loadBooks);
	loadButton.x = 200;
	loadButton.y = 325;
	addChild(loadButton);
}

Fungsi setupGrid() menciptakan sebuah komponen DataGrid, yang akan menampilkan data dari XML file kami masukan.

Fungsi setupComboBox() menciptakan ComboBox, yang merupakan daftar drop-down yang kita gunakan untuk memungkinkan pengguna untuk memilih sebuah file XML untuk diteruskan ke data grid.

Tombol yang dibuat di setupButton() akan digunakan untuk memasukan file XML yang dipilih dalam kotak kombo, ke data grid. Kami akan menulis kode berikut.

Langkah 7: Mendefinisikan fungsi loadBooks

Fungsi loadBooks digunakan dalam eventListener loadButton.

private function loadBooks(e:Event):void {
	//Here the cb.selectedLabel returns a string so we call toLowerCase() on it
	//and append .xml to it i.e. if 'Flash' is selected we load 'flash.xml'
	urlLoader.load(new URLRequest(cb.selectedLabel.toLowerCase()+".xml"));
	urlLoader.addEventListener(Event.COMPLETE, populateGrid);
}

Langkah 8: Mendefinisikan fungsi populateGrid

Fungsi populateGrid digunakan dalam eventListener urlLoader dalam fungsi loadBooks.

	private function populateGrid(e:Event):void {
		var booksXML:XML = new XML( e.target.data);
		//How many items are in the xml file
		var booksLength:int = booksXML.book.length();
		
		//This removes all the previously added data in the datagrid.
		dg.removeAll();
		//Here we loop through the <book> nodes in the xml file, and add each as a row to the datagrid
		for (var i:int =0; i &lt; booksLength; i++) {
			dg.addItem({Title: booksXML.book[i].title, InStock: booksXML.book[i].instock,Price: booksXML.book[i].price});
		}
	} //Close out the class
} // This is closing the package out

Langkah 9: Mengatur dokumen kelas dan tes

Atur dokumen kelas unjetuk "XMLDataGrid" dan uji filmnya!

Kesimpulan

Di sini kita belajar bahwa menampilkan data tabular di flash dibuat mudah dengan komponen datagrid dan bahwa dipasangkan dengan xml membuat solusi yang bagus.

Ini adalah tutorial pertama saya, saya harap Anda telah belajar sesuatu yang bermanfaat dan terima kasih sudah membaca!