First set the number of rows and columns:
<script LANGUAGE="JavaScript1.1" SRC="../../../marvin.js"></script>
<script LANGUAGE="JavaScript1.1">
<!--
mview_begin("../../..", 446, 186);
mview_param("rows", "3");
mview_param("cols", "2");
Note that the number of rows is increased by one here (3 instead of 2) because
we also have a header row.
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 and layoutH parameters begin with the
":" separator character.
You are not forced to use this character, for example
"|" or "," are also good choices.
The header row layout (layoutH) is specified in the following line:
mview_param("layoutH", ":1:3:L:0:0:1:2:L:0:2:");
The first two numbers mean that header cells are small tables of 1
(sub)row and 3 (sub)columns. "L:0:0:1:2" means that the
first component is a label with its upper left corner in row
0, column 0, occupying 1 row and 2 columns. The second label
(L:0:2) is in row 0, column 2, and its size is not set, thus it
occupies 1 row and 1 column (which is the default size). The line below shows the way
how parameters for the header labels, the size and the font style (bold,
italic or default) are specified in the paramH
parameter:
mview_param("paramH", ":L:12b:L:12b");
In a table with two (big) columns, the label texts are specified using the first
two celln parameters:
mview_param("cell0", "|Molecule|Image");
mview_param("cell1", "|Molecule|Image");
Molecule cells are defined in a similar way. In this example, they are small
tables of 2 (sub)rows and 3 (sub)columns. We have a molecule
component, with a layout defined as "M:1:0:1:2". It
means that the component's upper left corner is in row 1, column 0 and it
occupies 1 row and 2 columns. A text label "L:0:0" and
a button "B:0:1" are also defined.
Note that they each occupy 1x1 subcells (default) because we didn't specify
the subcell size. The last component is an image that has
its location, height and width specified (I:0:2:2:1), and which
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
(that 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 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("cell2", "|../../../mols-2d/caffeine.csmol"
+"|first"
+"| Search |%|example-searchmore1.cgi?mol=first"
+"|../../../img/easychart1.gif||");
mview_param("cell3", "|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("cell4", "|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("cell5", "|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>
Note that the index of the upper left molecule cell is i=2 because
indices 0 and 1 correspond to the two header cells.
Now let us see how to fine-tune the layout.