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 and
Relevant UI controls, such as data fields and push buttons. The controller receives all
Output for rendering. All user input is passed from the view back to the controller for
Processing.

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






User Input (Request)

Get



Set


Data Output (Response)



Controller.Do
Class _Impl
Implementation of
model
Event Handling
Navigation

Model
Context _CTXT
Context Nodes
-CN00
-CN01
- CN02
-
View.Htm
LayOut: BSP EXT Tags
Defining the View
Layout
Page 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