1. David Damerell Avatar David Damerell
  2. Untitled project
  3. GlycanBuilderV

Wiki

Clone wiki

GlycanBuilderV / Developer Instructions

View History

Vaadin is a web development framework that functions on top of the Google Web Toolkit (GWT). The GWT allows you to write web applications completely in Java: this includes both the client and server side components. GWT includes a compiler that takes the Java programmed client side and turns this into a JavaScript library: that the browser is asked to load. Vaadin takes GWT one step further, almost allowing the developer to forget that their is a separation between the client and server side components: Vaadin development is very similar to Swing and SWT development. The Vaadin glycan builder application draws glycan structures to an HTML5 canvas element. This component can be embedded in existing web pages (see below). Alternatively you can create new Vaadin based web sites and use the Vaadin glycan builder component as a native component. In addition you can use the component that draws glycan structures outside of the builder application (i.e. you could use a series of canvas elements to show a list of glycan structures). We had to modify the Vaadin component that talks to the native browser HTML5 canvas component: see the following URL for this new component CanvasWidgetICL.

Developers

This project represents a port of the popular GlycanBuilder software tool from the native Java Swing/Applet environment to the Vaadin RIA platform. The two main advantages of this port are that it can be run in a web browser without any plug-ins, and providers a UI experience that doesn't break the visual flow of a web page in the same way that many Applets do.

GlycanBuilderV shares a common code base with both the standalone and Applet versions of the GlycanBuilder software tool, and was until recently present in the GlycanBuilder Google Code site under the subdirectory VaadinGlycanBuilder.

Code checkout and set up

If you would like to make changes to GlycanBuilderV simply checkout the code and follow the instructions below.

git clone https://bitbucket.org/daviddamerell/glycanbuilderv.git
cd glycanbuilderv/

Note that we don't store artwork (i.e. icons, images) and dependencies in the repository so follow the instructions below to download these resources to the correct directories.

wget https://bitbucket.org/daviddamerell/glycanbuilderv/downloads/themes.zip
wget https://bitbucket.org/daviddamerell/glycanbuilderv/downloads/lib.zip
cd WebContent/VAADIN
unzip -u ../../themes.zip
git checkout themes/ucdb_2011theme/styles.css
cd ../WEB-INF/
unzip -u ../../lib.zip
cd ../../
rm lib.zip
rm themes.zip

Setting up Eclipse

  1. If you haven't already done so please download eclipse and make sure you have a suitable JDK (must support Java 7) in your path and that JAVA_HOME is set up correctly.
  2. Start Eclipse and click on Help->Install new software->Add, and enter "Vaadin" in name box and "http://vaadin.com/eclipse" in the location box.
  3. Select all the Vaadin components listed and follow the on-screen instructions.
  4. Now import the GlycanBuilderV project by clicking on File->Import->Existing Projects into Workspace.
  5. Select the folder containing the code you cloned earlier.

To run GlycanBuilderV from within Eclipse make sure you have a Servlet container set up (recommend TomCat 7.0.12) in Eclipse (File->New->Server). Once this is done simply Right-Click on the GlycanBuilderV project and click "Run as"->"Run on server" and select the server you just set up. To see the running web application, open up your browser of choice and navigate to "http://localhost:8080/GlycanBuilder".

Integrating GlycabBuilderV into an existing web page

The following is a brief set of instructions to install this component and embed it in another web page. Note that we ask Apache to proxy access to TomCat: this is important as modern web browsers will refuse to load an iframe unless both the hostname and port match that of the host web page (that you are embedding glycan builder into).

Start by putting the following web page somewhere in your web server served directory.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;border:0;margin:0;">
<head> 
<title>Vaadin embedded GlycanBuilder applet</title> 
<script type="text/javascript"> 
        var vaadin = {
                vaadinConfigurations: {
                        'fb' :{
                                appUri:'/GlycanBuilder', 
                                pathInfo: '/GlycanBuilder', 
                                themeUri: '/GlycanBuilder/VAADIN/themes/ucdb_2011theme', 
                                versionInfo : {vaadinVersion:"6.0.0-INTERNAL-NONVERSIONED-DEBUG-BUILD",applicationVersion:"NONVERSIONED"}
                        }
                        
                }};
</script> 
<script language='javascript' src='GlycanBuilder/VAADIN/widgetsets/ac.uk.icl.dell.vaadin.glycanbuilder.widgetset.GlycanbuilderWidgetset/ac.uk.icl.dell.vaadin.glycanbuilder.widgetset.GlycanbuilderWidgetset.nocache.js'></script> 
<link rel="stylesheet" type="text/css" href="/GlycanBuilder/VAADIN/themes/ucdb_2011theme/styles.css"/> 
</head>
<body>
        <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0;overflow:hidden" src="javascript:false"></iframe>

        <p>Vaadin embedded GlycanBuilder applet</p>

        <div id="fb" style="height:800px;border:2px solid red;margin:0"></div>

        <script type="text/javascript"> 
        var callBack=[];
        callBack.run=function(response){alert(response);}
        </script>
        <form>
        <input type="button" name="Search" value="Search" onclick='window["glycanCanvas"].runCommand("export~glycoct_condensed",callBack);'/>
        </form>

        </body>
</html>

Next download the Vaadin glycan builder war and place it into the webapps directory of TomCat. Rename the download GlycanBuilder.war

Finally setup Apache to proxy access to TomCat (hopefully it's obvious what settings you need to adjust).

<VirtualHost *:80>
        ServerAdmin webmaster@localhost
        ServerName glycodb.nixbioinf.org

        DocumentRoot /opt/server/glycodb.nixbioinf.org/

        <Directory /opt/server/glycodb.nixbioinf.org>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride All
                Order deny,allow
                allow from all 
        </Directory>

        RewriteEngine On

        RewriteRule ^/GlycanBuilder/(.*)$ /tomcat/GlycanBuilder/$1 [P]

        ProxyRequests Off

        ProxyPass /tomcat/ http://localhost:8080/
        ProxyPassReverse /tomcat/ http://localhost:8080/

        ProxyPreserveHost On

        HostnameLookups on

        ErrorLog /var/log/apache2/ucdb_2011.error.log

        LogLevel warn

        CustomLog /var/log/apache2/ucdb_2011.access.log combined
</VirtualHost>

After you have started both Apache and TomCat you should be able to see glycan builder in action by navigating to the web page you created above. You can move glycan builder around in a web page by moving the div element where the id equals fb. Hopefully you can also see how the submit button in the above example used a call back to export the canvas in GlycoCT condensed format.

Updated