Hi,

Thanks to NIcolai's help with his minimalist example I'm on track now and finally I have started to understand better the events in Spec. My problem was in the incorrect use of whenHighlightedItemChanged. Now the code its working fine and I can browse the tree and see the related contents on the respective UI panels (see attached screenshot and code at [*] at the end to see how was solved).

Now I'm facing another issue: As you can see in the attached screenshot the UI has four parts: A tool bar above all, a tree with the node title (called node header) at left and a bigger panel at right with node contents (called node body). I would like to make the node body behave in a similar way as in my previous non-Spec interface, so it can react differently according to the node tags. If the node is tagged as code, it will become a playground with node contents inside such playground. If node is not tagged it will be a text like now (this is already working). So my questions are:

1) How can I populate a Spec-Glamour playground with a particular text code?
2) How can I initializeWidgets with some kind of conditions depending on the kind of selection I have done on the tree? At this moment my initializeWidgets look like this:

==[2a]===========
GrafoscopioGUI>>initializeWidgets
�� "Buils graphical interface elements"

�� windowMainMenu := self windowMainMenu.
�� tree := self tree.
�� nodeHeader := self newTextInput.
�� nodeBody :=
�� tree selectedItem notNil
�� ifTrue: [ self updateBody ]
�� ifFalse: [nodeBody := self newText].
�� windowMainMenu applyTo: self.
�� self focusOrder
�� add: windowMainMenu;
�� add: tree;
�� add: nodeHeader;
�� add: nodeBody.
================

and my updataBody (where I think that this conditional behavior could be looks like this:

==[2b]===========
GrafoscopioGUI>>updateBody
�� "update the displayed content associated to the body of a node"
��
�� (tree selectedItem content tags = 'c��digo')
�� ifTrue: [
�� ^ nodeBody text: 'I should be playground because I am tagged as ', tree selectedItem content tags
�� ]
�� ifFalse: [
�� ^ nodeBody text: tree selectedItem content body
�� ]
================

So, more precisely, what I need to put in the ifTrue part of [2b] to make the interface to return a playground with pre-populated code? (is it the proper place?)

Finally, here is the code that made the tree update properly, just for the curious ones.

==[*]============
GrafoscopioGUI>>tree
�� | notebook |
�� notebook := GrafoscopioNode new becomeDefaultTestTree.
�� tree := TreeModel new.
�� tree
�� roots: notebook children;
�� childrenBlock: [:node | node children];
�� displayBlock: [:node | node title ].
�� tree whenHighlightedItemChanged:��
�� [tree selectedItem notNil
�� ifTrue: [
�� self updateHeader.
�� self updateBody.
�� ]
�� ].
�� ^ tree
================

Cheers,

Offray

On 03/01/16 18:33, Offray Vladimir Luna C��rdenas wrote:

Thanks again Nicolai! I will start from here :-).

Offray

On 03/01/16 18:20, Nicolai Hess wrote:

2016-01-03 23:52 GMT+01:00 Offray Vladimir Luna C��rdenas <offray@riseup.net>:

Hi,

On 03/01/16 08:45, Nicolai Hess wrote:

��

There is any way to run a minimal GUI with a tree using your example? I'm still missing a key concept on how to use spec and binding between widgets.

what is missing ? this is a minimal gui with a tree component.

��

Ohh, what is missing is not in the example, but in my understanding on how to use/start it. I would expect for something like "example openWithSpec" to start deconstructing it, but I'm still lost about it. I will be working on it today and tomorrow to see if I can come with better questions.

Ok, for this example you can just start it with:

TreeDemo new openWithSpec

It opens a window with two panes, the upper pane shows a tree with some nodes (subclasses of class Morph)

The lower pane shows the text(name) of the selected node. You can change and accept (cmd+s) the text in the

lower pane, which will update the name of the tree node.

��

Cheers,

Offray