QR code tutorial

How to implement a QR code scanner and generator

This tutorial will demonstrate the use of the <mobi:scan> and <mobi:qrcode> components for reading and creating QR codes. The ICEmobile container is required as the <mobi:scan> component will access the device's camera and try and read the QR code. If successful the decoded qr code will be assigned to the backing bean. The <mobi:qrcode> component can be used to generate a QR code image (implemented via the zxing library). The component takes a string value and will return the corresponding QR code graphic.

Attribtutes


<mobi:scan>


binding
Using an EL expression, bind the component reference to a bean property, so that the component may be accessed in the bean.
disabled
When disabled, scanning does not occur. Default = 'false'.
id
The component identifier for this component. This value must be unique within the closest parent component that is a naming container.
rendered
Return true if this component (and its children) should be rendered during the Render Response phase of the request processing lifecycle. Default = 'true'.
style
style will be rendered on the root element of this component.
styleClass
style class will be rendered on the root element of this component.
tabindex
tabindex of the component
buttonLabel
label of button
captureMessageLabel
label of button after successful capture


Usage

Our first step is to create our page layout. Please paste the following into your ICEmobile page:


   <mobi:fieldsetGroup style="width:300px">

   </mobi:fieldsetGroup>


Inside of the fieldsetGroup, add the <mobi:scan> tag like so:


   ......
   <mobi:fieldsetRow>
	<h:outputLabel value="Scan a code:" />
	<mobi:scan buttonLabel="Scan a code" captureMessageLabel="Code Captured!" />
   </mobi:fieldsetRow>


The <mobi:scan> component will leverage the device's camera and allow us to capture the QR code. We will also generate a custom QR code using a user entered value. Paste the following code below the <mobi:scan> fieldsetRow:


   .......
   <mobi:fieldsetRow>
	<h:outputLabel value="Enter QR code:" />
	<mobi:inputText type="text" value="#{qrCodeBean.qrString}" />
   </mobi:fieldsetRow>
   <mobi:fieldsetRow>
	<h:panelGroup style="display: block; text-align: center;">
		<mobi:commandButton value="Create QR Code"/>
	</h:panelGroup>
   </mobi:fieldsetRow>
  <mobi:fieldsetRow>
        <h:panelGroup style="display: block; text-align: center;">
	   <h:outputLabel value="Scan Me:" />
	   <br />
	   <mobi:qrcode value="#{qrCodeBean.qrString}" />
	 </h:panelGroup>
  </mobi:fieldsetRow>

Run the application

Using a mobile device with the ICEmobile SX container installed, we will see the following: