Model View Controller Design Pattern Overview

Business Server Pages (BSPs) can be created using different programming paradigms and design patterns. But the CRM Web Client UI BSP is based on the Model View Controller (MVC) paradigm. MVC is a widely accepted design pattern for developing object-oriented user interfaces (UIs). It provides an effective way of relating UI layouts to an underlying data model.

An MVC application consists of the following:

1. Model 2. View 3. Controller

1. Model: The model of the CRM Web Client UI BSPs consists of contexts and context nodes

that link the fields of a view to the underlying business layer (the BOL). This linking is referred to as binding. Each data field on a view visualizes an attribute of a

context node. Each attribute of the context node is connected to a field in BOL Structure.

2. View:The view handles the visual output. It is responsible for rendering the output andRelevant UI controls, such as data fields and push buttons. The controller receives allOutput for rendering. All user input is passed from the view back to the controller forProcessing.

3. ControllerThe controller handles the interaction logic and provides the connection between aview and a model of an MVC application. A controller receives all keyboard andmouse input from the view. Based on these events, the controller can decide how toreact (for example, by accessing data from the model or triggering the navigation to adifferent view).

User Input (Request)

Get

Set

Data Output (Response)

Controller.DoClass _Impl Implementation of

model

Event Handling

ModelContext _CTXTContext Nodes -CN00 -CN01 - CN02

View.HtmLayOut: BSP EXT TagsDefining the View LayoutPage Attributes_CN00, _CN01, _CN02

The controller is the first element that is instantiated when the system navigates to specific view. It triggers the context class and that itself instantiates the context nodes.

The context nodes are the link between the input fields on the view and the data model in the BOL. For each Business object used in BOL, there is one context node necessary. The context nodes follow the same hierarchy as defined in the data model.

Data are transported from Model to the view automatically through controller.

View does not contain any logic. It just uses BSP Extensions which generates HTML Coding and uses ABAP as Scripting Language.

All user inputs are handled by controller. The data are transferred to Model and then context nodes then Updates the BOL.

In case the user pressed a button (Event) the controller contains the logic what to do with this click like navigate.

Whenever a user action is taken then view controller implementation class is triggered first, because event handler method is defined here in the _IMP Class.

The views and their corresponding controllers and contexts of CRM Web Client UI components can be accessed in the BSP WD Component Workbench (transaction BSP_WD_CMPWB) by clicking Views in the Browser Component Structure.

In CRM WebClient UI components, each view has its own view controller. For example, the view BTSHeader.htm would have the corresponding controller BTSHeader.do