4 Replies Latest reply on Nov 14, 2014 7:12 AM by gespinha

    Difference between variable UI layout and add() method UI layout?

    gespinha Level 1

      Hi there,

       

      What is the difference between a variable UI layout and add() method UI layout?

       

      Variable UI layout is something like this:

       

      var windowResource = "palette {  \
          orientation: 'column', \
          alignChildren: ['fill', 'top'],  \
          preferredSize:[300, 130], \
          text: 'ScriptUI Window - palette',  \
          margins:15, \
          \
          bottomGroup: Group{ \
              cd: Checkbox { text:'Checkbox value', value: true }, \
              cancelButton: Button { text: 'Cancel', properties:{name:'cancel'}, size: [120,24], alignment:['right', 'center'] }, \
              applyButton: Button { text: 'Apply', properties:{name:'ok'}, size: [120,24], alignment:['right', 'center'] }, \
          }\
      }";
      
      var win = new Window(windowResource);
      
      win.show();
      

       

      add() method UI layout is something like this:

       

      var w = new Window('dialog', 'Random Number Generator');
      var btn_group = w.add('group'),
          btn_ok = btn_group.add('button', undefined, 'Ok');
      
      w.show();
      

       

       

      Thanks!

        • 1. Re: Difference between variable UI layout and add() method UI layout?
          Chuck Uebele Adobe Community Professional & MVP

          From the Javascript Tools Guide on Resource specifications (you're top example):

           

          You can create one or more user-interface elements at a time using a resource specification. This specially formatted string provides a simple and compact means of creating an element, including any container element and its component elements. The resource-specification string is passed as the type parameter to the Window() or add() constructor function.

          The general structure of a resource specification is an element type specification (such as dialog),

          followed by a set of braces enclosing one or more property definitions.

          var myResource = "dialog{ control_specs }";

          var myDialog = new Window ( myResource );

          Controls are defined as properties within windows and other containers. For each control, give the class name of the control, followed by the properties of the control enclosed in braces.

           

          I've had trouble getting the resource specifications to work - most likely just didn't spend the time to figure it out. Some differences is that some of the properties that they put in the resource specifications in the braces after the item will not work in the other method, if you do it that way. You normally have to make a second line and add that property. I'm not sure of the first method, but the second is object based, and you can either use the object structure (object,nextProperty,etc) or define a variable to represent that object. In many of the scripts that I write, I use variables and give them a name such as:

           

          var myCheckBox = dlg.inSomeGroup.add('checkbox',undefined,'Text Check Box');

          myCheckBox.name = 'myCheckBox';

           

          By doing this, I can create a recursive function that goes through the entire UI and extracts the values of elements and writes that info to an xml file. Including the names allows the script to identify what control/variable it is in the xml, so that it can be reassigned back to the proper control. I haven't tried this with the resource specifications method, so I don't know if it will work with it. 

          • 2. Re: Difference between variable UI layout and add() method UI layout?
            gespinha Level 1

            I tried both on simple script and noticed the add() method (the secon I show on my question) is kind of clunky and sometimes brings Photoshop CC 2014 down, not so easy to configure the layout also.

             

            Have you found any issues with using that method?

            Is there compatibility differences on these methods, between Photoshop versions?

            • 3. Re: Difference between variable UI layout and add() method UI layout?
              Chuck Uebele Adobe Community Professional & MVP

              It is a bit clunky. The only issue I've had is that I've created a rather large UI (multiple tabs) and sometimes it comes up blank, but I put a forced garbage collection in it to clean things up. As far as layout, I always use the auto layout with the placement as "undefined", and I haven't had any issue making UI's the way I want them to appear. Here are a couple samples from my large UI:

               

              UI page 1.jpg

              UI page 2.jpg

              • 4. Re: Difference between variable UI layout and add() method UI layout?
                gespinha Level 1

                Yes, it looks great!

                 

                It is not a challenge to create a decent UI, just a bit more time consuming if you don't use the auto layout.

                I have found no issues at all and think its easier to create the UI with the variable method, since it is simpler to manage different windows. And swap contents if needed.

                 

                Thank you by the suggestions