View Containers

IFML Modeling with WebRatio Platform
2,265 views Published on Nov 29, 2013 | Time 11 min
Applies to: 7.2 or higher

The web model is where you use the IFML Web Extensions to build the user interface of your Web application, and where you specify the business logic for each IFML action using a set of predefined operations. In this lesson we introduce the View Containers you can use to organize your Web application. Following lessons include detailed content about the best patterns and practices used to model both user interfaces and business logic.

Transcript

Table of contents

Introduction

This is the first lesson that explains the IFML Model in WebRatio Platform. The IFML model is where you use the IFML Web Extensions to build the user interface of your Web application, and where you specify the business logic for each IFML action using a set of predefined operations. In this lesson we introduce the View Containers you can use to organize your Web application. Following lessons include detailed content about the best patterns and practices used to model both user interfaces and business logic.
The best way to well organize your Web application is to use View Containers. IFML defines a View Container as an element of the interface that comprises elements displaying content and supporting interaction and/or other View Containers. In WebRatio Platform you can use three types of view containers:

  • Site View
  • Area
  • Page

Using these three elements, you can build the overall Web application structure. Let's see each one in detail.

Site View

A Site View is a self-contained portion of an interaction flow model supporting the use cases of a specific user role or device. Examples of site views for a "CRM" Web application are: Sales Manager and Administrator. These two user roles in the Web application have very different purposes. That's why we can easily separate the user interfaces for each role. It’s possible to create different Site Views in the same Web Project. A Site View can contain both Areas and Pages.

To add a Site View to your Web Project, select the "Project" node and click on the "Add..." button placed next to the overall project structure. In the opening dialog, select the Site View option and click "Next". Give the Site View a meaningful name, such as "Sales Manager" and then press "Finish". Ignore for now the other properties, we are going to talk about them later.

The Site View is shown in the Web Project as a new tab in the main editor.

Area

An Area is a View Container composed of Pages and nested Areas for publishing or managing homogeneous content. Examples of areas in a "CRM" Web application are:

  • Companies, which contains the user interfaces to search and view the companies' information.
  • Contacts, which contains all the user interfaces to search and see contact information.
  • Events, which contains all the user interfaces to schedule events with customers.

It's possible to create different Areas in the same Site View. An area can contain both nested Areas and Pages.

To add an Area, right-click on the Site View or ancestor Area in which you want to create the new Area and select the "Add" and then "Area" option. The area is represented by a blue rectangle. A best practice is to give a meaningful name to each object in your project to make it easier to recall the element's purpose.

Double-click on the default name to change it, such as "Companies".

Page

A Page is a View Container that shows View Components to the user. Examples of page in a "CRM" Web application are:

  • Company Search
  • Company Detail
  • Schedule Event

It's possible to create several pages in an Area or Site View. A Page can contain other Pages.

To add a Page, right-click on the element in which you want to create the new Page and select the "Add" and then "Page" option. The Page is represented by a white rectangle with the Page name at the top.

Remember to give the Page a meaningful name by double-clicking on the Page name to change it, such as "Company Search".

View Container Properties

Site View, Area and Page have a set of properties that can be used to specify in detail the meaning of the container. These properties can be set in the Properties View of the desired element and include:

  • Home
  • Landmark
  • Default
  • Protected
  • Secure
  • Localized

Let's see the meaning for each one of these properties.

Home. The Home property specifies that the object is the main one for its category. You must choose a Home Site View from all the Site Views specified in the Web Project, because that Home Site View will be the default one invoked by the Web application when a user lands on it. Inside each Site View there must be a Home object, which can be a Page or another element. In any case, for each Site View there will be a single Home Page that will be shown by default when the user enters a specific Site View. This property is not available on the Area container.

Landmark. A Web application usually has a main menu from which the user chooses the section to see or the feature to use. It's possible to create the menu structure directly from the Web Model. There will be a menu for each Site View. To specify that a specific element is part of the main menu you have to set the Landmark property. This property is available for Areas, Pages, and other elements. Setting this property on nested elements lets you create a menu with different levels.

Default. The Default property can be set over Areas on Pages that are nested into a first level Area. The Default property is similar to the Home one. This property decides which element will be shown to the user when the user chooses to see a specific Area that contains several elements.

Protected. The Protected property specifies that the user must have access rights in order to reach the specific object. Everything contained in that object will be private too and will be subject to the same access restrictions. Access rights are managed by the Web application. A later lesson will show you how to handle access rights.

Secure. The Secure property changes the protocol for the object web address from HTTP to HTTPS. This information is inherited by each element contained by the object having this property enabled.

Localized. The Localized property enables the translation of the labels for all elements contained by the object having this property enabled. This means that you want to let the user browse the content of that element in different languages. The languages list is set in a separate dialog. You can refer to the lesson about localization to learn how to handle it.

 
 

Related Learning Objects