MarvinView Example - Editable table

To edit a molecule, double click on the container cell or select Edit > Structure from the pop-up menu (right click with the mouse). In the appearing MarvinSketch window, the molecule can be altered with many available functions. When it is complete, the MarvinSketch window can simply be closed and the molecule in the MarvinView cell will be automatically updated.

You can also edit the data associated with a molecule:

  1. Select a molecule by clicking on it.
  2. Press the "Get molecule data" button to load the molecule data to the text fields.
  3. Change the name, the CAS number or the weight.
  4. Press "Set molecule data" to update the data in the selected cell.

Name: 
 CAS: 
 Weight:

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 color atomsets in the viewer.