Create Label Using Solution Model

Classic Servoy
1

I need someone to help me with what I am trying to accomplish or tell me if it’s not doable. I want users to be able to click a button and create a label, then move that label on the form to the desired location. Then repeat the process. I know I need to store the x and y coordinates of the labels the user creates, but I’m getting hung up in the beginning of the process. Here’s my code so far (it may be a little rough from all the scenarios I’ve tried):

//Declare variables
			var success;
			var objectiveForm;
			var objFormName;
			var mainForm
			var buttonForm;
			var enter;
			var exit;
			var newLabel;
			var enterDMMethod;
			var enterButton;
			var exitDMMethod;
			var exitButton;
			var newLabelMethod;
			var newLabelButton;
			var formVar;
			var formVarY;
			var formVarX;
			var formVarInput;
			var buttonPanel;
			var objectivePanel;
			
			//Remove forms
			success = history.removeForm('Objective_Main')
			if(success)
			{
				solutionModel.removeForm('Objective_Main');
			}
			
			success = history.removeForm('Objective_Male_Setup')
			if(success)
			{
				solutionModel.removeForm('Objective_Male_Setup');
			}
			
			success = history.removeForm('Test_Button_Panel')
			if(success)
			{
				solutionModel.removeForm('Test_Button_Panel');
			}
			
			//Create new forms with solutionModel and add button tab panel and objective tab panel
			mainForm = solutionModel.newForm('Objective_Main', 'eclinic', 'objective', 'eclinic', false, 1324, 838);
			mainForm.borderType = "EmptyBorder, 0, 0, 0, 0";
			mainForm.navigator = SM_DEFAULTS.NONE;
			
			objectiveForm = solutionModel.newForm('Objective_Male_Setup','eclinic','objective','eclinic',false,1320,765);
			objFormName = objectiveForm.name;
			objectiveForm.borderType = "EmptyBorder, 0, 0, 0, 0";
			objectiveForm.navigator = SM_DEFAULTS.NONE;
			
			formVar = objectiveForm.newFormVariable('label',JSVariable.TEXT);
			formVar.defaultValue = 'false';
			objectiveForm.newField(formVar,JSField.TEXT_FIELD,620,20,150,20);
			objectiveForm.newLabel('Design Mode',620,0,150,20);
			
			formVarX = objectiveForm.newFormVariable('x',JSVariable.TEXT);
			formVarX.defaultValue = null;
			objectiveForm.newField(formVarX,JSField.TEXT_FIELD,620,60,50,20);
			objectiveForm.newLabel('x',620,40,20,20);
			
			formVarY = objectiveForm.newFormVariable('y',JSVariable.TEXT);
			formVarY.defaultValue = null;
			objectiveForm.newField(formVarY,JSField.TEXT_FIELD,620,100,50,20);
			objectiveForm.newLabel('y',620,80,20,20);
			
			formVarInput = objectiveForm.newFormVariable('inputDialog',JSVariable.TEXT);
			formVarInput.defaultValue = null;
			objectiveForm.newField(formVarInput,JSField.TEXT_FIELD,620,140,120,20);
			objectiveForm.newLabel('Input Dialog',620,120,100,20);
			
			buttonForm = solutionModel.newForm('Test_Button_Panel', 'eclinic', 'charts_main_menu', 'eclinic', false, 600, 40);
			buttonForm.borderType = "EmptyBorder, 0, 0, 0, 0";
			buttonForm.navigator = SM_DEFAULTS.NONE;
			
			//Add tab panels to mainForm
			buttonPanel = mainForm.newTabPanel('tab_bp',0,0,610,60);
			buttonPanel.borderType = "EmptyBorder, 0, 0, 0, 0";
			buttonPanel.newTab('','',buttonForm);
			
			objectivePanel = mainForm.newTabPanel('tab_objective',0,64,1320,770);
			objectivePanel.borderType = "EmptyBorder, 0, 0, 0, 0";
			objectivePanel.newTab('','',objectiveForm);
			
			//Create new methods and buttons
			enter = "function enterDM(event) {";
			enter += "  var success;";
			enter += "  success = history.removeForm('Objective_Male_Setup');";
			enter += "  if(success){";
			enter += "     solutionModel.removeForm('Objective_Male_Setup');";
			enter += "    var objectiveForm = solutionModel.getForm('Objective_Male_Setup');";
//			enter += "    forms['Objective_Male_Setup'].controller.recreateUI();";
			enter += "    forms['Objective_Male_Setup'].controller.setDesignMode(true);";
			enter += "    forms['Objective_Male_Setup'].label = 'true';";
			enter += "  }";
			enter += "  else{";
			enter += "     plugins.dialogs.showErrorDialog('Error', 'Form not removed.','OK');";
			enter += "  }";
			enter += "};";
			enterDMMethod = buttonForm.newFormMethod(enter);
			enterButton = buttonForm.newButton('Enter DM',20,0,83,30,enterDMMethod);
			
			exit = "function exitDM(event) {";
			exit += "  var success;";
			exit += "  success = history.removeForm('Objective_Male_Setup');";
			exit += "  if(success){";
			exit += "     solutionModel.removeForm('Objective_Male_Setup');";
