Barcode"

From Documentation
 
(22 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
= Barcode =
 
= Barcode =
  
*Demonstration: [http://www.zkoss.org/zksandbox/userguide/#u5 Baicode]
+
*Demonstration: [https://blog.zkoss.org/2018/09/05/8-6-preview-barcode-and-barcodescanner/ Barcode]
*Java API: <javadoc>org.zkoss.zul.Barcode</javadoc>
+
*Java API: <javadoc>org.zkoss.zkmax.zul.Barcode</javadoc>
*JavaScript API: <javadoc directory="jsdoc">zul.med.Barcode</javadoc>
+
*JavaScript API: <javadoc directory="jsdoc">zkmax.barcode.Barcode</javadoc>
 +
*{{ZK EE}}
  
 
= Employment/Purpose =
 
= Employment/Purpose =
An <tt>barcode</tt> 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 <tt>type</tt> 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 <tt>value</tt> is for barcode image which wants to stand for.
+
A <code>barcode</code> 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 <code>type</code> 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 <code>value</code> is for barcode image which wants to stand for.
  
 
= Example =
 
= Example =
 +
 +
[[Image:qrcode.png]]
 
<source lang="xml" >
 
<source lang="xml" >
 
  <barcode type="qr" value="https://www.zkoss.org/" height="100px"/>
 
  <barcode type="qr" value="https://www.zkoss.org/" height="100px"/>
 
</source>
 
</source>
[[Image:qrcode.png]]
+
 
 +
[[Image:code128.png]]
 
<source lang="xml" >
 
<source lang="xml" >
 
  <barcode type="code128" value="https://www.zkoss.org/" height="100px"/>
 
  <barcode type="code128" value="https://www.zkoss.org/" height="100px"/>
 
</source>
 
</source>
[[Image:code128.png]]
 
The barcaode supports controls property since 8.5.2
 
  
 
= type =
 
= type =
The barcode component support a 1D and 2D format. After choosing the type of barcode, and you can render the barcode as the type you choose.
+
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.
  
Note: the type that barcode component supported can be referenced as Supported Barcode Type (Default).
 
 
<source lang="xml">
 
<source lang="xml">
 
  <barcode type="qr"/>
 
  <barcode type="qr"/>
 
</source>
 
</source>
 +
Note: the type that barcode supported can be referenced as Supported Barcode Type (Default).
  
 
= value =
 
= value =
 
value is a string attribute that barcode component want to render.
 
value is a string attribute that barcode component want to render.
  
Note: Some of the type only support a specific format of value.
 
 
<source lang="xml">
 
<source lang="xml">
 
  <barcode type="qr" value="https://www.zkoss.org"/>
 
  <barcode type="qr" value="https://www.zkoss.org"/>
 
</source>
 
</source>
 +
Note: Some of the type only support a specific format of value.
  
 
= height =
 
= height =
height is a string attribute to define the height of barcode component.
+
Height is a string attribute to define the height of barcode component.
  
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.
 
 
<source lang="xml">
 
<source lang="xml">
 
  <barcode type="qr" value="https://www.zkoss.org" height="100px"/>
 
  <barcode type="qr" value="https://www.zkoss.org" height="100px"/>
 
</source>
 
</source>
 +
 +
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 =
 
= displayValue =
 
The displayValue is the boolean attribute to decide whether the show the value under the barcode or not.  
 
The displayValue is the boolean attribute to decide whether the show the value under the barcode or not.  
  
Note: This displayValue attribute is only implement for 1D format.
 
 
<source lang="xml">
 
<source lang="xml">
 
  <barcode type="code128" displayValue="true"/>
 
  <barcode type="code128" displayValue="true"/>
 
</source>
 
</source>
 +
Note: This displayValue attribute is only implement for 1D format.
  
 
= fontSize =
 
= fontSize =
The fontSize is a integer attribute that deciding the font size of the displaying value.  
+
Default: <code>10</code>
 +
 
 +
It's an integer attribute that decides the text font size under the 1D barcode.
 +
 
 +
<source lang="xml">
 +
<barcode type="code128" fonSize="20"/>
 +
</source>
 +
Note: This attribute is only implement for 1D format.
 +
 
 +
= barWidth =
 +
The barWidth is a integer attribute that deciding the single bar width of barcode image.  
  
Note: This attribute is only implement for 1D format with displayValue="true".
 
 
<source lang="xml">
 
<source lang="xml">
  <barcode type="code128" displayValue="true" fonSize="20"/>
+
  <barcode type="code128" barWidth="2"/>
 
</source>
 
</source>
 +
Note: This attribute is only implement for 1D format.
  
 
= registerLibrary =
 
= 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(...). You can register the library as the <zscript> below.
+
registerLibrary(function () {}, library_name, [array of types] ) is a client-side, class-level method to register a custom library into barcode widget. If you register the own custom library into Barcode, every single widget can use the custom library. The way to registering is zkmax.barcode.Barcode.registerLibrary(...). For example: you can register the library as the <script> below.
 
 
Note: the library is the client-side property.
 
  
 
<source lang="xml">
 
<source lang="xml">
  <?script src="mybarcodeLibrary.js"?>
+
<?script src="mybarcodeLibrary.js"?>
  <zscript>
+
<script>
        zk.afterLoad('zkmax.barcode', function () {
+
    ...
                zkmax.barcode.Barcode.registerLibrary(function mybarcode(wgt) {
+
    zk.afterLoad('zkmax.barcode', function () {
                  ...
+
        zkmax.barcode.Barcode.registerLibrary(function mybarcode(wgt) {
                    };
+
            ...
                }, 'mybarcodeLibrary', ['type1', 'type2']);
+
            };
            });
+
        }, 'library-name', ['type1', 'type2', ...]);
</zscript>
+
    });
 +
    ...
 +
</script>
 
</source>
 
</source>
 +
Note:
  
= decodeBarcodeImage =
+
(1) registerLibrary is the pure-client-side method.
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).  
+
(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
 
<source lang="xml">
 
<source lang="xml">
  Barcode.decodeBarcodeImage(base64String);
+
    zk.afterLoad('zkmax.barcode', function () {
 +
        zkmax.barcode.Barcode.registerLibrary(function mybarcode(wgt) {
 +
            ...
 +
            };
 +
        }, 'library-name', ['type1', 'type2', ...]);
 +
    });
 
