[SCRIPT] Missing scrollbar

[lfcorullon]

I'm working, one more time, in a scrollable panel.

The script consists in two windows.

One which is the main/load. One which is the new/edit.

I made both in a separate jsx file first.

If I run the second one (new/edit) directly, everything is fine.

When I add its code to the main one, to run it when a button is pressed, the scrollbar is missing, as you can see in this small video I made to show.

Any ideas? I checked both codes more than twice. No variable names problems, nothing I can find.

Thanks in advance.

[m1b]

Hi @lfcorullon, I'm no expert on ScriptUI, but have you tried calling container.layout.layout() after each line is added? Where container is the window, or group, or panel containing the added elements.

- Mark

[lfcorullon]

Yes. I tried the layout.layout() in every container (from the main one -
the window) to the nearest one (the group). The script already has the
layout.layout to the window. When I run it directly, everything works. The
progressbar only misses when this window is started from the previous
window.

[lfcorullon]

If I open this Windows from within another function, the scrollbar misses.
If I run it from outside a function, it runs fine.

[lfcorullon]

@Marc Autret any thoughs on this?

The second window is a function.

If I call it from within another function (even a button.onClick = function () {}) the scrollbar doesn't show.

This is driving me crazy. I have no idea anymore. Tried all I can.

Thanks in advance.

[lfcorullon]

Just toggle the lines 2 and 3 (toggle the comment to run directly line 2 or line 3).

Running from line 2 doesnt' show the scrollbar while adding lines.

Running from line 3, does show the scrollbar while adding lines.

PS: in CS6 both runs fine.

//========================================================================================
var data = myW();
//~ myNW();
//========================================================================================
//========================================================================================
function myW() {
	var wo = new Window("dialog");
	
	var go = wo.add("group");
	go.orientation = "column";
	go.alignment = ["fill" , "fill"];
	
	var p1o = go.add("panel" , undefined , "");
	p1o.orientation = "row";
	p1o.alignment = ["fill" , "fill"];
	p1o.alignChildren = "fill";
	p1o.margins.top = (p1o.text != "") ? 20 : 10;
	
	var b3 = p1o.add("button" , [0,0,75,24] , "New");
	b3.enabled = true;
//========================================================================================
	var btns = wo.add("group");
	btns.alignment = "center";
	btns.alignChildren = "center";
	btns.add("button" , undefined , "OK");
	btns.add("button" , undefined , "Cancel");
//========================================================================================
	b3.onClick = function () {
		wo.close(2);
		myNW();
		}
//========================================================================================
//========================================================================================
	if (wo.show() != 2) alert("OK main window");
	else exit();
	}
//========================================================================================
//========================================================================================
//========================================================================================
function myNW() {
	var nw = new Window("dialog");
	
	var pFix = nw.add("panel" , undefined , "");
	pFix.orientation = "row";
	pFix.minimumSize.width = pFix.preferredSize.width = pFix.maximumSize.width = 300;
	pFix.alignChildren = "left";
	pFix.margins.top = 20;
	pFix.maximumSize.height = 210;
//========================================================================================
	var np1 = pFix.add("group");
	np1.orientation = "column";
	np1.alignment = "fill";
	np1.alignChildren = "left";
	np1.margins.bottom = 20;
	np1.maximumSize.height = 999999;
//========================================================================================
	var ng2 = np1.add("group");
	ng2.orientation = "column";
	ng2.minimumSize.width = ng2.preferredSize.width = ng2.maximumSize.width = 284;
	ng2.alignment = "fill";
	ng2.alignChildren = "left";
	var ng2_row = ng2.add("group");
	ng2_row.orientation = "row";
	var dname = ng2_row.add("statictext" , [0,0,140,22] , "Line");
	var dadd = ng2_row.add("button" , [0,0,20,20] , "+");
	
	dadd.onClick = function () {
		gg = ng2;
		gg.ng = gg.add("group");
		gg.fname = gg.ng.add("statictext" , [0,0,140,22] , "New line");
		gg.btn = gg.ng.add("button" , [0,0,20,20] , "-");
		gg.btn.onClick = remRow;
		
		n = ng2.children.length + 1;
		v = np1.location.y;
		
		nw.layout.layout(true);
		
		np1.size.height = (ng2.children.length)*32;
		scrollBar.location = [pFix.size.width-18 , 0];
		scrollBar.minvalue = -20;
		scrollBar.maxvalue = np1.size.height - pFix.size.height + 20;
		
		np1.location.y = v;
		}
//========================================================================================
	var scrollBar = pFix.add("scrollbar");
	scrollBar.stepdelta = scrollBar.jumpdelta = 10;
	scrollBar.preferredSize.width = 16;
	scrollBar.preferredSize.height = 208;
	scrollBar.value = 0;
	scrollBar.minvalue = 0;
	scrollBar.maxvalue = 0;
//========================================================================================
	scrollBar.onChanging = function () {
		np1.location.y = -1 * this.value;
		}
//========================================================================================
	nw.onShow = function () {
		np1.maximumSize.height = (ng2.children.length)*1000;
		np1.maximumSize.width = pFix.size.width-30;
		scrollBar.size.width = 14;
		scrollBar.size.height = 208;
		scrollBar.location = [pFix.size.width-18 , 0];
		}
//========================================================================================
	function remRow() {
		this.parent.parent.remove(this.parent);
		n = ng2.children.length + 1;
		v = np1.location.y;
		
		nw.layout.layout(true);
		np1.size.height = (ng2.children.length)*32;
		scrollBar.location = [pFix.size.width-18 , 0];
		scrollBar.minvalue = -20;
		scrollBar.maxvalue = np1.size.height - pFix.size.height + 20;
		scrollBar.value -= 32;
		np1.location.y = v;
		
		if (np1.size.height > pFix.size.height && np1.bounds.bottom < pFix.bounds.bottom-20) {
			scrollBar.location = [pFix.size.width-18 , 0];
			scrollBar.maxvalue = np1.size.height - pFix.size.height + 20;
			np1.location.y = (v+32);
			}
		if (np1.size.height <= pFix.size.height-20) {
			scrollBar.location = [pFix.size.width-18 , 0];
			scrollBar.maxvalue = np1.size.height - pFix.size.height + 20;
			np1.location.y = 20;
			}
		}
//========================================================================================
	var nbtns = nw.add("group");
	nbtns.alignment = "center";
	nbtns.alignChildren = "center";
	var myOK = nbtns.add("button" , undefined , "OK");
	var myCancel = nbtns.add("button" , undefined , "Cancel");
//========================================================================================
	if (nw.show() != 2) alert("OK new dialog");
	else exit();
	}
