Barcodes you have to love them, those little digital pictures can make life a lot easier when trying to tag a multitude of things but still be machine readable.
Already smart phones along with cheap / integrated webcams are putting potential barcode scanners at everyone’s fingertips, what we need is an easy way to create the barcode and then read it.
Creating a barcode with an XPage
Due to the ability for an XPage to easily leverage Java code it is quite straightforward to integrate an existing Java library, so when the XPage is called a rendered barcode is returned.
For this demo I have decided to use a commercial library – the code will operate in a demo mode and is reasonably priced if you decide to buy it. For this demo I am only interested in the Datamatrix barcode so I downloaded that specific Jar file from here.
There are plenty of other great blogs which explain how to use existing Java libraries with X Pages – so I won’t go into any great detail here. Heres a very good example from Stephen Wissel in fact I used his example as the basis for generating the barcode.
PNG, GIF or JPEG? If you decide to go for PNG or GIF as your file format you need to download some additional JARs which also need to be added – for PNG here, for GIF here. Just make sure you have added to the them to the database the same way as the barcode Jar file.
I decided to use the PNG file format.
Similar to Stephens example you need to make sure you add your SSJS to the beforeRenderResponse event of the XPage – this way we can return what we want back to the user. This SSJS will call a java class which actually generates the barcode.
Note this code has been tested on a 8.52 server.
The SSJS code looks like this:
The Java Code
The Java code is not production ready (no error handling etc) so use at your own risk.
The class has some properties which allows you to set the height and width.
The main method – generateBarcode is passed the output stream and the code which needs to be converted to a barcode. Remember in this case I am only interested in the datamatrix barcode and the image format is PNG.
In my case I wanted to not only stream the PNG back to the browser but I wanted to save a copy of the image on the file system (under the servers HTML directory).
This way in a real app I could generate a barcode for a document, return it live to the user and then when the document is saved attach the image to the document. This means on subsequent viewing there is no need to generate the image again.
Add the following class within the shinydesign package:
Getting the Image
To display the barcode simply use the a normal HTML Image Tag like this:
Currently there is an issue if you try and put multiple image tags on the same page – as an XPages beginner I am not sure quite what the problem is but the code will not render all of the images. This is not a problem if you use the attach image method described above as you could just reference the stored files.
Using the Barcode
The following Adobe Flex application will read a generated Datamatrix barcode and display the result.
First print off some test datamatrix barcodes which I have encoded using the above technique. Each one should bring back some information based on the amazing avatar images that Ferdy Christant has created for JungleDragon. Many thanks to Ferdy for giving me permission to reuse the images here and if you haven’t looked at JungleDragon yet then its about time you did.
For this demo the information is stored within the application using a simple ArrayCollection but it could easily retrieve information from a Domino application / alternative system. Don’t forget as its Adobe Flex it can easily be converted to an AIR application which can then run on mobiles. For a mobile version we could then use the phones camera to pickup the barcode.
Mark Myers and I have some plans for some great little applications which will leverage this technology – stay tuned! In the meantime if you have any need for a barcode implementation within your software solutions then just drop me a line.
Link to Demo (Due to WordPress eating my HTML)