GHOST2010

تعلم كيفية إنشاء Custom Control Designer & Smart Tags

10 ردود في هذا الموضوع

السلام عليكــم ورحمـة الله وبركاتــه ،،

بعد أن تعلمنا فى هذا الدرس كيفية إنشاء Custom Property Editor وتعلمنا هنا كيفية إنشاء Custom Type Converter سنتعلم اليوم بإذن الله كيفية إنشاء Custom Control Designer وإضافة ما يسمى بالـSmart Tags والذى تجدونه فى الصورة

post-51753-1249536112.jpg

أرجو الانتباه والتركيز لأن هذا الدرس قد يكون صعبا ولن أحسن شرحه بالشكل المناسب فأرجو التعليق على النقاط التى لم تستطيعوا فهمها

بسم الله نبدأ ,,

- قم بإنشاء مشروع جديد من نوع Windows Application

- قم بإضافة المرجع System.Windows.Forms.Design من قائمة Project ثم Add Reference

- أضف فئة جديدة باسم MyCustomControl والتى تمثل الأداة التى سنجرب عليها المصمم الخاص الذى سنقوم بصنعه بإذن الله تعالى

- أضف الكود التالى إلى هذه الفئة

Imports System.ComponentModel
Imports System.Windows.Forms.Design

Public Class MyCustomControl
Inherits UserControl

Public Enum MyEnum
Value1
Value2
Value3
End Enum

Private _booleanProperty As Boolean
Private _enumProperty As MyEnum

Public Property BooleanProperty() As Boolean
Get
Return _booleanProperty
End Get
Set(ByVal value As Boolean)
_booleanProperty = value
End Set
End Property

Public Property EnumProperty() As MyEnum
Get
Return _enumProperty
End Get
Set(ByVal value As MyEnum)
_enumProperty = value
End Set
End Property

End Class

قمنا بإنشاء خاصيتين إحداهما من النوع Boolean والأخرى من النوع MyEnum ,, فقط لتجربة إنشاء Smart Tags لهما

- نأتى الآن للجزء المهم وهو إنشاء المصمم ,, أضف فئة جديدة إلى المشروع بإسم MyCustomDesigner واجعلها ترث الفئة ControlDesigner

Imports System.Windows.Forms.Design

Public Class MyCustomDesigner
Inherits [b]ControlDesigner[/b]

End Class

- نبدأ الآن فى كتابة الأكواد

* الفئة ControlDesigner توفر لك العديد من الإمكانيات التى تمكنك من التعامل مع الأداة وقت التصميم وليس وقت التشغيل

- نبدأ بشئ بسيط جدا ,, نريد عندما يقف المبرمج على الأداة بمؤشر الماوس يتحول لون الأداة إلى الأحمر وعندما يتركها يتحول اللون إلى الأخضر

لعمل ذلك يجب علينا إعادة كتابة الإجرائين OnMouseEnter , OnMouseLeave

- أضف هذا الكود إلى الفئة MyCustomDesigner

	Protected Overrides Sub OnMouseEnter()
Me.Control.BackColor = Color.Red
End Sub

Protected Overrides Sub OnMouseLeave()
Me.Control.BackColor = Color.Green
End Sub

من الكود يتضح أننا نستطيع الوصول إلى الأداة عن طريق الخاصية Control (جبت الديب من ديله :blink: )

- لتجربة الكود السابق والأكواد التالية سنعدل جزء بسيط فى كود الفئة MyCustomControl ,, يجب أن نخبر بيئة التطوير أن مصمم هذه الأداة هو المصمم الخاص الذى قمنا بإنشاءه

- إذهب إلى الفئة MyCustomControl وعدل الكود إلى الشكل التالى

Imports System.ComponentModel
Imports System.Windows.Forms.Design
Imports System.ComponentModel.Design

<Designer(GetType(MyCustomDesigner))> _
Public Class MyCustomControl
Inherits UserControl

Public Enum MyEnum
Value1
Value2
Value3
End Enum

Private _booleanProperty As Boolean
Private _enumProperty As MyEnum

Public Property BooleanProperty() As Boolean
Get
Return _booleanProperty
End Get
Set(ByVal value As Boolean)
_booleanProperty = value
End Set
End Property

Public Property EnumProperty() As MyEnum
Get
Return _enumProperty
End Get
Set(ByVal value As MyEnum)
_enumProperty = value
End Set
End Property

End Class

- قم ببناء المشروع ثم أضف الأداة MyCustomControl إلى الفورم وجرب الدخول والخروج عليها بالماوس ستجد أن اللون يتحول ما بين الأحمر والأخضر

- هناك الكثير من الإمكانيات التى توفرها لك الفئة ControlDesigner وبالطبع لن أشرحها جميعها

- نتعرف الآن على كيفية إنشاء ما يسمى Verbs ,, الـVerb هو أمر يتم إضافته للأداة يظهر أسفل نافذة الخصائص كما بالصورة

post-47088-1250325193.jpg

ويتم إضافته إلى القائمة المنسدلة الخاصة بالأداة (Right-Click Menu) كما بالصورة

post-47088-1250325405.jpg

وإضافته إلى ما يسمى بالـSmart Tag كما بالصورة

post-47088-1250325482.jpg

- لنتعلم الآن كيف نضيف هذا الأمر ,, الخاصية المسئولة عن هذه الأوامر هى الخاصية Verbs وهى من النوع System.ComponentModel.Design.DesignerVerbCollection لذلك سنقوم بإعادة قيادة هذه الخاصية لتعود بالأوامر التى نريدها

لنحدد الآن ماهى الأوامر التى نريد إضافتها ,, بما أننا فى مرحلة التعلم فلن نضيف إلا أمرا واحدا وهو About ونريد عند الضغط عليه تظهر رسالة بها نص معين عن مبرمج الأداة

- سنقوم بتعريف متغير من النوع DesignerVerbCollection وهو الذى ستعود به الخاصية Verbs

- أضف هذا الكود

	Dim _verbs As DesignerVerbCollection

Public Overrides ReadOnly Property Verbs() As System.ComponentModel.Design.DesignerVerbCollection
Get
If _verbs Is Nothing Then
_verbs = New DesignerVerbCollection
Dim about As New DesignerVerb("About Me", AddressOf OnAbout)
_verbs.Add(about)
End If
Return _verbs
End Get
End Property

Private Sub OnAbout(ByVal sender As Object, ByVal e As EventArgs)
MsgBox("GHOST2010 ,, One of ArabTeam members")
End Sub

كما يتضح من الكود قمنا بتعريف المتغير _verbs ثم قمنا بإعادة قيادة الخاصية Verbs لتعيد الأوامر المطلوبة

بداخل الخاصية نتحقق أولا من أننا لم نقم بتهيئة المتغير الخاص بنا حتى لا نقوم بتهيئته أكثر من مرة وذلك فى جملة الشرط If _verbs Is Nothing وبالتالى فإن الكود الموجود بداخل جملة الشرط لن يتم تنفيذه إلا مرة واحدة فقط

بداخل جملة الشرط قمنا بتهيئة المتغير _verbs ثم قمنا بتعريف كائن جديد من نوع DesignerVerb والذى يمثل الأمر الذى نريد إضافته ومررنا له معاملين الأول هو نص الأمر والمعامل الثانى هو مفوض الحدث Click أى مؤشر إلى الإجراء الذى سيتم تنفيذه عند ضغط المستخدم على هذا الأمر ثم قمنا بإضافة هذا الأمر إلى قائمة الأوامر فى السطر _verbs.Add(about) وفى نهاية الخاصية نعيد قائمة الأوامر الخاصة بنا Return _verbs

- قم بإعادة بناء المشروع واذهب إلى الأداة ولاحظ ظهور الأمر About فى الثلاثة مواضع التى أشرنا إليها

تعلمنا كيفية إنشاء Smart Tags بدائية ,, الآن نريد إنشاء أوامر أخرى احترافية مثل التى تظهر فى أول صورة

سيتم هذا عن طريق الخاصية ActionList وذلك فى الدرس القادم إن شاء الله حتى لا تملوا من طول الدرس

فى انتظار أسئلتكم ,,

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

جميل جداً يا Ghost, درس رائع بكل معنى الكلمة, بناء الكمبوننت في ال Design time شيئ جديد بالنسبة لي و استفدت كثيرا من الدروس الخاصة بك..

لدي السؤال التالي: عند تعريف Verb للكمبوننت هذا يعني انها يجب ان تظهر في كل من Properties window, Right-Click Menu - Smart tags, يعني لا يمكن جعلها تعرض في أحدهم فقط؟

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

ممتاز جداً.. جزاك الله خيراً مشرفنا محمد,,,

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

السلام عليكــم ورحمـة الله وبركاتــه ،،

لدي السؤال التالي: عند تعريف Verb للكمبوننت هذا يعني انها يجب ان تظهر في كل من Properties window, Right-Click Menu - Smart tags, يعني لا يمكن جعلها تعرض في أحدهم فقط؟

لا أعتقد ذلك لكنى لم أجرب :huh:

شكرا وائل وحازم على وجودكم معى ,, والله نورتم القسم

بالمناسبة ياوائل للموضوع جزء تانى تحت التجارب (طبعا انت عارف فين) :wink:

تم تعديل بواسطه GHOST2010
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

السلام عليكــم ورحمـة الله وبركاتــه ،،

نستكمل الدرس بإذن الله وأتمنى أن يكون هناك من يتابع

- الآن نريد أن نضيف الخاصيتين BooleanProperty , EnumProperty إلى قائمة المهام أو Smart Tag كما يظهر فى الصورة الأولى ,, لعمل ذلك سنعتمد على الخاصية ActionList وهى من النوع System.ComponentModel.Design.DesignerActionListCollection لكنها لن تتم بنفس سهولة الخاصية السابقة (Verbs) فهنا سيكون الأمر مختلفا بعض الشئ ولابد من التركيز والانتباه جيدا

* لكى نلتف حول الخاصية ActionList لنصمم الـSmart Tag بالشكل الذى نريد يجب علينا إضافة فئة جديدة ترث الفئة DesignerActionList ,, قم بإضافة فئة بإسم MyCustomActionList وأضف إليها هذا الكود

Imports System.ComponentModel
Imports System.ComponentModel.Design
Imports System.Windows.Forms.Design

Public Class MyCustomActionList
Inherits DesignerActionList

Private designer As MyCustomDesigner

Sub New(ByVal designer As MyCustomDesigner)
MyBase.New(designer.Component)
Me.designer = designer
End Sub

End Class

قمنا بوراثة الفئة DesignerActionList وقمنا ثم كتابة كود الإجراء New ,, ستلاحظون أن هذا الإجراء يستقبل معاملا من النوع MyCustomDesigner وهو المصمم الخاص بنا ويستدعى الإجراء الخاص بالفئة الموروثة ويمرر لها المعامل المطلوب وهو من النوع System.ComponentModel.IComponent ثم حفظنا المعامل فى كائن آخر من نفس النوع لأننا سنحتاج إليه فى باقى الأكواد

- توجد بعض التعقيدات فى هذا الأمر وهى أنك لابد أن تعيد كتابة الخصائص التى تريد إضافتها إلى القائمة مرة أخرى داخل الفئة الجديدة التى قمنا بإضافتها وهى MyCustomActionList وتجعل هذه الخصائص تؤثر على الأداة التى تعمل عليها هذه الفئة

توجد طرق أخرى لكن هذه هى الطريقة التى أراها الأسهل حتى لا أطيل فى الشرح أكثر من ذلك

سنعيد كتابة الخصائص مرة أخرى ,, كود الفئة سيصبح هكذا

Imports System.ComponentModel
Imports System.ComponentModel.Design
Imports System.Windows.Forms.Design

Public Class MyCustomActionList
Inherits DesignerActionList

Private designer As MyCustomDesigner

Sub New(ByVal designer As MyCustomDesigner)
MyBase.New(designer.Component)
Me.designer = designer
End Sub

Dim _items As DesignerActionItemCollection

Public Property BooleanProperty() As Boolean
Get
Return CType(Me.designer.Control, MyCustomControl).BooleanProperty
End Get
Set(ByVal value As Boolean)
CType(Me.designer.Control, MyCustomControl).BooleanProperty = value
End Set
End Property

Public Property EnumProperty() As MyCustomControl.MyEnum
Get
Return CType(Me.designer.Control, MyCustomControl).EnumProperty
End Get
Set(ByVal value As MyCustomControl.MyEnum)
CType(Me.designer.Control, MyCustomControl).EnumProperty = value
End Set
End Property

End Class

لاحظوا أن طريقة كتابة الخصائص اختلفت قليلا حيث أننا نقرأ القيمة من الأداة عن طريق الخاصية designer.Control ونكتبها إلى الأداة مرة أخرى عندما يتم تغييرها

- الآن سنقوم بتصميم القائمة ,, سنقوم بإعادة قيادة الخاصية GetSortedActionItems وهى من النوع System.ComponentModel.Design.DesignerActionItemCollection وكما فعلنا فى الخاصية Verbs سنقوم هنا أيضا بتعريف كائن من نوع الخاصية ونقوم بتهيئته ثم إعادته كقيمة لهذه الخاصية

- نعرف متغيرا بإسم _items من نفس النوع

	Dim _items As DesignerActionItemCollection

- نبدأ الآن فى كتابة كود الخاصية التى تهمنا وهى كما ذكرنا GetSortedActionItems

	Public Overrides Function GetSortedActionItems() As System.ComponentModel.Design.DesignerActionItemCollection
If _items Is Nothing Then
'Add Items Here...
End If
Return _items
End Function

سنقوم بإضافة الأوامر الخاصة بنا بداخل جملة الشرط

* العناصر التى يمكن إضافتها تجد إسمها يأخذ الشكل DesignerActionXItem حيث X يحدد نوع العنصر ,, سيتضح لنا ذلك مع الكود

- يمكن إضافة نص عادى عن طريق إضافة كائن من النوع DesignerActionTextItem

- يمكن إضافة عنوان رئيسى (Header) عن طريق كائن من النوع DesignerActionHeaderItem

- للخصائص نستخدم النوع DesignerActionPropertyItem

- للإجراءات نستخدم النوع DesignerActionMethodItem

* كل هذه الأنواع تأخذ معامل من النوع String اسمه displayName وهو يحدد النص الذى سيظهر به العنصر فى القائمة كما يأخذ بعضها معاملا آخرا بإسم category والذى يمكنك استخدامه إذا أردت تقسيم الأوامر إلى مجموعات يوضع فاصل بينها وبالنسبة للنوعين الأخيرين فهناك معامل ثالث بإسم memberName والذى يحمل إسم الخاصية أو الإجراء الذى سيعمل عنصر القائمة عليه

الآن عدل كود الفئة MyCustomActionList ليصبح بهذا الشكل

Imports System.ComponentModel
Imports System.ComponentModel.Design
Imports System.Windows.Forms.Design

Public Class MyCustomActionList
Inherits DesignerActionList

Private designer As MyCustomDesigner

Sub New(ByVal designer As MyCustomDesigner)
MyBase.New(designer.Component)
Me.designer = designer
End Sub

Dim _items As DesignerActionItemCollection

Public Property BooleanProperty() As Boolean
Get
Return CType(Me.designer.Control, MyCustomControl).BooleanProperty
End Get
Set(ByVal value As Boolean)
CType(Me.designer.Control, MyCustomControl).BooleanProperty = value
End Set
End Property

