[Pharo-users] Spec: Populating a playground with a particular content (was Re: Spec: Binding widgets how to)

Offray Vladimir Luna Cárdenas offray at riseup.net
Thu Jan 7 20:36:54 EST 2016


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 at 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
>>
>>
>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.pharo.org/pipermail/pharo-users_lists.pharo.org/attachments/20160107/3583af53/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: tree-node-details-working.png
Type: image/png
Size: 17777 bytes
Desc: not available
URL: <http://lists.pharo.org/pipermail/pharo-users_lists.pharo.org/attachments/20160107/3583af53/attachment.png>


More information about the Pharo-users mailing list