Note: This functionality is only available in WebMaker version 5.0 and upwards.
If your WebMaker pages need to display barcodes, you can make use of the WebMaker Java Method Action to utilise a suitable Java library to generate barcode images. This approach is illustrated in the example in this section. You can find more background information on the Java Method Action in the WebMaker Documentation.
Prerequisites:
Barcode4J and the Avalon Framework
The example in this section uses the Barcode4J open source framework from Krysalis, which accepts an xml fragment describing the barcode and generates the required barcode. The sample code wraps the barcode as a Base64 encoded string representation of a .png image. which can then be displayed on any suitable page using the WebMaker image control.
You can read more about the Barcode4J library and support for the XML-based API used to represent different barcode formats using the following link: http://barcode4j.sourceforge.net/index.html
You will need to download and place suitable versions of barcode4j.jar and avalon-framework.jar, which are required by the barcode4J XML-API (sample_xml_barcode.jar, ), in your application as detailed by the Java Method Action documentation. The jars have been attached to the forum entry for convenience.
All three jars can be added via the Java Method Action for a Rule. The jars will be placed into the webapp/WEB-INF/lib directory of your project repository for use at runtime.
Example Hyfinity Source Code
The sample source code that utilises the Barcode4J framework can be located within file BarcodeXml.java. This file is included in the attached .zip file for completeness, but there is also a .jar file attached for immediate use.
Example Rule Setup
To display a barcode it is necessary to perform rule(s) that will use an XML API fragment to define the type of barcode to create, and also set the message data value to use to generate the barcode image. The message data value may be some sort of unique identifier from your data. The value will need to be placed into the XML fragment for the barcode API to work. Generally, the rule(s) required will be defined in a Controller prior to a page being displayed that has a barcode image.
In order to generate and display a barcode on your page you will need to perform the following steps:
Lets explore these steps in more detail.
1. Create the Barcode image holder
For this example, simply drag-and-drop an image control onto your page. You can use the default 'Save...' button linked to the Save action to trigger the barcode generation method. This button has simply been renamed in the screenshot below to read Create Barcode.
Note: You don't have to activiate the processing with a button, this is just a simple example to demonstrate the mechanism. You could for example, have the rules processing in a PrepareForm Controller.
Note: Image showing the image control acting as the barcode container
On the Page Design Properties panel on the right, select the Dynamic option under Location (URL) is. This will mean that WebMaker will pick up a dynamic value from the XML data to render the image.
Switch to the Bindings tab.
Note: Image showing the INPUT binding for the barcode_image field
You should now be able to see the default binding for the image control. You can accept the defaults, but again in the image above, it has been renamed to reflect the name change for the image control. The barcode_image element is where we will ask WebMaker to place the encoded image after the Java method call to generate the barcode. The WebMaker image control should then do the rest.
2. Create the XML message structure for the barcode
The message structure will depend on the type of barcode you need. The example below simply provides a message string for the code generator and the element named code39 indicates that a Code 39 format barcode should be generated with all default settings. You can see the full set of available options at: http://barcode4j.sourceforge.net/2.1/barcode-xml.html.
Note: Image showing Insert action to create the barcode 39 XML fragment
The example above has the message value as a pre-defined value for simplicity. If you want to use your own value from another field or a combination of fields, then you will need some further actions to set the value. You could for example setup an Action to Assign the message value from another field.
Finally, as an image control is only an output field on a page, the Controller with the rules processing will not be aware of the field. You will need to create a field in the XML as a placeholder for the barcode image string value (barcode_image) to be used by the Java Method call below. You could for example setup another Action to Assign the formData / barcode_image with an empty value. Please ensure that you tick the 'Create if it does not already exist?' field.
The XML structure can obviously be created using whatever approach is required. You may look up a database, retrieve the message attribute by calling a Web Service or simply generate it based on data input on the screen.
3. Invoke the generateBarcode method using the Java Method Action
The screenshot below shows the method call to generate the barcode. The Java method call would look like the following:
com.hyfinity.barcode.samples.BarcodeXml.generateBarcode(elem)
Note: Image showing the generateBarcode Java Method
The main parameter to the method is the message, which will be used to generate the barcode.
If all goes well then you should see a response similar to the one shown below when you invoke the Generate Barcode action from you page. You can see the execution trace using the Debugger.
If there is encoded data in the barcode_image element then you should see the representative barcode image as shown below:
Note: Image showing the generated code39 based barcode
Other Barcode Examples
The examples below show the use of barcode4j specific paramter overrides.
You can see the full set of available options at: http://barcode4j.sourceforge.net/2.1/barcode-xml.html.
The XML fragment below is another example of a different barcode type (2D Datamatrix) with some specific parameters:
Please add details of any code fragments you use.
If your WebMaker pages need to display barcodes, you can make use of the WebMaker Java Method Action to utilise a suitable Java library to generate barcode images. This approach is illustrated in the example in this section. You can find more background information on the Java Method Action in the WebMaker Documentation.
Prerequisites:
Barcode4J and the Avalon Framework
The example in this section uses the Barcode4J open source framework from Krysalis, which accepts an xml fragment describing the barcode and generates the required barcode. The sample code wraps the barcode as a Base64 encoded string representation of a .png image. which can then be displayed on any suitable page using the WebMaker image control.
You can read more about the Barcode4J library and support for the XML-based API used to represent different barcode formats using the following link: http://barcode4j.sourceforge.net/index.html
You will need to download and place suitable versions of barcode4j.jar and avalon-framework.jar, which are required by the barcode4J XML-API (sample_xml_barcode.jar, ), in your application as detailed by the Java Method Action documentation. The jars have been attached to the forum entry for convenience.
All three jars can be added via the Java Method Action for a Rule. The jars will be placed into the webapp/WEB-INF/lib directory of your project repository for use at runtime.
Example Hyfinity Source Code
The sample source code that utilises the Barcode4J framework can be located within file BarcodeXml.java. This file is included in the attached .zip file for completeness, but there is also a .jar file attached for immediate use.
Example Rule Setup
To display a barcode it is necessary to perform rule(s) that will use an XML API fragment to define the type of barcode to create, and also set the message data value to use to generate the barcode image. The message data value may be some sort of unique identifier from your data. The value will need to be placed into the XML fragment for the barcode API to work. Generally, the rule(s) required will be defined in a Controller prior to a page being displayed that has a barcode image.
In order to generate and display a barcode on your page you will need to perform the following steps:
- Create the barcode image holder on the page[/*]
- Compose the XML fragment for the required barcode format (http://barcode4j.sourceforge.net/2.1/barcode-xml.html)[/*]
- Call the generateBarcode() sample method to generate the Base64 encoded barcode string. The image control should now display this string as a barcode image.[/*]
Lets explore these steps in more detail.
1. Create the Barcode image holder
For this example, simply drag-and-drop an image control onto your page. You can use the default 'Save...' button linked to the Save action to trigger the barcode generation method. This button has simply been renamed in the screenshot below to read Create Barcode.
Note: You don't have to activiate the processing with a button, this is just a simple example to demonstrate the mechanism. You could for example, have the rules processing in a PrepareForm Controller.
Note: Image showing the image control acting as the barcode container
On the Page Design Properties panel on the right, select the Dynamic option under Location (URL) is. This will mean that WebMaker will pick up a dynamic value from the XML data to render the image.
Switch to the Bindings tab.
Note: Image showing the INPUT binding for the barcode_image field
You should now be able to see the default binding for the image control. You can accept the defaults, but again in the image above, it has been renamed to reflect the name change for the image control. The barcode_image element is where we will ask WebMaker to place the encoded image after the Java method call to generate the barcode. The WebMaker image control should then do the rest.
2. Create the XML message structure for the barcode
The message structure will depend on the type of barcode you need. The example below simply provides a message string for the code generator and the element named code39 indicates that a Code 39 format barcode should be generated with all default settings. You can see the full set of available options at: http://barcode4j.sourceforge.net/2.1/barcode-xml.html.
Note: Image showing Insert action to create the barcode 39 XML fragment
The example above has the message value as a pre-defined value for simplicity. If you want to use your own value from another field or a combination of fields, then you will need some further actions to set the value. You could for example setup an Action to Assign the message value from another field.
Finally, as an image control is only an output field on a page, the Controller with the rules processing will not be aware of the field. You will need to create a field in the XML as a placeholder for the barcode image string value (barcode_image) to be used by the Java Method call below. You could for example setup another Action to Assign the formData / barcode_image with an empty value. Please ensure that you tick the 'Create if it does not already exist?' field.
<eForm xmlns="http://www.hyfinity.com/mvc" xmlns:mvc="http://www.hyfinity.com/mvc">
<Control>
<control_elements/>
</Control>
<Data>
<formData>
<barcode_image></barcode_image>
</formData>
<barcode message="123456789" xmlns="">
<code39/>
</barcode>
</Data>
</eForm>The XML structure can obviously be created using whatever approach is required. You may look up a database, retrieve the message attribute by calling a Web Service or simply generate it based on data input on the screen.
3. Invoke the generateBarcode method using the Java Method Action
The screenshot below shows the method call to generate the barcode. The Java method call would look like the following:
com.hyfinity.barcode.samples.BarcodeXml.generateBarcode(elem)
Note: Image showing the generateBarcode Java Method
The main parameter to the method is the message, which will be used to generate the barcode.
If all goes well then you should see a response similar to the one shown below when you invoke the Generate Barcode action from you page. You can see the execution trace using the Debugger.
<eForm xmlns="http://www.hyfinity.com/mvc" xmlns:mvc="http://www.hyfinity.com/mvc">
<Control>
<control_elements/>
</Control>
<Data>
<formData>
<barcode_image>data:image/png;base64,iVBORw0KGgo..........qOhlBCOAlSJ06Cs+...=</barcode_image>
</formData>
<barcode message="123456789" xmlns="">
<code39/>
</barcode>
</Data>
</eForm>
If there is encoded data in the barcode_image element then you should see the representative barcode image as shown below:
Note: Image showing the generated code39 based barcode
Other Barcode Examples
The examples below show the use of barcode4j specific paramter overrides.
You can see the full set of available options at: http://barcode4j.sourceforge.net/2.1/barcode-xml.html.
<barcode message="123456789">
<code39>
<height>8</height>
<module-width>0.1</module-width>
<wide-factor>2.0</wide-factor>
<interchar-gap-width>3</interchar-gap-width>
<quiet-zone enabled="true">10</quiet-zone>
<human-readable>
<placement>bottom</placement>
<font-name>Courier</font-name>
<font-size>4pt</font-size>
<pattern>____ __ __</pattern>
<display-start-stop>true</display-start-stop>
</human-readable>
</code39>
</barcode>
The XML fragment below is another example of a different barcode type (2D Datamatrix) with some specific parameters:
<barcode message="123456789">
<datamatrix>
<min-symbol-size>22</min-symbol-size>
<max-symbol-size>22</max-symbol-size>
</datamatrix>
</barcode>
Please add details of any code fragments you use.
RE: Using Barcodes within WebMaker Forms
You will also need another framework called zxing.
The barcode4j jar was a build created on 20th March 2013: [attachment=1]barcode4j.jar[/attachment]
The zxing jar is version 1.7: [attachment=0]zxing-core.jar[/attachment]
If you include these jars attached instead, then it will also allow a QR code to be generated as well as all the others.
The XML fragment below shows an example with advanced parameter settings:
<barcode message="1234567890"> <qr> <module-width>3.52777mm</module-width> <!-- 0.352777mm 1 pixel at 72dpi --> <quiet-zone enabled="true">4</quiet-zone> <encoding>UTF-8</encoding> <ec-level>L</ec-level> </qr> </barcode>If you want to control the size of a QR Code, you can set the image with an appropriate height or width value e.g. 100.