Posted by Offray on Jan 08, 2016; 1:17am
URL: https://forum.world.st/Spec-Binding-widgets-how-to-tp4863742p4869878.html

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

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 <[hidden email]>:

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