<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ChemHack &#187; jsMolEditor</title>
	<atom:link href="http://chemhack.com/tag/jsmoleditor/feed/" rel="self" type="application/rss+xml" />
	<link>http://chemhack.com</link>
	<description>Hacking the chemistry world.</description>
	<lastBuildDate>Sat, 18 Dec 2010 18:07:03 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>JavaScript for Cheminformatics:JavaScript Molecule Editor and 3D Structure Viewer</title>
		<link>http://chemhack.com/2009/01/javascript-for-cheminformaticsjavascript-molecule-editor-and-3d-structure-viewer/</link>
		<comments>http://chemhack.com/2009/01/javascript-for-cheminformaticsjavascript-molecule-editor-and-3d-structure-viewer/#comments</comments>
		<pubDate>Wed, 07 Jan 2009 09:15:01 +0000</pubDate>
		<dc:creator>Duan Lian</dc:creator>
				<category><![CDATA[Chemoinformatics]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[jsMolEditor]]></category>

		<guid isPermaLink="false">http://chemhack.com/?p=217</guid>
		<description><![CDATA[Very happy to read about Rich&#8217;s post. It was one month ago when I released a demo of molecule structure renderer. Sorry for disappearing from the Internet so long, but I had to cope with final exams for 9 courses. However, I passed all of them and are now enjoying my winter vacation for 35 [...]]]></description>
			<content:encoded><![CDATA[<p>Very happy to read about <a href="http://depth-first.com/articles/2009/01/06/javascript-for-cheminformatics-cross-compiling-java-to-javascript-with-gwt-revisited">Rich&#8217;s post</a>. It was one month ago when I released a <a href="http://chemhack.com/mx-gwt/demo-molecule-structure-rendering/">demo</a> of molecule structure renderer. Sorry for disappearing from the Internet so long, but I had to cope with final exams for 9 courses. However, I passed all of them and are now enjoying my winter vacation for 35 days, enough to make the tittle of this post to become true. </p>
<p>Today, I got something to show you.</p>
<p>Have a look at renderer and editor <a href="http://chemhack.com/gwt/com.chemhack.jsMolEditor.Editor/Editor.html" target="_blank">demo here</a>. </p>
<p>You can click the first two buttons to load a demo structure with different sizes, and you can read a demo molecule. You can move your mouse on atoms, drag the editor on atoms and in white space to see what happened. If you&#8217;re using IE, especially IE6, the dragging process may not be so smooth, as IE is famous for its super slow JavaScript engine. </p>
<p>OK, what happened after you clicked the buttons. The buttons for loading editor have a onClick attribute with JavaScript below.<br />
<code>initEditor('editor1',500,300);</code><br />
And behind this function is:<br />
<code>    function initEditor(divID,width, height){<br />
        if(window.__initEditor){<br />
        document.getElementById(divID).innerHTML="";<br />
		__initEditor(divID,width, height);<br />
        }else{<br />
            document.getElementById(divID).style.width=width+"px";<br />
            document.getElementById(divID).style.height=height+"px";<br />
            document.getElementById(divID).innerHTML="Loading...";<br />
            setTimeout(function(){initEditor(divID,width, height);}, 1000);<br />
        }<br />
    }<br />
</code><br />
And this in GWT Java code:<br />
<code><br />
    private static native void injectJSMethods()/*-{<br />
    $wnd.__readMolFile =function(divID,fileContent){<br />
    @com.chemhack.jsMolEditor.client.Editor::readMolFile(Ljava/lang/String;Ljava/lang/String;)(divID,fileContent);<br />
    };</p>
<p>    $wnd.__initEditor =function(divID, width, height){<br />
    @com.chemhack.jsMolEditor.client.Editor::initEditor(Ljava/lang/String;II)(divID, width, height);<br />
    };</p>
<p>    }-*/;</p>
<p></code></p>
<p>I think Rich&#8217;s problem has been partly solved as this proves how we can cross the boundary between hand-written JavaScript and GWT generated JavaScript. If you&#8217;d like to make the whole library exposed to JavaScript world, just write a wrapper for each Java method you&#8217;d like to call. GWT code generator may be a good helper.</p>
<p>I call this molecule editor jsMolEditor, and I plan to release its first fully functional Alpha version in two or three weeks. jsMolEditor will be released under GPL license as its code mainly came from MX-GWT and JChemPaint. </p>
<p>So how about JMol in javascript? This <a href="http://www.redbrick.dcu.ie/~noel/blog/molecproc/">demo</a> shows that it&#8217;s not a mission impossible, but we have a long way to go. </p>
<p>I promise to release the first Alpha in two or three weeks and also keep you informed how is the work going with at least two posts per week.  <img src='http://chemhack.com/wp-includes/images/smilies/icon_lol.gif' alt=':dsadsad:' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://chemhack.com/2009/01/javascript-for-cheminformaticsjavascript-molecule-editor-and-3d-structure-viewer/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

