tidy imports
[jalview.git] / examples / linkedapplets_ng.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
2 <!--
3  * Jalview - A Sequence Alignment Editor and Viewer (Version 2.8)
4  * Copyright (C) 2012 J Procter, AM Waterhouse, LM Lui, J Engelhardt, G Barton, M Clamp, S Searle
5  * 
6  * This file is part of Jalview.
7  * 
8  * Jalview is free software: you can redistribute it and/or
9  * modify it under the terms of the GNU General Public License 
10  * as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
11  *  
12  * Jalview is distributed in the hope that it will be useful, but 
13  * WITHOUT ANY WARRANTY; without even the implied warranty 
14  * of MERCHANTABILITY or FITNESS FOR A PARTICULAR 
15  * PURPOSE.  See the GNU General Public License for more details.
16  * 
17  * You should have received a copy of the GNU General Public License along with Jalview.  If not, see <http://www.gnu.org/licenses/>.
18 -->
19 <html xmlns="http://www.w3.org/1999/xhtml">
20 <head>
21 <title>Linked Jalview Applets Demo</title>
22   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
23   
24  <link href="css/reset.css" rel="stylesheet" type="text/css" />
25  <link href="css/style.css" rel="stylesheet" type="text/css" />
26 <script src="http://www.java.com/js/deployJava.js"></script>
27 <script src="javascript/jalview.js" language="javascript"></script>
28 <script>  //deployJava.debug="true";
29   
30   function lJvApp() {
31     var jvapp = document.getElementById("jvapp");
32     var jvfollower = document.getElementById("jvfollower");
33     setConsole(document.getElementById("stdout"));
34     //jvapp.setSeparator(""+jvapp.getSeparator());
35     linkJvJmol(jvapp);
36   };
37
38   function lJvFollow() {
39     var jvapp = document.getElementById("jvapp");
40     var jvfollower = document.getElementById("jvfollower");
41     //jvfollower.setSeparator(""+jvfollower.getSeparator());
42     linkJvJmol(jvfollower);
43   };
44 </script>
45  
46   <!--[if IE 6]>
47  <link rel="stylesheet" type="text/css" href="css/ie6.css" />
48 <![endif]-->
49
50 <!--[if IE 7]>
51  <link rel="stylesheet" type="text/css" href="css/ie7.css" />
52 <![endif]-->
53
54 <!-- dd menu -->
55 <script type="text/javascript">
56 <!--
57 var timeout         = 500;
58 var closetimer  = 0;
59 var ddmenuitem      = 0;
60
61 // open hidden layer
62 function mopen(id)
63
64  // cancel close timer
65  mcancelclosetime();
66
67  // close old layer
68  if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
69
70  // get new layer and show it
71  ddmenuitem = document.getElementById(id);
72  ddmenuitem.style.visibility = 'visible';
73
74 }
75 // close showed layer
76 function mclose()
77 {
78  if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
79 }
80
81 // go close timer
82 function mclosetime()
83 {
84  closetimer = window.setTimeout(mclose, timeout);
85 }
86
87 // cancel close timer
88 function mcancelclosetime()
89 {
90  if(closetimer)
91  {
92   window.clearTimeout(closetimer);
93   closetimer = null;
94  }
95 }
96
97 // close layer when click-out
98 document.onclick = mclose; 
99 // -->
100 </script>
101
102 </head>
103
104
105 <body>
106
107
108 <div id="header">
109 <div id="logo"><a href="/" title="Home"></a></div>
110 <ul id="buttons">
111 <li id="applet"><a href="applets.html" title="applet"></a></li>
112 <li id="desktop"><a href="/webstart/jalview.jnlp" title="desktop"></a></li>
113 </ul>
114 </div>
115
116
117 <div id ="nav">
118 <div id="navInner">
119
120 <ul id="sddm">
121  <li><a href="#">Home</a></li>
122  <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">About</a>
123   <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
124   <a href="#">Documentation</a>
125   <a href="#">Publications</a>
126   <a href="#">Credits</a>
127   <a href="#">Screenshots</a>
128   </div>
129  </li>
130  <li><a href="#">FAQ</a></li>
131  <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()" class="community">Community</a>
132   <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
133   <a href="#">News Mailing List</a>
134   <a href="#">Discussion Mailing List</a>
135   <a href="#">Links</a>
136   <a href="#">Community News</a>
137   </div>
138  </li>
139  <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()" class="development">Development</a>
140   <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
141   <a href="#">Release History</a>
142   <a href="#">Jalview Bug Tracker</a>
143   <a href="#">Jalview Git Web</a>
144   <a href="#">Development News</a>
145   </div>
146  </li>
147  <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()" class="training">Training</a>
148   <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
149   <a href="#">Training Courses</a>
150   <a href="#">Training News</a>
151   </div>
152  </li>
153  <li><a href="#" class="download-right">Download</a></li>
154 </ul>
155 <div style="clear:both"></div>
156 </div>
157
158 </div>
159
160
161 <div id="pageWrap">
162
163 <div id="sideNav">
164 <ul>
165 <li><a href="applets.html">JalviewLite Examples</a></li>
166 <li><a href="appletParameters.html">Applet Parameters</a></li>
167 <li><a href="jalviewLiteJs.html">Javascript API</a></li>
168 <li><a href="formComplete.html">in-page API demo</a></li>
169 <li class="jvlite-nav-small"><a href="linkedApplets_ng.html">Two JalviewLites demo</a></li>
170 <li><a href="embeddedWJmol.html">Jalview and Jmol demo</a></li>
171 </ul>
172 </div>
173
174 <div id="content" class="content"> 
175     <strong>JalviewLite Linked Applets Demo<br></strong>
176     <p>The two applets below use <a href="JalviewLiteJs.html">JalviewLite's javascript API</a> to exchange events about the currently selected region and mouse position in the alignment.
177     </p>
178         <script> 
179   var attributes = {
180     code : 'jalview.bin.JalviewLite',
181     archive : 'jalviewApplet.jar',
182     width : 800,
183     height : 300,
184     mayscript : 'True', scriptable: 'True',
185     id : 'jvapp'
186   };
187   var parameters = {
188     oninit : "lJvApp",
189     automaticScrolling : "true",
190     file : "plantfdx.fa",
191     annotations : "plantfdx.annotations",
192     debug : "true",
193     wrap : "false",
194     // separator : "^",
195     showAnnotation : "true",
196     embedded : "true",
197     showFullId : "false",
198     RGB : "F2F2FF",
199     linkLabel_1 : "SRS",
200     linkUrl_1 : "http://srs.ebi.ac.uk/srs7bin/cgi-bin/wgetz?-e+[uniprot-all:$SEQUENCE_ID$]+-vn+2"
201  
202     ,
203     linkLabel_2 : "Uniprot"
204  
205     ,
206     linkUrl_2 : "http://us.expasy.org/cgi-bin/niceprot.pl?$SEQUENCE_ID$",
207     APPLICATION_URL : "http://www.jalview.org/services/launchApp"
208   };
209  
210   deployJava.runApplet(attributes, parameters, '1.6');
211 </script>
212 <script> 
213   var attributes = {
214     code : 'jalview.bin.JalviewLite',
215     archive : 'jalviewApplet.jar',
216     width : 800,
217     height : 300,
218     mayscript : 'True', scriptable: 'True',
219     id : "jvfollower"
220   };
221   var parameters = {
222     oninit : "lJvFollow",
223     file : "plantfdx.fa",
224     annotations : "plantfdx.annotations",
225     automaticScrolling : "true",
226     debug : "true",
227     wrap : "false",
228     // separator : "^",
229     showAnnotation : "true",
230     embedded : "true",
231     showFullId : "false",
232     RGB : "F2F2FF",
233     linkLabel_1 : "SRS",
234     linkUrl_1 : "http://srs.ebi.ac.uk/srs7bin/cgi-bin/wgetz?-e+[uniprot-all:$SEQUENCE_ID$]+-vn+2"
235  
236     ,
237     linkLabel_2 : "Uniprot"
238  
239     ,
240     linkUrl_2 : "http://us.expasy.org/cgi-bin/niceprot.pl?$SEQUENCE_ID$",
241     APPLICATION_URL : "http://www.jalview.org/services/launchApp"
242   };
243   deployJava.runApplet(attributes, parameters, '1.6');
244 </script>
245     <p>
246 <!--      <a href="javascript:linkJvJmol()">Click Me If you don't see any messages below</a>
247       <br>
248        --><form name="console" id="console"><textarea name="output"
249         id="stdout" rows="20" cols="80">Messages  will appear here.</textarea></form>
250       <br>
251 </p>
252
253 </body>
254 </html>