Introduction
Creating a simple application is the most natural way of getting started with 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 and launch a new Web application. You will find out that WebRatio Platform is an extremely supportive tool that makes this a rather simple task.
Creating a New Project
First of all, let's create a new project. After opening WebRatio Platform, click on "File", choose "New", then "Web Project" ption and type a name for your project in the text box in the "New Web Project" window. In this case, we choose the name "HelloWorld" (with no spaces in it), since our Web Application will simply display a welcome message in a window. As you can see, there are several other options that may be configured, but for the time being we will simply leave the default options and click on "Finish".
Main Structure of a Project
Now a View named "HelloWorld" appears. This contains a list of views of your project: the Domain Model, the Site Views, the Service Views, and the Module Definitions. Click each of these elements to discover its meaning.
Navigating Through a Project
You can navigate through the structure of your project in several different ways. In the main work area, you have views that allow you to navigate through different projects. In this case, there's only one View for our "HelloWorld" Project.
In the bottom part of the window you have several tabs. There is always a "Project" tab, which lists the views composing your project, and a "Domain Model" tab. Later, we shall add a Site View, which will have its own tab. In the left window, you can see several more views, all of which provide you with ways of navigating through your project or to different projects.
The WebRatio Explorer View shows a tree structure with all the projects in the workspace, including "HelloWorld". A double click on the "Model.wr" file will open the "HelloWorld" View in the main work area. You can also navigate within a project by using the tree structure in the Outline View.
Adding a Site View
We are now ready to add a new Site View to our project. Back at the Project tab of HelloWorld, we can simply right-click on the Site Views item and select "Add Site View". In the pop-up window, we'll just type a name for the Site View. There are several options that can be checked in this window, but don't worry about them for now. We will simply leave the default options and click on "Finish". As soon as you click on "Finish", a new tab appears with the name we just typed.
Adding a Page to a Site View
The editor is now showing a canvas which you can use to draw the structure of your Site 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 Containers and View Components. We are going to learn all about these components in a later lesson.
For this simple Web application we are simply going to need a Container of the type Page. Note that now the mouse pointer has a "plus" icon in it, which means that when we click on a blank area in the canvas, a new Page element is going to be added. The name of the page can be immediately modified. Note that all the properties of the elements in the canvas can be browsed and edited in the Properties View in the bottom-left window. Note that if we select our "Hello" Page Container, we can see that the property called "Name" has value "Hello".
Adding a Message to a Page
So far, we have created an empty page. 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 as before. We'll not just click on a blank area in the canvas, but rather we'll add the message directly to the page by clicking on it. Again, we can edit the name of this message, which corresponds to the "subject", in the usual way. In addition, we can edit the content of the message directly in the Properties View by clicking on the "Edit" icon of the "Message Text" element.
Steps to Run a Web Application
We have now completed our work on the canvas. In order to actually run our "HelloWorld" Web application, we need to automatically generate the code and layout that corresponds to what we graphically drew on the canvas, deploy the Web application in WebRatio Application Cloud and open the Web application in a browser.
WebRatio Platform offers an awesome facility that allows you to do all of this with a single click! Just click on the "Generate and Run on Cloud" button. In moments, you should see a browser showing the "HelloWorld" Web application with the default template used by WebRatio Platform.