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.
<mobi:qrscan> & <mobi:qrCode>
|| 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
Our first step is to create our page layout. Please paste the following into your ICEmobile page:
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>: