Skip to main content
B
Ben_christie
Known Participant
November 15, 2018
Answered

Format stacked rows of buttons within a panel

  • November 15, 2018
  • 2 replies
  • 1690 views

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'},\
                              },\
                    }"
    This topic has been closed for replies.
    Correct answer zlovatt

    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.

    2 replies

    zlovatt
    zlovattCorrect answer
    Inspiring
    November 15, 2018

    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.

    B
    Ben_christieAuthor
    Known Participant
    November 15, 2018

    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!

      zlovatt
      zlovatt
      Inspiring
      December 21, 2018

      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.


      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.

      Dan Ebberts
      Dan Ebberts
      Community Expert
      November 15, 2018

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

      Dan

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices