Referencing ScriptUI components

[undavide]

Hello,
let's say I've this ScriptUI Window:

Code: Select allwindowResource = "dialog {  \
    orientation: 'column', \
    alignChildren: 'center',  \
    size:[380, 330], \
    text: 'TestPanel',  \
    myPanel: Panel { \
        orientation: 'column', \
        alignChildren:'right', \
        margins:15, \
        darkPanel: Panel { \
        text: 'RGB Dark', \
            darkGroupRed: Group {  \
                darkSliderR: Slider { minvalue:0, maxvalue:100, value:30, size:[220,20] }, \
                darkTexRt: EditText { text:'30', characters:4, justify:'left'} \
            } \
            darkGroupGreen: Group { \
                darkSlideGr: Slider { minvalue:0, maxvalue:100, value:30, size:[220,20] }, \
                darkTextG: EditText { text:'30', characters:4, justify:'left'} \
            } \
            darkGroupBlue: Group {  \
                darkSliderB: Slider { minvalue:0, maxvalue:100, value:30, size:[220,20] }, \
                darkTextB: EditText { text:'30', characters:4, justify:'left'} \
            } \
         } \
         darkPanel: Panel { \
         text:'RGB Light', \
            darkGroupRed: Group {  \
                darkSliderR: Slider { minvalue:0, maxvalue:100, value:30, size:[220,20] }, \
                darkTextR: EditText { text:'30', characters:4, justify:'left'} \
            } \
            darkGroupGreen: Group {  \
                darkSliderG: Slider { minvalue:0, maxvalue:100, value:30, size:[220,20] }, \
                darkTextG: EditText { text:'30', characters:4, justify:'left'} \
            } \
            darkGroupBlue: Group {  \
                darkSliderB: Slider { minvalue:0, maxvalue:100, value:30, size:[220,20] }, \
                darkTextB: EditText { text:'30', characters:4, justify:'left'} \
            } \
         } \
    buttonsGroup: Group{\
    cancelButton: Button { text: 'Cancel', properties:{name:'cancel'}}, \
    okButton: Button { text: 'OK', properties:{name:'ok'} }, \
  }\
  }\
  }";
 
var win = new Window(windowResource)
win.show()

If I were coding the GUI in Flex (which I'm more used), all the components have unambiguous instance names and properties that's easy to get from everywhere in the code (for instance darkSliderR.value). This leads to very compact EventListeners callbacks: I've one Listener for all of the Sliders that can recognize what slider fired the event and easily retrieve and process, say, all of their values.
Dealing with ScriptUI (maybe I'm doing it wrong) I'm a bit puzzled, because:

1. I've to explicitly write an .onChanging function for each Slider referencing its position, like

Code: Select allwin.myPanel.darkPanel.darkGroupRed.darkSliderR.onChanging = function() {}
win.myPanel.darkPanel.darkGroupGreen.darkSliderG.onChanging = function() {}
win.myPanel.darkPanel.darkGroupBlue.darkSliderB.onChanging = function() {}

2. From within a single onChanging function, to reference all the other sliders is a pain, for their relative path (the this.parent.parent chain) changes depending on the slider (this) position. I'm biased to think there's some technique I don't know but what in Flex could be something easy and clean like:

Code: Select allwin.myPanel.darkPanel.darkGroupRed.darkSliderR.onChanging = function() {
  var total = darkSliderR.value + darkSliderG.value + darkSliderB.value + lightSliderR.value + lightSliderG.value + lightSliderB.value ;
  // further processing
}

in JS becomes

Code: Select allwin.myPanel.darkPanel.darkGroupRed.darkSliderR.onChanging = function() {
  var total = this.value + this.parent.parent.darkGroupGreen.darkSliderG.value + this.parent.parent.darkGroupBlue.darkSliderB.value + this.parent.parent.parent.lightPanel.lightGroupRed.lightSliderR.value + this.parent.parent.parent.lightPanel.lightGroupGreen.lightSliderG.value + this.parent.parent.parent.lightPanel.lightGroupBlue.lightSliderB.value +
}

How do you deal with it - besides using with() {}?
Is an explicit:

Code: Select allthis.windowRef = win;
this.darkSliderGRef = win.myPanel.darkPanel.darkGroupGreen.darkSliderG;

a suggested practice or there are more clean and appropriate ways not to end confused in a sea of this.parent.parent.that thing?
Thanks in advance

Davide

[Mike Hale]

What I have been doing is following the example set by some of the Adobe scripts such as Image processor where you assign a control to a property of the dialog.

Code: Select allwin.darkSliderR = win.myPanel.darkPanel.darkGroupRed.darkSliderR;
win.darkSliderG = win.myPanel.darkPanel.darkGroupGreen.darkSliderG;
win.darkSliderB = win.myPanel.darkPanel.darkGroupBlue.darkSliderB;

I don't use resource strings to create a dialog so I am able to assign those as I create the controls but I don't see why you couldn't add them after creating the dialog.

With that done you can use the findDialog function that is also in Image Processor in the control callback to find the dialog.

Code: Select allwin.darkSliderR.onChanging = function() {
  var d = FindDialog(this);
  var total = d.darkSliderR.value + d.darkSliderG.value + d.darkSliderB.value + d.lightSliderR.value + d.lightSliderG.value + d.lightSliderB.value ;
  // further processing
}

If you don't like that method, you could name each control. You just need to include the name in the creation_props. Then use the Window.findElement() method to find the control later.

[larsen67]

Mike, does that work? I've only yesterday seen a post about finding 'named' creation properties and it didn't work? Was in the ID forum may be that differs?

[Mike Hale]

Well, I don't know. I use dialog properties as described above. I think that even if findElement() does work( and it would surprise me if it didn't ) I wouldn't use it. You would still have to do a bunch of method calls to find all the controls needed in undavide's example.