Buat Perilaku khusus di ASP.NET Atlas

Penulis：Eve Cole Waktu Pembaruan：2009-06-30 16:12:07

Versi Bahasa Inggris: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
Perilaku di Atlas mendefinisikan perilaku ketika peristiwa kontrol dipicu. Perilaku dapat dilihat sebagai peristiwa DHTML yang dienkapsulasi, seperti klik dan arahkan kursor. Perilaku juga dapat menjadi komponen yang dapat dilampirkan ke kontrol klien Atlas untuk menyediakan fungsi kontrol klien Atlas yang lebih canggih dan lebih kaya, seperti beberapa fungsi seret & lepas yang rumit, penyelesaian otomatis, mengambang, dan lainnya. Perilaku akan ditentukan dalam kumpulan perilaku kontrol Atlas.

Dari dokumentasi Atlas dan file sumber, kita dapat mengetahui bahwa Atlas memiliki perilaku bawaan berikut:

Perilaku Klik: Menyediakan pemrosesan klik mouse.
Perilaku Mengambang: Memberikan efek drag & drop.
Perilaku Hover: Menyediakan pemrosesan peristiwa DHTML pada mouseover, onmouseout, onfocus, dan onblur.
Komponen Pop-up: Menyediakan fungsi pop-up dan dapat digunakan untuk mengimplementasikan tooltip tingkat lanjut.
Perilaku Pelengkapan Otomatis: Menyediakan fungsionalitas penyelesaian otomatis. Ini juga salah satu fitur yang umum digunakan dalam demo Atlas. Perilaku ini juga memerlukan pengendali sisi server.
Perilaku Klik digunakan untuk menangani kejadian onclick DHTML. Ini sangat berguna tetapi fungsi yang disediakannya agak sederhana. Pada beberapa program yang lebih kompleks, kita mungkin perlu memisahkan fungsi tombol kiri dan kanan. Misalnya, tombol kiri digunakan untuk memilih dan tombol kanan digunakan untuk memunculkan menu shortcut. Meskipun kita dapat menempatkan if-else ini di pengendali Perilaku Klik, ini bukanlah metode Atlas yang baik. Oleh karena itu, hari ini kita akan menulis Perilaku Klik yang lebih canggih yang disebut ExtendedClickBehavior, yang dapat memisahkan tombol kiri dan kanan di dalam Perilaku dan memicu dua peristiwa berbeda. Dengan menulis ExtendedClickBehavior ini, Anda juga dapat memahami proses umum pembuatan Perilaku kustom di Atlas.

Secara umum, ada lima langkah untuk membuat Perilaku kustom:

Mewarisi dari kelas dasar Sys.UI.Behavior.
Tentukan peristiwa Anda sendiri untuk merangkum peristiwa dalam DHTML. Peristiwa ini akan digunakan untuk mengekspos kontrol Atlas lainnya sebagai pengganti peristiwa DHTML asli yang tidak dimodifikasi.
Tentukan pengendali peristiwa Anda di konstruktor Perilaku, dan lepaskan pengendali peristiwa di destruktor.
Memancarkan kejadian terkait di fungsi handler. Dalam contoh ExtendedClickBehavior, kami menampilkan peristiwa berbeda berdasarkan tombol mouse berbeda.
Tambahkan deskripsi peristiwa yang Anda tetapkan dalam metode getDescriptor().
Di bawah ini adalah kode JavaScript untuk ExtendedClickBehavior. Lima langkah di atas ditandai sebagai komentar di dalam kode. Simpan kode di bawah ini sebagai ExtendedClickBehavior.js.

Sys.UI.ExendedClickBehavior = fungsi() {
Sys.UI.ExendedClickBehavior.initializeBase(ini);

var _clickHandler;

// langkah 2
ini.klik = ini.createEvent();
this.leftClick = ini.createEvent();
this.rightClick = ini.createEvent();

ini.buang = fungsi() {
// langkah 3
this.control.element.detachEvent('onmousedown', _clickHandler);
Sys.UI.ExendedClickBehavior.callBaseMethod(ini, 'buang');
}

ini.inisialisasi = fungsi() {
Sys.UI.ExendedClickBehavior.callBaseMethod(ini, 'inisialisasi');

// langkah 3
_clickHandler = Function.createDelegate(ini, clickHandler);
this.control.element.attachEvent('onmousedown', _clickHandler);
}

ini.getDescriptor = fungsi() {
var td = Sys.UI.ExendedClickBehavior.callBaseMethod(ini, 'getDescriptor');

// langkah 5
td.addEvent('klik', benar);
td.addEvent('Klik Kiri', benar);
td.addEvent('Klik Kanan', benar);
kembali td;
}

// langkah 4
fungsi clickHandler() {
this.click.invoke(ini, Sys.EventArgs.Empty);
if (jendela.acara.tombol == 1)
{
this.leftClick.invoke(ini, Sys.EventArgs.Empty);
}
else if (jendela.acara.tombol == 2)
{
this.rightClick.invoke(ini, Sys.EventArgs.Empty);
}
}
}
// langkah 1
Sys.UI.ExendedClickBehavior.registerSealedClass('Sys.UI.ExendedClickBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'exendedClickBehavior', Sys.UI.ExendedClickBehavior);
Mari kita uji ExtendedClickBehavior ini di halaman. Tambahkan <div> ke halaman untuk klik, dan label untuk menampilkan informasi klik. Di bawah ini adalah definisi HTML dari file ASPX. Jangan lupa menambahkan referensi ke file ExtendedClickBehavior.js di ScriptManager.

<atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server">
<Skrip>
<atlas:ScriptReference Path="ExendedClickBehavior.js" />
</Skrip>
</atlas:Manajer Skrip>
<div>
<div id="myButton" style="border: 1px solid black; width: 20em; white-space:normal">Klik Saya (Kiri dan Kanan)!</div> <br />
<span id="myLabel">tidak diklik</span>
</div>
Di bawah ini adalah definisi skrip Atlas. Perhatikan bahwa kita menggunakan setProperty Action Atlas (untuk Atlas Action, lihat artikel berikutnya) untuk mengatur teks label setelah setiap klik.