Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Dear all,
I have a problem implementing Jmol.js (molecular visualiser) in my web application. My application contains a list of data from my database and a visualisation of chemical structures of the data.
So, if include the jmol.js in a script tag (bolded in code), and then I call my application in web browser, the application with the list will show up for less than 1 second, and then the JavaScript will cover anything and the page will be loaded endlessly. The same will happen if I use include tag.
The crazy thing is also that if I separate this Jmol script to a new .zul and make a hyperlink (also bolded in code), then it works.
For practical purpose it's much better if I could include this in the same page. So whoever has an idea, please help me...
-JoH-
<?page id="UserGUI" title=" New ZUL Title" cacheable="false"
language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<window id="guestWnd" title="Database Search" border="normal"
width="2100px" use="de.qcdb.lmu.window.FrontWindow">
<zscript language="Java">
public void download() {
Listitem li = items.getSelectedItem();
if(li!=null){
String filepath = ((de.qcdb.lmu.domain.Item)li.getValue()).getFilepath();
java.io.InputStream is = desktop.getWebApp().getResourceAsStream(filepath);
Filedownload.save(is, "text/plain", filepath);
} }
<!-- public void view() {
Listitem li = items.getSelectedItem();
if(li!=null){
String filepath = ((de.qcdb.lmu.domain.Item)li.getValue()).getFilepath();
guestWnd.onView();
}
}
-->
</zscript>
<script src="./jmol/Jmol.js" type="text/javascript"
xmlns:n="http://www.zkoss.org/2005/zk/native"></script>
<script type="text/javascript" xmlns:n="http://www.zkoss.org/2005/zk/native">
jmolInitialize("./jmol");
jmolApplet(500);
jmolBr();
</script>
<grid>
<rows>
<row align="center">
Chemical Formula
<textbox width="99%" id="strform" />
<hbox>
<button id="search1" label="Search" onClick="guestWnd.submit()" />
</hbox>
<hbox width="200px">
Example: C3H6B1N1O1
</hbox>
<hbox width="30px">
<image src="/images/info1.png" popup="info1" style="cursor:pointer" />
<label popup="info1" />
</hbox>
<hbox width="200px">
</hbox>
<popup id="info1" width="400px">
<html>Chemical formula is strictly defined by IUPAC
(CHX).
X: Further elements are to
be sorted by their
atomic number.
</html>
</popup>
</row>
<row align="center">
Description
<textbox id="description" width="99%" />
<button id="search2" label="Search" onClick="guestWnd.submit1()" />
<hbox width="200px">
Example: oxazole-borane
</hbox>
<hbox width="30px">
<image src="/images/info1.png" popup="info2" style="cursor:pointer" />
<label popup="info2" />
</hbox>
<hbox width="200px">
</hbox>
<popup id="info2" width="400px">
<html> The description should simple and clear.
Keyword
oxazole-borane will show items which contain oxazole borane
complex.
Keyword cysteine will show items which contain all
protein structures
with amino acid cysteine.
</html>
</popup>
</row>
<!--
<row align="center"> <hbox></hbox> Advance Search <hbox></hbox>
<hbox width="200px"> Example: </hbox> <hbox width="30px"> <image
src="/images/info1.png" popup="info3" style="cursor:pointer" />
<label popup="info3" /> </hbox> <hbox width="200px"> </hbox> <popup
id="info3" width="400px"> <html> Not Yet! </html> </popup> </row>
<row align="center"> Description <textbox id="tb_description"
width="99%" /> <button id="search4" label="Search"
onClick="guestWnd.submit3()" /> </row> <row align="center">
Multiplicity <textbox id="tb_multi" width="99%" /> </row> <row
align="center"> Charge <textbox id="tb_charge" width="99%" />
</row>
-->
<row align="center">
<button label="Advance Search" onClick="guestWnd.onSearch()" />
</row>
<row align="center">
<button label="Download the selected file" onClick="download()" />
</row>
<row align="center">
<button label="View structures" href="http://localhost:8080/QCDB/jmol.zul" />
</row>
</rows>
</grid>
<separator />
<borderlayout height="25px" width="100%"><north height="25px" title="General Item"></north></borderlayout>
<listbox id="supitems" width="2090px" mold="paging" pageSize="10"
onCreate="guestWnd.showListII()">
<listhead>
<listheader sort="auto" width="10%" label="Index I" />
<listheader sort="auto" width="10%" label="Chemical formula" />
<listheader sort="auto" width="60%" label="General Description" />
<listheader width="10%" label="Multiplicity" />
<listheader width="10%" label="Charge" />
</listhead>
</listbox>
<separator />
<button label="Get Details" onClick="guestWnd.showListI()" />
<textbox width="200px" id="tb_idxa" readonly="true" />
<separator />
<borderlayout height="25px" width="100%"><north height="25px" title="Detailed Item"></north></borderlayout>
<listbox id="items" width="2090px" mold="paging" pageSize="10">
<!--onCreate="guestWnd.showListI()" -->
<listhead>
<listheader width="190px" label="Index I" />
<listheader width="190px" label="Index II" />
<listheader width="190px" label="File Path" />
<listheader width="190px" label="Chemical formula" />
<listheader width="190px" label="Description" />
<listheader width="190px" label="Methods" />
<listheader width="190px" label="Basis Set" />
<listheader width="190px" label="Info" />
<listheader width="50px" label="PG" />
<listheader width="50px" label="ES" />
<listheader width="70px" label="Multiplicity" />
<listheader width="50px" label="Charge" />
<listheader sort="auto" width="190px" label="Energy" />
<listheader sort="auto" width="190px" label="Enthalpy" />
</listhead>
</listbox>
<separator />
<button label="Back to Login" onClick="guestWnd.onBack()" />
</window>
</zk>
Hi,
Thank you for your reply first.
I tried your suggestion but failed. I think this is an incompatibility of ZK with Jmol. Somehow if I use iframe and put the source, it works. Since nobody has a lot of experience with ZK/Jmol, it is hard to find any hint.
Does anybody have another solution?
The include tag is really not a iframe type of thing. The include actually puts a div tag and makes all the html from the include file into the main file. So if the include file have any script tags in it it will be inline script tags not same as <?script?>. You have to keep <?script?> in the main page and include pages you can use only inline scripts.
The other thing is you will have to wait till the zk elements are finished before you do the jmol initialization. I'd suggest throw the joml.js in the main page itself and in your include file have the inline script to initialize the actual visualization.
Also use zk.afterMount(function() {}); so that your visualization actually starts after zk mounts all it's widgets.
HTH
Asked: 2010-01-19 04:39:07 +0800
Seen: 740 times
Last updated: Jan 20 '10
