View Source

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

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

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

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

\\
{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 Code"/>
</h:panelGroup>
</mobi:fieldsetRow>
{code}
\\


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