QR code tutorial

You are viewing an old version (v. 3) of this page.
The latest version is v. 26, last edited on Dec 23, 2012 (view differences | )
<< View previous version | view page history | view next version >>

How to implement QR code scanner

This tutorial will demonstrate the use of the <mobi:qrcode> and <mobi:scan> components when creating and reading a QR code. The ICEmobile container is needed for reading QR codes but alternative QR scan apps are available for testing purposes. The <mobi:scan> component will access the devices camera and try and read a QR code. If successful the decoded qr code will be assigned to the backing bean. The 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:qrscan> & <mobi:qrCode>

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


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>


We will generate our QR code using a user entered value and have a commandButton submit that value server-side. Please paste the following code inside of our <mobi:fieldsetGroup>:


   <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 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>
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2017 ICEsoft Technologies Canada Corp.