View Source

h2. 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.
\\

h3. 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 |
\\

h2. Usage


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

\\
{code}
<mobi:fieldsetGroup style="width:300px">

</mobi:fieldsetGroup>
{code}
\\

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

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

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:

\\
{code}
.......
<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>
{code}

h2. Run the application

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