Introduction
The interaction between a mobile application and a device is sometimes useful for certain functions. In our example, the user selecting a course from a list can save it as a reminder in the device calendar app. This lesson shows you how to integrate your mobile application with the device calendar app using WebRatio Mobile Platform.
How to Model the User Interaction
Let’s suppose you want to create an application showing a list of courses. The user can the select a course and add it as appointment to his device calendar.
Let's create the "CRM" mobile project. Click on "File" menu, choose the "New" and then "Mobile Project" option. Give a meaningful name for the Mobile Project, such as "CRM" and press the "Finish" button to confirm.
Let's open the Domain Model of the Mobile Project and add the main "Course" class. Click "Class" item in the toolbar and place it in the Domain Model area to add. Type a meaningful name for the class, such as "Course".
Let’s add the properties we think that characterize a course. Right-click on the "Course" class and then choose the "Edit Clas..." option. Press the "Add" button to add a new attribute to the class. Type a name for the attribute, for example "Title". Then add with the same procedure the other attributes. Press the "OK" button to confirm the procedure.
Let's open the "App View" of the Mobile Project and start to model. First of all, let's add a "Screen" view container where you show the courses list. Click "View Container" section in the toolbar, choose the "Screen" item and place it in the work area to add it. Type a meaningful name for the home screen, such as "Courses".
To show the list of all the courses, let's use the "List" view component. Click "View Components" section in the toolbar, choose the "List" item and then click inside the "Courses" screen. Type a name for the "List" component, such as "Courses". The list of elements to be shown can be defined by using a "Data Binding". Let's now define the "Data Binding" property. Press the "Select" button next to the "Data Binding" property to choose the class, in this case choose the "Course" class and then press the "OK" button. Now let's select which information of the course will be shown to the user in the list. We can use the "Display Attributes" property for this purpose. Press the "Select" button next to the "Display Attributes" property to choose the desired attributes, in this example we are going to select the title, start date and location. Press the "OK" button to confirm. Let's suppose that we want the list to be sorted by start date. We can use the "Sort Attributes" property for this purpose. Press the "Sort" button next to the "Sort Attributes" property, choose the "Start Date" attribute with ascending sort and then press the "OK" button.
In order to add a course to the calendar, we need to use an "Action". Let's add an "Action" to the model, by selecting the "Action" item in the toolbar and click inside the work area to add it.
In order to let the user select a course from the list, let's use a On Select Event with a "Navigation Flow". Click "Flows" section in the toolbar, choose "Navigation Flow", click first on the "List" component and then on the "Action". Type a name for the "Event", such as "Add Course".
How to Model the "Calendar" Integration
An "Action" is a container of operations and these operations should be defined in a dedicated section of the model.
Let's open the "Action Definitions View". First of all, let's add an "Action Definition" where you model the "Calendar" operation. Press the "Action Definition" button. Type a meaningful name for the "Action Definition", for example "Add Course". Double-click on the "Add Course" action definition to open it.
To add an event to the device calendar, let's use the "Calendar" operation. Click "Utility Components" section in the toolbar, choose the "Calendar" operation and click inside the work area to add it. Type a name for the operation, such as "Save Course".
The "Calendar" operation interacts with the native device calendar and is capable of adding events. In our example the operation uses the course information parameters in order to add this event to the device calendar. The Calendar operation has two working modes:
- "Save Event" to add event to the calendar.
- "Open Calendar" to open up the calendar at a specific date.
To state that the "Calendar" operation is the first operation to be executed, let’s use a "Success Flow". Click "Flows" section in the toolbar, choose "Success Flow" item, click first on the "Input Port" and then on the "Calendar" operation.
To specify the inputs required by the "Action Definition" you have to add parameter to the "Input Port", which represents the entry point. Right-click on the "Input Port" and choose the "Input Port Wizard..." option. Choose the parameters to add and press the "Finish" button to confirm.
When the execution of the "Calendar" operation is successful, the "Action Definition" must exit through a “Success Port". Let’s use the "Success Flow" for this purpose. Click "Flows" section in the toolbar, choose the "Success Flow", click first on the "Calendar" operation and then on the "Success Port".
After the execution of the "Calendar" operation, if an error occurs then the "Action Definition" must exit through the "Error Port". Let’s use the "Error Flow" for this purpose. Click "Flows" section in the toolbar, choose the "Error Flow", click first on the "Calendar" 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". Let's associate the "Save Course" action definition to the "Action". Press the "Select" button next to the "Action Definition" property to associate an "Action Definition", in this case choose the "Add Course" action definition. Then press the "OK" button.
The "Navigation Flow" also provides information to the "Action". Double-click on the "Navigation Flow" to see the "Parameters Binding" dialog. Uncheck the "Enable Default Binding" property. To send the course information selected by the user and run the save into calendar, bind the information with the action parameter. Use the "Guess Binding" button for the course information and the "Output Parameters" that have the same name. Then press the "OK" button.
In order to back to the list after the save of the course in the calendar, let's use a Success Event with a "Navigation Flow". Click "Flows" section in the toolbar, choose "Navigation Flow" item, click first on "Success Event" of the "Action" and then on the "Courses" screen.
In order to back to the list without save the course in the calendar, let's use a Success Event with a "Navigation Flow". Click "Flows" section in the toolbar, choose "Navigation Flow" item, click first on "Error Event" of the "Action" and then on the "Courses" screen.
How to Emulate with WebRatio Developer App
Generate the project to emulate the mobile application.
To show the calendar behavior you need emulate with the use of the WebRatio Mobile Developer App to allow the interaction with the native device calendar. Press on the "Scan QR Code" button to download the mobile app on the device.
Select a Course to add to the device calendar.
You can see the device calendar that is opened after the execution of the "Calendar" operation. Press the "Save" button to confirm.
Click on the event to see the details.
Press on the "Back" button to return to the device calendar and again press on the "Back" button to return to the app.