Example 2.2 - Labels, buttons, images, scrolling

MarvinView Example 2.2

If you have additional components (not just a molecule in a cell), you have to specify the layout and the parameterssub of these components. If the layout and the parameters are the same for each cell, then it is enough to specify them for cell 0.

First set the number of rows and columns:

<script LANGUAGE="JavaScript1.1" SRC="../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
mview_begin("../..", 446, 170);
mview_param("rows", "2");
mview_param("cols", "2");

When you have many components in a cell, it is useful to separate the cells with borders. The width of the border is specified in the following way:

mview_param("border", "1");

This applet is scrollable:

mview_param("visibleRows", "1");

The layout parameter begins with the ":" separator character. You are not forced to use this character; for example "|" or "," are good choices also. The first two numbers mean that the cell is really a small table of 2 rows and 3 columns; M:1:0:1:2 means that the first component is a molecule with its upper left corner in row 1, column 0, occupying 1 row and 2 columns; L:0:0 and B:0:1 are the layouts of the components in row 0: the text label in column 0 and the button in column 1. Note that the label and the button each occupy 1x1 subcells (default) because we didn't specify the subcell size. The last component is an image that has both its location, height and width specified (I:0:2:2:1), it occupies the third column.

mview_param("layout", ":2:3:"
+"M:1:0:1:2:"
+"L:0:0:"
+"B:0:1"
+"I:0:2:2:1");

The param parameter specifies the molecule width and height in pixel units, the size of the label's font (10pt), the size of the button's font, the description of the button (appears in the status line when the mouse is over the button), and the frame where the output of the CGI script appears when the user presses the button.

mview_param("param", ":M:150:150:"
+"L:10:"
+"B:10:search for more molecules like this:_self");

In the celli parameter (i=0,1,2) we specified the molfile, the text label, the button label, the special character for the button URL ("%", not used in this simple example), and the button URL. These fields are separated by the separator character which is the first character in the string: "|" in this case. The button URL usually points to a CGI script.

mview_param("cell0", "|../mols-2d/caffeine.csmol"
+"|first"
+"| Search |%|example-searchmore1.cgi?mol=first"
+"|../../img/easychart1.gif||");
mview_param("cell1", "|O[C@H](\C=C\[C@@H](O)C1=CC=CC=C1)C2=CC=CC=C2"
+"|second"
+"| Search |%|example-searchmore1.cgi?mol=second"
+"|../../img/easychart2.gif||");
mview_param("cell2", "|Ethane\n"+
+"  Marvin  07119915552D\n"
+"\n"
+"  2  1  0  0  0  0  0  0  0  0999 V2000\n"
+"   -0.5625    1.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"
+"   -0.5625    0.2500    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"
+"  1  2  1  0  0  0  0\n"
+"M  END\n"
+"|third"
+"| Search |%|example-searchmore1.cgi?mol=third"
+"|../../img/easychart3.gif||");
mview_param("cell3", "|C[C@]12CC[C@@H]3[C@H](CC[C@H]4CC(=O)C(\C[C@]34C)=C\O)[C@@H]1CCC(=O)O2"
+"|fourth"
+"| Search |%|example-searchmore1.cgi?mol=fourth"
+"|../../img/easychart4.gif||");
mview_end();
//-->
</script>

Now let us see how to fine-tune the layout.