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

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 أخرى, سندرس فى الجزء الثانى ان شاء الله تعالى
    - SelectedItem Property
    - Style Property
    - Nodes Property بالكامل

    Comments

    1. Hey there this is somewhat of off topic but I was wanting
      to know if blogs use WYSIWYG editors or if you have to manually code with HTML.
      I'm starting a blog soon but have no coding know-how so I wanted to get advice from someone with experience. Any help would be greatly appreciated!

      Take a look at my homepage ... Best Web Hosting for Photographers

      ReplyDelete
    2. Great work! That is the kind of info that should be shared across the web.
      Shame on the search engines for not positioning this post higher!
      Come on over and talk over with my site . Thank you =)

      My page: CT limo

      ReplyDelete
    3. What's up to every one, because I am genuinely keen of
      reading this webpage's post to be updated regularly.
      It contains nice material.

      Here is my blog: MichaleLWikel

      ReplyDelete
    4. Right here is the right blog for anyone who wishes to understand this topic.
      You know so much its almost hard to argue with you (not that I personally would want to…HaHa).
      You definitely put a new spin on a subject which has been discussed for a long
      time. Wonderful stuff, just excellent!

      my web blog; DarrelXDuet

      ReplyDelete
    5. Hey! Do you use Twitter? I'd like to follow you if
      that would be okay. I'm definitely enjoying your blog
      and look forward to new posts.

      Also visit my homepage; CleopatraIDaller

      ReplyDelete

    Post a Comment

    visual basic 6 source code says (Hi)

    VB6 Popular Posts

    Free download Visual Basic 6 Documentation MSDN

    Visual Basic Online Course - Function Keys (F1 to F12)

    Visual Basic Online Course - ListView, Element not found while removing items