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

Hi,

Lets try something simpler. Consider this code:

=============================
| data m1 m2 |

data := { 'first' -> 'I\"m just text' . 'second' -> 'ProfStef openPharoZenWorkspace'} asOrderedDictionary.

m1 := DynamicComposableModel new.
m1 instantiateModels: #(list ListModel).
m1 list items: (data keys).
m1 layout:
    (SpecLayout composed
        add: #list;
        yourself).

m2 := DynamicComposableModel new.
m2 instantiateModels: #(right TextModel).
m2 assign: m1 to: #left.
m1 list
    whenSelectedItemChanged: [:item |
        item
            ifNil: [
                m2 instantiateModels: #(right TextModel).
                m2 right text: ''
            ]
            ifNotNil: [
                item = 'first'
                    ifTrue: [
                        m2 instantiateModels: #(right TextModel).
                        Transcript show: m2 right asString, String cr
                    ].
                item = 'second'
                    ifTrue: [
                        m2 instantiateModels: #(right GlamourPresentationModel).
                        Transcript show: m2 right asString, String cr].
            ]
    ].

m2 layout:
    (SpecLayout composed
        newRow: [:r | r add: #left; add: #right];
        yourself).
m2 openWithSpec

=============================

Shouldn't be #right dynamically defined according to the values of 'item' and be replaced on the m2 layout? The transcript show that anytime I change the selection in this small spec interface, m2 right is changed. Is it not what I'm putting in the right side of the interface with the line which says:  "newRow: [:r | r add: #left; add: #right];"

How can I made spec in this small example show the respective value in the dictionary when the key value is "first" inside a TextModel and the respective value in the dictionary when the key value is "second" inside a GlamourPresentationModel?

Cheers,

Offray

Hi Johan,

I have not found more errors on the booklet, but I think that I'm not getting the explanation of dynamic spec. Consider this code:


==============================
GrafoscopioGUI Class>>exampleBootstrapDynamicUI
    "Starting from an example UI from the Spec-Glamour, to customize towards the grafoscopio
    UI and get some ideas"

    |notebook leftUpperPanel leftPanel treeBrowser |
   
    "Creating a notebook-tree with dummy data"
    notebook := GrafoscopioNode new becomeDefaultTestTree.
   
    "Defining the tree roots part"
    leftUpperPanel := DynamicComposableModel new.
    leftUpperPanel instantiateModels: #(tree TreeModel).
    leftUpperPanel tree
        roots: notebook children;
        childrenBlock: [:node | node children ];
        displayBlock: [:node | node title ].
    leftUpperPanel layout: (SpecLayout composed
        add: #tree;
        yourself).
    "to debug upto here uncomment the next line, and comment all other 'openWithSpec' ones"
    "leftUpperPanel openWithSpec."
   
    "Integrating the previous tree with the node header and creating the body according to
    the tags on the node"
    leftPanel := DynamicComposableModel new.
    leftPanel assign: leftUpperPanel to: #roots.
    leftPanel instantiateModels: #(header TextInputFieldModel).   
    treeBrowser := DynamicComposableModel new.
    leftUpperPanel tree
        whenSelectedItemChanged: [:node |
            node
                ifNil:[
                    leftPanel header text: ''.
                    treeBrowser instantiateModels: #(body TextModel).
                    Transcript show: 'Nada que mostrar', String cr]
                ifNotNil: [
                    leftPanel header text: (leftUpperPanel tree selectedItem content header).
                    leftUpperPanel tree selectedItem content tags = 'código'
                        ifTrue: [
                            treeBrowser instantiateModels: #(body GlamourPresentationModel).
                            Transcript show: 'I am code', String cr.
                            Transcript show: treeBrowser body asString, String cr.
                        ]
                        ifFalse: [
                            treeBrowser instantiateModels: #(body TextModel).
                            treeBrowser body text: (leftUpperPanel tree selectedItem content body).
                            Transcript show: 'I am NOT code', String cr.
                            Transcript show: treeBrowser body asString, String cr.
                        ]
                ]
        ].
    leftPanel layout:
        (SpecLayout composed
            newColumn: [:column |
                    column
                        add: #roots;
                        add: #header height: 35];
            yourself).
   
    "Integrating the previous tree with node body content"
    treeBrowser assign: leftPanel to: #leftTree.
    treeBrowser layout:
        (SpecLayout composed
            newRow: [:r | r add: #leftTree; add: #body ];
            yourself
        ).
    treeBrowser openWithSpec.
==============================

I can get the interface shown here:



and when I move between nodes in the upper left tree the correspondent name in the lower left input box changes accordingly, but nothing else happens on the right side panel. I have put the definition of the type and contents of such panel inside a whenSelectionChanged block, as you can see in the previous code, because I think that right panel should change according to the type of node that is selected, but this doesn't work. The debug info that I send to a transcript show that #body becomes a GlamourPresentationModel or a TextModel depending on which node I'm selecting. I don't know what I'm doing wrong or how this dynamic spec is supposed to behave... well, dynamically, and accordingly making layout components to change on the fly.

How can I make the right panel change to become a GlamourPresentationModel or a TextModel in Spec-Glamour?

Thanks,

Offray

On 08/01/16 12:10, Johan Fabry wrote:

Consider the error as reported! I should work on this text soon so I will fix it. If you find any more errors feel free to send me a mail.

On Jan 8, 2016, at 12:43, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:

Thanks Johan,

This seems what I'm looking for.

I running now the examples at the dynamic spec section and I have found an error in Script 1.41: Setting up the sub widgets (pg 24 of current version) in the first line, where it says " view label text: 'Packages:'." it should be " view label label: 'Packages:'." There is any place where I can report and/or correct such errors?

Cheers,

Offray

On 08/01/16 06:21, Johan Fabry wrote:

Hola,

it looks like what you want here is covered by dynamic spec. Have a look at the dynamic spec section in the Spec booklet (work in progress) https://ci.inria.fr/pharo-contribution/view/Books/job/PharoBookWorkInProgress/lastSuccessfulBuild/artifact/book-result/Spec/ I think that it will answer your question.

On Jan 7, 2016, at 22:36, Offray Vladimir Luna Cárdenas <[hidden email]> wrote:

 How can I initializeWidgets with some kind of conditions depending on the kind of selection I have done on the tree? 

---> Save our in-boxes! http://emailcharter.org <---

Johan Fabry   -   http://pleiad.cl/~jfabry
PLEIAD and RyCh labs  -  Computer Science Department (DCC)  -  University of Chile

---> Save our in-boxes! http://emailcharter.org <---

Johan Fabry   -   http://pleiad.cl/~jfabry
PLEIAD and RyCh labs  -  Computer Science Department (DCC)  -  University of Chile