ScriptUI Layout

[fusepilot]

I'm looking for a dynamic way to having two children of a group (one dyamically sized and one explicitly sized) fill up the parenting group's allotted space. Like this:

[[         edittext          ][button]]

Where the edittext has an alignment of 'fill'. And the button has a preferredSize of [20, 20];

The way ScriptUI currently treats this is as follows:

[[edittext][button][                 ]]

It ignores the 'fill' property of the edittext alignment and fills up the alotted space with nothing instead of the edittext.

The way I made the UI for my Rift script was by explicitly setting the character count on the edittext elements so that they filled the gap.

But this all falls apart when I open this up in older versions where the sizing of individual elements is completely different.

So specifically, how would you make something like the "Shift" panel be able to dynamically resize while keeping the buttons sizes fixed at [20,20]?

Thanks.

[Paul Tuersley]

Is the button 'right' aligned? And the shift panel (and any parent groups) set to 'fill'?

It doesn't sound like the button is resizing so you probably don't need to set maximumSize.

And you have a line like:

pal.onResizing = pal.onResize = function () { this.layout.resize(); };

This can be tricky stuff to get right. It might help if you could post the relevant bit of UI code.

Paul

[fusepilot]

Thanks Paul,

Here's the code I'm testing this out with:

res = "dialog { margins: 0, spacing: 0,\
    grp: Group { alignment: 'fill', spacing: 0, margins: 0,\
      editText: EditText {alignment: 'fill'} \
      btn: Button { preferredSize: [20, 20], alignment: 'right'}, \
    }, \
    grp: Group { preferredSize: [200, ''], spacing: 0, margins: 0,\
      editText: EditText {alignment: 'fill'} \
      btn: Button { preferredSize: [20, 20], alignment: 'right'}, \
    }, \
    buttons: Group {\
      okBtn: Button { text:'OK', properties:{name:'ok'}}, \
    }, \
}";

win = new Window(res)
win.center();
win.show()

[Paul Tuersley · Accepted solution]

I'm doing it slightly differently here but this seems to work ok:

res =

"Group { alignment:['fill','fill'], orientation:'column',\

  grp1: Group { alignment:['fill','top'], \

    editText: EditText {alignment: ['fill','center']} \

    btn: Button { preferredSize: [20, 20], alignment:['right','center']}, \

  }, \

  buttons: Group {\

    okBtn: Button { text:'OK', properties:{name:'ok'}}, \

  }, \

}";

var win = new Window("palette", "test", undefined, {resizeable:true});

win.spacing = 0;

win.margins = 0;

win.preferredSize = [200,0];

win.grp = win.add(res);

win.onResizing = win.onResize = function () { this.layout.resize(); };

win.center();

win.show();

[fusepilot]

Hey Paul,

The winning ticket seems to be specifying the vertical alignment on both the button and edittext. Or setting the parenting group's vertical alignment and then using ['aligntype', ''] for the button and the edittext. Anything other combination doesn't seem to work.

Very unexpected behavior as it seems vertical alignment is uncessecary to calculate the horizontal sizing when orientation is set to 'row'.

Thanks for helping me figure this out.

[Alan_AEDScripts]

Here is a snippet from one of my scripts that does the job too, not using resource strings...

As I resize the window, only the edittext stretches.

//=======================================================

var grp3= pnl.add("group");grp3.orientation="row";grp3.spacing=1;

var resolvedText= grp3.add("edittext",undefined, "Resolved Path"{name:"resolvedText",readonly:true});

resolvedText.alignment=["fill","fill"];resolvedText.minimumSize.width=320;

                                        resolvedText.graphics.backgroundColor=red;

                 var bFolder = grp3.add("button", undefined, "->");bFolder.minimumSize.width=22;

                                         bFolder.maximumSize.width=22;

//=======================================================

[Paul Tuersley]

I've never set alignment with just one value before so I wasn't sure what that would do. According to the Javascript Tools Guide CS6.pdf, "...which specify alignment along one axis, depending on the orientation of the container. You can specify an array of two of these strings, to specify alignment along both axes."

So I'd suggest that as your main container has a vertical orientation, the alignment:'fill' in your groups was only defining that behaviour vertically, not horizontally. So then setting the alignment in your controls wasn't working because the behaviour was already restricted by the parent group.

Paul

[muhammad suhails97718988]

could you anyone correct my code and can help me out how can i run it into my file successfully? below is the script and error is attached 
-----------------

// InDesign mein ExtendScript macro
var doc = app.activeDocument;
var paragraphs = doc.paragraphs.everyItem().getElements(); // Sabhi paragraphs ko le lo

for (var i = 0; i < paragraphs.length; i++) {
    var paragraph = paragraphs[i];
    var firstWord = paragraph.words[0]; // Pehla shabd nikalo

    // Ab switch statement ka use karen
    switch (firstWord.contents) {
        case "body":
            paragraph.appliedParagraphStyle = doc.paragraphStyles.itemByName("body text");
            break;
        case "que":
            paragraph.appliedCharacterStyle = doc.characterStyles.itemByName("que");
            break;
        case "ans":
            paragraph.appliedCharacterStyle = doc.characterStyles.itemByName("ans");
            break;
        case "mcq":
            paragraph.appliedParagraphStyle = doc.paragraphStyles.itemByName("mcq head");
            break;
        default:
            // Agar koi keyword match nahi ho to kuch nahi karo
            break;
    }
}

[Dan Ebberts]

This looks like a script for InDesign. You might find better support in that forum.

[muhammad suhails97718988]

Thanks you so much to assist me. I'm novice here thanks again