Drag dan drop komponen Gambar di flash builder

Flash telah membawa bentuk terkaya interaktivitas ke web. Mudah komponen bergerak di panggung dengan menggunakan mouse hanya merupakan salah satu bentuk interaktivitas itu. Flash Builder (Flex) mendukung fungsionalitas drag drop komponen UI menggunakan startDrag dan stopDrag fungsi. Dalam tutorial ini kita akan belajar bagaimana untuk mengaktifkan aplikasi flex kita untuk mendukung menyeret dan menjatuhkan komponen UI dengan menggunakan mouse sederhana yang merupakan fitur dasar dalam aplikasi canggih berbasis internet kaya fleksibel.

Mari kita mulai dengan membuat proyek baru. Setelah membuat file di dalam folder Main.mxml terbuka src dan beralih ke Design view nya.

Drag dan drop komponen Gambar di atas panggung yang kita akan membuat untuk menanggapi gerakan mouse.

Hanya untuk membuat komponen gambar terlihat bagus, mari kita tambahkan sebuah sumber gambar dalam proyek kami. Membuat gambar folder bernama bawah folder src. Untuk tutorial ini saya telah menempatkan siluet seorang pria diperoleh dari jaringan pengembang Adobe untuk tujuan demo.

Beralih ke tampilan standar sumber dan mengganti tag <mx:Image> dimasukkan oleh Flash Builder dengan baris kode ini

<mx:Image id="img1" x="67" y="45" width="89" height="90" source="images/ajones.jpg"/>

Sejauh ini telah kita lakukan tidak ada yang istimewa kecuali bahwa membuat gambar dan pengaturan sifat-sifatnya

Menambahkan Kegunaan Tarik:

Sekarang mari kita melakukan sesuatu yang istimewa, kita ingin kontrol gambar kami untuk memulai menyeret ketika mouse diklik di atasnya dan pindah. Jadi menambahkan acara mouseDown kontrol gambar adalah tempat yang tepat untuk melakukannya.

Masukkan potongan kode ini dalam kontrol Gambar kita di atas.

mouseDown = "img1.startDrag ();"

sehingga kode akan terlihat seperti:

<mx:Image id="img1" x="67" y="45" width="89" height="90" source="images/ajones.jpg" mouseDown="img1.startDrag();"/>

Kami telah memberitahu Flex Builder untuk mulai menyeret img1 mengontrol kapan acara mouseDown dipanggil pada kontrol ini. Ctrl + F11 aplikasi Anda pada saat ini dan Anda dapat melihat Anda mampu tarik kontrol gambar ketika tombol mouse diklik dan pindah.

Namun Anda tidak dapat memisahkannya dari pointer mouse anda dan terus mengikuti pointer mouse Anda. Ini adalah fungsionalitas hilang setetes sebenarnya.

Menambahkan Kegunaan Drop:

Menambahkan fungsi drop untuk kontrol ini identik untuk menyeret fungsi, hanya perbedaan adalah bahwa acara yang akan memanggil fungsi ini adalah acara mouseUp. Saat tombol mouse dilepas acara mouseUp kontrol yang dipicu, yang pada gilirannya akan menghentikan menyeret menggunakan fungsi stopDrag.

Masukkan potongan kode ini di samping acara mouseDown dalam kontrol atas:

mouseUp = "img1.stopDrag ();"

sehingga kode akan terlihat seperti:

<Mx: Image id = "img1" x = "67" y = "45" width = "89" height = "90" sumber = "images / ajones.jpg" mouseDown = "img1.startDrag ();" mouseUp = "img1.stopDrag ();"/>

Wala, Anda baik untuk menguji aplikasi Anda. Anda sekarang dapat drag dan drop kontrol ini UI seperti kita digunakan untuk melakukan dalam aplikasi flash.

Memperluas menggunakan Fungsi:

Sebagian besar waktu ketika Anda akan menggunakan fungsionalitas drag-drop, Anda akan melakukan lebih dari sekedar menyeret dan menjatuhkan kontrol misalnya Anda mungkin perlu membatasi daerah di mana Anda memungkinkan pengguna untuk menyeret kontrol ini.

Untuk itu kita dapat menulis dua fungsi kustom yang akan terus menyeret fungsi dan dapat diperpanjang untuk memasukkan setiap kode kustom.

Kode di bawah ini dapat ditambahkan ke dalam file Main.mxml yang sama.

<fx:Script>

<[CDATA [!

fungsi publik mouseDownHandler (): void {

img2.startDrag ();

}

fungsi publik mouseUpHandler (): void {

img2.stopDrag ();

}

]]>

</ Fx: Script>

<-! Menyeret dan menjatuhkan dengan fungsi acara adat panggilan untuk pemrosesan lebih lanjut ->

<Mx: Image id = "img2" x = "100" y = "200" width = "89" height = "90" sumber = "images / teastman.jpg" mouseDown = "mouseDownHandler ()" mouseUp = "mouseUpHandler ( ) "/>

Dalam kode di atas, kita telah memasukkan kontrol gambar kedua dengan id img2, dan didefinisikan dua fungsi kustom yang akan dipanggil saat ini kontrol gambar diklik atau dilepaskan. Anda dapat menulis kode ActionScript dalam kustom fungsi-fungsi untuk memperluas fungsionalitas drag-drop Anda.