ScriptUI resizing window problem

[EduCo]

Hi,

I have a problem with a script that I am doing and I hope you can help me.

The initial idea was to use a combination of DoubleClick + Alt when clicking on a listbox but with onClick the problem happens the same and i make a simple script to recreate the problem.

What i want is to be able to reduce the interface layout to a single element by button, and when I click again it returns to the previous configuration, as many times as necessary. But the problem is that I only get it to work twice, and then everything inside the function stops working.

function buildUI() {
    
    var myScript = new Window("dialog", "test", undefined, {resizable: false});
    
    var resMain = "group{ orientation:'column', \
        main_panel: Group { type: 'group', orientation: 'column', alignChildren:['center','center'], margins: [0,0,0,0], borderless: 1, \
          gr1: Group{ orientation: 'row', justify: 'center', spacing: 10, \
                but_1: Button { preferredSize: [200,30], helpTip: 'new' },\
          },\
          gr2: Group { orientation: 'column', spacing:10,\
                bMain: Button { preferredSize: [200,200] },\
                grp_but: Group { orientation: 'row', spacing: 10,\
                    but_2: Button { text: '', preferredSize: [200,30]},\
                },\
          },\
        },\
    }";
    
    myScript.grp = myScript.add(resMain);

    var butOne = myScript.grp.main_panel.gr1.but_1;
    var butTwo = myScript.grp.main_panel.gr2.grp_but.but_2;
    var butMain = myScript.grp.main_panel.gr2.bMain;

    butOne.text = butTwo.text = "HIDE";
    butMain.text = "RESIZE";
    
        
    butMain.onClick = function () {
        if(bool==true) {
           myScript.remove(myScript.children[0]);
           myScript.add(resMain);
        } else {
            myScript.grp.main_panel.remove(myScript.grp.main_panel.gr1);
            myScript.grp.main_panel.gr2.remove(myScript.grp.main_panel.gr2.grp_but);
        }
        myScript.layout.layout(true);                 
                           
        if(bool==true)bool=false else bool=true
    }

    butOne.onClick = butTwo.onClick = function () {
        alert("NOTHING");
    }
        
    return myScript;
        
}
         
var bool = false;
var myScript = buildUI();    

if((myScript != null) && (myScript instanceof Window)){    
           myScript.center();
           myScript.show();
}

[EduCo]

I tried to change .onClick to myScript.onMove and works perfect, its something about calling the button after rebuild the ui but i cant solve whats the key there.

[Martin_Ritter]

I wrote something, but it was not correct and now I can't delete my post.

*Martin

[Tomas Sinkunas]

Long story short: when you rebuild the UI on `bunMain.onClick()` event, the reference to `butOne`, `butTwo` and `butMain` are gone. That's why, when you click on those buttons nothing happens since no action is being assigned to them after panel recreation.

[EduCo]

Thanks Tomas,

i realized that after public the post, but if i try to assign again the value of the variable bMain after rebuild de UI looks like the path of it has changed and get error.

    butMain.onClick = function () {
        if(bool==true) {
           myScript.remove(myScript.children[0]);
           myScript.grp = myScript.add(resMain);
           butOne = myScript.grp.main_panel.gr1.but_1;
           butTwo = myScript.grp.main_panel.gr2.grp_but.but_2;
        } else {
            myScript.grp.main_panel.remove(myScript.grp.main_panel.gr1);
            myScript.grp.main_panel.gr2.remove(myScript.grp.main_panel.gr2.grp_but);
        }
        myScript.layout.layout(true);        
        
        butMain = myScript.grp.main_panel.gr2.bMain;
        
        
        if(bool==true)bool=false else bool=true
    }

Im stuck in this and dont know how to solve, is there a better way to clean and rebuild a window? How can i assign again the variable with correct path? What changed? I dont know..

[Martin_Ritter]

I think the standard workflow for such application is to create 2 layouts and stack them over each other. 

With the button press, you hide/display the layouts as you need to.

Some snippets:

container = myPanel.add('group');
container.orientation = 'stack';
container.alignChildren = ['fill','fill'];

mainres = // layout 1
mainPanel = container.add(mainres);

aboutres = // layout 2
aboutPanel = container.add(aboutres);
aboutPanel.hide();

mainPanel.groupOne.infoBtn.onClick = function(){
   mainPanel.hide();
   aboutPanel.show();
}

aboutPanel.groupOne.backBtn.onClick = function(){
   mainPanel.show();
   aboutPanel.hide();
}

*Martin

[EduCo]

Thanks a lot martinr,

that is a solution that i evaluated before but i dismissed because in my real script i launch several window dialogs and palettes from this main window and if i have two on show i have problems with the rest of the code and script workflow.

I need to resize main window maintaining it open and i think the only thing to resolve is the lost of the variables data, i need to get the correct path for them but im still trying how...

[EduCo · Accepted solution]

I solve this and because i get a lot of help in forums and sometimes one simple thing help other i put here the snippet, thanks both for the help! Hope all goes well!!

var myScript = new Window("dialog", "test", undefined, {
  resizable: false
})

var resMain = "group{ orientation:'column', \
  main_panel: Group { type: 'group', orientation: 'column', alignChildren:['center','center'], margins: [0,0,0,0], borderless: 1, \
    gr1: Group{ orientation: 'row', justify: 'center', spacing: 10, \
          but_1: Button { preferredSize: [200,30], helpTip: 'new' },\
    },\
    gr2: Group { orientation: 'column', spacing:10,\
          bMain: Button { preferredSize: [200,200] },\
          grp_but: Group { orientation: 'row', spacing: 10,\
              but_2: Button { text: '', preferredSize: [200,30]},\
          },\
    },\
  },\
}"

init();

if ((myScript != null) && (myScript instanceof Window)) {
  myScript.center();
  myScript.show();
}

function buildUI() {
  myScript.grp = myScript.add(resMain);

  var butOne = myScript.grp.main_panel.gr1.but_1;
  var butTwo = myScript.grp.main_panel.gr2.grp_but.but_2;
  var butMain = myScript.grp.main_panel.gr2.bMain;

  butOne.text = butTwo.text = "HIDE";
  butMain.text = "RESIZE";

  return {
    butMain: butMain,
    butOne: butOne,
    butTwo: butTwo,
  };
}

function init() {
  var bool = false
  var UI = buildUI()

  function doIt() {
    alert("Do it!")
  }

  function toggle() {
    if (bool) {
      myScript.remove(myScript.children[0]);
      UI = buildUI()
      UI.butOne.onClick = UI.butTwo.onClick = doIt
      UI.butMain.onClick = toggle
    } else {
      myScript.grp.main_panel.remove(myScript.grp.main_panel.gr1);
      myScript.grp.main_panel.gr2.remove(myScript.grp.main_panel.gr2.grp_but);
    }

    myScript.layout.layout(true);

    bool = !bool
  }

  UI.butMain.onClick = toggle
  UI.butOne.onClick = UI.butTwo.onClick = doIt
}