//========================================================================================
//========================================================================================

[Marc Autret · Accepted solution]

Hi Luis Felipe,

ScriptUI CS / CC are so different in behavior, component support, event cycle and bugs (!) that it is practically impossible to tell why something seems to work in one environment and not in the other. (Anyway I doubt your code works so well in CS6 either, at least in a cross-platform approach.)

The nesting of functions, UI components and event handlers is hard to analyze from the outside, so that I would have difficulty in determining what is strictly wrong in your code. That said, I can hazard a few guesses:

0. First of all I don't quite understand the point of using two modal windows while the same scenario could in principle be obtained from a single component.

1. It looks like a bad idea to call the 2nd function, myNW(), from within the b3.onClick handler that just closed the first Window. Have in mind that b3 still belongs to wo — even after wo.close(2) — which makes the caller b3.onClick also remain within the lifecycle of wo (a kind of “vanishing object”) while myNW() is invoked. Although wo is assumed to be closed at that very moment, it has to retain an internal memory area within which the entire next stage must take place. Thus it would be probably much safer to change the lines

    b3.onClick = function ()
    {
    wo.close(2);
    myNW();
    }

    // . . .

into something like

    b3.onClick = function ()
    {
    wo.close(2);
    }

    // . . .

    if( 2===wo.show() ) myNW();

2. Using the first sheme above, I suspect that the internal LayoutManager object remains stuck to wo (the vanishing Window), at least in CC. This means that statements like nw.layout.layout(1) may still operate behind the scenes “with wo in mind”, which makes updating the UI completely erratic. A good clue to this issue is that with a 4K display in Windows10/InDesign CC, the nw Window moves across the screen each time nw.layout.layout(1) is invoked. We know from this bug report that this symptom reflects a “UI scaling” bug in ScriptUI CC when size, preferredSize, location, bounds or windowBounds properties are involved, using screen coordinates vs. ScriptUI coordinates in a mixed way. The fact that the Window nw changes its own screen location in such an environment indicates that it might somehow depend on a higher level object (namely the original Window wo!) when nw.layout.layout(1) is innocently processed. Since the real container to be updated is the pFix panel, maybe the code pFix.layout.layout(1) would be more targeted & less confusing (?)

3. Continuing from the previous point it's usually a good idea to assign a distinct title to Window components — var nw = new Window("dialog","title1"), etc — because we have good reason to believe that it helps ScriptUI to distinguish between internal references. I can't prove this argument but I wouldn't be surprised if the LayoutManager behaved differently if your more-or-less-nested Window instances had a distinct, specific title.

4. Finally, it should be remembered that the LayoutManager relies on an extremely fussy algorithm that handles preferredSize properties (always the best option!) quite differently from those that explicitly set the size/position/bounds of your UI components. (Things get even more complicated when 'fill' alignments are involved.)

I haven't had time to thoroughly test these few ideas, but I think suggestion 1. is the most decisive. Hope that helps!

Best,

Marc

[lfcorullon]

First of all, thank you so much for the master class, @Marc Autret.
You're really awesome and I am so thanfull for your time!!!

The suggestion 1 apparently solved the problem. I'm testing it right now and making some improvements to the code. Thanks again!!!