Why does the same UI specification produce different presentations on my desktop and laptop?

Report · Jan 15, 2017

I wrote a complicated UI specification (whose details I won't show here). It looks just like I desire on my desktop (except for % signs - see below). But when I copy the script to my laptop, some text entry fields disappear. I've tried resizing the fields, with no changes. How can I get the user's controls back on my laptop. It's hard to use the script when you cannot set the parameters! The code for one line of the UI is:

myLRow6 = myWSpace.add("group",undefined,"")

myLRow6.alignment = "left"

myHOffsetText = myLRow6.add("staticText",undefined,". The horizontal offset: ")

var myXOffset = myLRow6.add("edittext", undefined, "0", {editValue : myXOffset})

myXOffset.characters = 7

my6BetweenPercentText = myLRow6.add("staticText",undefined,"%")

The fourth line's edittext box disappears on the laptop. However, its space is reserved, because when the percent sign shows up, it resides beyond where the edittext box should appear. By the way, the percent sign disappears on my desktop and appears on my laptop! The following is probably not important, but I am using onClick events (based on other elements of the UI) to control visibility of these elements (among others). The onClick stuff works for other elements of the interface.

Two facts that might be relevant:

1. This is under Windows 10 (both machines)

2. The line in question does not extend to the right margin of the enclosing group, as there are longer lines in there.

You might not have noticed that I put a period in as the first character of the third line's text field, because otherwise the space allocator leaves out the spaces I used to force formatting - this problem existed on this and later lines, but not for preceding lines. I think this is a bug in the allocator.

Any ideas??? Thanks for thoughts.

Dick

Report · Jan 16, 2017

What happens if you leave out those spaces and {editValue : myXOffset}? Adding spaces for positioning is generally not a good idea. You can use various alignment parameters to determine the position of a control (as you did with myLRow6.alignment), or you can use coordinates, e.g. myHOffsetText.position = [x,y]. But alignment is better because it's more easily adaptable.

Peter

Report · Jan 16, 2017

Thanks for your suggestions. As a result I've spent several hours trying all kinds of options, without success. The problem is that I have two successive rows with text boxes that I wish to have lined up. For context, all of this is inside a group. My first try (before sending out the "help" message/query) was:

myLRow5 = myWSpace.add("group",undefined,"")

myLRow5.alignment = "left"

myVOffsetText = myLRow5.add("staticText",undefined,". The vertical offset: ")

var myYOffset = myLRow5.add("edittext", undefined, "0", {editValue : myYOffset})

myYOffset.characters = 7

myBetweenPercentText = myLRow5.add("staticText",undefined,"%")

myRow5PercentText = myLRow5.add("staticText",undefined,"of the gap will be on the side of the first image. [A zero will be interpreted as 50%.]")

myLRow6 = myWSpace.add("group",undefined,"")

myLRow6.alignment = "left"

myHOffsetText = myLRow6.add("staticText",undefined,". The horizontal offset: ")

var myXOffset = myLRow6.add("edittext", undefined, "0")

// var myXOffset = myLRow6.add("edittext", undefined, "0", {editValue : myXOffset})

myXOffset.characters = 7

my6BetweenPercentText = myLRow6.add("staticText",undefined,"%")

This is what shows proper stuff on my desktop, but the edittext boxes are not shown on the laptop. Today I've just been working on the desktop, where I can't get anything sensible. My first try was to create two groups in one row, with the left one holding the left-hand labels for the editboxes and the right one holding the edit boxes and following text. It looked like this:

myLRows56 = myWSpace.add("group", undefined, "")

myLRows56.orientation = "row"

my56Left = myLRows56.add("group", undefined,"")

my56Right = myLRows56.add("group", undefined,"")

my56Left.orietation = "column"

my56Left.alignChildren = "left"

my56Left.alignment = "left"

myVOffsetText = my56Left.add("staticText",undefined,"The vertical offset:")

myVOffsetText.alignment = "right"

myHOffsetText = my56Left.add("staticText",undefined,"The horizontal offset:")

myHOffsetText.alignment = "right"

my56Right.alignment = "left"

my56Right.orientation = "column"

my56Right.alignChildren = "left"

my56RRow1 = my56Right.add("group", undefined,"")

my56RRow1.orientation = "row"

var myYOffset = my56RRow1.add("edittext", undefined, "0", {editValue : myYOffset})

myBetweenPercentText = my56RRow1.add("staticText",undefined,"%")

myRow5PercentText = my56RRow1.add("staticText",undefined,"of the gap will be on the side of the first image. [A zero will be interpreted as 50%.]")

my56RRow2 = my56Right.add("group", undefined,"")

my56RRow2.orientation = "row"

var myXOffset = my56RRow2.add("edittext", undefined, "0")

my6BetweenPercentText = my56RRow2.add("staticText",undefined,"%")

This is one of the many variations that I tried, playing with the alignment and alignChildrden settings, and whether they are declared at all. It is curious that the left group behaves like it's a row (regardless), but the right portion behaves like a column, which is what's supposed to happen, in my understanding. The uniform result is that both of the left labels are placed on a single row, despite the declaration that the left side should be a column.

So then I tried making each row into a left portion and a right portion by making groups at that level. That looks more complex:

myLRows5 = myWSpace.add("group", undefined, "")

myLRows5.orientation = "row"

my5Left = myLRows5.add("group", undefined,"")

// my5Left.size.width = 30

my5Right = myLRows5.add("group", undefined,"")

my5Left.orietation = "column"

my5Left.alignChildren = "left"

my5Left.alignment = "left"

myVOffsetText = my5Left.add("staticText",undefined,"The vertical offset:")

myVOffsetText.alignment = "right"

my5RRow1 = my5Right.add("group", undefined,"")

my5RRow1.orientation = "row"

var myYOffset = my5RRow1.add("edittext", undefined, "0", {editValue : myYOffset})

myBetweenPercentText = my5RRow1.add("staticText",undefined,"%")

myRow5PercentText = my5RRow1.add("staticText",undefined,"of the gap will be on the side of the first image. [A zero will be interpreted as 50%.]")

myLRows6 = myWSpace.add("group", undefined, "")

myLRows6.orientation = "row"

my6Left = myLRows6.add("group", undefined,"")

// my6Left.size.width = 30

my6Right = myLRows6.add("group", undefined,"")

myHOffsetText = my6Left.add("staticText",undefined,"The horizontal offset:")

myHOffsetText.alignment = "right"

my6Right.alignment = "left"

my6Right.orientation = "column"

my6Right.alignChildren = "left"

my6RRow2 = my6Right.add("group", undefined,"")

my6RRow2.orientation = "row"

var myXOffset = my6RRow2.add("edittext", undefined, "0")

my6BetweenPercentText = my6RRow2.add("staticText",undefined,"%")

This structure does give me two lines across the dialog, but they can't be lined up - it wants to make things "pretty," by having the second line over toward the right. The commented out lines show one of my attempts to control the position of the left portions to line up the textboxes, defining their sizes - that wasn't accepted by the system - it told me that my5Left was "undefined," which seems to be a common error message when in fact the property mentioned in the program is not visible at that point (not a helpful correction). The Script UI e-book suggests that you cannot define size except in an onShow function. I did already have such a function for reading in initial values for all the user inputs, so I added two lines (copies of the commented lines) at the front of the onShow function. The result was that the dialog does show, but the two lines are not lined up, and the initial values had not been read in - so, in fact, the onShow function just aborted with a return when it couldn't do the job.

Here's a screen shot of the two lines from the last version of the spec. [Except I ce\an't figure out how to insert a jpg into this. (I'm running Google Chrome).

Report · Jan 16, 2017

OK, so pasting doesn't work, but dragging does...... Here's the two lines set by the allocator:

What do you make of this?

Report · Jan 16, 2017

Dick Kain wrote:
OK, so pasting doesn't work, but dragging does......

Hi Dick,

you could use the forum's control to insert images (PNG and JPEG):

If you activate "Use advanced editor" you even can format code as code.

Select the text you want to highlight and go to:

>> Syntax Highlighting > javascript

You have to scroll a little down to see the option "javascript" in the list of formatting options.

Regards,
Uwe

Report · Jan 17, 2017

Dick -- When you change

my56Left.orietation = "column"

to

my56Left.orientation = "column"

(i.e. insert an n) the window looks a lot different. 'orietation' is not flagged as an error because ScriptUI just thinks that you're adding a custom property. Anyway, it makes a big difference, visually.

But if I understand you correctly, the property you've missed is 'justify'. I think what you need to do is set the width of the statictext objects, then right-justify their content inside the allocated space. What I think you're after is this:

w = new Window ('dialog');
  group0 = w.add ('group {orientation: "column", alignChildren: "left"}');
  
    group1 = group0.add ('group');
      group1.add ('statictext {text: "The vertical offset:", characters: 30, justify: "right"}');
      yOffset = group1.add ('edittext {text: "0", characters: 3, justify: "right"}');
      group1.add ('statictext {text: "% of the gap will be on the side of the first image. [A zero will be interpreted as 50%.]"}');
      
    group2 = group0.add ('group');
      group2.add ('statictext {text: "The horizontal offset:", characters: 30, justify: "right"}');
      yOffset = group2.add ('edittext {text: "0", characters: 3, justify: "right"}');
      group2.add ('statictext {text: "%"}');
    
w.show();

The two text labels are assigned a width of 30 characters, and their content is justified right. Note that 'justify' can be set only as a creation property up to CC2015 or so, which is why I used the format above. To change the indent of the two rows, simply change the value of 'characters'. Instead of 'characters' you could use yOffset.preferredSize.width = [value] as well (but you can't use that in the string specification that I used here).

Peter

Report · Jan 17, 2017

Thanks to Peter for finding my typo. And to Uwe for cluing me in to how to show you code as code. Well, I made everything look beautiful on my desktop and then went to the laptop, where I found strange behavior. So I'll show you the code for those two lines of the dialog and for the last line of the dialog, which also has a edittext box.

    myLRows56 = myWSpace.add("group", undefined, "")
    myLRows56.orientation = "row"
    my56Left = myLRows56.add("group", undefined,"")
    my56Right = myLRows56.add("group", undefined,"")
    my56Left.orientation = "column"
    my56Left.alignChildren = "left"
    my56Left.alignment = "left"
    myVOffsetText = my56Left.add("staticText",undefined,"The vertical offset:")
    myVOffsetText.alignment = "right"
    myHOffsetText = my56Left.add("staticText",undefined,"The horizontal offset:")
    myHOffsetText.alignment = "right"
    my56Right.alignment = "left"
    my56Right.orientation = "column"
    my56Right.alignChildren = "left"
    my56RRow1 = my56Right.add("group", undefined,"")
    my56RRow1.orientation = "row"
    var myYOffset = my56RRow1.add("edittext", undefined, "0", {editValue : myYOffset})
    myYOffset.characters =3
    myBetweenPercentText =     my56RRow1.add("staticText",undefined,"%")
    myRow5PercentText =    my56RRow1.add("staticText",undefined,"of the gap will be on the side of the first image. [A zero will be interpreted as 50%.]")
    my56RRow2 = my56Right.add("group", undefined,"")
    my56RRow2.orientation = "row"
    var myXOffset = my56RRow2.add("edittext", undefined, "0")
    myXOffset.characters =3
    my6BetweenPercentText =     my56RRow2.add("staticText",undefined,"%")

    myLRow10 = myWSpace.add("group",undefined,"")
    myLRow10.alignment = "center"
    my10Message = myLRow10.add("staticText", undefined, "               If you wish to save thsee settings as a preset, enter the preset's name here:")
    my10Message.characters = 48
    var myPSaveName = myLRow10.add("edittext", undefined, "", {editValue : myPSaveName})
    myPSaveName.characters = 15

So on the laptop the edittext box for myPSaveName (line 5 of the second fragment) has always shown up, even before I sent out any cries for help. As far as I can tell, the relevant specifications for that line are essentially the same as for the lines in my first posting of this thread that didn't work. With the edited version of the lines 5 and 6 above, I don't get the edittext boxes specified there. But if I comment out both lines 8 and 10, I do get both edittext boxes. Notice that they are both in a different group from the staticText stuff in the other left-hand group. And if I comment out only (one of) line 8 or line 10 I see one (vertically centered) line of text on the left and two lines on the right - the first line does not show the edittext box (though it has allocated space for it - shown by the % following), but the second line does show an edittext box.

I think there's got to be a bug exposed here, since the behavior is so inconsistent. And I don't see how to fix this so it works on my laptop and, furthermore, how I can ever know whether this would work for other people (once I get this straightened out, I'll be trying to sell the complete set of scripts that will greatly help users lay out images on spreads and pages).

I'm looking for great thoughts! Thanks,

Dick

Report · Jan 17, 2017

By the way, if you really think it would help to see the complete code for the whole big dialog, let me send it to you as an e-mail attachment - it's quite long. Send me an e-mail with yours and I'll reply. I'm at kain@umn.edu.

Report · Jan 19, 2017

UPDATE:

Since nobody has come forward with anything more, and I am getting frustrated, having tried all kinds of variations on the locations and grouping of the elements in the dialog. So I decided to try something different - moving the text inputs to a different dialog box that would be created using the with hierarchy. I thought that I could put a checkbox into the big dialog. Then I would put an event handler to be activated when the box was clicked and became checked. Guess what? That didn't work, either - apparently there's no listener for an onClick of a checkbox, even though the documentation seems to say that there is one. So now I'm coding this so that the dialog box with the text boxes shows up when the big dialog is closed - a conditional on the state of the checkbox does do this. So that's my way out of this amazing maze.

Thanks to everyone for their thoughts and attention,

Dick

Adobe Community

Why does the same UI specification produce different presentations on my desktop and laptop?