إنشاء سلوك مخصص في ASP.NET Atlas

الكاتب：Eve Cole وقت التحديث：2009-06-30 16:12:07

النسخة الإنجليزية: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
يحدد السلوك في Atlas السلوك عند تشغيل حدث عنصر التحكم. يمكن رؤية السلوك كحدث DHTML مغلف، مثل النقر والتحويم. يمكن أن يكون السلوك أيضًا مكونًا يمكن إرفاقه بعنصر تحكم عميل Atlas لتوفير وظائف أكثر تقدمًا وثراءً لعنصر تحكم عميل Atlas، مثل بعض وظائف السحب والإفلات المعقدة، والإكمال التلقائي، والوظائف العائمة وغيرها. سيتم تعريف السلوك في مجموعة السلوكيات الخاصة بعنصر تحكم Atlas.

من وثائق Atlas وملفات المصدر، يمكننا أن نعرف أن Atlas يحتوي على السلوكيات المضمنة التالية:

سلوك النقر: يوفر معالجة نقرات الماوس.
السلوك العائم: يوفر تأثيرات السحب والإفلات.
سلوك التحويم: يوفر معالجة أحداث DHTML عند تمرير الماوس، وإيقاف الماوس، وإيقاف التركيز، وإيقاف التشغيل.
المكون المنبثق: يوفر وظيفة منبثقة ويمكن استخدامه لتنفيذ تلميحات الأدوات المتقدمة.
سلوك الإكمال التلقائي: يوفر وظيفة الإكمال التلقائي. وهذه أيضًا إحدى الميزات شائعة الاستخدام في عروض Atlas التجريبية. يتطلب هذا السلوك أيضًا معالجًا من جانب الخادم.
يتم استخدام سلوك النقر للتعامل مع حدث onclick الخاص بـ DHTML وهو مفيد جدًا ولكن الوظائف التي يوفرها بسيطة إلى حد ما. في بعض البرامج الأكثر تعقيدًا، قد نحتاج إلى الفصل بين وظائف المفتاح الأيسر والأيمن، على سبيل المثال، يتم استخدام المفتاح الأيسر للاختيار بينما يتم استخدام المفتاح الأيمن لإظهار قائمة مختصرة. على الرغم من أنه يمكننا وضع هذا if-else في معالج Click Behavior، إلا أن هذه ليست طريقة أطلس جيدة. لذلك، سنكتب اليوم سلوك النقر الأكثر قوة والذي يسمى ExtendedClickBehavior، والذي يمكنه فصل المفتاحين الأيسر والأيمن داخل السلوك وتشغيل حدثين مختلفين. من خلال كتابة ExtendedClickBehavior، يمكنك أيضًا فهم العملية العامة لإنشاء سلوك مخصص في Atlas.

بشكل عام، هناك خمس خطوات لإنشاء سلوك مخصص:

الوراثة من الفئة الأساسية Sys.UI.Behavior.
حدد الأحداث الخاصة بك لتغليف الأحداث في DHTML. سيتم استخدام هذه الأحداث لكشف عناصر تحكم Atlas الأخرى بدلاً من أحداث DHTML الأصلية غير المعدلة.
حدد معالجًا للحدث الخاص بك في مُنشئ السلوك، وافصل معالج الحدث في أداة التدمير.
قم بإصدار الحدث المقابل في وظيفة المعالج. في مثال ExtendedClickBehavior، نقوم بإصدار أحداث مختلفة بناءً على أزرار الماوس المختلفة.
أضف وصفًا للحدث الذي حددته في طريقة getDescriptor().
يوجد أدناه كود JavaScript لـ ExtendedClickBehavior. تم وضع علامة على الخطوات الخمس المذكورة أعلاه كتعليقات داخل الكود. احفظ الكود أدناه باسم ExtendedClickBehavior.js.

Sys.UI.ExtenedClickBehavior = function() {
Sys.UI.ExtenedClickBehavior.initializeBase(this);

var _clickHandler;

// الخطوة 2
this.click = this.createEvent();
this.leftClick = this.createEvent();
this.rightClick = this.createEvent();

هذا.التخلص = وظيفة () {
// الخطوة 3
this.control.element.detachEvent('onmousedown', _clickHandler);
Sys.UI.ExtenedClickBehavior.callBaseMethod(this, 'dispose');
}

this.initialize = function() {
Sys.UI.ExtenedClickBehavior.callBaseMethod(this, 'initialize');

// الخطوة 3
_clickHandler = Function.createDelegate(this, clickHandler);
this.control.element.attachEvent('onmousedown', _clickHandler);
}

this.getDescriptor = function() {
var td = Sys.UI.ExtenedClickBehavior.callBaseMethod(this, 'getDescriptor');

// الخطوة 5
td.addEvent('انقر', صحيح);
td.addEvent('leftClick', true);
td.addEvent('RightClick', true);
عودة الدفتيريا؛
}

// الخطوة 4
وظيفة ClickHandler () {
this.click.invoc(this, Sys.EventArgs.Empty);
إذا (window.event.button == 1)
{
this.leftClick.invoc(this, Sys.EventArgs.Empty);
}
وإلا إذا (window.event.button == 2)
{
this.rightClick.invoc(this, Sys.EventArgs.Empty);
}
}
}
// الخطوة 1
Sys.UI.ExtenedClickBehavior.registerSealedClass('Sys.UI.ExtenedClickBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'extenedClickBehavior', Sys.UI.ExtenedClickBehavior);
لنختبر سلوك ExtendedClickBehavior على الصفحة. أضف <div> إلى صفحة النقرات، وتسمية لعرض معلومات النقرات. يوجد أدناه تعريف HTML من ملف ASPX. لا تنس إضافة مرجع إلى ملف ExtendedClickBehavior.js في ScriptManager.

<atlas:ScriptManager EnablePartialRendering = "true" ID = "ScriptManager1" runat = "الخادم">
<البرامج النصية>
<atlas:ScriptReference Path="ExtenedClickBehavior.js" />
</مخطوطات>
</atlas:ScriptManager>
<ديف>
<div id="myButton" style="border: 1px Solid black; width: 20em; White-space:normal">انقر فوقي (يسارًا ويمينًا)!</div> <br />
<span id="myLabel">لم يتم النقر عليه</span>
</div>
يوجد أدناه تعريف برنامج Atlas النصي. لاحظ أننا نستخدم الإجراء setProperty الخاص بـ Atlas (للحصول على Atlas Action، راجع المقالة التالية) لتعيين نص التسمية بعد كل نقرة.