Skip to content

Hello World! Part One

This Walkthrough Tutorial will show you how to create an Application from scratch

In this part we will see how to:

  1. Create an empty Application
  2. Create a Master Page
  3. Create a Home Page
  4. Set a Default page
  5. Navigate between pages

Create an empty Application

Click on Create

BOModel

A modal is displayed

  • Select the Empty Project as Template
  • Type a Name for the application
  • Click OK

BOModel

Info

The first time you create a new project, building starts automatically. When it is completed a notification is displayed and you can click run BOModel to browse the generated application

Build process

Βuild process activates the selected Implementation Strategy which translates all your models into native source code. Then, it compiles that code and deploys the compiled artifacts into your deployment environment. A unique URL is created for you, so you can test your application.


Create a Master Page

What is a Master Page?

Master page allows you to create a consistent look and behavior for all the pages (or group of pages) in your application. A master page provides a template for other pages, with shared layout and functionality. Master page defines placeholders for the content, which can be overridden by content pages.

Prerequisites:
- Each form must have a Master Page 1
- Multiple forms can share the same Master Page
- Multiple Master Pages are allowed to co-exist, but a form is allowed to have only one Master Page

From Explorer on the left, right click on Forms and select Add

BOModel

A modal is displayed:

  • Select MasterPage as Template
  • Insert for name MasterPage
  • Click Add

BOModel

A new empty form opens, displaying the View of the form, consisting of the Body and a Form Container

What is a Form Container?

A Form Container is a placeholder where the inner form will be rendered.
Each Master Page must have a Form Container control.


Create a Home Page

Add one more Form from the explorer on the left

  • Select Empty Form as the Template
  • Insert a name
  • Select MasterPage you created in the previous step
  • Click Add

BOModel

Insert a Hello World label

A tab with the newly inserted form opens. From Toolbox on the right:

  • Find the Label control
  • Drag & drop it inside the Body

BOModel

Double click on Label. Its Properties are displayed on the right

  • At Caption type Hello World!
  • From STYLE section below, select Size Extra Large

BOModel

Click on Controller at the bottom of the tab

BOModel

What is a Controller?

The Controller of your form contains methods called Actions.
- Actions are responsible for the business logic of your form, updating the state of the model, saving/retrieving data to/from the persistence layer, etc.
- A Controller Action can be marked as Entry Point. These actions render your form and are accessible from the web browser

Index

An Entry Point Action called Index is automatically created.

  • Build BOModel, and when it is completed
  • Run BOModel to browse the generated application

Info

When you run the application, you will see an error page (404 error code) because no default page is defined. By default, for each Entry Point Controller Action, a route is created based on the Form’s and the Action’s name. In our example, that route will be HomePage/Index, and if you type this in your browser your Form will be rendered.

  • Add to the URL HomePage/Index to test the generated application

Set a Default page

Default Pages

At the Default Pages section of the App model, you can select the Forms that will be rendered in common scenarios, such as not found, unauthorized etc

From the explorer on the left, select Configuration and then app

  • Select Default Pages
  • For Default page select Home Page
  • For Controller Action select Index

BOModel

Executing a Controller Action

When you want to execute a Controller Action there are two options:
- The first one is to execute an Entry Point action of a form. This will redirect you to that form
- The second one is to execute a non Entry Point action of the Form you already are. This will execute the logic of that action, updating your model, without re-rendering the whole Form

Build, and then refresh your application to see the changes


Create one more Form and insert a Label

Go back to Home Page:

  • From Toolbox (on the right), drag & drop a Button inside the Body
  • Double-click on the Button 2
  • From Properties on the right, at EVENTS select On Click (the three dots on the right)
  • A modal is displayed
  • Select the Form you created earlier
  • Select Index for Controller Action
  • Click OK

BOModel

Save, build and run

Remember

Always remember to save your changes.
You can also validate BOModel to check for errors


  1. Except for Partial Views  

  2. Note that the button contains a label 

Back to top