//			exit += "     var objectiveForm = solutionModel.getForm('Objective_Male_Setup');";
//			exit += "     var label = objectiveForm.getLabel('test');";		
//			exit += "     label.y = 130;";
//			exit += "     forms['Objective_Male_Setup'].x = 100;";
//			exit += "     forms['Objective_Male_Setup'].y = 130;";
//			exit += "     forms['Objective_Male_Setup'].y = 130;";
			exit += "     forms['Objective_Male_Setup'].label = 'false';";
//			exit += "     forms['Objective_Male_Setup'].elements['myLabel'].x = 100;";
//			exit += "     forms['Objective_Male_Setup'].elements['myLabel'].y = 100;";
//			exit += "     forms['Objective_Male_Setup'].x = forms['Objective_Male_Setup'].elements['myLabel'].x;";
//			exit += "     forms['Objective_Male_Setup'].y = forms['Objective_Male_Setup'].elements['myLabel'].y;";
			exit += "     forms['Objective_Male_Setup'].controller.setDesignMode(false);";
//			exit += "     forms['Objective_Male_Setup'].controller.recreateUI();";
			exit += "     application.output(forms['Objective_Male_Setup'].allnames);";
			exit += "  }";
			exit += "  else{";
			exit += "     plugins.dialogs.showErrorDialog('Error', 'Form not removed.','OK');";
			exit += "  }";
			exit += "};";
			exitDMMethod = buttonForm.newFormMethod(exit);
			exitButton = buttonForm.newButton('Exit DM',140,0,83,30,exitDMMethod);
			
			newLabel = "function newLabel(event) {";
			newLabel += "  var success;";
			newLabel += "  success = history.removeForm('Objective_Male_Setup');";
			newLabel += "  if(success){";
			newLabel += "     solutionModel.removeForm('Objective_Male_Setup');";
			newLabel += "     var objectiveForm = solutionModel.getForm('Objective_Male_Setup');";
			newLabel += "     var objFormName = objectiveForm.name;";
			newLabel += "     var xPos = 20;";
			newLabel += "     var yPos = 30;";
			newLabel += "     forms[objFormName].inputDialog = plugins.dialogs.showInputDialog('Enter Label Tool Tip text.','When you \
															hover your mouse over the label, your entered text will appear.',null);";
			newLabel += "     var inputDiag = forms[objFormName].inputDialog;";
			newLabel += "     var label = objectiveForm.newLabel('',xPos,yPos,6,6);";
			newLabel += "     label.background = '#FF0000';";
			newLabel += "     label.name = 'myLabel';";
			newLabel += "     var xCoor = label.x;";
			newLabel += "     var yCoor = label.y;";
			newLabel += "     label.toolTipText = inputDiag;";
			newLabel += "     forms[objFormName].x = label.x;";
			newLabel += "     forms[objFormName].y = label.y;";
			newLabel += "     forms[objFormName].controller.recreateUI();";
//			newLabel += "     application.output(xCoor + ' ' + yCoor);";
			newLabel += "  }";
			newLabel += "  else{";
			newLabel += "     plugins.dialogs.showErrorDialog('Error', 'Form not removed.','OK');";
			newLabel += "  }";
			newLabel += "};";
			newLabelMethod = buttonForm.newFormMethod(newLabel);
			newLabelButton = buttonForm.newButton('New Label',260,0,100,30,newLabelMethod);

I’m confusing myself on when I need to remove the forms from history and the solutionModel. When I try to remove the form Objective_Male_Setup in the function newLabel()it throws the error dialog. Any help or pointers are appreciated!

2

Have you had a look at servoy_sample_solutionModel.servoy (inside solutions/examples in your app dir) it does exactly that. You could even just use that module in your app.

3

Thanks for the suggestion. I’ll check it out.

4

I looked at the solutionModel sample and it will definitely help me out. I get the following error when I click the “Close Design” button:

TypeError: Cannot find function getLocationX. (C:\Users\Nicholas\servoy_workspace6\servoy_sample_solutionModel\globals.js#354)

I got this same error when trying to get the X and Y locations of the label I was placing in my example. Is this a bug in 6?

5

thats a bug in the sample code

The array of changed objects is types as a BaseComponent which is not true:

it should be a JSComponent (its a solution model object, not runtime)

/** @type {JSComponent}*/
var comp = changedElementsArray[index];

if you change that then you see that getLocationX() (and others) are suddenly all warnings because it just has to be: comp.x

6

Do I also want to use comp.width or leave it comp.getWidth()? Both return the same value with no errors.

7

yes you can use getters or settings just fine, both will work for those kind of properties

8

I’m continuing to play with the solutionModel example. I’ve noticed that when in design mode I can create new labels and fields, but if I close then re-open the smart client my newly created fields and labels are gone. Fields that were already on the form that I moved to different locations are where I left them. I created a form to show me everything in the Elements table and there I see the labels and fields I’ve created, but when I look in pgAdmin, they aren’t in the table. Why is that?

9

that’s also a bug in the code, the global.login_user_uid is not set when you login (after authenticate()) the sample is fixed

you can connect to svn: https://subversion.servoy.com/servoy_samples to have the latest