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.
|| 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 of button
||label of button after successful capture|
Our first step is to create our page layout. Please paste the following into your ICEmobile page:
Inside of the fieldsetGroup, add the <mobi:scan> tag like so:
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:
Using a mobile device with the ICEmobile SX container installed, we will see the following: