Adobe 12040118 Using Help - Page 205

Adobe After Effects Help Using Help Creating User Interface Elements Back 205 Each class of UI element has a set of callback methods defined for it. For windows, there are callbacks like onClose(), onMove(), and onResize(). For controls, callbacks vary from type to type. A typical callback is onClick() for button, radiobutton, and checkbox elements, and onChange() for edittext fields, scrollbars, and sliders. To handle a given event for some UI element, simply define a property of the same name as the event callback in the element and assign a JavaScript function you have defined to it. The example below uses "in line" functions, which employ a unique syntax and do not require a name. However, you can also define the function elsewhere in the script. In that case, simply assign the name of the function to the event handler property. The scripting user interface calls these functions on event notifications if defined. Examples: /*'has buttons' checkbox enables or disables the panel that determines the justification of the 'alert' button group */ dlg.hasBtnsCb.onClick = function () { this.parent.alertBtnsPnl.enabled = this.value; }; //The Build and Cancel buttons close this dialog with (dlg.btnPnl) { buildBtn.onClick = function () { this.parent.parent.close(1); }; cancelBtn.onClick = function () { this.parent.parent.close(2); }; }; Because event callback functions work as methods of the object in which they are defined, the functions have access to the object via the "this" JavaScript keyword. In the examples above, "this" refers to the UI object a given callback is defined in, so properties of the UI object can be accessed relative to the "this". For example, because each UI object has a parent property which is a reference to its container object, this.parent gets you a reference to the object's parent object. To elaborate further on this point, a button( ) is contained within a panel, which is contained within a window, all of which are ultimately closed. The progression is from smaller to larger UI moving from left to right. buildBtn.onClick = function () {this.parent.parent.close(1);}; button panel dialog Also be aware that you can simulate user actions by sending an event notification directly to a UI element, via the element's notify() method. In this manner, a script can generate events in the controls of a window, as if a user was clicking buttons, entering text, moving a window, etc. radiobutton and checkbox elements have a boolean value property; using notify() to simulate a click on these elements also changes the value of this property, just like clicking the element would do. For instance, if the value of a checkbox 'hasBtnsCb' in our example above is true, the following example changes the value to false: if (dlg.hasBtnsCb.value == true) dlg.hasBtnsCb.notify(); // dlg.hasBtnsCb.value is now false For a complete description of the different event callback methods and notify(), see "Common methods and event handlers" on page 217. Using Help Back 205