Welcome to Abdul Malik Ikhsan's Blog

load XML data (Simple)

Posted in Flex by samsonasik on March 21, 2009

Saya menulis tentang Flex kali ini bukan untuk memberikan tutorial lho, melainkan hanya untuk bisa saling berbagi (sharing) apa yang baru saya pelajari, karena emang belajarnya baru dari kemarin, he..he.. (jadi kalau mau nanya, mending nanya udah ada yang punya apa belum ya, he…he.., soalnya kalau nanya tentang Flex, takut belum bisa kejawab, 🙂  )

Ok, sekarang fokus ke masalah, kebanyakan Flex meload data dengan format XML, karena kalau format Binary, jika user menginginkan pergantian tampilan, maka perlu recoding di bagian back end, maka saya lebih fokuskan untuk membahas tentang load data via XML – nya ( bilang saja yang baru bisa baru itu, xi..xi..xi… , 🙂 )

Sekarang kita siapkan project kita, misal kita beri nama TestGridXML , karena kita akan fokus pada data, maka kita siapkan dulu datanya. Di sini saya menyimpan data format XML di actionscript file nya,  biar lebih rapi, buat aja folder untuk menyimpan file-file actionscript di bawah folder src, seperti pada gambar berikut :
debug-perspective

Berikut contoh code program XMLDataTest.as :

// ActionScript file
//digunakan agar variable bisa diakses langsung oleh komponen
[Bindable]
private var dataPenduduk:XML =
<penduduk>
<penduduk no="1">
	<nama>Abdul Malik Ikhsan</nama>
	<alamat>Jalan Pamekar</alamat>
    </penduduk>
<penduduk no="2">
	<nama>samsonasik</nama>
	<alamat>Jalan Burangrang</alamat>
    </penduduk>

</penduduk>

Sekarang, tinggal buat view nya deh :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical" verticalAlign="middle">
<mx:Script source="ActionScriptFilez/XmlDataTest.as"/>
<mx:Panel title="Test Grid Application" width="350" horizontalAlign="center">
	<mx:DataGrid dataProvider="{dataPenduduk.penduduk}">
		<mx:columns>
			<mx:DataGridColumn headerText="No." dataField="@no"/>
			<mx:DataGridColumn headerText="Nama" dataField="nama"/>
			<mx:DataGridColumn headerText="Alamat" dataField="alamat"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Panel>
</mx:Application>

Inilah hasilnya :
datagrid flex simple

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: