VB 0.6 TreeView Control lesson Part1

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

الموضوع : دراسة اداة الـ TreeView من خلال Visual Basic 0.6

و مثال توضيحى عملى عليها و كيفية استخدامها مع قاعدة بيانات MS Access 2003

الشكل : كما بالصورة رقم (1).

شكل اداة الـ TreeView

التعريف : هى اداه تستخدم لعرض قائمة تسلسل هرمى على شكل عقد Nodes و كل Node عباره عن Label و صورة Bitmap اختياريه (أى احيانا تستخدم و أحيانا لا) . تستخدم TreeView أصلا أو بالتحديد لعرض رؤوس مواضيع المستندات أو محتويات فهرس أو اسماء ملفات و مجلدات أو أى نوع بيانات يمكن أو يستحسن عرضها على شكل تسلسل هرمى Hierarchy .

التعامل : بعد انشاء TreeView يمكنك العمل على اضافة أو ترتيب أو حذف أو تعديل الـ Nodes عن طريق الخصائص أو الاجراءات "الاكواد", يمكنك برمجيا باستخدام الكود توسيع Expand أو تضييق Collapse الـ Child Nodes أو العقد الفرعيه . يمكنك التعامل مع TreeView عن طريق الكود عند تحديد كيفية التعامل مع Node باستخدام كلا من :

- Root - الاصل

- Parent - الاباء

- Child - الاطفال

- FirstSibling - أقرب المقربين

- Next - التالى

- Previous - السابق

- LastSibling - اخر المقربين

و كما تلاحظ فان التسمية تقرب المعنى فان المعانى تركز الى (العائلة) و بالتالى فان علاقة الـ Nodes ببعضها هى علاقه عائلية Relatively .

تستخدم أداة الـ TreeView أداة أخرى للعرض تدخل فى تكوينها و هى أداة ImageList لتخزين Bitmap و الـ Icons التى تعرض داخل Nodes و كل TreeView تستخدم ImageList واحده فقط بمعنى ان كل TreeView تأخذ Style موحد يسرى على جميع Nodes داخل TreeView .

الاستخدام : كل Node داخل الـ TreeView يمكن التعامل معه برمجيا عن طريق الكود حيث ان كل Node مميز بخاصتين :

الاولى : Index

الثانيه : Key

و اللتان تمكناك من استخدام خواص كل Node على حدى

الخصائص : وهى كما موضحه فى الموقع الرسمى لـ Microsoft MSDN VB 0.6

1. Appearance Property (ActiveX Controls)
2. BorderStyle Property (ActiveX Controls)  
3. WhatsThisHelpID Property
4. 
   

Visible Property

ToolTipText Property

Tag Property

TabStop Property

TabIndex Property

Style Property (Tree View Control)

Sorted Property (TreeView Control)

SingleSel Property SelectedItem Property (ActiveX Controls)

Scroll Property

PathSeparator Property (TreeView Control)

Parent Property

OLEDropMode Property (ActiveX Controls)

OLEDragMode Property (ActiveX Controls)

Object Property (ActiveX Controls)

Nodes Property

Name Property

MousePointer Property (ActiveX Controls)

MouseIcon Property

LineStyle Property (TreeView Control)

Left, Top Properties (ActiveX Controls)

LabelEdit Property

Index Property (ActiveX Controls)

Indentation Property

ImageList Property (ActiveX Controls)

hWnd Property (ActiveX Controls)

HotTracking Property

HideSelection Property (ActiveX Controls)

HelpContextID Property

Height, Width Properties (ActiveX Controls)

FullRowSelect Property

Font Property (ActiveX Controls)

Enabled Property (ActiveX Controls)

DropHighlight Property (ListView, TreeView Controls)

DragMode Property

DragIcon Property

Container Property

Checkboxes Property

CausesValidation Property

و كل خاصيه من الخواص السابقه تظهر عند كتابة Object و هو TreeView ثم (.) فى شاشة الكود على فورم بها TreeView.  و قبل أن ندخل فى الخصائص نبدأ بالمثال :

1) عمل مشروع vb0.6 جديد باسم MyTreeV

2) اضافة TreeView على الفورم كما فى عنصر (الشكل رقم 1)

3) فتح شاشة الكود

4) مسح جميع ما فيها Ctrl+A ثم BackSpace

5) عمل Paste للكود التالى :

Private Sub Form_Load()
   Dim nodX As Node
   Set nodX = TreeView1.Nodes.Add(,,"R","Root")
   Set nodX = TreeView1.Nodes.Add("R", tvwChild,"C1","Child 1")
   Set nodX = TreeView1.Nodes.Add("R", tvwChild,"C2","Child 2")
   Set nodX = TreeView1.Nodes.Add("R", tvwChild,"C3","Child 3")
   Set nodX = TreeView1.Nodes.Add("R", tvwChild,"C4","Child 4")
   nodX.EnsureVisible
   TreeView1.Style = tvwTreelinesText ' Style 4.
   TreeView1.BorderStyle = vbFixedSingle
End Sub
Private Sub Form_Click()
   Dim i As Integer
   Dim strNodes As String
   For i = 1 To TreeView1.Nodes.Count
   strNodes = strNodes & TreeView1.Nodes(i).Index & " " & _
   "Key: " & TreeView1.Nodes(i).Key & " " & _
   "Text: " & TreeView1.Nodes(i).Text & vbLF
   Next i
   MsgBox strNodes
End Sub

و الكود السابق و ظيفته انشاء Nodes فى الـ TreeView1 . حيث الحدث Form_Load يتم انشاء عدد (4)Nodes وعند الضغط بزر الماوس على الـ Form تظهر رساله بها (اسم المفتاح و اسم الـ Node ) ..... قم بحفظه.
و يمكنك مشاهدة النتيجه Ctrl+F5 , و الان  و بعد ان انشأنا Nodes للـ TreeView1 لنلقى نظره على كيفية عمل Add للـ Nodes ودراسة طريقة ذلك .

Add Method (Nodes Collection)

- وهى تتبع خاصية Nodes رقم 18 فى قائمة الخصائص و التى تفيد بأن كل Node له Methods أو طرق للتعامل معه  على الرغم من أن Nodes هى Collection أى تتبع بعضها البعض حيث يجب ان تكون هناك علاقه بين كل Node و الاخرى و لكن يفرق بينهم عن طريق Index و Key لكل Node .

- و طريق Add أو الاضافة للـ Nodes تكون كودها كالاتى :

object.Add(relative, relationship, key, text, image, selectedimage)

الجزء	الوصف
Object	مطلوب . و هو الكائن المراد الاضافه اليه و هو TreeView فى هذا المثال
Relative	اختيارى . و هو رقم Index أو Key لأى Node منشأه مسبقا, و العلاقه بين الـ Node الحاليه و الـ Node السابق انشائها موجود فى العنصر التالى RelationShip .
RelationShip	اختيارى . و هو يحدد مكان وضع الـ Node الجديد من الـ Node السابق .
Key	اختيارى . و هو مفتاح مميز للـ Node المنشأه الان نوعه String و يستخدم لتنسيب أو تحديد نسب الـ Node الحاليه بالـ Item و الذى هو Nodes Collection أو مجموعة Nodes فى TreeView1 حيث كما ذكرنا كل الـ Nodes مرتبط ببعضه .
Text	اختيارى . و هو المسمى النصى الذى يظهر فى الـ Node "اسم الـ Node على الـ Form فى الـ TreeView"
Image	اختيارى . و هو الـ Index لصورة فى مجموعة الصور الخاصة بالـ TreeView1 و هو ImageList حيث كما ذكرنا كل TreeView له ImageList لتخزين الصور Images و الايقونات Icons .
SelectedImage	اختيارى . و هو الصورة المختاره عند اختيار Node معين يتم اختيار الصورة المقابله له على الـ TreeView1.

أوضاع الـ Relationships بين الـ Nodes

لتحديد أوضاع العلاقه بين كل Node و الاخرى نستخدم :

الثابت - Constant	القيمة - Value	الوصف - Description
TvwFirst	0	الاول . حيث يتم وضع الـ Node قبل أى Node فى نفس المستوى النسبى لها او المذكوره فى كود العلاقه
TvwLast	1	الأخير . حيث يتم وضع الـ Node بعد جميع الـ Nodes المنتسبه لها او المذكورة فى كود العلاقه, و اى Node تضاف بعد ذلك تأتى بعد الـ Node الاخيرة .
TvwNext	2	التالى . (العلاقه الافتراضيه اذا لم يتم تحديد علاقه). وضع الـ Node بعد الاخرى المنتسبه لها و المذكوره فى كود العلاقه .
TvwPrevious	3	السابق . يتم وضع الـ Node بعد الاخرى المنسبه لها و المذكوره فى كود العلاقه فى نفس المستوى
TvwChild	4	ابنه أو فرعى من . يتم وضع الـ Node كفرعى من الـ Node السابقه المذكورة فى العلاقه و على مستوى أقل منها .

