B4J Library B4j TreePane & TreeNode Class

The Treeview of the B4j is nice but lacks some style possibilities.
I took my B4A Treeview & Treenode class and adapted them for B4j to get these additions:
1. Text of the node can be in colors
2. Indent of the nodes is controlable
3. you can change the symbol for node opening and closing (not just a triangle).
4. Y position can be controlled, not only by the picture size
5. I couldn't implement the scroll by bars so I made it by dragging the mouse - more convenient.
6. In B4j Treeview you add a map if you need to put some data into a tag. Here there is a flexible Type which can hold all kinds of data items to pass to and from a node.

The class has two modules, TreePane and TreeNode, but the interface with the calling module is with TreePane only.
The Class is independent from the data items of the specific application, everything is defind in the calling module "GetData" and "NodeClicked" subs.
An example to the Data Type flexibility: In my Family tree application I pass the ID number and it is used to get the picture from a directory of pictures with the names of the files as Id & ".jpg"
In the attached example I changed it and pass the image itself in the Type.

The attached example has the two ways of treeview - the formal and the new class, with very simplified way of getting the data.

Edit: See post #8 for additional method, tree.OpenAllNodes.
 

Attachments

  • TreePaneClass.zip
    214.4 KB · Views: 1,022
  • tree.png
    tree.png
    60.9 KB · Views: 1,265
Last edited:
Click to expand...
derez

derez

Expert
Licensed User
Longtime User
Replacing the label in TreeNode with WebView I managed to create nodes with two colors text.
I don't know how to get rid of the scroll bars in the right of the webview, I'll appreciate if anyone knows and tell me.
 

Attachments

  • webview.png
    webview.png
    77.5 KB · Views: 635
derez

derez

Expert
Licensed User
Longtime User
I tried to put style = "-fx-overflow-x: hidden;-fx-overflow-y: hidden;" but it is still there.
I tried to add "overflow-y: hidden;" to the html string but no.
Maybe there is a place to put it which I have not tried yet:
text1 = "<html><body style=background-color:#bbbbbb;><font color='red' size='" & 5 & "'>" & txt & "</font><br /></p></body></html> "
Click to expand...

Maybe the problem is elsewhere: I added .prefheight because if I don't the webview takes the whole form height. Still altough I put the height like the other elements in the node, the height of the webview is about one and a half of the supplied height, and it can scroll a little.
If the height would be exact maybe there will be no scrollbar, but how to do it ?
If I decrease the height the text is cut !.

Of course I can extend the width to fall over the right side of the screen but that doesn't count as a SW solution...
 
Last edited:
derez

derez

Expert
Licensed User
Longtime User
I'm doing something wrong but I don't know what:
I put the code above with the name of the webview of the node instead of WebView1.
I made a file "style.css" once with ""-fx-overflow-y: hidden;" and once with "overflow-y: hidden;".
Commented the original "= style" but the scrollbar is still there.

Anyway - I covered it with another label and it does not show anymore.
 
derez

derez

Expert
Licensed User
Longtime User
Following a request to enable the opening of all the nodes by code I aded some code to the tree & node classes of B4A, so I made an addition here as well to enable it in b4j.
You have to add the following 2 subs to TreePane class:
B4X: 
public Sub OpenAllNodes
For Each v As Node In rootnode.anc.GetAllViewsRecursive
        If v.Id = "btn" Then
            Dim iv As ImageView = v
            iv.tag = False
            iv.SetImage(minus)
        End If
    Next
     Node_open(rootnode)
    OpenAll(rootnode)
End Sub

Private Sub OpenAll(tnn As TreeNode)
    For Each tnn As TreeNode In tnn.TN.children
         If tnn.TN.tag1 Then
            For Each v As Node In tnn.anc.GetAllViewsRecursive
                If v.Id = "btn" Then
                    Dim iv As ImageView = v
                    iv.tag = False
                    iv.SetImage(minus)
                  
                End If
            Next
             Node_open(tnn)
        End If
        OpenAll(tnn)
    Next
End Sub
Also add
B4X: 
Private minus As Image
to globals and
B4X: 
minus.Initialize(File.DirAssets,"minus.png")
to initialize.
In TreeNode change anc definition in globals to public.

This method should be used after setroot method and when the rootnode is the only one on the tree.
 
derez

derez

Expert
Licensed User
Longtime User
Improved method - enables you to define the depth of tree opening:
B4X: 
public Sub OpenAllNodes(depth As Int)
For Each v As Node In rootnode.anc.GetAllViewsRecursive
        If v.Id = "btn" Then
            Dim iv As ImageView = v
            iv.tag = False
            iv.SetImage(minus)
        End If
    Next
     Node_open(rootnode)
    OpenAll(rootnode,depth)
End Sub

Private Sub OpenAll(tnn As TreeNode, depth As Int)
    If tnn.TN.level > depth Then Return
    For Each tnn As TreeNode In tnn.TN.children
         If tnn.TN.tag1 Then
            For Each v As Node In tnn.anc.GetAllViewsRecursive
                If v.Id = "btn" Then
                    Dim iv As ImageView = v
                    iv.tag = False
                    iv.SetImage(minus)
                End If
            Next
             Node_open(tnn)
        End If
        OpenAll(tnn,depth)
    Next
End Sub
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
B4J Library TreeTableView Helper Class
Replies
1
Views
873
Mashiane
Mashiane
Mashiane
  • Question
B4J Question [Solved] Extending TreeView Nodes with clickable icons?
Replies
0
Views
1K
Mashiane
Mashiane
Erel
  • Article
B4J Tutorial TreeTableView
Replies
6
Views
11K
rraswisak
rraswisak
Erel
  • Locked
  • Article
B4J Library jGoogleMaps library
4 5 6
Replies
106
Views
49K
Erel
Erel
Erel
  • Locked
  • Article
B4J Tutorial TreeView Tutorial
Replies
18
Views
16K
Cableguy
Cableguy
Top