Growbook, Cannabis, Notizbuch, Growbuch, Pflanzenzucht, Samenbank, Seedbank, Software, Stammbaum, Kreuzen, züchten,growen,anbauen,News,GIB,Lux,Omega,Mars, Dünger,BioBizz,Hesi,Athena,
die Software für deinen Anbau

Willkommen

Tutorial 18: Der Treeview-Gadget - Teil 1

The MaxGUI Beginner Tutorial Series - Tutorial 18:  Der Treeview-Gadget - Teil 1
(c) Assari Feb 21 2006
Ins Deutsche übersetzt von simi

Der Treeview-Gadget wird oft in allen Arten von Applikationen benutzt. In der MaxIDE wird er zum Beispiel für das Anzeigen der Funktionen und Debug-Informationen verwendet.

Ein Treeview braucht immer ein root (Wurzel) zum starten. Dann kannst du nodes (Äste) zu diesem root hinzufügen. Die nodes können mit weiteren nodes verbunden sein. So wie im Windows Explorer!

Zum dich in die Wunder des Treeview-Gadget einzuführen, werde ich den Dateiexplorer als roten Faden nehmen.

    Function CreateTreeView:TGadget(x,y,w,h,group:TGadget,style=0)


    Ein sehr simpler Start mit diesem Gadget erfolgt so:

       

    SuperStrict
    Import MaxGui.Drivers


    Local MyWindow:TGadget=CreateWindow("TreeView-Beispiel", 40,40,400,400)
    Global MyTreeView:TGadget=CreateTreeView(5,0,200,360,MyWindow)

    Repeat
      WaitEvent()
      Select EventID()
      Case EVENT_WINDOWCLOSE
         End
      End Select
    Forever
    End


    Anders als andere CreateGadget-Funktionen, macht diese nicht gerade viel smile

        Tut18 1

    Wir lesen jetzt die Dateien und Ordner aus dem BlitzMax Installationsverzeichnis aus, und fügen diese zu unserem TreeView via AddTreeViewNode hinzu.
     

       

    SuperStrict
    Import MaxGui.Drivers


    Local MyWindow:TGadget=CreateWindow("TreeView
    -Beispiel", 40,40,400,400)
    Global MyTreeView:TGadget=CreateTreeView(5,0,200,360,MyWindow)

    Local Folder:int=ReadDir(BlitzMaxPath())
    Local File:String
    Repeat
        File=NextFile(Folder)
        AddTreeViewNode(file,MyTreeView)
    Until File=Null

    Repeat
      WaitEvent()
      Select EventID()
      Case EVENT_WINDOWCLOSE
         End
      End Select
    Forever
    End


    Der TreeView ist jetzt mit eineigen Items gefüllt. Noch nicht vergleichbar mit dem Explorer, aber wir können schon ein paar Ähnlichkeiten feststellen.

        Tut18 2


    Lass uns ein bisschen erklären, wie das Einlesen der Dateien/Ordner funktioniert. Zuerst müssen wir ein Ordner mit ReadDir öffnen, um dessen Inhalt auszulesen. In diesem Fall ist das das Installationsverzeichnis von BlitzMax.

        Local Folder:int=ReadDir(BlitzMaxPath())


    NextFile erlaubt uns durch alle Dateien und Ordner zu gehen, bis wir eine null bekommen, was uns sagt, dass es keine weiteren Dateien mehr hat. Deshalb können wir stoppen.

        Repeat
        File=NextFile(Folder)
        AddTreeViewNode(file,MyTreeView)
    Until File=Null


    Du wirst wahrscheinlich festgestellt haben, dass unser TreeView Items enthält, die wir nie im richtigen Explorer gesehen haben. Also müssen wir sie wie folgt ausfiltern:

        Repeat
        File=NextFile(Folder)
        If File=".." Or File="." Or File=Null Then
            'Do Nothing
        Else
            AddTreeViewNode(file,MyTreeView)
        EndIf
    Until File=Null


    Jetzt sieht's schon viel aufgeräumter aus.

        Tut18 3


    Wenn wir uns die Syntax von AddTreeViewNode anschauen, sehen wir dass die Funktion einen icon-Parameter hat.

    Function AddTreeViewNode:TGadget( text$,node:TGadget,icon=-1 )


    Bei früheren Anwendungen mit Icons haben wir gelernt, dass wir zuerst einen Iconstrip laden, und ihn dann dem relevanten Gadget hinzufügen müssen.

    ** Lade diese PNG-Datei herunter, und speichere es im gleichen Verzeichniss wie das Programm unten.

        Toolbar 1

        SuperStrict
    Import MaxGui.Driver
    Local MyWindow:TGadget=CreateWindow("TreeView
    -Beispiel", 40,40,400,400)
    Global MyTreeView:TGadget=CreateTreeView(5,0,200,360,MyWindow)

    Local Folder:int=ReadDir(BlitzMaxPath())
    Local File:String

    Local IconStrip:TIconStrip=LoadIconStrip("toolbar.png")
    SetGadgetIconStrip(MyTreeView, IconStrip)

    Repeat
        File=NextFile(Folder)
        If File=".." Or File="." Or File=Null Then
            'Do Nothing
        Else
            AddTreeViewNode(file,MyTreeView)
        EndIf
    Until File=Null


    Repeat
      WaitEvent()
      Select EventID()
      Case EVENT_WINDOWCLOSE
         End
      End Select
    Forever
    End


    Beachte dass das erste Icon von unserer Grafikdatei nun das Standardicon ist, weil wir den Iconstrip unserem Gadget hinzugefügt haben.


        Tut18 5


    Wir können jetzt versuchen den Explorer mehr zu kopieren, indem wir dies wie folgt machen:

        SuperStrict
    Import MaxGui.Driver
    Local MyWindow:TGadget=CreateWindow("
    TreeView-Beispiel", 40,40,400,400)
    Global MyTreeView:TGadget=CreateTreeView(5,0,200,360,MyWindow)

    Local Folder:int=ReadDir(BlitzMaxPath())
    Local File:String
    Local FullPath:String

    Local IconStrip:TIconStrip=LoadIconStrip("toolbar.png")
    SetGadgetIconStrip(MyTreeView, IconStrip)

    Repeat
        File=NextFile(Folder)
        If File=".." Or File="." Or File=Null Then
            'Do Nothing
        Else
            fullPath = RealPath(BlitzMaxPath()+"/"+file)
            If FileType(FullPath)=FILETYPE_DIR Then
                AddTreeViewNode(file,MyTreeView,1)
            Else
                AddTreeViewNode(file,MyTreeView,0)
            EndIf
        EndIf
    Until File=Null


    Repeat
      WaitEvent()
      Select EventID()
      Case EVENT_WINDOWCLOSE
         End
      End Select
    Forever
    End


    Mit der FileType-Funktion können wir checken, ob die Datei ein Verzeichniss oder eine Datei ist. Wir setzten dann noch das richtige Icon neben dem Node, und et voilà, schon schauts ein bisschen mehr nach dem Explorer aus smile


        Tut18 6

    Wir können unser obiges Programm ein bisschen abändern, indem wir einige Codestellen in eine Funktion packen. So sind wir bereit für den nächsten Schritt.

        SuperStrict
    Import MaxGui.Driver
    Local MyWindow:TGadget=CreateWindow("TreeView
    -Beispiel", 40,40,400,400)
    Global MyTreeView:TGadget=CreateTreeView(5,0,200,360,MyWindow)

    Local IconStrip:TIconStrip=LoadIconStrip("toolbar.png")
    SetGadgetIconStrip(MyTreeView, IconStrip)

    EnumFiles(BlitzMaxPath(),MyTreeView)

    Repeat
      WaitEvent()
      Select EventID()
      Case EVENT_WINDOWCLOSE
         End
      End Select
    Forever
    End

    Function EnumFiles:Int(Dir:String, Parent:TGadget)

      Local Folder:int=ReadDir(Dir)
      Local File:String
      Local FullPath:String

      Repeat
          File=NextFile(Folder)
          If File=".." Or File="." Or File=Null Then
              'Do Nothing
          Else
              fullPath = RealPath(BlitzMaxPath()+"/"+file)
              If FileType(FullPath)=FILETYPE_DIR Then
                  AddTreeViewNode(file,MyTreeView,1)
              Else
                  AddTreeViewNode(file,MyTreeView,0)
              EndIf
          EndIf
      Until File=Null

    End Function


    Wenn man das ausführt, gibt es genau das gleiche.


        Tut18 7

     
    Lass uns jetzt ein bisschen Code hinzufügen (fetter text). Mit dieser Erweiterungen kann man, wenn man auf einen Ordner klickt, dessen Inhalt anschauen, so wie im Explorer.


        SuperStrict
    Import MaxGui.Driver
    Local MyWindow:TGadget=CreateWindow("TreeView
    -Beispiel", 40,40,400,400)
    Global MyTreeView:TGadget=CreateTreeView(5,0,200,330,MyWindow)

    Local IconStrip:TIconStrip=LoadIconStrip("toolbar.png")
    SetGadgetIconStrip(MyTreeView, IconStrip)

    EnumFiles(BlitzMaxPath(),MyTreeView)

    Repeat
      WaitEvent()
      Select EventID()
      Case EVENT_WINDOWCLOSE
         End

      Case EVENT_GADGETACTION
            Local Node:TGadget = SelectedTreeViewNode(MyTreeView)
            Local s:String=String(Node.Context)
            If s>""
                EnumFiles(s,node)
                node.context=""
            EndIf
            ExpandTreeViewNode(node)

      End Select
    Forever
    End

    Function EnumFiles:Int(Dir:String, Parent:TGadget)

      Local Folder:int=ReadDir(Dir)
      Local File:String
      Local FullPath:String

      Repeat
          File=NextFile(Folder)
          If File=".." Or File="." Or File=Null Then
              'Do Nothing
          Else
              fullPath = RealPath(Dir+"/"+file)
              If FileType(FullPath)=FILETYPE_DIR Then
                Local handle:TGadget=AddTreeViewNode(file,Parent,1)
                handle.context=FullPath
              Else
                  AddTreeViewNode(file,Parent,0)
              EndIf
          EndIf
      Until File=Null

    End Function


    Mit dem obigen Code können wir unseren BlitzMax-Ordner bis auf das Herzstück erforschen. Beachte dass die Srcollbar automatisch erscheint, wenn der Inhalt grösser als die Höhe oder Breite des Gadgets werden.


        Tut18 8

     
    Nun lass uns sehen, wie wir es machen, dass wir dies erreichen.

        Function EnumFiles:Int(Dir:String, Parent:TGadget)

      Local Folder:int=ReadDir(Dir)
      Local File:String
      Local FullPath:String

      Repeat
          File=NextFile(Folder)
          If File=".." Or File="." Or File=Null Then
              'Do Nothing
          Else
              fullPath = RealPath(Dir+"/"+file)
              If FileType(FullPath)=FILETYPE_DIR Then
                Local handle:TGadget=AddTreeViewNode(file,Parent,1)
                handle.context=FullPath
              Else
                  AddTreeViewNode(file,Parent,0)
              EndIf
          EndIf
      Until File=Null


    End Function


    AddTreeViewNode gibt ein TGadget-Type zurück, den wir handle nennen. TGadget hat ein Field, das context heisst. Es kann benutzt werden, um den vollständigen Pfad von unserem Verzeichnis für später "aufzubewahren".


          Case EVENT_GADGETACTION
            Local Node:TGadget = SelectedTreeViewNode(MyTreeView)
            Local s:String=String(Node.Context)
            If s>""
                EnumFiles(s,node)
                node.context=""
            EndIf
            ExpandTreeViewNode(node)


    Wenn wir auf einen Item doppelklicken, wir ein EVENT_GADGETACTION ausgelöst. Wir können den ausgewählten Node mittels SelectedTreeViewNode herausfinden und dann das context-Field überprüfen. Beachte dass dieses den Type Object hat. Wir müssen den Inhalt also zuerst zu einem String casten, bevor wir es als eine String-Variable benutzen können.


    Da wir uns den Pfad gespeichert haben, können wir jetzt die nächste Stufe mittels EnumFiles "erforschen". Wir setzten dann das context-Field auf null um zu zeigen, dass wir diesen Node bereits erforscht haben.

    Die ExpandTreeViewNode-Funktion wird dann benutzt, um die entsprechende Node auszuklappen.

    Zum Schluss...

    Es gibt noch mehr TreeView-Funktionen, die wir im nächsten Tutorial behandeln werden. In diesem Tutorial lernten wir, wie wir

    • mit der CreateTreeView-Funktion ein TreeView erstellen können
    • Items (Nodes) mit AddTreeViewNode hinzufügen können
    • unser TreeView mit Icons verschönern können, indem wir den icon-Parameter von AddTreeViewNode benutzen
    • eine Node mittels ExpandTreeVewNode ausklappen können (die entgegengesetzte Version ist CollapseTreeViewNode)
    • EVENT_GADGETACTION nutzen können, um Mausklicks auf eine Item festzustellen. SelectedTreeViewNode gibt uns dann die Node zurück, auf die der Benutzer geklickt hat.

    Wie du an den obigen Beispielen sehen kannst, erlaubt uns dies bereits einen rudimentären Explorer zu erstellen.