ZK Component Reference/Multimedia and Miscellaneous/Barcode

Barcode

• Demonstration: Baicode
• Java API: Barcode
• JavaScript API: Barcode
• Available for ZK:
• 

Employment/Purpose

An barcode component is used to generate a barcode at the browser, and decode the barcode on the server side. There are many properties to dealing with the barcode component. First, you could use the type property to specify the type of barcode, for example: qrcode, code128, code 128A...., after choose the type you want, you could generate the barcode of the code. And every barcode image could response to a certain value, the property value is for barcode image which wants to stand for.

Example

 <barcode type="qr" value="https://www.zkoss.org/" height="100px"/>

 <barcode type="code128" value="https://www.zkoss.org/" height="100px"/>

type

The Barcode has 18 types for 1D and 1 type for 2D by default. After choosing the type of barcode, and you can render the barcode as the type you choose.

 <barcode type="qr"/>

Note: the type that barcode component supported can be referenced as Supported Barcode Type (Default).

value

value is a string attribute that barcode component want to render.

 <barcode type="qr" value="https://www.zkoss.org"/>

Note: Some of the type only support a specific format of value.

height

height is a string attribute to define the height of barcode component.

 <barcode type="qr" value="https://www.zkoss.org" height="100px"/>

Note:

(1) height is a string as a format of "number+px"

(2) In type of qr, the width is as same as the height.

displayValue

The displayValue is the boolean attribute to decide whether the show the value under the barcode or not.

 <barcode type="code128" displayValue="true"/>

Note: This displayValue attribute is only implement for 1D format.

fontSize

The fontSize is a integer attribute that deciding the font size of the displaying value.

 <barcode type="code128" displayValue="true" fonSize="20"/>

Note: This attribute is only implement for 1D format with displayValue="true".

registerLibrary

registerLibrary(function () {}, library_name, [array of types] ) is a client-side method to register a custom library into barcode widget. The way to use the methed is zkmax.barcode.Barcode.registerLibrary(...). For example: you can register the library as the <zscript> below.

<?script src="mybarcodeLibrary.js"?>
<zscript>
    ...
    zk.afterLoad('zkmax.barcode', function () {
        zkmax.barcode.Barcode.registerLibrary(function mybarcode(wgt) {
            ...
             };
         }, 'library-name', ['type1', 'type2', ...]);
    });
    ...
</zscript>

Note:

(1) registerLibrary is the pure-client-side method.

(2) If you want to register the custom library for all the web application, you can add <javascript src="mybarcodeLibrary.js"/>the source file at WEB-INF/lang-addon.xml.

myRegister.js

    zk.afterLoad('zkmax.barcode', function () {
        zkmax.barcode.Barcode.registerLibrary(function mybarcode(wgt) {
            ...
             };
         }, 'library-name', ['type1', 'type2', ...]);
    });

WEB-INF/lang-addon.xml

    <javascript src="mybarcodeLibrary.js">
    <javascript src="myRegister.js">

decodeBarcodeImage

decodeBarcodeImage(...) is a static server-side method to decode the image data to a string. The supported type of input parameter are byte[], base64String, org.zkoss.image.Image, java.awt.Image.

Note: the barcode type which can be decoded by decodeBarcodeImage() can be referenced Supported Barcode Type (Default).

  Barcode.decodeBarcodeImage(base64String);

Supported Barcode Type (Default)

Name	Barcode Type
1D	CODE39, CODE128, CODE128A, CODE128B, CODE128C, EAN13, EAN8, EAN5, EAN2, UPC, ITF14,ITF, MSI, MSI10, MSI11, MSI1010, MSI1110, PHARMACODE, CODABAR
2D	QR

Supported Barcode Type For Decoding (Default)

Name	Barcode Type
1D	CODE39, Code 93, CODE128, EAN8, EAN13, UPC-A, UPC-E, CODABAR, ITF, RSS-14, RSS-Expanded
2D	QR Code ,Data Matrix, MaxiCode

Supported Children

*NONE

Use Cases

Version	Description	Example Location

Version History

Version	Date	Content
8.5.2	Apirl, 2018	Barcode