Understanding sap.ui.define by Hello World
With the introduction of the sap.ui.define function in version 1.28, SAPUI5 introduced support for Asynchronous Module Definition (AMD). AMD is the abbreviation of Asynchronous Module Definition.
The so-called module (Module) is a JavaScript file that can be loaded and executed in the browser.
Asynchronous Module Definition (AMD) is a JavaScript API that specifies a way to define modules and their dependencies so that they can be loaded asynchronously without worrying about the order of loading.
Below we use a specific example to explain the working principle of sap.ui.define.
Create an Application Project for SAPUI5
Open Eclipse and go to the menu option, File -> New -> Other... In the New window, open the node SAPUI5 Application Development and select the Application Project option. Click the Next button.
Provide a name for the project. We call it sapui5.amd.demo. Select the library sap.m and check the Create an Initial View option. Click the Next button.
In the next window, provide a name for the view. We call it the main one. Select Development Paradigm as XML. This will create an XML view. Click the Finish button.
The created project has the following hierarchical structure:
Modify index.html
Open the index.html file and update it with the following code. The Bootstrap script part has been modified to prevent premature loading of the sap.m library. In addition, for similar reasons, the automatically generated code for creating an instance of sap.m.App has been commented out. When index.html runs in the browser, the for loop will print out the initial list of loaded library modules.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<!--
Replace this with the modified bootstrap section below
<script
src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
-->
<!--
Do not load the sap.m library right now.
We'll do it asynchronously in sap.ui.define
-->
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("sapui5.amd.demo");
/*
* Since we are not creating an instance of sap.m.App to
* avoid the loading of sap.m at this stage, comment this out.
*/
/*
var app = new sap.m.App({initialPage:"idmain1"});
var page = sap.ui.view({id:"idmain1", viewName:"sapui5.amd.demo.main",
type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
*/
// Get reference to the Core object
var oCore = sap.ui.getCore();
// Place the XML view in the body of this page
oCore.attachInit(function() {
sap.ui.core.mvc.XMLView({
viewName : "sapui5.amd.demo.main",
}).placeAt("content");
});
// Set the log level to INFO
jQuery.sap.log.setLevel(jQuery.sap.log.Level.INFO);
// Print out the list of all currently loaded libraries
jQuery.sap.log.info("--- Loaded Libraries in INDEX.HTML ---");
var oLibMap = oCore.getLoadedLibraries();
for ( var key in oLibMap) {
jQuery.sap.log.info("Library name", key);
}
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>Modify main.view.xml
Open the main.view.xml file and update it with the following code. It is almost the same as the automatically generated code in Eclipse, except that the title is added.
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sapui5.amd.demo.main" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Asynchronous Module Definition Demo">
<content>
</content>
</Page>
</core:View>Modify main.controller.js
The controller is where AMD-related operations occur. Open the main.controller.js file and update it with the code given below. The important change to note here is that in the first line, the function call sap.ui.controller () has been commented out to make way for the AMD function sap.ui.define (), which has the following syntax:
sap.ui.define(sModuleName?, aDependencies?, vFactory, bExport?)
(1) sModuleName is an optional parameter, which is the name of the module being defined. If omitted, it will be replaced with the name used to request the module. So, if the name of a module such as "LoginModule" is not passed as a parameter, it can be requested as "sap/login/LoginMudule" because it is stored in a file "sap/login/LoginModule.js".
(2) aDependencies is a string array of module names as dependencies.
This array contains the dependent modules that need to be loaded before determining the value of the currently defined module.
(3) vFactory is a mandatory factory function used to calculate the value of the module.
Each dependent module name is passed as a parameter to this factory function in the same order as they are specified in the string array.
(4) bExport is a Boolean variable, reserved for SAP use.
In the example below, no module name is passed. And the dependency string array contains the module name ["sap / ui / core / mvc / Controller", "sap / m / MessageToast"]. Then pass these names as parameters (in the same order, ie Controller, MessageToast) to the factory function.
The code in the onInit lifecycle method of the controller prints out a list of all loaded libraries.
Finally, the onAfterRendering function uses sap.m.MessageToast.show () to display a short Hello World message on the screen.
//sap.ui.controller("sapui5.amd.demo.main", {
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function(Controller, MessageToast) {
"use strict";
return Controller.extend("sapui5.amd.demo.main", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf sapui5.amd.demo.main
*/
onInit: function() {
// Get reference to the Core object
var oCore = sap.ui.getCore();
// Print out the list of all currently loaded libraries
jQuery.sap.log.info("--- Loaded Libraries in INIT of controller ---");
var oLibMap = oCore.getLoadedLibraries();
for (var key in oLibMap) {
jQuery.sap.log.info("Library name", key);
}
},
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf sapui5.amd.demo.main
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf sapui5.amd.demo.main
*/
onAfterRendering: function() {
MessageToast.show("Hello World!");
},
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf sapui5.amd.demo.main
*
*/
// onExit: function() {
//
// }
});
});Note: The literal expression "use strict" was introduced by JavaScript 1.8.5 (ECMAScript 5). It tells the browser to execute code in so-called "strict mode." Strict mode helps to detect potential coding issues early in development, which means, for example, it ensures that variables are declared before they are used. Therefore, it helps prevent common JavaScript pitfalls, so using strict mode is a good practice.
Deploy and Run Application
Start the server and deploy the application. Open a new browser window (this example uses the Chrome browser) and open the Chrome Developer Tools.
Open the following URL in the browser http://localhost:8180/sapui5.amd.demo/
Please use the port number according to your server configuration. Loading index.html will briefly display the Hello World message and will print the log in the developer tools console.
From the printed log information, you can see: The sap.m module is not loaded until the module dependency list is passed to sap.ui.define.
More original articles by Jerry, all in: "Wang Zixi":
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。