6 Replies Latest reply on Apr 17, 2009 6:23 AM by Steven..

    JS CS3 ScriptUI layout options

    John.Kordas Level 1

      I've been working through the examples and docs and found there are a few ways you can lay out components in the dialog.

       

      Here is the first example of a simple dialog with 2 drop menus and static text for each. I've aligned them to the right but it just does not look correct.

       

      var myDialog = new Window('dialog', ' Details');

       

      myDialog.fDetails = myDialog.add('panel',undefined,'File details');
      myDialog.fDetails.alignChildren = 'right';
          myDialog.fDetails.fPath = myDialog.fDetails.add('group');
          myDialog.fDetails.fTitle = myDialog.fDetails.add('group');
          myDialog.fDetails.fPages = myDialog.fDetails.add('group');
          with (myDialog.fDetails){
          fPath.st  = fPath.add('statictext',undefined,'Path:');
          fPath.dd = fPath.add('dropdownlist', undefined, undefined, {items:["C:", "D:","E:", "F:", "G", "H", "I"]})
          fTitle.st  = fTitle.add('statictext',undefined,'Current Doc Title:');
          fTitle.dd = fTitle.add('dropdownlist', undefined, undefined, {items:["Product1", "Product2","Product3"]})
          }

       

      myDialog.show();

       

       


      In the second example I've used the coordinates to lay out the dialog and achieve the look I want but it took some playing around to get there. The static text and drop menus line up nicely.

       

      var myDialog = new Window('dialog', ' Details');

       

      myDialog.fDetails = myDialog.add('panel',[0,100,200,190],'File details');
          myDialog.fDetails.pathName  = myDialog.fDetails.add('statictext',[70,15,100,35],'Path:');
          myDialog.fDetails.pathNameDrop = myDialog.fDetails.add('dropdownlist', [105,12,145,32], undefined, {items:["C:", "D:","E:", "F:", "G", "H", "I"]});
          myDialog.fDetails.docName = myDialog.fDetails.add('statictext',[10,45,100,60], 'Current Doc Title:');
          myDialog.fDetails.docNameDrop = myDialog.fDetails.add('dropdownlist',[105,42,180,62], undefined, {items:["Product1", "Product2","Product3"]});

       

      myDialog.show();

       

      To achieve the look of the second option using the first method (not coordinates) is it possible to set the static test in one column and align it to the right and set the dropmenus in a second column and align them to the left? This would be easier but is it possible?

       

      Cheers, John.

        • 1. Re: JS CS3 ScriptUI layout options
          Peter Kahrel Adobe Community Professional & MVP

          John,

           

          It's easier not to meddle with the positions of the elements, that'll get you into trouble when you later expand the dialog. In the long run it's easier to use alignment, alignChildren", left, right, etc, as you did in your first example. You can then add controls for the size of elements. The following code is your with-statement with a preferredSize statement added to make the dropdowns equally wide (I added a line to each dropdown so that the first element is displayed):

           

          with (myDialog.fDetails){

              fPath.st  = fPath.add('statictext',undefined,'Path:');

              fPath.dd = fPath.add('dropdownlist', undefined, undefined, {items:["C:", "D:","E:", "F:", "G", "H", "I"]})
              fPath.dd.preferredSize = [150,20];
              fPath.dd.selection = 0;


              fTitle.st  = fTitle.add('statictext',undefined,'Current Doc Title:');
              fTitle.dd = fTitle.add('dropdownlist', undefined, undefined, {items:["Product1", "Product2","Product3"]})
              fTitle.dd.preferredSize = [150,20];
              fTitle.dd.selection = 0;

          }

           

          Does that (more or less) give you the result you're after?

           

          Peter

          • 2. Re: JS CS3 ScriptUI layout options
            John.Kordas Level 1

            Hi Peter,

             

            I'm getting closer.  The issue I have is that the dropmenus will be populated by and xml file which other will maintain. This means the text in the drop menu may be wider than the set preferedSize. I've flipped the preferedSize to the static text which works almost I just need to find a way to make the static text align right. Also rather than set the default selection value I use an alert to check that the user has selected an option.

             

            I've tried fPath.st.alignment = 'right'; and fPath.st.text.alignment = 'right'; which did not work.

             

            Is this possible?

             

                with (myDialog.fDetails){
                fPath.st  = fPath.add('statictext',undefined,'Path:');
                fPath.st.preferredSize = [90,15];
                fPath.dd = fPath.add('dropdownlist', undefined, undefined, {items:["C:", "D:","E:", "F:", "G", "H", "I"]})
                fTitle.st  = fTitle.add('statictext',undefined,'Current Doc Title:');
                fTitle.st.preferredSize = [90,15];
                fTitle.dd = fTitle.add('dropdownlist', undefined, undefined, {items:["Product1", "Product2","Product3"]})
                btnGroup.btn = btnGroup.add('button', undefined, 'Alert Selection');
                btnGroup.alignment = 'right';
                }

             

            myDialog.fDetails.btnGroup.btn.onClick = function() {
                if (myDialog.fDetails.fPath.dd.selection == null ){
                    alert("Make Path Selection");   
                    }
                if (myDialog.fDetails.fTitle.dd.selection == null ){
                    alert("Make Current Doc Title Selection");   
                    }
            }

            • 3. Re: JS CS3 ScriptUI layout options
              Harbs. Level 6

              Here's what I use for dropdowns and accompanying static text:

              HarbsUI.DropdownGroup = function(container,dropdownLabel,dropdownList,selectedIndex,labelWidth,ddWidth,height){
                   var group = container.add('group');
                   container.spacing=0;
                   group.spacing=0;
                   group.orientation = 'row';
                   group.alignChildren = 'top';
                   if(height){group.maximumSize.height = height}
                   group.margins=0;
                   group.group = group.add('group');
                   group.group.orientation = 'column';
                   group.group.alignChildren = 'right';
                   group.group.margins = 0;
                   group.group.spacing=0;
                   if(labelWidth){group.group.preferredSize.width = labelWidth}
                   group.label = group.group.add('statictext',undefined,dropdownLabel);
                   group.label.margins = 0;
                   group.dropdown = group.add('dropdownlist',undefined,undefined,{items:dropdownList});
                   group.dropdown.margins = 0;
                   if(selectedIndex != undefined){
                        group.dropdown.selection = selectedIndex;
                   }
                   if(ddWidth){group.dropdown.preferredSize.width = ddWidth;}
                   group.dropdown.name = group.label;
                   return group.dropdown;
              }
              

              And to use it you just do something like this:

               

              hdrStyleDD = new HarbsUI.DropdownGroup(myColumn,myLabel,myStringList,listIdx,80,100,24);
              
              
              • 4. Re: JS CS3 ScriptUI layout options
                John.Kordas Level 1

                Thanks for the example Harbs,

                 

                For some reason I get an error HarbsUI is undefined. I was able to break apart what you had done and apply it to my example all working well now.

                 

                myDialog.fDetails = myDialog.add('panel',undefined,'File details');
                    myDialog.fDetails.alignChildren = 'left';
                   
                    myDialog.fDetails.fPath = myDialog.fDetails.add('group');
                    myDialog.fDetails.fPath.spacing=2;
                    myDialog.fDetails.fPath.group = myDialog.fDetails.fPath.add('group');
                    myDialog.fDetails.fTitle = myDialog.fDetails.add('group');
                    myDialog.fDetails.fTitle.spacing=2;
                    myDialog.fDetails.fTitle.group = myDialog.fDetails.fTitle.add('group');
                    myDialog.fDetails.btnGroup = myDialog.fDetails.add('group');
                    with (myDialog.fDetails){
                    fPath.group.orientation = 'column';
                    fPath.group.alignChildren = 'right';
                    fPath.group.preferredSize = [85,15];
                    fPath.group.st  = fPath.group.add('statictext',undefined,'Path:');
                    fPath.dd = fPath.add('dropdownlist', undefined, undefined, {items:["C:", "D:","E:", "F:", "G", "H", "I"]})
                    fTitle.group.orientation = 'column';
                    fTitle.group.alignChildren = 'right';
                    fTitle.group.preferredSize = [85,15];
                    fTitle.group.st  = fTitle.group.add('statictext',undefined,'Current Doc Title:');

                 

                Greatly appreciate everyones help.

                • 5. Re: JS CS3 ScriptUI layout options
                  Harbs. Level 6

                  For some reason I get an error HarbsUI is undefined.

                   

                  Yes. That was just a snippet...

                   

                  You could use it as is, but you need to define HarbsUI as an object 

                  first:

                   

                  HarbsUI = {}

                   

                  Harbs

                  http://www.in-tools.com

                  "Automated Publishing for the Rest of Us!"

                  • 6. Re: JS CS3 ScriptUI layout options
                    Steven.. Level 3

                    Here's my Code created with RapidScriptUI application

                     

                     

                    var rapidDlg = new Window('dialog',"<Replace Me>",undefined);
                    buildWindow();
                    rapidDlg.show();

                    function buildWindow(){
                    rapidDlg.orientation = "row";

                    // Properties for rapidDlg.Group1
                    rapidDlg.Group1 = rapidDlg.add('group',undefined);
                    rapidDlg.Group1.alignment = [' ','fill'];
                    rapidDlg.Group1.alignChildren = ['right','fill'];
                    rapidDlg.Group1.orientation = "column";

                    // Properties for rapidDlg.Group1.StaticText2
                    rapidDlg.Group1.StaticText2 = rapidDlg.Group1.add('statictext',undefined,"short");

                    // Properties for rapidDlg.Group1.StaticText3
                    rapidDlg.Group1.StaticText3 = rapidDlg.Group1.add('statictext',undefined,"this is medium");

                    // Properties for rapidDlg.Group1.StaticText4
                    rapidDlg.Group1.StaticText4 = rapidDlg.Group1.add('statictext',undefined,"this is a very long string");

                    // Properties for rapidDlg.Group2
                    rapidDlg.Group2 = rapidDlg.add('group',undefined);
                    rapidDlg.Group2.alignment = [' ','fill'];
                    rapidDlg.Group2.alignChildren = ['fill',' '];
                    rapidDlg.Group2.orientation = "column";

                    // Properties for rapidDlg.Group2.DropDownList1
                    rapidDlg.Group2.DropDownList1 = rapidDlg.Group2.add('dropdownlist',undefined,undefined, {items:['this contains very long strings']});

                    // Properties for rapidDlg.Group2.DropDownList2
                    rapidDlg.Group2.DropDownList2 = rapidDlg.Group2.add('dropdownlist',undefined,undefined, {items:['short']});

                    // Properties for rapidDlg.Group2.DropDownList3
                    rapidDlg.Group2.DropDownList3 = rapidDlg.Group2.add('dropdownlist',undefined,undefined, {items:['This contains medium']});

                    }

                    or you can try

                    'rapidDlg.Group2.alignChildren = ['left',' '];
                    if you want left aligned not justified

                     

                    Steven

                    http://scriptui.com