Spectrum is now read-only. Learn more about the decision in our official announcement.


Eclipse Theia - Cloud & Desktop IDE


Simple TreeWidget implementation example

December 19, 2019 at 2:24am

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
We actually reworking this area right now: in regards how labels are customized.
Usually you have to customize 3 parts:
  • 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
  • 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 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
  • last part is a widget to have some custom rendering, look at FileTreeWidget for example
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
Ok thanks I'll check these out

January 7, 2020 at 12:40am
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.
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.
Alright I'll check that thanks!

January 7, 2020 at 2:36pm

January 8, 2020 at 4:24am
the first link is a plugin, not Theia extension, it cannot use widgets
second is VS Code extension, it cannot us widgets as well

January 9, 2020 at 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: => FamilyMemberNode.toNode(member)),
visible: true,
parent: undefined
} as CompositeTreeNode;
When I do that FamilyTree.resolveChildren is called for the root node, but nothing renders in the widget
I checked the model in FamilyTreeWidget.renderTree and it has the children correctly set
as FamilyMember[]; looks suspicious
do const members: FamilyMember[] = [] and if there is some compilation errors then you should fix it
strange that your nodes don't have id
That didn't fix it
They do have ids
that pastebin contains all the file used
Can you spot anything wrong?
Show more messages