Simple TreeWidget implementation example

December 19, 2019 at 2:24am

Hi, I'm looking for a very simple example of a TreeWidget implementation, does anyone know a git repo that has one? I checked FileTreeWidget and OutlineViewWidget in theia repo but I'm don't understand how the content and labels are provided to the tree. I'm familiar to the JFace way with content and label providers, is it similar?

December 19, 2019 at 9:55am

Anton Kosyakov@anton-kosyakov

Team

9:55am

We actually reworking this area right now: https://github.com/eclipse-theia/theia/pull/6475 in regards how labels are customized.

9:55am

Usually you have to customize 3 parts:

9:56am

tree itself, something like FileTree.resolveChildren - it is a function which resolves child nodes for given. Before you should define your model btw, i.e. something like FileNode and DirNode

Edited

9:58am

before name, description and icon will be part of your nodes, but it is turned out to be expensive to store and compute for big models, so with https://github.com/eclipse-theia/theia/pull/6475 they are only computed on demand for visible nodes. One has to implement LableProviderContribution for own tree model, look at FileTreeLabelProvider in PR for example

9:59am

last part is a widget to have some custom rendering, look at FileTreeWidget for example

10:00am

Everything should be bound together via child DI container, see createFileTreeContainer and how it is used. You can also explore createTreeContainer to see what else can be customized for trees.

December 20, 2019 at 12:39am

Hanksha@hanksha

12:39am

Ok thanks I'll check these out

January 7, 2020 at 12:40am

Hanksha@hanksha

12:40am

@anton-kosyakov

Another question, can those tree implementations be reused outside of a TreeWidget? Like a dialog or having 2 tree side by side in a widget view.

Anton Kosyakov@anton-kosyakov

Team

4:47am

They cannot be, but you can create a composite widget which embeds 2 tree widgets, or a dialog widget which embeds a tree widget, see for example the file dialog how it embeds the file tree.

Hanksha@hanksha

4:52am

Alright I'll check that thanks!

January 7, 2020 at 2:36pm

SimonJohnCastle@simonjohncastle

2:36pm

I found this a very good starting point for a tree view plugin https://github.com/eclipse/che-theia-samples/tree/master/samples/tree-view-sample-plugin

This may also help but I didnt try it https://github.com/microsoft/vscode-extension-samples/tree/master/tree-view-sample

Edited

January 8, 2020 at 4:24am

Anton Kosyakov@anton-kosyakov

Team

4:24am

the first link is a plugin, not Theia extension, it cannot use widgets

4:24am

second is VS Code extension, it cannot us widgets as well

January 9, 2020 at 3:45am

Hanksha@hanksha

3:45am

What's the correct way to set the root of the tree? I tried something like this:

    const members = [
      {
        name: "member 1",
        children: [
          {
            name: "child1",
            children: []
          },
          {
            name: "child2",
            children: []
          }
        ]
      },
      /* ... more data */
      }
    ] as FamilyMember[];
    this.model.root = {
      id: "family-tree-root",
      name: "Family Tree Root",
      children: members.map(member => FamilyMemberNode.toNode(member)),
      visible: true,
      parent: undefined
    } as CompositeTreeNode;