JS Newbie Questions, how to r/w values of UI controls

[djdd]

Hi all,

I'm absolutly new to JS, I have 20 years of VBA-expirience but newer used JS, so I'm an absolut newbie regarding JS. So i will have some questions, now and in the future, that sound ....... no there are no stupid questions

Based on "\\\SampleScripts\optionsPanel\dialogs\dlgOptions" I build my first option panel (I started with an option panel, because this sample script was the first one I could understand )

1st Version, using "qid('<data-id>')":

Code: Select all

"use strict";
optionPanels.pnl_General.subPanels.pnl_Djdd.load = function (sett) {
    this.state = app.getValue('DJDD', {chbDjdd1: true, chbDjdd2: false, edtDjdd1: "2dn option"});
    qid('chbDjdd1').controlClass.checked = this.state.chbDjdd1;
    qid('chbDjdd2').controlClass.checked = this.state.chbDjdd2;
    qid('edtDjdd1').controlClass.value = this.state.edtDjdd1;
}
optionPanels.pnl_General.subPanels.pnl_Djdd.save = function (sett) {
    this.state.chbDjdd1 = qid('chbDjdd1').controlClass.checked;
    this.state.chbDjdd2 = qid('chbDjdd2').controlClass.checked;
    this.state.edtDjdd1 = qid('edtDjdd1').controlClass.value;
    app.setValue('DJDD', this.state);
}

Then I found in "mminit.js" following comment:

Code: Select all

Returns class with all named elements inside the specified rootElement (document is used when not defined) to direct access.
Script can then do not need to call qid for any named element. 
Example:
  var UI = getAllUIElements();
  UI.lvTracklist.controlClass.dataSource = data;
@method getAllUIElements

So I changed my code to, my 2nd Version, using "UI.<data-id>":

Code: Select all

"use strict";
optionPanels.pnl_General.subPanels.pnl_Djdd.load = function (sett) {
    this.state = app.getValue('DJDD', {chbDjdd1: true, chbDjdd2: false, edtDjdd1: "2dn option"});
    var UI = getAllUIElements();
    UI.chbDjdd1.controlClass.checked = this.state.chbDjdd1;
    UI.chbDjdd2.controlClass.checked = this.state.chbDjdd2;
    UI.edtDjdd1.controlClass.value = this.state.edtDjdd1;
}
optionPanels.pnl_General.subPanels.pnl_Djdd.save = function (sett) {
    var UI = getAllUIElements();
    this.state.chbDjdd1 = UI.chbDjdd1.controlClass.checked;
    this.state.chbDjdd2 = UI.chbDjdd2.controlClass.checked;
    this.state.edtDjdd1 = UI.edtDjdd1.controlClass.value;
    app.setValue('DJDD', this.state);
}

and then I wantend to call "getAllUIElements()" only once, by declaring "UI" outside of the methods, 3rd version:

Code: Select all

"use strict";
var UI
optionPanels.pnl_General.subPanels.pnl_Djdd.load = function (sett) {
    this.state = app.getValue('DJDD', {chbDjdd1: true, chbDjdd2: false, edtDjdd1: "2dn option"});
    UI = getAllUIElements();
    UI.chbDjdd1.controlClass.checked = this.state.chbDjdd1;
    UI.chbDjdd2.controlClass.checked = this.state.chbDjdd2;
    UI.edtDjdd1.controlClass.value = this.state.edtDjdd1;
}
optionPanels.pnl_General.subPanels.pnl_Djdd.save = function (sett) {
    this.state.chbDjdd1 = UI.chbDjdd1.controlClass.checked;
    this.state.chbDjdd2 = UI.chbDjdd2.controlClass.checked;
    this.state.edtDjdd1 = UI.edtDjdd1.controlClass.value;
    app.setValue('DJDD', this.state);
}

I guess each newer version is better than the previous one, is this correct?

Fell free to add any comment that could help any beginner, developing MM Add-Ons.

Thanks, Dieter

[PetrCBR]

Possible problem can be with global UI variable which can be overwrited by another sheet.
Solutions can be following:
- place your code to

Code: Select all

(function(){ your code })()

so it will be isolated and only optionPanels.pnl_General.subPanels.pnl_Djdd.load and save will be public (it have some pros and cons)
- make UI variable local (probably best approach)