Show TOC

Step 5: ControllersLocate this document in the navigation structure

In this step, we replace the text with a button and show the “Hello World” message when the button is pressed. The handling of the button's press event is implemented in the controller of the view.

Preview
Figure 1: A Say Hello button is added
Coding

You can view and download all files in the Explored app in the Demo Kit under Walkthrough - Step 5.

webapp/view/App.view.xml
<mvc:View
   controllerName="sap.ui.demo.wt.controller.App"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Button
      text="Say Hello"
      press="onShowHello"/>
</mvc:View>

We add a reference to the controller, and replace the text control with a button with text “Say Hello”. The button triggers the onShowHello event handler function when being pressed. We also have to specify the name of the controller that is connected to the view and holds the onShowHello function by setting the controllerName attribute of the view.

A view does not necessarily need an explicitly assigned controller. You do not have to create a controller if the view is just displaying information and no additional functionality is required. If a controller is specified, it is instantiated after the view is loaded.

webapp/controller/App.controller.js (New)
sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("", {
   });
});

We create the folder webapp/controller and a new file App.controller.js inside. For now, we ignore the code that manages the required modules. We will explain this part in the next step.

Note

The "use strict"; literal expression was introduced by JavaScript 1.8.5 (ECMAScript 5). It tells the browser to execute the code in a so called “strict mode”. The strict mode helps to detect potential coding issues at an early state at development time, that means, for example, it makes sure that variables are declared before they are used. Thus, it helps to prevent common JavaScript pitfalls and it’s therefore a good practice to use strict mode.

webapp/controller/App.controller.js
sap.ui.define([
   "sap/ui/core/mvc/Controller"
], function (Controller) {
   "use strict";
   return Controller.extend("sap.ui.demo.wt.controller.App", {
      onShowHello : function () {
         // show a native JavaScript alert
         alert("Hello World");
      }
   });
});

We define the app controller in its own file by extending the Controller object of the SAPUI5 core. In the beginning it holds only a single function called onShowHello that handles the button's press event by showing an alert.

Conventions
  • Controller names are capitalized

  • Controllers carry the same name as the related view (if there is a 1:1 relationship)

  • Event handlers are prefixed with on

  • Controller names always end with *.controller.js