QR Code - Barcode Integration

Modeling Actions with WebRatio Mobile Platform
167 views Published on May 08, 2015 | Time 6 min
Applies to: 8.0 or higher

Mobile applications usually interacts with the device in several ways. This lesson shows you how you can model with WebRatio Mobile Platform a mobile application that let the user scan a QR Code/Barcode with the photocamera. You will learn how to model the scan of a QR Code/Barcode but also how to generate a QR Code/Barcode to be shown in a screen of your mobile application.

Transcript

Table of contents

Introduction

WebRatio Mobile Platform lets you add to your mobile application a feature that allows to scan or generate a QR Code/Barcode. Let's see how to model this integration with your mobile application using WebRatio Mobile Platform.

Scan a QR Code/Barcode

How to Model the User Interaction

Let's suppose you want to create an application which gives the chance for the user to scan a QR Code or a Barcode.

Let's create the "BarcodeSample" mobile project. Click on the "File" menu, choose the "New" and then "Mobile Project" option. Give a meaningful name for the "Mobile Project", such as "BarcodeSample" and then press the "Finish" button.

Let's open the "App View" of the Mobile Project and start to model. First of all, let's add a screen where the user can scan a QR Code or a Barcode. Click on the "View Containers", choose the "Screen" item and place it in the work area to add the screen. Type a meaningful name for the home screen, such as "Barcode Sample".

Let's model the form for scanning a QR Code or a Barcode. Click on the "View Components", choose the "Form" item and click inside the home screen to add the component. Type a name for the "Form" component, for example "Barcode Info".

Now let's define the action triggered when the user want to scan a QR Code or a Barcode. We need a select event on the form, a navigation flow and an action. Choose the "Action" in the toolbar and clace it in the work area to add. Click on the "Flows", choose the "Navigation Flow" item, click first on the "Form" component and then on the "Action". Give a meaningful name to the event, such as "Scan".

How to Model the "Barcode" Integration

Let's open the "Action Definitions" View to create the action behavior. Press on the "Add Action Definition" button and type a name for the action definition, such as "Scan Barcode". Double-click on the "Action Definition" to open it.

To scan a QR Code or a Barcode, let's use the "Barcode" operation. Click on the "Utility Components", choose the "Barcode" item and click inside the work area to add it.

The "Barcode" operation allows the user to scan a QR Code or a Barcode and retrieve the information contained in it.

To state that the "Barcode" operation is the first operation to be executed, let’s use a "Success Flow". Click on the "Flows", choose the "Success Flow", click first on the Input Port and then on the "Barcode" operation.

Finally let's connect the operation with the Success and Error Port depending on its result. Click on the "Flows", choose the "Success Flow", click first on the "Barcode" operation and then on the "Success Port".

To retrieve the information contained in the QR Code or the Barcode you have to add parameters to the "Success Port". Right-click on the Success Port and choose the "Success Port Wizard..." option.

The "Barcode" operation provides the following information as output:

  • "Format" (e.g. EAN8, EAN13, QR CODE).
  • "Value" which is the QR Code/Barcode value.
  • "Value Type" which is the QR Code type (e.g. URL, text).

Press the "Select All" button to add the parameters and then press the "Finish" button to confirm.

Click on the "Flows", choose the "Error Flow" item, click first on the "Barcode" operation and then on the "Error Port".

Now that the definition is complete, let's use it in our model. Let's open the "App View".

Press the "Select" button to associate an "Action Definition", choose the "Scan Barcode" action definition and then press the "OK" button.

Let's add the fields to the form for receive the parameters of the action. Right-click on the "Form" view component to add fields and choose the "Edit Form..." option. Press the "Add Field" button to add a field, give a meaningful name to the field, such as "Format". Use the same procedure to add "Value" and "Value Type" fields. Check the "Preloaded" property to all the fields. Then press the "OK" button to confirm.

In order to preload the fields after the scanning of the QR Code or the Barcode, let's use a Success Event with a "Navigation Flow". Click on the "Flows", choose the "Navigation Flow" item, click first on "Success Event" of the "Action" and then on the "Form" component. Double-click on the "Navigation Flow". Uncheck the “Enable Default Binding” property, press on the "Guess Binding" button and then on the "OK" button.

How to Emulate with WebRatio Developer App

Generate the project to emulate the mobile application, by using the "Generate and Run" button.

The best way to test this mobile application is to use the WebRatio Mobile Developer App. Press on the "Scan QR Code" button to open the mobile app on the device.

Click on the "Scan" button to scan a QR Code.

Generate a QR Code/Barcode

How to Model the "Barcode" Integration

Let's suppose you want to add the "BarcodeSample" project the chance to show a company list on which the user can select a company and see the website information as QR Code.

Let's open the Domain Model of the mobile project and add the "Company" class. Click on the "Class" and place it inside the work area to add. Give a name for the class, such as "Company". Let’s add the properties we think that characterize a company. Right-click on the "Company" class and choose the "Edit Class..." option. Press on the "Add" button to add an attribute, type a name for the attribute, for example "VAT Code". Use the same procedure to add the other attributes. Then press the "OK" button.

Let's open the "App View" of the Mobile Project and start to model.

To show the list of all the companies, let's use the "List" view component. Click on the "View Components", choose the "List" item and click inside the "Barcode Sample" screen. Give a meaningful name for the "List" component, such as "Company List". In its Properties View, press the "Select" button next to the "Data Binding" property to choose the class, in this case the "Company" class and press the "OK" button. Press the "Select" button next to the "Display Attributes" property to choose the desired attributes, in this case the "Name" attribute then press the "OK" button.

Press the "Sort" button next to the "Sort Attributes" property to choose the list's sorting. In this case choose the "Name" attribute with ascending sort. Then press the "OK" button.

Now let's add to the project a screen showing the QR Code of the company website. Click on the "View Containers", choose the "Screen" item and place it inside the work area to add it. Type a name for the screen, such as "Company Details".

To show the website information as QR Code, let's use the "Barcode" component. Click on the "Utility Components", choose the "Barcode" item and click inside the "Company Details" screen. Type a name for the "Barcode" component, such as "Company Barcode".

The "Barcode" view component is able to generate a QR Code or a Barcode starting from the information provided as input. It has two main properties:

  • "Format" to specify the format of the generated QR Code or Barcode.
  • "Value Type" to specify the format of the generated QR Code or Barcode.

First of all let's configure which is the type of QR Code or Barcode you want to generate. In its Properties View, set the "URL" value to the "Value Type" property.

In order to generate the barcode, let's use a Select Event with a "Navigation Flow". Click on the "Flows", choose the "Navigation Flow" item, click first on the "List" component and then on the "Barcode" component. Type a name for the "Event", such as "Details".

Double click on the Navigation Flow to provide the company website as input parameter to the "Barcode" view component. Uncheck the "Enable Default Binding" property, bind the website to the parameter and then on the "OK" button to confirm.

How to Emulate on the PC

Generate the project to emulate the mobile application, by pressing on the "Generate and Run" button.

From this section you can run the application on the browser or on your device. Press on the "Open Emulator" button to run the application on your PC.

Press on a company to see its QR Code.