Blog

Signals Blog

Building Mobile and Web Applications in Chemistry: Getting Started with ChemWriter

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.

About ChemWriter

ChemWriter's singular focus on Web browser sets it apart from the numerous structure editors on the market today. Written in 100% JavaScript, ChemWriter runs on all browsers in common use, without plugins, ranging from Internet Explorer 6 on Windows to Safari on iPad. As such, ChemWriter offers unmatched flexibility for developing high-performance Web and mobile applications in chemistry and drug discovery.

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:

<!DOCTYPE HTML>
<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>
 

The 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">
 

The 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 meta tag.

<script src="chemwriter.js"></script>
<link href="chemwriter.css" media="screen" rel="stylesheet" type="text/css"></link>
 

The other two head tags, script and link, load the ChemWriter JavaScript and CSS files, respectively. Future articles here will discuss the ChemWriter stylesheet in more detail.

<div id="editor"></div>
 

Inside the 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>
 

The 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:

Looking Ahead

This article showed how to display an instance of the ChemWriter editor using only 14 lines of HTML. Future articles will take this further by showing some of the many ways ChemWriter can be used, both by itself and in combination with other JavaScript libraries, to build compelling chemistry applications for desktop and mobile platforms.