Related Link
Sponsor
Trippert Labs
Lynda.com
O'Reilly
Manning Publications Co.
Wrox
Peachpit
PRECISION CONNEXION
labkom UBL
Tutorial Design Flex Membuat Pop-Up di Flex
| Membuat Pop-Up di Flex |
| Written by Gudel Piero |
| Sunday, 05 October 2008 13:24 |
|
Pada mendesign suatu aplikasi berbasis web terkadang kita dihadapkan kepada suatu masalah yaitu keterbatasan layar untuk GUI, hal ini sering kita jumpai jika kita berhadapan tampilan yang di tuntut untuk sedinamis mungkin, mau tidak mau kita harus memperhitungkan luas layar demi menjaga ke dinamisan dan penampilan dari suatu aplikasi. Salah satu solusi untuk mengatasinya adalah dengan menggunakan tampilan yang bersifat floating, atau biasa disebut dengan Pop-Up. Saya akan coba berbagi cara untuk membuat Pop-Up serta bagaimana mengirimkan variable dari halaman utama ke halaman Pop-Up. Langsung kepada proses pembuatannya karena saya anggap kita semua sudah bisa membuat project didalam flex yang berbasis Web Application (yang berjalan di flash player). Pertama kita coba buat form yang berisikan tentang data diri dan komentar seperti yang biasa kita lihat di di halaman-halaman web Wordpress , seperti gambar yang ada berikut :
Beri ID textInput dan textArea yang sudah kita buat tadi Name -> txtNameMain Email -> txtEmailMain Comment -> txtCommentMain Kemudian kita buat halaman popup untuk konfirmasi, caranya yaitu kita Klik menu File -> New -> MXML Component Kemudian akan tampil seperti berikut :
Pada Filename kita beri nama confirmationWindows.mxml dan pada Based on kita pilih TitleWindows, pada dasarnya TitleWindows dan Panel memiliki Tampilan yang sama, akan tetapi mengapa saya pilih TitleWindows karena pada TitleWindows kita dapat menambahkan properties ShowCloseButton hal ini berguna untuk menambahkan tombol Close ( X ) seperti yang ada di setiap windows yang biasa kita gunakan. Kemudian setelah semua kita isi kemudian klik tombol Finish. Kemudian component yang tadi kita buat menyerupai tampilan berikut :
Beri ID pada Text dan textArea yang sudah kita buat tadi Email -> txtEmail Comment -> txtComment Setelah Semua tampilan Selesai maka kita pindah ke Script, ada beberapa Script yang perlu ditambahkan kedalam Halaman Utama yaitu : <mx:Script> <![CDATA[ import mx.managers.PopUpManager; public var popConfirmation:confirmationWindows;
private function showPopConfirmation():void{ popConfirmation = confirmationWindows(PopUpManager.createPopUp(this, confirmationWindows, true)); PopUpManager.centerPopUp(popConfirmation); popConfirmation.txtName.text = txtNameMain.text; popConfirmation.txtEmail.text = txtEmailMail.text; popConfirmation.txtComment.text = txtCommentMain.text; }
]]> </mx:Script>
Kemudian pada Tombol Submit kita tambahkan pada property Click sebuah function yang tadi sudah kita buat yaitu showPopConfirmation().
<mx:Script> <![CDATA[ import mx.managers.PopUpManager;
private function CloseMe():void{ PopUpManager.removePopUp(this); } ]]> </mx:Script> Kemudian pada TitleWindows kita tambahkan pada property Close sebuah function yang tadi sudah kita buat yaitu CloseMe(). Demikianlah Tutorial ini telah selesai kita pelajari, jika ada yang ingin di tanyakan YM gw aja oke… This e-mail address is being protected from spambots. You need JavaScript enabled to view it
|
| Last Updated on Tuesday, 07 October 2008 09:22 |
