Embed Java Applets in Google Sites

Here I explain how to insert Java applets on a Google Sites website (this one!). I provide a working example and source code.

For a broader intro to building applets, you'll have to look somewhere else. I recommend Processing, a sweet open-source environment that acts like an electronic sketchbook. For finer details about embedding applets or other objects in HTML, Google is your friend.

Background
Java applets are a great way to add interactive content to your website. 

For example, drawing circles with your mouse is quite entertaining... try it!


The Problem
Unfortunately, while Google Sites provides a way to directly hack at the HTML underlying a page, it filters user input and throws out any content within "dangerous" tags such as <applet> or <object>. This eliminates the straightforward way to add an applet.

The Work-Around
The work-around is to use a custom gadget that provides a wrapper for user-provided code. For those who need an intro on gadgets, check out Google's getting started guide.

Google Sites user Mori79 provides the Code Wrapper gadget. It allows you to enter the necessary javascript/HTML into a text box, and it subtly slips these by Google's filter. He also offers a nice little intro on his site: http://sites.google.com/site/mori79/html-gadgets. Thanks Mori!

Procedure
To insert a code wrapper gadget on Google Sites, go to Edit page ► Insert ► More gadgets and type "code wrapper" into the search box.  The Code Wrapper gadget should be at the top of the list.

Once you've added the gadget, just edit the text field to include the HTML/javascript necessary to embed your applet.  I'm no expert here, but I found that this snippet did the trick:

<div id="circles_container">

    <!-- This plays nicer with older browsers,
         but requires JavaScript to be enabled.
         http://java.sun.com/javase/6/docs/technotes/guides/jweb/deployment_advice.html -->
    <script type="text/javascript"
        src="http://www.java.com/js/deployJava.js"></script>
    <script type="text/javascript">
      /* <![CDATA[ */
      var attributes = {
            code: 'circles.class',
            archive: 'http://michaelchughes.com/applets/circles.jar',
            width: 500,
            height: 100,
            image: 'http://michaelchughes.com/applets/loading.gif'
          };
          var parameters = { };
          var version = '1.5';
          deployJava.runApplet(attributes, parameters, version);

          /* ]]> */
        </script>
</div id="circles_container">

The bold lines are the ones you'll want to tweak for your own purposes.  Note that you *can* give an absolute URL path to the applet JAR archive and it works just fine, so the applet files do not need to by attached to the particular page or located in the same directory.

That's it! Enjoy, just be sure to be careful about what you add into the code wrapper... some applets or scripts may not play nice with Google Sites functionality, so tread carefully.

Comments