Skip to content

Hello World! Part Two

This Walkthrough Tutorial will show how to create an Application from scratch. This part assumes that you already read Part One

In this part we will see how to:

  1. Create a Class (named Product)
  2. Create a Product Details Form
  3. Create a Product List Form
  4. Insert a menu control at Master Page
  5. Speed up these processes using Wizard

Create a Class

Create a new Bussiness Object model

What is a Business Object Model?

A Business Object is a collection of Classes. Each class can have attributes, associations with other classes, and οperations

From Explorer on the left, right click on Domain and select Add:

  • A modal is displayed
  • Select Empty Business Object
  • Type for name ProductBO
  • Click Add

BOModel

Tip

Use the BO postfix as a naming convention for your Business Objects (ie ProductBO, SupplierBO etc)

A new empty business object tab opens, displaying an empty canvas


Create a Class

We will create a class named Product consisting of some attributes

  • Right click at the canvas, and select New Class
  • Type Product for class name
  • Right click inside the class and select Add Attribute
  • Type Name and select string for data type
  • Insert 2 more attributes:
    • Description (data type: string ) &
    • Price (data type: decimal)

BOModel

Select the Description attribute and from Properties on the right at CONSTRAINTS section check Unrestricted Length

BOModel


Create a Product Details Form

We will create a form to display product information. We will:

  1. Create a form
  2. Setup the model of the form
  3. Insert a textbox and bind it to the name of the product
  4. Insert a button to save the product


Create an empty form:

  • From explorer on the left, insert a new Empty Form
  • Name it ProductForm
  • Select the MasterPage
  • Click Add

BOModel

Setup the model of the form

Form Model

Forms follow the MVC design pattern. At the Model, you design the data model of the Form, using classes that are already defined in your Domain model or creating new ones. You can then bind your model with your UI (View) and access it through code using the Model variable.
You can find more information here

At ProductForm select Model on the right:

  • Hover the plus sign (+) at the bottom
  • Select New Domain Property

BOModel

  • A text area is diplayed
  • Type Product (as Property name) & hit enter
  • Find and select class Product from the dropdown

BOModel

BOModel

Bind to Product Name

Model-View Binding

You can bind attributes from the Forms' Model to various controls. For editable controls (ie Textbox, Checkbox, Bound Table) it is a two-way binding, meaning that any data-related changes affecting the Model are immediately propagated to the matching control(s) and any changes made in the control(s) are immediately reflected in the underlying Model

Go to Toolbox

  • Find the Τexbox control
  • Drag & Drop it inside the body

Select the textbox. Go to Properties :

  • At DATA section
  • Below Model Binding click on the three dots
  • From the tree find and select Product.Name

BOModel

Save

  • Click on Controller at the bottom of the tab
  • Hover the plus sign (+)
  • Select New Controller Action

BOModel

BOModel

  • A new Action is created. Change the Name to Save
  • Add the following code:
function void Save()
{
    Model.Product.Save();
    CloseForm();
}   
  • At Properties check Reset Dirty State

BOModel

  • Go back to tab View
  • Insert a Button and change the caption of the label to Save
  • Add an on click event to the button
  • At the displayed modal, for Controller Action select Save

BOModel

Edit

  • Go to Controller
  • Create a New Controller Action
  • Name the Action Edit
  • At Properties check Is Entry Point
  • Insert the following code
function void Edit(int id)
{
    Model.Product = Domain.Product.GetByKey(id);
    Model.Title = LocalResources.RES_PAGETITLE_Edit;    
}    

BOModel

Create a Product List Form

We will create a form to display all products. We will:

  1. Create a form
  2. Insert a list control
  3. Create a dataset to get the products from database
  4. Insert buttons to add & edit a product


Create an empty form

  • Insert an Empty Form
  • Name it ProductList
  • Select the Master Page

BOModel

Insert a Data List Control

At ProductList, from Toolbox on the right:

  • Find the Data List control
  • Drag & drop it inside the Body

Dataset

Select (double click) the data list. From Properties on the right:

  • At DATA section click on Create a Dataset

BOModel

What is a Dataset?

With datasets, you define how to access data from a specific Datasource (database, external service, operation, etc). You can then bind a Dataset with specific controls (List, Map, etc) so you can display this data. Datasets, among other things, contain filtering sorting and paging semantics

A modal is displayed:

  • First off, select Class Product
  • As you may notice, Name is automatically filled, as well as the operation Get All
  • Click OK

BOModel

Insert columns at a Data List

  • Right cick on the Data List
  • Select Add column

BOModel

  • Click on the column to select it
  • For Caption type Product
  • To select the Member click on the three dots
  • Navigate to ProductDataSet, Item and select Name

BOModel

Insert buttons at a Data List

We will insert two buttons, Add & Edit:

  • Select the Data List
  • Click Advanced Properties
  • A modal is displayed:
    • Hover the plus sign (+) and select New Context Menu
    • For Name type btnAddNew and select Show Always from the dropdown
    • Insert one more button, name it btnEdit and select Show when one line is selected
    • Click OK

BOModel

Select the label of each buton and change their caption to Add New and Edit accordingly

BOModel

Add

Redirection to ProductForm to add a new product:

  • Select the button Add New
  • Go to Properties
  • Add an on click event to the button
  • At the displayed modal:
    • For Action Type select Form Controller Action
    • Select the ProductForm
    • Select Index for Controller Action
    • Click OK

BOModel

Edit

Redirection to ProductForm to edit a selected product:

  • Add an on click event to Edit button
  • At the displayed modal:
    • For Action Type select Form Controller Action
    • Select the ProductForm
    • For Controller Action select Edit
    • For Action Parameters insert: FormControls.List.SelectedItem.Id
    • Hit the enter button
    • Click OK

BOModel

Save, Validate and Build


Reminder

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

Insert a menu control at Master Page

Add a menu control:

  • Find and open Master page from Explorer on the left
  • From Toolbox insert a Menu control at the Body
  • Select it
  • From Properties, at FEATURES section, select as Menu Type the Navigation Bar

BOModel

Click on Advanced Properties. A modal is displayed:

  • Click the (+) plus (on top left of the modal)
  • A menu item is inserted.
  • Select it
  • On the right side of the modal, type as name ProductsMI
  • To insert Display Name click on the three dots and type the name Products at the newly displayed modal

BOModel

NAVIGATION

For On Click Action:

  • Select the three dots
  • At the newly displayed modal select: ControllerAction, ProductList, Index
  • Click OK

BOModel

Note

At this point we have an application that we can configure a product

Save, validate, build & run the application to see the results

Speed up these processes using Wizard

Go to ProductBO:

  • Hover Product class and right click
  • Select Create Master Detail Form

BOModel

A modal is displayed. You may notice that fields are already filled:

  • Model Category: Form
  • Template: Data Entry and List Form
  • Class: Product
  • Form Name: ProductForm
  • List Name: ProductList
  • Create Menu Item is checked
  • Menu Item Name: Products
  • MasterPage: MasterPage
  • Click Add

BOModel

Note

You can either change the form, list and menu item names, either you can overwrite the models we created earlier

BOModel

You will notice that everything we created earlier, is created automatically:

Product List

  • A column for every attribute
  • Two buttons (Add & Edit a product)

Product Form

  • Each attribute is inserted in a form group consisting of a textbox (or textarea) and a label
  • Buttons Save & Delete a product, as well as Exit the product form with the appropriate controller actions

Master Page

  • A menu item that navigates to the ProductList