Hi,
There is another possible approach, avoiding closure and multiple event listeners.
What is not clearly stated in your original question is that you have a 1-to-N map structure from file name to master templates. So you can build your dialog by just passing your titles (static texts) and that map.
I don't think it's a good design to build three independent columns managed separately, while the actual data structure is a set of rows, each having 3 interconnected fields. In this context, better is to use the scheme
+----------------------------------+
¦ +------+ +---------+ +---------+ ¦
¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦
¦ +------+ +---------+ +---------+ ¦
+----------------------------------+
+----------------------------------+
¦ +------+ +---------+ +---------+ ¦
¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦
¦ +------+ +---------+ +---------+ ¦
+----------------------------------+
+----------------------------------+
¦ +------+ +---------+ +---------+ ¦
¦ ¦ ¦ ¦ ¦ ¦ ¦ ¦
¦ +------+ +---------+ +---------+ ¦
+----------------------------------+
Finally, a great mechanism in ScriptUI is the option to address various events from a single place, using a single event listener that properly identifies the target (child component) that is sending a command.
Here is a full implementation to illustrate these ideas:
const myDialog = function myDialog(/*str[]*/names,/*{file=>str[]}*/map, ff,k,w,p,i,g,f)
//----------------------------------
{
// Checkpoints.
// ---
if( !(names instanceof Array) ) throw "Invalid `names` arg. Should be an array.";
if( !(map===Object(map)) ) throw "Invalid `map` arg. Should be an object.";
// Extract the file array from `map` (for feeding the 2nd dropdown.)
// ---
ff = [];
for( k in map )
{
if( !map.hasOwnProperty(k) ) continue;
if( !(map instanceof Array) ) throw "Invalid `map` key. Should refer to an array.";
ff[ff.length] = k;
}
// Create the dialog and a convenient root container.
// ---
w = new Window('dialog',"My Dialog");
(p = w.add('panel')).orientation = 'column';
p.margins = 20;
// Create the rows (one for each name ; group of 3 columns.)
// ---
for( i=-1 ; ++i < names.length ; )
{
// Group container (row #i).
// ---
(g=p.add('group')).orientation = 'row';
g.spacing = 20;
g.alignChildren = ['left','center'];
// Row fields.
// ---
k = names;
g.add('statictext', void 0, k, { idx: i }).preferredSize = [150,-1];
g.add('dropdownlist', void 0, ff, { kind:'FILE' }).preferredSize = [180,-1];
g.add('dropdownlist', void 0, '', { name:'TPL', title:k }).preferredSize = [180,-1];
}
// The root container is the best place to manage the
// change 'event'. You then have a unique listener.
// ---
(f=callee.ON_CHANGE).Q = map; // Cache the map.
p.addEventListener('change', f); // Register the handler.
w.add('button', void 0, "Done", { name:'ok' });
return w;
};
myDialog.ON_CHANGE = function onChange(/*Event*/ev, src,dst,s,a,i)
//----------------------------------
// this :: 'panel' ; ev.type == 'change'
// [REM] callee.Q maps a source keystring to a dest array.
{
// Checkpoint and cleanup.
// ---
if( 'change' != ev.type ) return;
src = ev.target;
if( 'FILE' != (src.properties||0).kind ) return;
dst = src.parent['TPL'];
if( (!dst) || 'dropdownlist' != dst.type ) return;
dst.items.length && dst.removeAll();
// Get the mapped array from the current `src` selection.
// ---
if( !(s=src.selection) ) return;
if( !(a=(callee.Q||0)[s.text]) || (!a.length) ) return;
// Load a in `dst`.
// ---
for( i=-1 ; ++i < a.length ; dst.add('item',a) );
dst.selection = 0; // Maybe we can select the 1st item (?)
};
// =========================================================
// YOUR DATA
// =========================================================
const NAMES = ["aaaa", "bbb", "cccc", "dddddd"];
const MAP =
{
"File1": ["Master1-A", "HelpMaster", "Summary"],
"MyFileNo2": ["Master2-A", "SubMaster"],
"Other_File": ["Master3-A", "ChapterIntro", "IndexPages"],
"AnotherOne": ["Master4-A", "ThatsIt"],
};
var dlg = myDialog(NAMES, MAP);
dlg && dlg.show();
Best,
Marc
1 Correct answer
9
Replies
AdChoices