لاحظ :

اذا لم يذكر اسم Node سابقه فى كود العلاقه فان الـ Node الجديده تضاف فى النهاية بعد أول Node تم انشاءها على نفس مستواها و سنعرض مثال على العلاقه .

كما فى المثال السابق :

نضيف Command1 و فى الحدث Command1_Click نلصق الكود الاتى :

CreateNodes

ثم فى منطقة General Declaration نكتب الاجراء الاتى :

Private Sub CreateNodes()
  ' Set CheckBoxes property to True to see checked nodes:
  TreeView1.CheckBoxes = True
  Dim nodX As Node   ' Declare the object variable.
  Dim i as Integer   ' Declare a counter variable.
  For i = 1 to 4
  Set nodX = TreeView1.Nodes.Add(,,,"Node " & Cstr(i))
  ' Use the reference to set other properties, such as Bold.
  NodX.Bold = True
  ' Set image property to image 3 in an associated ImageList.
  nodX.Checked = True
  Next iEnd Sub

و الاجراء يقوم بانشاء Nodes بها CheckBoxes و مكتوبه بخط Bold عددها (4) و لكنه فى نفس الوقت سيجعل كل الـ Nodes فى الـ TreeView1 بها CheckBoxes لأنها كما ذكرنا سابقا مرتبطة ببعضها البعض و ايضا الكود سيضيف الـ 4 Nodes الى أى الـ Nodes الموجوده بالفعل فى TreeView1.... قم بتجربة المثال Ctrl+F5 ... ثم احفظه .

لاحظ كود انشاء Node تحته خط .

قم باضافة TreeView2 الى الـ Form1 كالتالى :

TreeView2

الان سنستعرض مثال على انشاء Node رئيسية  اخرى فرعيه Parent + Child .

فى المفتاح Command2 الحدث Click قم بلصق الكود :

Private Sub Command2_Click()
   ' Set Treeview control properties.   TreeView2.LineStyle = tvwRootLines  ' Linestyle 1

'يوضح الـ Style الخاص بالـ TreeView2 و هو tvwRootLines و سنقوم باستعراض Styles بالتفصيل فى الجزء الثانى .
   ' Add Node objects.

'اضافة Node

   Dim nodX As Node  ' Declare Node variable.
   ' First node with 'Root' as text.

'الـ Node الاولى باسم Root و هى الرئيسيه فى الـ TreeView .... لماذا؟

'لأن ليس لها Reference Index او ليس لها Node سابقه ترتبط بها و هى أول Node فى الـ TreeView2 و الـ Key 'الخاص بها اسمه R

   Set nodX = TreeView2.Nodes.Add(, , "r", "Root")   ' This next node is a child of Node 1 ("r").

'انشاء Node و لكنها Child أو ابنة الـ Node الرئيسية R

' و هى فرعيه لأنها لها Reference Index و هو R و نوع العلاقه tvwChild أى انها ستأتى بعد Node السابقه R و المفتاح الخاص بها هو Child1 و اسمها هو Child .

   Set nodX = TreeView2.Nodes.Add("r", tvwChild, "child1", "Child")
End Sub

لاحظ : علامة (+) هى الـ Bitmap الى نتحدث عنها و تنتمى الى ImageList للـ TreeView الحاليه .

الان تعلمنا انشاء Nodes للـ TreeView و تعلمنا العلاقه بين الـ Nodes و كيفية انشاء Node من Node أخرى, سندرس فى الجزء الثانى ان شاء الله تعالى

- TreeView Line Styles Property

- LabelEdit Property

- SelectedItem Property

- Style Property

- Nodes Property بالكامل

- Database MS Access 2003 & TreeView

Visual Basic 6.0 Lessons, Tricks, Tutorials and help links :

- Automate MS-Access Database in Visual Basic 6.0 though a network

- Visual Basic 6.0 Analog Clock

- Visual Basic 6.0 Temperature Convertor

- Visual Basic 6.0, MS-Access 2003 and Crystal Reports - Phone book

- Visual Basic 6.0, MS-Access 2003 Database and DataGrid

- Visual Basic 6.0  FTP full application source code

- Visual Basic 6.0 Color Picker tool source code
- Visual Basic 6.0 TreeView Control lesson (Part1 - Part 2 - Part3 - Part4 - Part5) Arabic.