3 Replies Latest reply on Jul 19, 2014 6:22 PM by Johnwhite

    Script UI layout

    Johnwhite Level 1

      Hi everyone,

       

      I made a Script UI like this:

       

      script UI.jpg


      the code:

       

      var myDialog = app.dialogs.add({name:"Modify current years' cells"});
      with(myDialog.dialogColumns.add()){
        with(dialogRows.add()){
         with(dialogColumns.add()){
          with(borderPanels.add()){
           staticTexts.add({staticLabel:"Column fill colour?"});
           var myVerticalAlignmentButtons = radiobuttonGroups.add();
           with(myVerticalAlignmentButtons){
            radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
            radiobuttonControls.add({staticLabel:"No"});
           }
          }
         }
          with(dialogColumns.add()){
              with(dialogRows.add()){
         staticTexts.add({staticLabel:"Color:"});
                 var mySelection = dropdowns.add({stringList:["Red", "Green"], selectedIndex:1});
             }
         }
          with(dialogRows.add()){
         staticTexts.add({staticLabel:"Tint:"});
              with(dialogColumns.add()){
                 var mySelection = dropdowns.add({stringList:["10%", "15%", "20%", "25%", "30%"], selectedIndex:2});
             }
         }

      }
      }
      with(myDialog.dialogColumns.add()){
        with(dialogRows.add()){
         with(dialogColumns.add()){
          with(borderPanels.add()){
           staticTexts.add({staticLabel:"With stroke?"});
           var myVerticalAlignmentButtons = radiobuttonGroups.add();
           with(myVerticalAlignmentButtons){
            radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
            radiobuttonControls.add({staticLabel:"No"});
           }
          }
         }
          with(dialogColumns.add()){
              with(dialogRows.add()){
         staticTexts.add({staticLabel:"Stroke colour:"});
                 var mySelection = dropdowns.add({stringList:["Red", "Green"], selectedIndex:1});
             }
         }
          with(dialogRows.add()){
         staticTexts.add({staticLabel:"Stroke weight:"});
              with(dialogColumns.add()){
                 var mySelection = dropdowns.add({stringList:["0.5pt", "1pt", "1.5pt", "2pt"], selectedIndex:1});
             }
         }
      with(myDialog.dialogColumns.add()){
        with(dialogRows.add()){
         with(dialogColumns.add()){
          with(borderPanels.add()){
           staticTexts.add({staticLabel:"With stroke?"});
           var myVerticalAlignmentButtons = radiobuttonGroups.add();
           with(myVerticalAlignmentButtons){
            radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
            radiobuttonControls.add({staticLabel:"No"});
           }
          }
         }
          with(dialogColumns.add()){
              with(dialogRows.add()){
         staticTexts.add({staticLabel:"In which row:"});
                 var mySelection = dropdowns.add({stringList:["1st", "2nd", "3rd", "4th", "5th", "th"], selectedIndex:1});
                   }
               }
            }
         }
      }
      }
      myDialog.show();

       


      but I want this layout,

       

      have a choice.jpg


      Can someone help me to reorder it?


      John

        • 1. Re: Script UI layout
          [Jongware] Most Valuable Participant

          Johnwhite wrote:

          [.. stuff.. ]

          Can someone help me to reorder it?

           

          No.

           

          This is not "Script UI", it is the older basic interface. You can only influence the order in a very general way (by carefully dividing your dialog into rows and columns, and adding them one at a time. The specific "alignment" of each of your parts with respect to each other is not possible).

           

          To mimic your design, you are better off with the real Script UI.

          • 2. Re: Script UI layout
            Johnwhite Level 1

            Hi, Jongware

             

            but finally I want change it to script UI, so I design the interface first.

             

            Is that feasible?

             

            John

            • 3. Re: Script UI layout
              Johnwhite Level 1

              Hi, Jongware

               

              I change it into this:

               

              var myDialog = app.dialogs.add({name:"Modify current years' cells"});
              with(myDialog.dialogColumns.add()){
                with(dialogRows.add()){
                 with(dialogColumns.add()){
                  with(borderPanels.add()){
                   staticTexts.add({staticLabel:"Column fill colour?"});
                   var myVerticalAlignmentButtons = radiobuttonGroups.add();
                   with(myVerticalAlignmentButtons){
                    radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
                    radiobuttonControls.add({staticLabel:"No"});
                   }
                  }
                 }

                  with(dialogColumns.add()){
                  with(borderPanels.add()){
                      with(dialogRows.add()){
                 staticTexts.add({staticLabel:"Color:"});
                         var mySelection = dropdowns.add({stringList:["Red", "Green"], selectedIndex:1});
                     }
                 }
                  with(dialogRows.add()){
                 staticTexts.add({staticLabel:"Tint:   "});
                      with(dialogColumns.add()){
                         var mySelection = dropdowns.add({stringList:["10%", "15%", "20%", "25%", "30%"], selectedIndex:2});
                     }
                 }
              }
              }
              }

               

               


              with(myDialog.dialogColumns.add()){
                with(dialogRows.add()){
                 with(dialogColumns.add()){
                  with(borderPanels.add()){
                   staticTexts.add({staticLabel:"With stroke?"});
                   var myVerticalAlignmentButtons = radiobuttonGroups.add();
                   with(myVerticalAlignmentButtons){
                    radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
                    radiobuttonControls.add({staticLabel:"No"});
                   }
                  }
                 }

                  with(dialogColumns.add()){
                  with(borderPanels.add()){
                      with(dialogRows.add()){
                 staticTexts.add({staticLabel:"Stroke colour:"});
                         var mySelection = dropdowns.add({stringList:["Red", "Green"], selectedIndex:1});
                     }
                 }
                  with(dialogRows.add()){
                 staticTexts.add({staticLabel:"Stroke weight:"});
                      with(dialogColumns.add()){
                         var mySelection = dropdowns.add({stringList:["0.5pt", "1pt", "1.5pt", "2pt"], selectedIndex:2});
                     }
                 }
              }
              }
              }


              with(myDialog.dialogColumns.add()){
                with(dialogRows.add()){
                 with(dialogColumns.add()){
                  with(borderPanels.add()){
                   staticTexts.add({staticLabel:"Dollar sign Italic?"});
                   var myVerticalAlignmentButtons = radiobuttonGroups.add();
                   with(myVerticalAlignmentButtons){
                    radiobuttonControls.add({staticLabel:"Yes", checkedState: true});
                    radiobuttonControls.add({staticLabel:"No"});
                   }
                  }
                 }

                  with(dialogColumns.add()){
                  with(borderPanels.add()){
                      with(dialogRows.add()){
                 staticTexts.add({staticLabel:"In which row:"});
                         var mySelection = dropdowns.add({stringList:["1st", "2nd", "3rd", "4th", "5th", "6th"], selectedIndex:1});
                     }
                 }
              }
              }
              }

               

                    myDialog.show();

               

               

              but the outcome like this:

               

              UI03.jpg

               

               

              no what I want

               

              How can I move second and third cloumn under the first?

               

              John