Evaluating a function stored as a string in an object??

[mgravish]

Ok, so I'm writing a toolbar script and I'm having trouble getting my user-generated functions to evaluate. Currently, the script stores the information for the toolbar's buttons in an array of objects. Each object holds data for a button and has properties for name, helptip, and command ('command' being the string that is to be evaluated when the button is clicked).

The buttons are added to the toolbar panel via the following function, where btnList is the array of button objects:

Code: Select all

	function addButtons(panel)
	{
		for(var j = 0; j <btnList.length; j++)
		{
			panel[j] = panel.add("button",{x:10,y:(j*26)+10,width:75,height:25}, btnList[j].name);
			panel[j].onClick = btnList[j].command;
		}
	}

If I define the .command property for each button (something like command:function(){alert("button2"); ) within the script itself everything works great, but since I'd like to keep it dynamic, I've got a second ui palette that allows users to create new buttons to add to the toolbar. When I create a new button and command to go with it, I can't get that command to evaluate. I feel like I've tried to rewrite it a million different ways with no consistent success, and I think I've narrowed the problem down to the 'panel[j].onClick = btnList[j].command;' line. I've read another post that recommended nesting that line in an eval() or in a function but that didn't work right either. I think it's not correctly associating the new, user-input command with the new button, because like I said, if I hard-code all the commands into the script it works fine. I'll drop the code below. I feel like there's gotta be a logic problem in there somewhere, or I just don't understand how some function works correctly or something. Either way, I'm going blind staring at it. Any help would be greatly appreciated! (on CS3 by the way)

Code: Select all

{
	var defBtn = [0,20,75,20];
	var myPanel; 
	var button1 = {name:"Edit", info:"EditButton", command:function () {onEditButtonClick(myPanel);}};
	var button2 = {name:"A button2", info:"I'm another button", command:function(){alert("button2");}};
	var button3 = {name:"A button3", info:"I'm another button", command:function(){alert("button3");}};
	var btnList = [button1, button2, button3];
	
	function onEditButtonClick(panel)
	{
		var edit_palette = new Window("palette", "Edit Toolbar", undefined, {resizeable:true});
		
				if (edit_palette != null)
				{
					var res =
					"group { orientation:'column', alignment:['left','top'], preferredSize:{width:500, height:400},\
									s: Panel { orientation:'row', alignment:['fill','fill'], text:'Button Settings',preferredSize:{width:500,height:400},\
										r: Group {orientation:'column',alignment:['left','top']\
											btns: Group{orientation:'row',alignment:['left','top'],\
													addBtn: Button{alignment:['left','top'],text:'Add',size:{width: 42,height:30}},\
													delBtn: Button{alignment:['left','top'],text:'Delete',size:{width: 42,height:30}},\
													upBtn: Button{alignment:['left','top'],text:'Up',size:{width: 42,height:30}},\
													dnBtn: Button{alignment:['left','top'],text:'Down',size:{width: 42,height:30}},\
											},\
											listBox: ListBox{alignment:['left','top'],properties:{items:''},preferredSize:{width:200,height:301}},\
											f:  Group {alignment:['left','top'],orientation:'row',\
												closeBtn:  Button{alignment:['left','top'],text:'Ok',size:{width: 95,height:30}},\
												cancelBtn:  Button{alignment:['left','top'],text:'Cancel',size:{width: 95,height:30}},\
											}\
										},\
										l: Group {orientation:'row', alignment:['left','top'],\
												h: Group {alignment:['left','top'], orientation:'column',margins:{left:10,top:45,right:0,bottom:0},spacing:18,\
														nameText: StaticText{text:'Name:', alignment:['right','center']}\
														infoText: StaticText{text:'HelpTip:',alignment:['right','center']}\
														typeText: StaticText{text:'Type:',alignment:['right','center']}\
														codeText: StaticText{text:'Code:',alignment:['right','center']}\
												},\
												i: Group {alignment:['left','top'], orientation:'column',margins:{left:0,top:43,right:0,bottom:0},\
														nameEdit: EditText{size:{width:200,height:20}, alignment:['left','center']}\
														infoEdit: EditText{size:{width:200,height:20},alignment:['left','center']}\
														typeEdit: EditText{size:{width:200,height:20},alignment:['left','center']}\
														codeEdit: EditText{size:{width:200,height:205},alignment:['left','center'], properties:{multiline:true}}\
														btns: Group {alignment:['left','top'],orientation:'row',margins:{left:0,top:3,right:0,bottom:0},\
																returnBtn: Button {text:'Return', size:{width:96,height:30},alignment:['left','top']}\
																tabBtn: Button {text:'Tab', size:{width:96,height:30},alignment:['left','top']}\
														},\
												},\
										},\
								   },\
							},\
					}";

					edit_palette.grp = edit_palette.add(res);
					edit_palette.grp.s.margins.left+=10;
					edit_palette.grp.s.margins.right+=10;
					edit_palette.grp.s.margins.top+=10;
					edit_palette.grp.s.margins.bottom+=10;
					
					edit_palette.grp.s.l.i.btns.returnBtn.onClick = function(){edit_palette.grp.s.l.i.codeEdit.textselection = "\n";};
					edit_palette.grp.s.l.i.btns.tabBtn.onClick = function(){edit_palette.grp.s.l.i.codeEdit.textselection = "\t";};
					edit_palette.grp.s.r.f.closeBtn.onClick = function(){onClose(edit_palette,panel);};								
					edit_palette.grp.s.r.btns.addBtn.onClick = function(){onAdd(edit_palette);};

					edit_palette.grp.s.r.btns.delBtn.onClick = function(){onDel(edit_palette);};
					edit_palette.grp.s.r.listBox.onChange = function(){getActiveInfo(edit_palette);};			
				}
		buildButtonList(edit_palette);
		edit_palette.show();
	}

	function buildButtonList(palette)
	{
		palette.grp.s.r.listBox.removeAll();
		for(var i=0; i<btnList.length; i++)
		{
			item = palette.grp.s.r.listBox.add("item", btnList[i].name);
		}
	}
  
	function onClose(editPalette,mainPalette) 
	{
		editPalette.close();
		var count = mainPalette.children.length;
		for(var i = 0; i < count; i++)
		{
			if(mainPalette.children[1]!=null)
			{
				mainPalette.remove(1);
			}
		}
		addButtons(mainPalette);
	}

	function onDel(panel) 
	{	
			if(panel.grp.s.r.listBox.selection!=null)
			{
				var selIndex = panel.grp.s.r.listBox.selection.index;
			}
			panel.grp.s.l.i.infoEdit.text = "";
			panel.grp.s.l.i.nameEdit.text = "";
			panel.grp.s.l.i.typeEdit.text = "";
			panel.grp.s.l.i.codeEdit.text = "";
			btnList.splice(selIndex,1);
			buildButtonList(panel);
	}

	function onAdd(panel) 
	{	
			var newBtn = {name:panel.grp.s.l.i.nameEdit.text, info:panel.grp.s.l.i.infoEdit.text, command:panel.grp.s.l.i.codeEdit.text};
			btnList[btnList.length] = newBtn;
			buildButtonList(panel);
			panel.grp.s.l.i.infoEdit.text = "";
			panel.grp.s.l.i.nameEdit.text = "";
			panel.grp.s.l.i.typeEdit.text = "";
			panel.grp.s.l.i.codeEdit.text = "";
	}

	function getActiveInfo(panel)
	{
			if(panel.grp.s.r.listBox.selection!=null)
			{
				panel.grp.s.l.i.nameEdit.text = btnList[panel.grp.s.r.listBox.selection.index].name;
				panel.grp.s.l.i.infoEdit.text = btnList[panel.grp.s.r.listBox.selection.index].info;
				panel.grp.s.l.i.codeEdit.text = btnList[panel.grp.s.r.listBox.selection.index].command;
			}
	}

	function createUI(thisObj) 
	{
		 myPanel = ( thisObj instanceof Panel) ? thisObj : new Window("palette", "Toolbar", undefined, {resizeable:true});
		 addButtons(myPanel);
	 }
 
	function addButtons(panel)
	{
		for(var j = 0; j <btnList.length; j++)
		{
			panel[j] = panel.add("button",{x:10,y:(j*26)+10,width:75,height:25}, btnList[j].name);
			panel[j].onClick = btnList[j].command;
		}
	}

var mgToolsPanel = createUI(this);
}

[mgravish]

And once again, the problem is my misunderstanding of the syntax....

If anyone else has problems using eval() with a user-input string, I found this link really helpful :http://chrysanthus.hubpages.com/hub/Str ... l-Function.

The solution was wrapping the user-input string in braces before the eval() like in this example:

Code: Select all

var newBtn = {name:panel.grp.s.l.i.nameEdit.text, info:panel.grp.s.l.i.infoEdit.text, command:panel.grp.s.l.i.codeEdit.text};
var inputString= "{" + panel.grp.s.l.i.codeEdit.text + "}";    //  <--Wrap the string in braces!!
var newCommand = function(){eval(inputString);};
newBtn.command = newCommand;

Finally working!