One of the challenges for the team was figuring out how to sign a Java/Processing applet as the documentation on the subject was surprisingly limited. You’ll need to sign your applet if you want to deploy an OpenGL sketch onto the web, or if your sketch requires access to a user’s machine (ie – selecting an image file). So here’s a quick guide on how to do this on a Windows machine. Please note you will need a current installation of both the Java Developer’s Kit (JDK) and Java Runtime Environment (JRE).

Export your sketch by going (in Processing) File>Export.  It should open up an Explorer window showing the files it just created.  You should only have one .jar file.  If you have a file named core.jar in there, you’ll need to go back into Processing’s preferences (File>Preferences) and uncheck the option “Use multiple .jar files when exporting applets.”  Note that you will still have multiple .jar files if you’re using any libraries in your sketch.  As far as I know, each of these will need to be individually signed.

Okay, so at this point you should have a file called sketchName.jar.  Now you’ll need to open up your command prompt as an administrator (on Windows: Start>Accessories>Right Click on Command Prompt>Run as Admin).  This is very important, as the signing process will not work if you do not run it as an admin.

You need to navigate to the “bin” folder where your JRE was installed.  In my case, I typed the following command (‘cd’ is the command to change a directory) to navigate to the correct folder:

C:\ cd Program Files (x86)\Java\jre6\bin

Or, you can go “up” a directory level, by typing:

cd ..

Now type the following command and hit enter:

keytool -genkey -keystore C:\pKeyStore -alias p5geek

Where C:\pKeyStore is the location of a key file it is going to create, and p5geek is the name of the key. You can change these names and locations to your liking. It will then ask you a number of questions (create and confirm a password, name, etc), so just follow along and enter the details as requested.

It will then ask you to confirm the details you entered (if correct, hit ‘Y’) and then to enter (and re-enter) a NEW password for ‘p5geek.’ You then need to copy the keystore file created (C:\pKeyStore) and paste it into the ‘bin’ folder where your JDK was installed. In my case, that folder was located here:

C:\program files\java\jdk1.6.0_23\bin

Go back into your command prompt window and navigate to the JDK bin folder (using the ‘cd’ command as needed). Then type the following command (replace with your keystore, keyfile and .jar directory as needed) and hit enter:

jarsigner -keystore pKeyStore C:\path\to\sketchName.jar p5geek

It will crunch a few numbers and then ask for your password. Enter your password and then you’re good to go. You can now embed your .jar file on the web – just repeat the process if you have multiple .jar files.

Here are two resources I found helpful when doing this:
Processing Help Topic
Processing Forum Post

Processing – As I mentioned much of this project started in the Processing environment. Processing is an open source Java-based language, designed for teaching the basics of programming, specifically in a visual context. It is a great way to get into programming, as you can quickly work your way into “visual results.” Processing has a huge range of tutorials, an excellent documentation, but, most importantly, a highly active community. Processing also has a hardware-based counterpart called Arduino, if you’re looking to make lights blink and motors spin.

Eclipse – After advancing some of our Processing sketches, we learned of the more advanced IDE callled Eclipse. Eclipse is an open source IDE for advanced application development, and comes in a number of different flavors depending on what kind of applications you’re looking to develop (Java, Javascript, PHP, etc). We also incorporated the excellent Processing for Eclipse plugin, which permitted us to continue to use Processing plugins easily. It also has a simple export button to save your Processing applets for web use.

Aptana – Built off of the Exlipse environment, Aptana is an open source advanced application development IDE. It also supports a wide range of programming languages, and was used heavily for the development of this website.

Notepad++ – Notepad++ is an open source advanced text editor, which supports code highlighting for a huge range of different programming languages. It’s great for editing HTML and CSS files on the fly, or for quickly browsing code.  Also be sure to check out the Explorer plugin, which makes file browsing quicker and easier.

WordPress – WordPress 3.1 is used as the CMS (Content Management System) for this website. We also used the Satoshi theme for our basic framework, and then created a child theme specific for our site. Our child theme has a few changes to the CSS, but more importantly has some additional features for quickly creating our “case studies” and embedding our applets.

XAMPP – XAMPP is critical for developing WordPress themes and installations locally on your own machine.  It’s an easy way to run the necessary SQL database while you work on your WordPress site.