Thursday, November 12, 2009

Membuat Tabulasi Plus Load Module

Sebuah aplikasi biasa nya memiliki banyak form, dan di dalam penyajian form nya dapat bermacam-macam, salah bentuk penyajian nya dalam bentuk tabulasi, contohnya tab 1 berisikan form data pelanggan , tab 2 berisikan form data pemesanan, tab 2 berisikan form barang. sepeti gambar di bawah ini:


Dalam posting ini akan mencoba membuat sebuah tab sebanyak tiga, yang mana setiap tab nya melakukan load module..



LANGSUNG AJA COBA BIKIN


Tahap 1.
membuat sebuah modul sebanyak tiga buah (misalkan bernama moduleA.mxml, moduleB.mxml, moduleC.mxml), kemudian tuliskan kode program di bawah ini

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
<mx:Label x="10" y="10" text="Content Module A"  />
</mx:Module>

- <mx:Module> adalah komponen yang menyatakan bahwa file ini adalah sebuah module
- <mx:Label> adalah komponen untuk membuat label

Untuk modul yang lain kode program nya sama dgn diatas, cukup sesuaikan value dari label nya saja.


Tahap 2.
Pada file main aplikasi tulisakan kode program berikut ini

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:TabNavigator left="15" right="15"  y="30" width="100%" height="100%">
<mx:Canvas label="Tabulasi A" width="100%" height="100%">
<mx:ModuleLoader url="moduleA.swf" />
</mx:Canvas>
<mx:Canvas label="Tabulasi B"   width="100%" height="100%">
<mx:ModuleLoader url="moduleB.swf" />
</mx:Canvas>
<mx:Canvas label="Tabulasi C"   width="100%" height="100%">
<mx:ModuleLoader url="moduleC.swf" />
</mx:Canvas>
</mx:TabNavigator>
</mx:Application>

Kode program terdiri dari tiga bagian penting
- <mx:TabNavigator> adalah komponen untuk membuat tabing
- <mx:Canvas> adalah komponen untuk meletakan isi dari setiap tabing, jd bila ada 5 canvas maka akan terbentuk libuah tab
- <mx:ModuleLoader> adalah komponen untuk load sebuah modul

Klw sudah terbentuk kurang lebih struktur file menjadi seperti ini

No comments:

Post a Comment