The Web browser offers much unrealized potential as a software development platform in chemistry. Although recent technical advances such as HTML5 provide the most obvious evidence of browsers' capabilities, even legacy browsers such as IE6 provide a solid foundation for many useful chemistry applications.
Although the Web browser offers the potential to do great things in chemistry software, the right tools are needed to really make it work. In the areas of organic chemistry and especially drug discovery, one of the most important client-side tools is a good chemical structure editor.
This article, the first in a series, shows how easy it is to get started with ChemWriter™, the structure editor designed specifically for use in Web and mobile applications.
Step 1: Download and Unpack the SDK
The latest version of ChemWriter can be freely downloaded.
Step 2: Create a Minimal Page
From the SDK, find the files chemwriter.js and chemwriter.css. Create a new directory and place these two files into it. Then create a file called index.html with the following markup:
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9"> <script src="chemwriter.js"></script> <link href="chemwriter.css" media="screen" rel="stylesheet" type="text/css"></link> </head> <body> <div id="editor"></div> <script> var editor = chemwriter.loadEditor('editor'); </script> </body> </html>
doctype definition on the first line notifies the browser that we're using the HTML 5 doctype. Don't worry, this definition works on all browsers and will likely remain the final word on the confusing subject of doctypes for some time to come.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9">
meta tag on line 4 is a workaround for Internet Explorer 8's buggy implementation of Vector Markup Language. The tag tells IE8 to emulate IE7 during rendering. All other IE versions will render natively, including the recently-introduced IE9. Non-IE browser will ignore this
<script src="chemwriter.js"></script> <link href="chemwriter.css" media="screen" rel="stylesheet" type="text/css"></link>
The other two head tags,
body tag are the only two tags needed to deploy ChemWriter. The first is an empty
div element to hold the editor itself. This element can reside anywhere inside the document, including in tables, floated elements, and dialogs. It can also be dynamically generated, hidden/unhidden, and faded in/out. Articles to come will discuss some helpful special effects that work well with ChemWriter.
<script> var editor = chemwriter.loadEditor('editor'); </script>
script tag invokes an instance of the editor. The string argument 'editor' tells ChemWriter to load itself into the page element with the id attribute of 'editor'. We assign the result to the variable
editor so that we can later refer to the editor instance, although doing so is optional.
Loading index.html should give a 600x400-pixel ChemWriter instance: