Example 4 - Editable table

MarvinView Example 4

To edit a molecule, double click it or select Edit/Structure from the pop-up menu (right click the mouse). Then a MarvinSketch window appears.

You can also edit the data associated with a molecule:

Select a molecule by clicking on it.
Press the "Get molecule data" button and see what happens.
Change the name, the CAS number or the weight.
Press "Set molecule data".

The query and update of the data for the selected molecule are handled by two JavaScript functions:

<script LANGUAGE="JavaScript1.1" SRC="../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
function getsel() {
	if(document.MView != null) {
		var index = document.MView.getSelectedIndex();
		if(index < 0) {
			alert("Please select a molecule first.");
		} else {
			var name = document.MView.getL(5*index);
			var cas = document.MView.getL(5*index+2);
			var weight = document.MView.getL(5*index+4);
			document.MolForm.MolName.value = name;
			document.MolForm.MolCAS.value = cas;
			document.MolForm.MolWeight.value = weight;
		}
	} else {
		alert("Cannot get index of selected molecule:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}
function setsel() {
	if(document.MView != null) {
		var index = document.MView.getSelectedIndex();
		if(index < 0) {
			alert("Please select a molecule first.");
		} else {
			var name = document.MolForm.MolName.value;
			var cas = document.MolForm.MolCAS.value;
			var weight = document.MolForm.MolWeight.value;
			document.MView.setL(5*index, name);
			document.MView.setL(5*index+2, cas);
			document.MView.setL(5*index+4, weight);
		}
	} else {
		alert("Cannot get index of selected molecule:\n"+
		      "no JavaScript to Java communication in your browser.\n");
	}
}

The applet tag begins like in the previous examples...

mview_name = "MView";
mview_begin("../..", 501, 201);
mview_param("rows", "2");
mview_param("cols", "2");
mview_param("border", "1");
mview_param("background", "#ffffff");
mview_param("molbg", "#ffffff");

...but now we have a special parameter that enables editing of structures:

mview_param("editable", "2");

Furthermore, we also specify some MarvinSketch parameters:

msketch_param("queryAtoms", "");
msketch_param("atomStrings", "alias");
msketch_param("extraBonds", "arom,wedge");

For editable data fields, it is important that the fill parameters in the layout of the corresponding labels must be h (horizontal) or b (both directions). Otherwise the initial data string would determine the label size, and a longer string would not fit in the label component.

mview_param("layout", ":5:3:"
+"M:0:0:5:1:nw:n:"
+"L:0:1:1:2:c:h:0:10:"
+"L:2:1:1:1:e:n:0:10:L:2:2:1:1:w:h:0:10:"
+"L:3:1:1:1:e:n:0:10:L:3:2:1:1:w:h:0:10");
mview_param("param", ":"
+"M:140:100:"
+"L:12b:"
+"L:10i:L:12:"
+"L:10i:L:12"");

The initial contents of the cells are set with the cell parameters:

mview_param("cell0", "|../../mols-2d/caffeine.csmol"
+"|Caffeine|CAS:|58-08-2|Weight:|194.19");
mview_param("cell1", "|../../mols-2d/l-adrenaline.csmol"
+"|Adrenaline|CAS:|51-43-4|Weight:|183.21");
mview_param("cell2", "|../../mols-2d/vitaminc.csmol"
+"|Vitamin C|CAS:|50-81-7|Weight:|176.13");
mview_param("cell3", "|../../mols-2d/aspirin.csmol"
+"|Aspirin|CAS:|50-78-2|Weight:|180.16");
</script>

The form used to change molecule data is the following:

<form onSubmit="return false" NAME="MolForm">
<table CELLSPACING=5 CELLPADDING=0 BORDER=0>
<tr>
<td><input TYPE=BUTTON VALUE="Get molecule data" onClick="getsel()"></td>
<td>Name:</td><td><input TYPE=TEXT VALUE="" NAME="MolName"></td><td></td>
</tr>
<tr>
<td></td><td>CAS:</td><td><input TYPE=TEXT VALUE="" NAME="MolCAS"></td><td></td>
</tr>
<tr>
<td></td><td>Weight:</td><td><input TYPE=TEXT VALUE="" NAME="MolWeight"></td>
<td><input TYPE=BUTTON VALUE="Set molecule data" onClick="setsel()"></td>
</tr>
</table>
</form>

The next example shows how to select atoms in the viewer.

	Name:
	CAS:
	Weight: