OPEN (SAP) UI5 Learning Starter Series III: MVC (UP)-model

This time we come together to study MVC, the topic is divided into two sections, this is the main overview and model, the next focus on the introduction of the view and controller, because the controller does not have much to say, so and the view is merged together.

1Basic concepts of Model View Controller (MVC)

MVC, for most people, says it's a rotten concept. However, since this is an introductory series, I would like to say a little bit.

• M stands for model-models
  Typically used to manage data layers, such as binding background data.
• V represents view-View
  Typically used to handle presentation layers, such as the display of a specific front-end UI.
• C stands for Controller-Controllers
  Generally used to handle logic, but page logic can also be the logic to coordinate processing of data

Different programming languages, as long as there is a front-end interaction, there will generally be the concept of MVC, this concept is figured out, but specific to the level of detail will be different, so the following is for UI5 MVC.

Figure 1: The relationship between MVC

The main purpose of MVC is to separate the presentation from the logic and data, making the program easier to read, easier to understand, and thus more maintainable, while also increasing scalability.

Views and controllers are typically 1:1 counterparts, but you can also create a controller without a view, which is called an application controller, and Application Controller you can create a view without a controller.

2The model concept in UI5

As mentioned earlier, the main function of the model is to provide data, such as how to get the data from the background database, how to update the background data and so on.

The UI5 provides the following predefined models:

• JSON Model:
  belongs to the Client-side model, so it is more suitable for small datasets, and the JSON model supports two-way binding.
  Class Name: Sap.ui.model.json.JSONModel
• XML model:
  Also belongs to the client model.
  Class Name: Sap.ui.model.xml.XMLModel
• Resource model:
  This is very special, it is through the resource bundle (Resource bundle) way to process the data, generally we can use it to do more language processing.
  Class Name: Sap.ui.model.resource.ResourceModel
• OData Model:
  belongs to the server-side model, so the resource URL of the server-side OData must be provided to bind to the corresponding UI5 control server-side.
  Class Name: Sap.ui.model.odata.ODataModel

2.1Binding mode

Here is the concept of a binding mode (binding model), bound mode is how the data resources are bound, UI5 inside the binding mode has three kinds:

• One way: unidirectional binding from model to view. We can simply assume that one-way binding is a read-only binding, and if the value of a field in the view changes, it does not affect the model. If you want to update the data, you must manually control the update data to the model through the controller, and then all the fields that the model binds to the view are automatically updated once.
  View(UI: input box value)–manually update–> Model –automatically–> View 1

• Two way: From model to view and view to model bidirectional binding, if the value of a field in the view changes, the model is automatically updated, and the model is bound to other control data of the view.
  View(UI: input box value)–automatically–> Model –automatically–>View
• One time: Once binding, some like unidirectional binding, but if the model is changed, the system does not automatically refresh the data, so it is generally used to bind static text.

Table 1: model and corresponding supported binding modes

Model	one-way	Two-way	one-time
Resource model	--	--	X
JSON model	X	X	X
XML model	X	X	X
OData model	X	X	X

2.2Binding type

Knowing the binding pattern, let's look at the binding type, which is simply the problem of how the binding pattern is handled, and what the binding type is dealing with. Three types of bindings are available in UI5.

2.2.1Property Binding

The property binding allows certain properties of the control to be directly bound to the data of the model so that it can be automatically initialized and automatically refreshed when background data changes.

There are two ways of defining a property binding:

• Binding in an object through the control's constructor seetings
• Binding through a method of a control bindProperty

The most common way is to directly bind the model directly using the settings object of the constructor, such as:

var Otextfield New Sap.ui.commons.TextField ({    "{/company/name}"});

Make a little note that when you have multiple data models bound to the current control and ancestor controls, you need to add the model name to the bound field, such as "{Mymodel>/company/name}".

If you need more definitions for this binding, you can follow further, with the following extended syntax format:

var Otextfield New Sap.ui.commons.TextField ({value: {           "/company/name",            Mode:sap.ui.model.BindingMode.OneWay   }});

Here you explicitly assign the bound model fields path , and note that there is no need for braces.

The method of the control bindProperty provides more options that allow the user to bind at a later time instead of initializing.

Otextfield.bindproperty ("value""/company/name");

and a similar

Otextfield.bindproperty ("value", {   "value",   newSap.ui.model.type.Integer ()});

There are some controls that are further encapsulated, such as text boxes, which value are often used to bind the properties of the model, so the method is provided directly bindValue for ease of use.

Otextfield.bindvalue ("/company/name");

UI5 also provides this property method when more processing is required for the bound field, rather than a simple one-to binding, formatter as follows:

Otextfield.bindproperty ("Value","/company/title",function(svalue) {returnsvalue && svalue.touppercase ();}); O Control =New Sap.ui.commons.TextField({value: {path:"/company/revenue",Formatter:function(Fvalue) {if(Fvalue) {return ">"+ Math.floor (fvalue/1000000) +"M"; }return "0"; }    }})

Examples of using constructors and bindProperty methods to format the fields to be bound are provided in the example.

2.2.2Aggregation Binding

Aggregation binding is mainly used to bind the child control, the corresponding model data structure must conform to a certain tree-like structure relationship.

Similarly, like the property binding, the model can be bound by the object of the control constructor or by a settings bindAggregation method, but there is a difference that the Aggregation binding needs to be specified so-called template because the property A binding is a field in which a data entry is bound to a control, a one-to-many binding, and a aggregation binding is a set of data bound to a set of controls, such as binding multiple sales orders to multiple items in one table control, and one array to another. The so-called template actually is that we create an item, and then the system will refer to the item that we created when it is render, and copy multiple identical items and bind the corresponding data. Can be imagined as two arrays, one is an array of data, one is an item control array, the data has been determined, but the system does not know which item to create to bind the data, we need to help it create one, next, the system will create and the data array of the same number of item control, and binds the data to the same index as the data array.

var oitemtemplate New Sap.ui.core.ListItem ({text:"{name}"}); var Ocombobox New Sap.ui.commons.ComboBox ({    items: {                "/company/contacts",                 template:oitemtemplate        }});

or by using a method to bind:

Ocombobox.bindaggregation ("items""/company/contacts"new  Sap.ui.core.ListItem({text:"{name}"});

2.2.3Element Binding

The Element binding allows us to bind a particular object of the model data to a control (not a property of the control), so that we can use the property aggregation subordinate objects bound to this level of the model directly in the control or in other words, Allows us to use relative paths when binding data.

Such as:

Ocontrol.bindelement ("/company"); Ocontrol.bindproperty ("value""name");

The Element binding usage scenario is relatively simple, and here is not much to say.

3Analysis and summary

This time we learned about the concepts, types, and how to use the models in UI5. As a set of front-end UI libraries, SAP's focus is on enterprise-level data interaction and presentation, so data models and data binding are particularly important, and there is a chance to explore the output of back-end models together, such as NetWeaver and how they are provided in Hana.

Footnotes:1

Refer to Https://www.youtube.com/watch?v=vY5_ifnvDa8 at 7:02.

OPEN (SAP) UI5 Learning Starter Series III: MVC (UP)-model