OPEN (SAP) UI5 Learning Starter Series III: MVC (bottom)-View and controller

Continue to learn UI5 's MVC model, and this time we'll explore views and controllers.

1View

In MVC, views are used to define and render the UI. In UI5, the types of views can be customized, and you can customize your own view types in addition to the following predefined four view types. The predefined four types of views are as follows:

• XML View
• JSON View
• JS View
• HTML View

If you want to define your own view type, you can do so by extending sap.ui.core.mvc.View the base class.

1.1Loading of views

Views can be loaded asynchronously or synchronously (sync), which is the default way to synchronize. The view's factory function requests and passes in the source code of the view definition synchronously and returns an instance of the view. However, this will cause the UI interface to get stuck while loading the view, and it may cause some functions not to be called properly during initialization of the view. So, to avoid this, you can load the view asynchronously (asynchronous), and all of the view types support the asynchronous way.

Here is an example of a synchronous load view where the view instance is created and placed in a DOM element with ID Uiarea, and the view is then rendered.

var oview = Sap.ui.xmlview ({viewName: "Sample.view"});  The instance is availablenow oview.placeat ("Uiarea");

The following code fragment is an example of an asynchronous Pattern loading view, requesting the view factory function to create a view instance, but at this point the view instance is not ready because the request is an asynchronous pattern, so we cannot use it immediately to put placeAt it in the DOM element. We have to wait for View.prototype.loaded () to finish executing Promise , in then() order to actually manipulate the view that has been instantiated. If you jQuery are not familiar with the asynchronous concepts of recursion, callbacks, and so on, you can read this article 1, if English is good, you can look directly at the official API2 of jquery.

   true }). Loaded (). Then (function(oview) {The instance was available in thecallback function Oview.placeat ("Uiarea");});

1.2Instantiation of a View

In fact, as mentioned earlier, UI5 through sap.ui.view this factory function to instantiate the view.
This factory function can accept the following parameters:

• type:
  Types can be predefined, JSON JS XML or HTML they are defined as enum types, so you can use the sap.ui.core.mvc.ViewType following four-type uppercase strings directly in the reference, for example, to sap.ui.core.mvc.ViewType.XML represent an XML view and, of course, to use a character directly String "XML" is also possible, it is best to use the enumeration type instead of using the string literal directly for normalization purposes.
• viewName:
  The name of the view, the factory function to find the source of the view by this name.
• viewContent:
  Just as with XML views and JSON views, if a view is simple (for example, one or two controls), you can define the contents of the view by this property, and when and when it is viewName viewContent defined, only viewname will work, and viewcontent will be ignored.
• Controller:
  Can be an instance of any controller, and if a controller is given here, the controller defined in the view will be overwritten.
• viewData:
  Only the JS view can use this property, ViewData can be used to save some user-defined data, and in the entire view and the corresponding controller life cycle of this data is available.

1.3Pre-defined view types1.3.1JS View

To set a JS view file only need to make a file name like Xxx.view.js, where xxx is the name of the view, in the materialized view, the name is required to pass to the factory function viewname, of course, remember to add a namespace.

We need to implement the following two methods to complete the definition of JS view:

• getControllerName():
  Specifies the controller that belongs to the view, if the method is not implemented, or if it returns NULL, the view has no controller
• createContent():
  When the corresponding controller is initialized, the method is initialized and will be called only once to initialize the UI.

Sap.ui.jsview ("Sap.hcm.Address", {// This View file is called Address.view.js   Getcontrollername:function() {return "Sap.hcm.Address";// The Controller lives in Address.controller.js},createcontent:function(Ocontroller) {var Obutton=New Sap.ui.commons.Button({text:"Hello JS View"}); Obutton.attachpress (ocontroller.handlebuttonclicked);returnObutton; }});

One thing to note here is that when we define a control in JS view, sometimes we need to define an ID at the same time to make it easy to refer to it, so we need to be aware that we cannot directly give a string literal, and we can do it by an instance method of the class. View.createId(‘idstring‘) The IDs returned in this way are prefixed with the class instance ID that we defined before idstring to ensure uniqueness. But if it's a declared type of view, you don't need to use this Createid method, and the view parser will automatically help us do it.

1.3.2XML View

The XML view file is xxx.view.xml as the file name. An example of an XML view definition is as follows:

<MVC:View controllername="sap.hcm.Address" xmlns="sap.ui.commons" xmlns:MVC="Sap.ui.core.mvc"> <Panel> <Image src="Http://www.sap.com/global/ui/images/global/sap-logo.png"/> <Button text="Press me!"/> </Panel></MVC:View>

One of the issues to be aware of in XML view is the namespace, which is required when defining any of the controls in XML.

1.3.3JSON View

JSON View takes Xxx.view.json as the file name. An example of a JSON view definition is as follows:

{ "Type" :  " Sap.ui.core.mvc.JSONView ", " Controllername ":  "sap.hcm.Address" , : [{ "Type" : ,  "id" /span>: "MyImage" ,  "src" :  "Http://www.sap.com/global/ui/images/global/sap-logo.png" }, {: "Sap.ui.commons.Button" ,  "id" :  "MyButton" ,  "text" :  "Press Me" } ]}

Strings, booleans, and null can be used in JSON view.

1.3.4HTML View

HTML view is a view defined by an HTML tag, and the file name is similar to xxx.view.html. Examples are as follows:

<template data-controller-name= "Example.mvc.test" > Hello
All view-related properties can be defined in tag <template> by using the Data-<property name> method.
2Controller
The logic used by the controller to define the business or page. The controller file must be named Xxx.controller.js. A sample of a controller is defined as follows:
        Sap.ui.controller ("sap.hcm.Address", {   controller logic goeshere});
2.1Life cycle (Lifecyle Hooks)
For different life cycle states of views, having corresponding hooks (Hooks) in the controller allows us to implement specific functions for different states. UI5 provides the following hooks:

 
 

  
  
 
   
onInit()
When the view is instantiated, it is triggered when all the controls have been created.
You can make some changes before the view is displayed, or do some other one-time initialization work.
 
   
onExit()
Triggered when the view is destroyed.
Can generally be used to release resources or to finalize the status of some activities.
 
   
onAfterRendering()
Triggered when the view is fully rendered.
Now that the view appears in the DOM, you can manipulate the DOM elements and modify some of the HTML.
 
   
onBeforeRendering()
Called when the view is re-rendered, note that it is not called when the view is first rendered.
 
  
 
 
3Summarize
MVC is a basic development model of UI5, and whether you have a deliberate understanding of it, but as long as you develop UI5, you must already be using it. I personally think M and C should still be easier to understand, according to the API to define or system-generated file framework is basically no problem. And the problem usually occurs in V, because there are too many controls in the UI5, we cannot grasp the use of all the controls, and even for some familiar controls, there is no chance to practice the usage in all four predefined view models, so many times we don't know how to use a control. At this time, the Explorer in UI5 's help document will be our good friend, which lists the most common examples of usage of the controls. But there are also problems, which is that basically all of the views in the Explorer are defined with XML type, so we need to know how to read the API and how to translate it into the usage of different views, which requires a lot of practice.
Footnotes:1
JQuery callback, deferred object Summary (previous)--jquery.callbacks
2
Category:deferred Object
 OPEN (SAP) UI5 Learning Starter Series III: MVC (bottom)-View and controller