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

Post a reply

Smilies
:D :) :( :o :-? 8) :lol: :x :P :oops: :cry: :evil: :roll: :wink:
BBCode is ON
[img] is ON
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: JS Newbie Questions, how to r/w values of UI controls

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

by PetrCBR » Tue Jan 10, 2017 3:42 pm

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)

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

by djdd » Tue Jan 10, 2017 2:33 pm

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

Top