Prerequisites
In order to understand the content of this lesson, make sure you watched the following lessons:
Introduction
In a mobile application, you often need to manage information that is shown to the user. Managing the information means to create, update, or delete information. In this lesson you learn how to model a screen that allows the user to create an object in WebRatio Mobile Platform.
How to Model the User Interaction
Let's suppose you want to add to your "CRM" mobile project a screen that lets the user create a new company. We have already defined the Company object in the Domain Model. 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 the user can insert the company information. Click on the "View Container" section of the toolbar, chooose the "Screen" item and then place it in the work area to add it. Type a meaningful name for the home screen, such as "Company Management".
Let's start modeling the form containing the fields for inserting the company’s data. Let's add a "Form" component. Click on the "View Component" section of the toolbar, choose the "Form" item and then click inside the screen to add it. Give a meaningful name for the "Form" component, such as "Company Info".
The "Form" component is a "View Component" consisting of "Fields" and "Selection Fields" that show an input form to the user.
Now let's add the fields to the form by using the "Edit Form" wizard. Right-click on the "Form" view component to add fields and then choose the "Edit Form.." option. In this dialog, you can add several fields or selection fields. Let's add for each attribute of the "Company" class a corresponding field. Press the "Add Field" button to add a field. Give a meaningful name to the field, such as "VAT Code". Used the same procedure to add the other fields. Then press the "OK" button.
In order to save the company information, the user must be able to confirm the saving and trigger the execution of an action, which creates a new company. Let's add an "Action" to the model. Click on the "Action" item of the toolbar and click inside the work area to add it.
In order to let the user save the company information, let's use a Select Event with a "Navigation Flow". Click on the "Flows" section of the toolbar, choose the "Navigation Flow" item, click first on the "Form" component and then on the "Action". Type a name for the "Event", such as "Save".
How to Model the "Create" behavior
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 create operation. Press the "Action Definition" button and type a meaningful name for the "Action Definition", such as "Save Company". Double-click on the "Action Definition" to open it.
To create a new company, let's use the "Create" operation. Click on the "Operations" section of the toolbar, choose the "Create" item and click inside the work area to add it.
The "Create" operation creates one or more new instances of a Domain Model object.
In our example the operation receives all the information about a new company to be created and stores it. To state that the "Create" operation must create a company let's define the "Data Binding" property. In its Properties View, press the "Select" button next to the "Data Binding" property to associate a class, in this case choose the "Company" class and press the "OK" button.
To state that the "Create" operation is the first operation to be executed, let’s use a "Success Flow". Click on the "Flows" section of the toolbar, choose the "Success Flow" item, click first on the "Input Port" and then on the "Create" operation.
When the execution of the "Create" operation is successful, the "Action Definition" must exit through a "Success Port". Let’s use the "Success Flow" for this purpose. Click on the "Flows" section of the toolbar, choose the "Success Flow" item, click first on the "Create" Operation and then on the "Success Port".
After the execution of the "Create" 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 on the "Flows" section of the toolbar, choose the "Error Flow" item, click first on the "Create" operation and then on the "Error Port".
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. Press the "Select All" button to choose all attributes and then press the "Finish" button to confirm.
To see the saved company information, let's add a "Port Definition Parameter" to the "Success Port". Right-click on the "Success Port", choose the "Add" and then on the "Port Definition Parameter" option. Type a name for the parameter, such as "oid".
Finally let's bind the company key from the create operation to the parameter. Double-click on the "Success Flow". Uncheck the "Enable Default Binding" property. To send the company key provided by the create operation, bind the "oid" attribute with the parameter by pressing the "Guess Binding" button. And then press the "OK" button.
Now that the definition is complete, let's use it in our model. Let's open the "App View".
Let's associate the "Save Company" action definition to the "Action". Press the "Select" button next to the "Action Definition" property to associate an "Action Definition", choose the "Save Company" item and 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 company information provided by the user and run the save, bind the fields with the action parameter, by pressing the "Guess Binding" button. Then press the "OK" button.
Add an other "Screen" in the "App View" to see the company details. Click on the "View Container" section of the toolbar, choose the "Screen" item and place it inside the work area. Type a name for the screen, such as "Company Details".
To show the details of a company, let's use the "Details" view component. Click on the "View Components" section of the toolbar, choose the "Details" item and click inside the "Details" Screen. Type a name for the "Details" component, such as "Company Details". The "Details" view component displays the information of a single instance of a given class. Let's now define the "Data Binding" property. In its Properties View, press the "Select" button next to the "Data Binding" property to choose the Class, in this case choose the "Company" class. Then press the "OK" button. Now let's select all information of the company will be shown to the user in the details. Let's use the "Display Attributes" property for this purpose. Press the "Select" button next to the "Display Attributes" property to choose the desired attributes and then press the "OK" button.
In order to see the company details just saved in the database, let's use a Success Event with a "Navigation Flow". Click on the "Flows" section of the toolbar, choose the "Navigation Flow" item, click first on "Success Event" of the "Action" and then on the "Company Details" component.
Double-click on the "Navigation Flow" to see the "Parameters Binding" dialog. Uncheck the "Enable Default Binding" property. To send the key of the new company and see its details, bind the "oid" Port Parameter with the "Key Condition" by pressing the "Guess Binding" button and then press the "OK" button.
In order to reload the screen after the action execution, let's use an Error Event with a "Navigation Flow". Click on the "Flows" section of the toolbar, choose the "Navigation Flow" item, click first on "Error Event" of the "Action" and then on the "Companies Management" screen.
How to Emulate the Model
Generate the project to emulate the mobile application, by pressing 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.
Let's insert the information about the new company. For the company logo, let's load an image saved on the PC. Click to the icon to select a logo, click the "Take a picture" button and click on the "Select a File" to browse the folders. Select the "apple" logo, click the "Open" button to load the image and click the "Use Selected File" button to confirm the choice.
Finally, press the "Save" button to store the data.