</source>
 
</source>
  
 +
WEB-INF/lang-addon.xml
 +
<source lang="xml">
 +
    <javascript src="mybarcodeLibrary.js">
 +
    <javascript src="myRegister.js">
 +
</source>
  
 
=Supported Barcode Type (Default)=
 
=Supported Barcode Type (Default)=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Barcode Type</center>
 
! <center>Barcode Type</center>
 
|-
 
|-
| 1D
+
| 1D CODE Family
 
|  
 
|  
CODE39, CODE128, CODE128A, CODE128B, CODE128C, EAN13, EAN8, EAN5, EAN2, UPC, ITF14,ITF, MSI, MSI10, MSI11, MSI1010, MSI1110, PHARMACODE, CODABAR
+
CODE39, CODE128, CODE128A, CODE128B, CODE128C,  
 
 
 
|-
 
|-
| 2D 
+
| 1D EAN Family
 
|  
 
|  
QR
+
EAN13, EAN8, EAN5, EAN2,
 
 
|}
 
 
 
=Supported Barcode Type For Decoding (Default)=
 
 
 
{| border="1" | width="100%"
 
! <center>Name</center>
 
! <center>Barcode Type</center>
 
 
|-
 
|-
| 1D
+
| 1D MSI Family
 
|  
 
|  
CODE39, Code 93, CODE128, EAN8, EAN13, UPC-A, UPC-E, CODABAR, ITF, RSS-14, RSS-Expanded
+
MSI, MSI10, MSI11, MSI1010, MSI1110,  
 +
|-
 +
| 1D Others
 +
|
 +
UPC, ITF14,ITF, PHARMACODE, CODABAR
  
 
|-
 
|-
 
| 2D   
 
| 2D   
|
+
|  
QR Code ,Data Matrix, MaxiCode
+
QR
  
 
|}
 
|}
Line 129: Line 151:
 
=Use Cases=
 
=Use Cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 140: Line 162:
 
{{LastUpdated}}
 
{{LastUpdated}}
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 8.5.2
+
| 8.6.0
 
| Apirl, 2018
 
| Apirl, 2018
 
| <javadoc>org.zkoss.zkmax.barcode.Barcode</javadoc>
 
| <javadoc>org.zkoss.zkmax.barcode.Barcode</javadoc>

Latest revision as of 09:57, 24 October 2023

Barcode

Employment/Purpose

A 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

Qrcode.png

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

Code128.png

 <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 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

Default: 10

It's an integer attribute that decides the text font size under the 1D barcode.

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

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

barWidth

The barWidth is a integer attribute that deciding the single bar width of barcode image.

 <barcode type="code128" barWidth="2"/>

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

registerLibrary

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

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

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">

Supported Barcode Type (Default)

Name
Barcode Type
1D CODE Family

CODE39, CODE128, CODE128A, CODE128B, CODE128C,

1D EAN Family

EAN13, EAN8, EAN5, EAN2,

1D MSI Family

MSI, MSI10, MSI11, MSI1010, MSI1110,

1D Others

UPC, ITF14,ITF, PHARMACODE, CODABAR

2D

QR

Supported Children

*NONE

Use Cases

Version Description Example Location
     

Version History

Last Update : 2023/10/24


Version Date Content
8.6.0 Apirl, 2018 Barcode



Last Update : 2023/10/24

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.