Format stacked rows of buttons within a panel

[Ben_christie]

Hello all,

I'm having trouble figuring out how to format multiple rows on top of each other within the same labeled panel in my script. Here is what I have, I'm basically looking to add an additional row of buttons directly underneath this row but have it still be contained in the labeled 'Generative Comp Presets' panel. Any ideas?

Thanks!

res="group{orientation:'column', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
                              myStructure: Group{orientation:'row', alignment:['fill', 'fill'], alignChildren:['fill', 'fill'],\
                              aeStructure: Button{text:'AE Structure'},\
                              myStructureItem2: Button{text:'Directory Structure'},\
                              },\
                              \
                              \
                              myPanel: Panel{text:'Generative Comp presets', orientation:'row', alignChildren:['fill', 'fill'],\
                                        myPanelItem1: Button{text:'One'},\
                                        myPanelItem2: Button{text:'Two'},\
                                        myPanelItem3: Button{text:'Three'},\
                              },\
                    }"

[Dan Ebberts]

I'd change the Panel orientation to 'column' and inside the panel have a Group (with 'row' orientation) for each row of Buttons.

Dan

[zlovatt · Accepted solution]

One thing that may make all of this easier to work with would be to switch away from using resource strings and instead build your interface the way you build... everything else in all of javascript, everywhere. The resource string method is unfriendly, unintuitive, unclear, and inflexible.

Adapting your same code over to a more traditional JS structure (and adding indenting to help visualize the UI hierarchy), we'd have something like this:

var grp = window.add("group");
    grp.orientation = "column";
    grp.alignment = ["fill", "fill"];
    grp.alignChildren = ["fill", "fill"];
    var myStructure = grp.add("group");
        myStructure.orientation = "row";
        myStructure.alignment = ["fill", "fill"];
        myStructure.alignChildren = ["fill", "fill"];
    var aeStructure = grp.add("button", undefined, "AE Structure");
    var myStructure2 = grp.add("button", undefined, "Directory Structure");
    var myPanel = grp.add("panel", undefined, "Generative Comp Presets");
        myPanel.orientation = "row";
        myPanel.alignChildren = ["fill", "fill"];
        var myPanelItem1 = myPanel.add("button", undefined, "One");
        var myPanelItem2 = myPanel.add("button", undefined, "Two");
        var myPanelItem3 = myPanel.add("button", undefined, "Three");

From here, it's more straightforward to see that you could add another group into myPanel beneath the buttons and go from there.

[Ben_christie]

This is exactly what I needed to help wrap my brain around it a little better. I was having trouble organizing everything in the terrible resource string format. I was able to create variables of groups within overall structure variables to create stacked rows.

Thanks so much for the help!

[Alan_AEDScripts]

Looking back at old scripts, to make things easier to revisit, and even less verbose, I have been writing helper libraries, as I would usually have the same settings say for a button.. like it might usually be left aligned, have a height of 18 etc etc. Also I might include the callback in this function too as a parameter, so :

var g = ael_grp('row');

     ael_button(g,'do it', 45,  doTheThing);

     ael_button(g,'do another, 45,  doAnother);

So wouldn't need a var for the button (as the onClick is part of the library function) and most of the usual settings are pulled into one line of code. So applying this, can make UI creation really easy to manage and read. If something steps outside the usual (personal), then add into the UI in the usual way.

[zlovatt]

Continuing this idea, if you were to adopt aequery for a scripting helper library, you'd build out this same sample above as:

var win = aeq.ui.createMainWindow(thisObj, "My Cool Window");
var grp = win.addGroup({
  orientation: "column",
  alignment: ["fill", "fill"],
  alignChildren: ["fill", "fill"]
});
  var myStructure = grp.addGroup({
    orientation: "row",
    alignment: ["fill", "fill"],
    alignChildren: ["fill", "fill"]
  });
    myStructure.addButton("AE Structure", doThing1);
    myStructure.addButton("Directory Structure", doThing2);
  var myPanel = grp.addPanel("Generative Comp Presets", {
    orientation: "row",
    alignChildren: ["fill", "fill"]
  });
  myPanel.addButton("One");
  myPanel.addButton("Two");
  myPanel.addButton("Three");
win.show();

Lots of helper functions in there for dealing with interface nonsense! We aim to make it a nice buffer between a developer and ScriptUI.