QR Code Tutorial

compared with
Current by Tyler Johnson
on Dec 23, 2012 04:44.


 
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 20 changes. View first change.

 h2. How to implement QR code scanner
  h2. Implement a QR code scanner and generator
  
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.
 \\
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. Additional information regarding these components can be found here:
  
h3. Attribtutes
  
  * [WIKI - QR Code Scanner|http://www.icesoft.org/wiki/display/icemobile/QR+Code+Scanner]
 * [WIKI - QR Code Generator|http://www.icesoft.org/wiki/display/icemobile/QR+Code+Generator]
 * [TLD|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/]
 \\
*<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
  {gallery}
  
Our first step is to create our page layout. Please paste the following into your ICEmobile page:
  The full source for this sample can be found [here|#source].
  
 
 h2. Usage
  
 \\
{code}
  <mobi:fieldsetGroup style="width:300px">
  ..........
  ..........
  The <mobi:scan> tag is very easy to use. Our first step is to add the component, a <mobi:commandButton> to submit the value, and a <mobi:fieldsetGroup> for the layout. The <mobi:scan> component will leverage the device's camera and allow us to capture the QR code which we can display by clicking the "Display Scanned Code" button. Please paste the following into an ICEmobile page:
  
 {code:title=qrscan.xhtml}
  <mobi:fieldsetGroup>
  <mobi:fieldsetRow>
  <h:outputLabel value="Scan a code:" />
  <mobi:scan value="#{qrCodeBean.qrScanCode}" buttonLabel="Scan a code"
  captureMessageLabel="Code Captured! Scan again?" />
  </mobi:fieldsetRow>
  </mobi:fieldsetGroup>
<mobi:fieldsetRow>
  <mobi:commandButton value="Display Scanned Code: " />
  <h:outputText value="#{qrCodeBean.qrScanCode}" />
  </mobi:fieldsetRow>
 {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>:
  The next step is to generate a custom QR code using a user entered value. We will add the <mobi:qrcode> to display the code and a commandButton to submit the value of the <mobi:inputText>. Paste the following code below the <mobi:scan> fieldsetRow:
  
 \\
{code}
  {code:title=qrscan.xhtml}
  <mobi:fieldsetRow>
  <h:outputLabel value="Enter QR code:" />
<mobi:inputText type="text" value="#{qrCodeBean.qrString}" />
   <mobi:inputText type="text" value="#{qrCodeBean.qrGenCode}" />
  </mobi:fieldsetRow>
  <mobi:fieldsetRow>
<h:panelGroup style="display: block; text-align: center;">
  <mobi:commandButton value="Create Code"/>
  </h:panelGroup>
   <mobi:commandButton value="Create QR Code"/>
  </mobi:fieldsetRow>
{code}
 \\
  
  
 \\
 {code}
  <mobi:fieldsetRow>
<h:panelGroup style="display: block; text-align: center;">
   <h:panelGroup>
  <h:outputLabel value="Scan Me:" />
  <br />
<mobi:qrcode value="#{qrCodeBean.qrString}" />
   <mobi:qrcode value="#{qrCodeBean.qrGenCode}" />
  </h:panelGroup>
  </mobi:fieldsetRow>
 {code}
\\
  
h2. QrCodeBean.java
  
 \\
 Create a bean named QrCodeBean.java. The generated QR code qrGenCode, will have a default value of the ICEsoft website while the qrScanCode field will be populated with the value of the scanned QR code. Please add the following markup into a managed bean:
  
 {code:title=QrCodeBean.java}
 @ManagedBean
 @ViewScoped
 public class QrCodeBean implements Serializable {
  
  private String qrScanCode;
  private String qrGenCode = "http://www.icesoft.com";
  
  //TODO GENERATE GETTERS/SETTERS
 {code}
 \\
  
 h2. Run the application
  
 \\
 Open the application in a separate browser to display a QR code. Using a mobile device with the ICEmobile SX container installed, scan the QR image and select "Display Scanned Code". We can then modify the value of the QR code by entering in our own code and clicking "Create Code".
  
 \\ !qr-code1.png|align=center,width=500,height=518!
 \\
  
 {anchor:source}
 h2. Source
  
 1. [qr-scan-basic.zip|QR Code Tutorial^qr-scan-basic.zip|qr-scan-basic.zip]

© Copyright 2016 ICEsoft Technologies Canada Corp.