5 Replies Latest reply on Oct 16, 2015 12:40 AM by BEGINNER_X

    UI alignment

    BEGINNER_X Level 3

      HI,

       

      MY current script output, refer screenshot

       

      Date, operator name comes perfectly (First Line)

      But wrongly, Department & version comes in the second line with the row (need to fix)

       

       

      Need like a set of box.

      Date               operator name

      Department    version

      Input              output

      etc....

       

       

      Code:

       

      var w = new Window ("dialog");
          var myGroup1 = w.add('panel', undefined, 'ARTWORK Check List');
          myGroup1.alignChildren = "left";
          
          var main = myGroup1.add ('panel {orientation: "row"}');
          var group = main.add ("group {alignChildren: 'left', orientation: 'row'}");
          group.add ("statictext", undefined, "Date             : ");
          var list2 = group.add ("editText", [0,0,220,20], "AAA");
          list2.minimumSize.width = 250;
          
          var group = main.add ("group {alignChildren: 'left', orientation: 'row'}");
          group.add ("statictext", undefined, "Operator name : ");
          var list2 = group.add ("editText", [0,0,250,20], "BBB");
          list2.minimumSize.width = 250;
          
         var main = myGroup1.add ('panel {orientation: "row"}');
          var group = main.add ("group {alignChildren: 'left', orientation: 'row'}");
          group.add ("statictext", undefined, "Department : ");
          var list2 = group.add ("editText", [0,0,250,20], "BBB");
          list2.minimumSize.width = 250;
          
          var group = main.add ("group {alignChildren: 'left', orientation: 'row'}");
          group.add ("statictext", undefined, "Version              : ");
          var list2 = group.add ("editText", [0,0,250,20], "");
          list2.minimumSize.width = 250;
      

      w.show();

       

      Current Wrong Screenshot:

       

      Screen Shot 2015-10-15 at 06.30.13.png

        • 1. Re: UI alignment
          Peter Kahrel Adobe Community Professional & MVP

          It's not entirely clear (not to me anyway) what you're after, but I think it's something like the script below. Note that you used 'list2' as a variable name for each editbox, which is wrong because you'll end up with only one variable, the last one. Also, using 'list' for a string variable is confusing. Another point: you set the coordinates for each edittext control explicitly ([0,0,250,20]) and then also set their size, which is unnecessary. In general, try to leave a much as possible to the ScriptUI layout manager.

           

          To make the window easier to change, set the width of the edittext controls in a loop. That way, if you want the controls to be wider or narrower, you need to change just one value.

           

          var w = new Window ("dialog");
          
            var panel = w.add('panel {text: "ARTWORK Check List", alignChildren: "right"}');
            
            var dateGroup = panel.add ("group");
              dateGroup.add ("statictext {text: 'Date : '}");
              var date = dateGroup.add ("editText {text: 'AAA'}");
          
            var operatorGroup = panel.add ("group");
              operatorGroup.add ("statictext {text: 'Operator name : '}");
              var operator = operatorGroup.add ("editText {text: 'BBB'}");
          
            var departmentGroup = panel.add ("group");
              departmentGroup.add ("statictext {text: 'Department : '}");
              var department = departmentGroup.add ("editText {text: 'CCC'}");
          
            var versionGroup = panel.add ("group");
              versionGroup.add ("statictext {text: 'Version :'}");
              var version = versionGroup.add ("editText {text: 'DDD'}");
          
            for (var i = panel.children.length-1; i >= 0; i--) {
              panel.children[i].children[1].preferredSize.width = 250;
            }
          
          w.show();
          

           

          produces:

           

          window.png

          • 2. Re: UI alignment
            Vamitul Level 4

            Don't use spaces for aligning lables, instead use the "characters" property:

             

            operatorGroup.add ("statictext {text: 'Operator name : ', characters:15}");

            ...

            versionGroup.add ("statictext {text: 'Version :', characters:15}");

            • 3. Re: UI alignment
              BEGINNER_X Level 3

              Thanks Pkahrel, Vamitul,

               

              Pkahrel,

              Your UI output is almost correct, but only change is,

               

              I need this like

               

              Artwork Check List

              Date           : AAA         Operator Name: BBB

              Department: CCC        Version             : DDD

              • 4. Re: UI alignment
                Peter Kahrel Adobe Community Professional & MVP

                Well, you've seen several examples by now (in this thread and elsewhere), and it's not really clear what you want, so read more in the documentation and fix it yourself or hire someone to write the interface for you.

                • 5. Re: UI alignment
                  BEGINNER_X Level 3

                  Thank You Peter Kahrel..

                   

                  Surely, I will try and do my best.

                   

                  Thanks again.