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.
|| The current value of the component. The scanned QR code value.
|| Using an EL expression, bind the component reference to a bean property, so that the component may be accessed in the bean.
|| When disabled, scanning does not occur. Default = 'false'.
|| The component identifier for this component. This value must be unique within the closest parent component that is a naming container.
|| Return true if this component (and its children) should be rendered during the Render Response phase of the request processing lifecycle. Default = 'true'.
|| style will be rendered on the root element of this component.
|| style class will be rendered on the root element of this component.
|| tabindex of the component
|| Label for button
||Label of button after successful capture|
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:
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:
Create a bean named QrCodeBean and add the following markup into a managed bean:
Using a mobile device with the ICEmobile SX container installed, we will see the following: