• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

ScriptUI Layout

Explorer ,
May 03, 2013 May 03, 2013

Copy link to clipboard

Copied

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.

http://cdn.aescripts.com/media/catalog/product/cache/1/image/800x600/040ec09b1e35df139433887a97daa66f/r/i/rift_interface.png

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.

TOPICS
Scripting

Views

5.5K

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 guidelines

correct answers 1 Correct answer

Enthusiast , May 03, 2013 May 03, 2013

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

...

Votes

Translate

Translate
Enthusiast ,
May 03, 2013 May 03, 2013

Copy link to clipboard

Copied

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

Votes

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 guidelines
Explorer ,
May 03, 2013 May 03, 2013

Copy link to clipboard

Copied

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

Votes

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 guidelines
Enthusiast ,
May 03, 2013 May 03, 2013

Copy link to clipboard

Copied

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

Votes

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 guidelines
Explorer ,
May 04, 2013 May 04, 2013

Copy link to clipboard

Copied

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.

Votes

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 guidelines
Engaged ,
May 04, 2013 May 04, 2013

Copy link to clipboard

Copied

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;

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

Votes

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 guidelines
Enthusiast ,
May 04, 2013 May 04, 2013

Copy link to clipboard

Copied

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

Votes

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 guidelines
New Here ,
Sep 26, 2023 Sep 26, 2023

Copy link to clipboard

Copied

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

 

Votes

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 guidelines
Community Expert ,
Sep 26, 2023 Sep 26, 2023

Copy link to clipboard

Copied

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

Votes

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 guidelines
New Here ,
Sep 26, 2023 Sep 26, 2023

Copy link to clipboard

Copied

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

Votes

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 guidelines