9 Replies Latest reply on Oct 7, 2014 11:20 PM by Sakari Niittyma

    ScriptUI: How to update Listbox values? (CC2014)

    Sakari Niittyma Level 1

      Is there way to update listbox element that filled with JS array elements. If I push more elements to the array, how I can re-render it in ScriptUI? Is there way to do this.

       

      I know there is way just to add elements to listbox like in Peter Kahrel's PDF. But this isn't so dynamic:

       

      var w = new Window ("dialog");
      var myList = w.add ("listbox", undefined, ["one", "two", "three"]);
      var b = w.add ("button", undefined, "Add");
      b.onClick = function () {myList.add ("item", "zero", 0)}
      w.show ();
      

       

      How about if I wan't to update listbox when I have changed my arrays, like below:

       

      // Create example array
      var testArr = ['item1', 'item2']
      $.writeln(testArr.length);
      
      startGUI();
      function startGUI() {
          
          // Window
          var win = new Window( "palette", script_name, undefined, { resizeable:true } );
          win.orientation = "column";
          win.alignChildren = ["fill", "fill"];
          
          // Listbox
          var myListbox = win.add ("listbox", undefined, testArr,  
              {  
              numberOfColumns: 1,  
              showHeaders: true,  
              columnTitles: ['Name']
          });
      
          // Add Item To Array
          var addItem = win.add("button", undefined, "Add Item");
          addItem.onClick = function() {   
              testArr.push ('item3');
              $.writeln(testArr.length);
          }  
      
          // Quit BTN
          win.quitBtn = win.add("button", undefined, "Close");
          win.quitBtn.onClick = function() {   
              win.close();   
          }
      
          win.show();
      }
      

       

      Maybe there is some update funtion on ScriptUI. I tried to search solution without success. Any help?

        • 2. Re: Re: ScriptUI: How to update Listbox values? (CC2014)
          Sakari Niittyma Level 1

          Yes I have that PDF. Best one for ScriptUI studies I have read it, but I do not find solution to make eventlistener for array of list. Maybe I'm too newbie in this

           

          Anyway I tried some basic solution, but this isn't what I have looking for. Because now I need to always add manually items to list with ScriptUI "add" function. Just wondering if there is some dynamic way to check if array has been changed and then update list based on array and with that avoid to take care of listbox commands. Maybe I was looking some "listbox.update()" function or something


          #target illustrator
          
          // Create example array 
          var testArr = ['item1', 'item2'] 
          //$.writeln(testArr.length); 
          
          startGUI(); 
          function startGUI() { 
               
              // Window 
              var win = new Window( "palette", "Test Listbox", undefined, { resizeable:true } ); 
              win.orientation = "column"; 
              win.alignChildren = ["fill", "fill"]; 
               
              // Listbox 
              var myListbox = win.add ("listbox", undefined, testArr,   
                  {   
                  numberOfColumns: 1,   
                  showHeaders: true,   
                  columnTitles: ['Name'] 
              }); 
          
              // Add Item To Array 
              var addItem = win.add("button", undefined, "Add Item"); 
              addItem.onClick = function() {   
                  testArr.push ('item' + (testArr.length + 1));
                  myListbox.add ("item", testArr[testArr.length - 1]);
                  $.writeln(testArr);
              }   
          
              // Quit BTN 
              win.quitBtn = win.add("button", undefined, "Close"); 
              win.quitBtn.onClick = function() {   
                  win.close();   
              } 
          
              win.onResizing = function () { this.layout.resize(); };
              win.onShow = function () { win.layout.resize(); };
              win.center();    
              win.show(); 
          } 
          


          Anyway. I guess I can handle this with that example solution. Just trying to learn alternative ways and to be a better "scripter" Thanks your link anyway.

           

          PS. There was a error on that first example. Sorry about that This one should work now.

          • 3. Re: ScriptUI: How to update Listbox values? (CC2014)
            Sakari Niittyma Level 1

            Hmm. But I still have problem if I update only one value in array It doesn't update those values automatically. Hmm. Maybe trying to figure out this tomorrow now it feels like I have brainfreeze

            • 4. Re: ScriptUI: How to update Listbox values? (CC2014)
              CarlosCanto Adobe Community Professional & MVP

              Hi, there's no update() function that I know of, I have managed to "update" the list by removing the list and adding a new one.

              • 5. Re: Re: ScriptUI: How to update Listbox values? (CC2014)
                Sakari Niittyma Level 1

                Yes Carlos, I tried with that way. Just made custom function to update listbox items. It's fairly simple to edit list, but at beginning I think something else. Here is one simple solution for the get list items from JS array and edit those... So always clear the list and then re-create it from original array.

                 

                screenshot.12.png

                 

                // listboxEditFromJSArray.jsx - Sakari Niittymaa
                // https://forums.adobe.com/message/6785515
                
                #target illustrator 
                
                // Create example array 
                var testArr = ['item1', 'item2', 'item3'];
                
                startGUI(); 
                function startGUI() { 
                     
                    // Main Window 
                    var win = new Window( "palette", "Test Listbox", undefined, { resizeable:true } ); 
                    win.orientation = "column"; 
                    win.alignChildren = ["fill", "fill"]; 
                     
                    // Listbox 
                    var myListbox = win.add ("listbox", undefined, testArr,   
                        {   
                        numberOfColumns: 1,   
                        showHeaders: true,   
                        columnTitles: ['Name'] 
                    });
                
                    // BTN: Add Items To Array 
                    var addItem = win.add("button", undefined, "Add Item"); 
                    addItem.onClick = function() {
                        testArr.push ('item' + (testArr.length + 1));
                        updateListboxArray(myListbox);
                        //$.writeln (testArr.length + "  " + myListbox.items.length);
                    }
                
                    // BTN: Remove Selected
                    var removeSelectedItems = win.add("button", undefined, "Remove Selected"); 
                    removeSelectedItems.onClick = function() {
                        // Remove selected listbox item from array
                        testArr.splice( myListbox.selection.index, 1 );
                        updateListboxArray(myListbox);
                    }
                
                    // BTN: Clear Listbox
                    var removeAllItems = win.add("button", undefined, "Clear Listbox"); 
                    removeAllItems.onClick = function() {
                        // Clear the array
                        testArr = [];
                        updateListboxArray(myListbox);
                    }
                
                    // Update listbox items
                    function updateListboxArray(listbox) {
                       
                        // Clear listbox first
                        listbox.removeAll();
                       
                        // Create new listbox items from array
                        var i = 0;
                        while (listbox.items.length < testArr.length) {
                            listbox.add ("item", testArr[i]);
                            i++;
                        }
                    }
                
                    // Quit BTN 
                    win.quitBtn = win.add("button", undefined, "Close"); 
                    win.quitBtn.onClick = function() {   
                        win.close();   
                    } 
                
                    // Window Settings
                    win.onResizing = function () { this.layout.resize(); }; 
                    win.onShow = function () { win.layout.resize(); }; 
                    win.center();     
                    win.show(); 
                }
                

                 

                Please, let me know if there is better way to do this kind listbox updates...

                • 6. Re: Re: Re: ScriptUI: How to update Listbox values? (CC2014)
                  CarlosCanto Adobe Community Professional & MVP

                  sorry, I meant, I remove the Listbox itself, not the items. Then I create a new Listbox, since it takes an array only at the creation stage. I do this when the new array is completely different from the original array.

                   

                  on your sample script, do you use the array for other purposes? or just to be able to add/delete from the Listbox?

                   

                  if the latter, to remove the selected item I use

                  myListbox.remove (myListbox.selection.index);
                  

                   

                  to remove all (you don't need this if you go with removing the Listbox itself)

                  myListbox.removeAll();
                  
                  • 7. Re: ScriptUI: How to update Listbox values? (CC2014)
                    Sakari Niittyma Level 1
                    on your sample script, do you use the array for other purposes? or just to be able to add/delete from the Listbox?

                    I have items that have something like ID, name, value, group... In my purpose I need to update some of those values per item like name, group or value. ID will stay same as it was when it generated. I guess that completely new Listbox could be better way, because then I just need to re-create it from array. If you have more some tricks or samples, they're very welcome Thanks for your advice anyway Carlos!

                    • 8. Re: ScriptUI: How to update Listbox values? (CC2014)
                      Sakari Niittyma Level 1
                      sorry, I meant, I remove the Listbox itself, not the items.

                      Uhm, this may sounds stupid question CarlosCanto . But how did you usually remove and create listbox?

                      • 9. Re: Re: ScriptUI: How to update Listbox values? (CC2014)
                        CarlosCanto Adobe Community Professional & MVP

                        I updated your own script to show how I removed the listbox

                         

                        I added a group to host the listbox, the purpose of the group is to be used as a placeholder( to add the new listbox in the right place) and to easily get the listbox to be removed

                         

                        // listboxEditFromJSArray.jsx - Sakari Niittymaa 
                        // https://forums.adobe.com/message/6785515 
                        
                        //#target illustrator 
                        
                        // Create example array 
                        var testArr = ['item1', 'item2', 'item3']; 
                        
                        startGUI(); 
                        function startGUI() { 
                             
                            // Main Window 
                            var win = new Window( "palette", "Test Listbox", undefined, { resizeable:true } ); 
                            win.orientation = "column"; 
                            win.alignChildren = ["fill", "fill"]; 
                             
                            // Listbox Group
                            var grpListbox = win.add('group');
                            grpListbox.alignChildren = ['fill', 'fill'];
                           
                            var myListbox = addListBox (grpListbox, testArr); 
                        
                        
                            // add ListBox
                          function addListBox(container, testArr) {
                                var listbox = container.add("listbox", undefined, testArr,   
                                    {   
                                    numberOfColumns: 1,   
                                    showHeaders: true,   
                                    columnTitles: ['Name'] 
                                });
                               
                                return listbox;
                          }
                        
                        
                        
                            // BTN: Add Items To Array 
                            var addItem = win.add("button", undefined, "Add Item"); 
                            addItem.onClick = function() { 
                                testArr.push ('item' + (testArr.length + 1)); 
                                grpListbox.remove(grpListbox.children[0]);
                                myListbox = addListBox (grpListbox, testArr); 
                                win.layout.layout(true);
                                //updateListboxArray(myListbox); 
                                //$.writeln (testArr.length + "  " + myListbox.items.length); 
                            } 
                        
                            // BTN: Remove Selected 
                            var removeSelectedItems = win.add("button", undefined, "Remove Selected"); 
                            removeSelectedItems.onClick = function() { 
                                // Remove selected listbox item from array 
                                testArr.splice( myListbox.selection.index, 1 ); 
                                updateListboxArray(myListbox); 
                            } 
                        
                            // BTN: Clear Listbox 
                            var removeAllItems = win.add("button", undefined, "Clear Listbox"); 
                            removeAllItems.onClick = function() { 
                                // Clear the array 
                                testArr = []; 
                                updateListboxArray(myListbox); 
                            } 
                        
                            // Update listbox items 
                            function updateListboxArray(listbox) { 
                               
                                // Clear listbox first 
                                listbox.removeAll(); 
                               
                                // Create new listbox items from array 
                                var i = 0; 
                                while (listbox.items.length < testArr.length) { 
                                    listbox.add ("item", testArr[i]); 
                                    i++; 
                                } 
                            } 
                           
                               
                        
                            // Quit BTN 
                            win.quitBtn = win.add("button", undefined, "Close"); 
                            win.quitBtn.onClick = function() {   
                                win.close();   
                            } 
                        
                            // Window Settings 
                            win.onResizing = function () { this.layout.resize(); }; 
                            win.onShow = function () { win.layout.resize(); }; 
                            win.center();     
                            win.show(); 
                        } 
                        
                        • 10. Re: Re: Re: ScriptUI: How to update Listbox values? (CC2014)
                          Sakari Niittyma Level 1
                          I updated your own script to show how I removed the listbox

                          Heya, thanks Carlos for your help! This helps me a lot!