Public Property EnumProperty() As MyCustomControl.MyEnum
Get
Return CType(Me.designer.Control, MyCustomControl).EnumProperty
End Get
Set(ByVal value As MyCustomControl.MyEnum)
CType(Me.designer.Control, MyCustomControl).EnumProperty = value
End Set
End Property

Public Overrides Function GetSortedActionItems() As System.ComponentModel.Design.DesignerActionItemCollection
If _items Is Nothing Then
_items = New DesignerActionItemCollection
_items.Add(New DesignerActionHeaderItem("DesignerActionTextItem", "DesignerActionTextItem"))
_items.Add(New DesignerActionTextItem("This is my Custom Designer test", "DesignerActionTextItem"))
_items.Add(New DesignerActionHeaderItem("DesignerActionPropertyItem", "DesignerActionPropertyItem"))
_items.Add(New DesignerActionPropertyItem("BooleanProperty", "BooleanProperty", "DesignerActionPropertyItem"))
_items.Add(New DesignerActionPropertyItem("EnumProperty", "EnumProperty", "DesignerActionPropertyItem"))
_items.Add(New DesignerActionHeaderItem("DesignerActionMethodItem", "DesignerActionMethodItem"))
_items.Add(New DesignerActionMethodItem(Me, "ShowMessage", "Click to Show a Message Box", "DesignerActionMethodItem"))
End If
Return _items
End Function

Private Sub ShowMessage()
MsgBox("This is a DesignerActionMethodItem CallBack")
End Sub

End Class

- قم الآن بإعادة بناء المشروع ثم اذهب إلى الفورم وأضف الأداة وانظر إلى قائمة المهام أو الـSmart Tag الخاص بها ستجده تحول إلى هذا الشكل

post-47088-1250345219.jpg

انتهى الدرس وأعتذر على الشرح السئ لكن الموضوع صعب الشرح جدا بالنسبة لى وأنا فى انتظار أسئلتكم والمشاكل التى واجهتكم فى فهم الدرس

بالتوفيق للجميع ,,

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

صراحة, هذه السلسلة من الدروس مفيدة جدا لقلة الوثائق التقنية في مجال برمجة الأدوات. فأنا شخصيا, عندما قررت تطوير أدوات شخصية للإستعمال في المشروعات التي كنت أعمل عليها بحثت كثيرا و لكن لقلة الوثائق التقنية فقد كانت النتائج مرضية و لكن ليس للحد الذي كنت أنتظر.

شكرا لك أخي على هذه الدروس المفيدة و بارك الله لك في علمك و عملك.

تحياتي...

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

شكرا لتواجدك معى أخى محمد وشكرا على مجهوداتك ودروسك الرائعة فى القسم :blush:

ليس لدى أى أفكار للدرس القادم ,, لو كان لدى أحد الأعضاء أى موضوع يريدنى أن أتحدث عنه فأتمنى ألا يتأخر فى الطلب وخصوصا لو كان موضوعا خاصا بتطوير الأدوات حتى نكمل السلسلة

ربنا يوفق الجميع ,,

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

بســم الله الـرحمــن الرحيــم

السلام عليكــم ورحمـة الله وبركاتــه ،،

درس رائع بارك الله فيك

استفدنا جيدا من سلسلة الدروس هذه بارك الله فيك وجزاك عنا خيرا

انا عملت مشروع منيو منزلقة على الرابط التالي

منيو منزلقة

وهذه فرصة لأطبق عليها ما تعلمته من هذه السلسلة ولكن وقتي ضيق جدا والانترنت ليس متوفر دائما عندي بالاضافة لظروف العمل

لو تكرمت وتعملها كتطبيق عملي يستفيد منها الاخوة الاعضاء والزوار بارك الله فيك

تم تعديل بواسطه abetry
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

شكرا

شكرا شكرا شكرا شكرا شكرا شكرا شكرا

شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا

شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا

شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا

شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا شكرا

يعطيك العافيه وسلامه

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .