Prerequisites
In order to understand the content of this lesson, make sure you watched the following lessons:
Introduction
Creating a simple mobile application is the most natural way of getting started with mobile apps development in WebRatio Platform. However, you may find it difficult to accomplish this task without getting lost in the many options and features that are available to you. But don't worry! I will walk you through all the steps required to create an launch a new mobile application. You will find out that WebRatio Platform is an extremely supportive tool that makes this a rather simple task.
Mobile Application Introduction
This lesson introduces WebRatio Mobile Platform: the IFML based tool to quickly model and generate mobile applications, starting from an IFML model! In this lesson we are going to build the Hello World mobile application! Let's start!
Creating a Mobile Project
First of all, let's create a new Mobile Project. After opening WebRatio Platform, click on "File" -> "New" -> "Mobile Project" and type a name for your project in the text box in the "New Mobile Project" window.
In this case, we choose the name "HelloWorld" (with no spaces in it), since our application will simply display a welcome message and press the "Finish" button.
Now a View named "HelloWorld" appears. This contains a list of Views of your project:
- The Domain Model.
- The App View.
- The Action Definitions.
Adding a Screen to the App View
Let's start opening the App View and minimizing the other views.
The App View contains the Interaction Flow Model dedicated to your mobile application. In this lesson we are going to put into the App View the Interaction Model needed to show a message to the user.
The editor is now showing a canvas which you can use to graw the structure of your App View. You do this by adding elements to the canvas after selecting them from the left part of the window, which allows you to choose from various options, including View Containers and View Components. We are going to learn all about these Containers and Components in next later lessons. For this simple mobile application we are simply going to need a View Container of the type Screen. Note that all the properties of the elements in the canvas can be browsed and edited in the Properties View in the bottom-left view. Note that if we select our "Hello" screen, we can see that the property "Name" has the value "Hello".
So far, we have created an empty Screen. We now want to add a welcome message to it. To do this, we add a View Component of type Message in the same way before. We'll not just click on a black area in the canvas, but rather we'll add the message directly to the screen bu clicking on it. Again, we can edit the name of this message as we did previously. In addition, we can edit the content of the message directly in the Properties View by pressing on the "Edit" button of the Message Text element.
Steps to Run a Mobile Application
We have now completed our wirk on the canvas. In order to actually run our "HelloWorld" mobile application. we need to automatically generate the code an layout that corresponds to what we graphically drew on the canvas and emulate the mobile app directly on the workstation.
WebRatio Plaform offers an awesome facility that allows you to all of this with a single click!
Just press on the "Generate and Run" button. In moments, you should see a browser showing the Application Dashboard.
This is the Application Dashboard. From this section you can run the application on the browser pressing on the "OPEN EMULATOR" button. Otherwise you can use the WebRatio Mobile Developer App and also scan the QR Code to run the application on your device.
Press on "OPEN EMULATOR" to run the application on your PC.
Congratulations! You have succeeded in running your first mobile application with WebRatio Platform!
If you had any problem during this exercise, please check that you have set up WebRatio Platform correctly.