Raspberry PI Java and Javascript Desktop Applications – JJR Architecture

This entry shows how to create desktop applications for the Raspberry PI with a GUI written in JavaScript and rendered using the Java SWT Browser widget. Use this model to benefit from Rich Internet Applications and access device hardware and software resources by creating custom JavaScript functions. The assumptions are that your device is running Raspian, a Debian based Linux distribution optimised for the Raspberry PI, with X11 enabled and Java installed.

Java-JavaScript-Raspian (JJR) Architecture
The Raspberry PI is a 32 bit ARM based mini computer with built-in USB and HDMI ports, graphics card, sound, ethernet and micro SD reader. This device is capable of running Linux, RiscOS and a couple of other operating systems. With plenty of applications available for Raspian (35,000 at the time this article is written), developing your own can be an interesting hobby or a commercially viable product. Writing desktop applications for Linux the traditional way, using Qt/C++ requires a steep learning curve and a significant level of effort for creating easy to use GUIs. Writing pure Java applications can limit user interaction. Using the concept of Rich Internet Applications allows developers to use one of many JavaScript frameworks (i.e.: ExtJS, Bootstrap, jQuery UI, etc.) and create user friendly interfaces. Built on top of the Java VM, these applications can access hardware resources such as USB devices or make use of other applications. Integration between JavaScript and local resources is done by extending the JavaScript engine.

Below is a diagram of the JJR (Java-JavaScript-Raspbian) application architecture:
JJR Architecture

The Java SWT Browser Widget
Out of a couple of Java browser components (i.e.: ChromiumEmbedded or JXBrowser) the easiest to use is the Eclipse SWT Browser Widget. This component makes use of locally available browser engines, such as Mozilla or Webkit, to render web content. Coupled with the BrowserFunction class, Java functions can be invoked from within the browser using JavaScript. This component runs on MacOS and Linux – thus your application can be developed and tested on a Mac and deployed and compiled on Raspbian. SWT is a graphical widget toolkit for Java – it generates cross platform user interface components.

Requirements
Prior to compiling or executing applications developed with this widget, SWT and Webkit must be installed on your Raspbian:

sudo apt-get install -y libswt-gtk-3-jni libswt-gtk-3-jav libswt-webkit-gtk-3-jni

On Mac the required Java SWT package can be downloaded here:
http://www.eclipse.org/downloads/download.php?file=/eclipse/downloads/drops4/R-4.4-201406061215/swt-4.4-cocoa-macosx-x86_64.zip

Code summary
This sample application shows how to create an SWT window, add the Browser component and load a remote web page. No IDE is required. Code is available here:
https://github.com/fgheorghe/raspberry-pi-java-and-javascript-desktop-application

Class src/Main.java:
Provides application entry point through the main function, which instantiates an instance of self. The class constructor creates the Java window and browser, and inject the custom JS function Hello. Further details about the Java SWT Browser widget are available here:
http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.eclipse.platform.doc.isv%2Freference%2Fapi%2Forg%2Feclipse%2Fswt%2Fbrowser%2FBrowser.html

Class src/HelloWorld.java:
Provides custom JS function Hello implementation, using the BrowserFunction class:
http://help.eclipse.org/indigo/index.jsp?topic=%2Forg.eclipse.platform.doc.isv%2Freference%2Fapi%2Forg%2Feclipse%2Fswt%2Fbrowser%2FBrowserFunction.html

Files src/mac/Manifest and src/raspbian/Manifest:
Provide JAR file main-class name and library location for each of the two OS’. If any of the swt.jar paths change (Makefile), please update these files.

Makefile:
File used for compiling the project and generating a jar file. By default it will build the application for linux:
make
Building for Mac can be done using:
make all-mac

Based on this application, you can developer your User Interface using on the of the above JS frameworks. Using the HelloWorld template class you can extend JavaScript to access local resources.

Leave a Reply

Your email address will not be published. Required fields are marked *