Highlighted

ScriptUI resizing window problem

Community Beginner ,
Apr 21, 2020

Copy link to clipboard

Copied

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();
}

 

 

 

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
}

Topics

Scripting, User interface or workspaces

Views

437

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

ScriptUI resizing window problem

Community Beginner ,
Apr 21, 2020

Copy link to clipboard

Copied

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();
}

 

 

 

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
}

Topics

Scripting, User interface or workspaces

Views

438

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Apr 21, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Guide ,
Apr 22, 2020

Copy link to clipboard

Copied

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

 

*Martin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Apr 22, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Apr 22, 2020

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Guide ,
Apr 22, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Apr 22, 2020

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Community Beginner ,
Apr 22, 2020

Copy link to clipboard

Copied

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
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...