Tell us what you think

We want to create the best possible experience for our learners. Your feedback helps us to improve the experience for everyone.

Working with View Controllers

Objective

After completing this lesson, you will be able to Use view controllers.

Referencing a Controller

Assigning a View Controller

To assign a controller to an XML view, the attribute controllerName can be used in the <View> tag (see the figure Referencing a Controller). The name of the controller class is entered as the value of the attribute.

SAPUI5 loads the controller via the module system.

The XML view shown in the figure is taken from a project in which the webapp folder is registered in the bootstrap script as resource location. For this purpose, the module Id prefix sap.training.exc is assigned to the webapp folder via the data-sap-ui-resourceroots attribute in the bootstrap script.

The controller name sap.training.exc.controller.App is therefore resolved as follows: The prefix sap.training.exc points to the webapp folder. The controller segment following sap.training.exc specifies the controller subfolder as the location of the file to load. The last segment in the controller name represents the file name, whereby the suffix .controller.js is automatically appended. That is, SAPUI5 ultimately loads the file App.controller.js from the controller subfolder.

Note

It generally follows that the file containing the view controller implementation must have the suffix .controller.js.

Typically, view controllers are stored in the controller folder of the project structure. More information about the implementation of a view controller follows in the next section.

Event Handlers

Many controls can trigger events. For example, a sap.m.Button triggers the event press when the user clicks or taps the control. Which events are supported can be looked up in the API Reference in the Events section for the respective control.

In an XML view, event handlers can be attached to events. To do this, an attribute with the name of the event is added to the corresponding control tag, for example, a press attribute to a <Button> tag. The attribute value is then the name of the event handler.

Event handler names that begin with a dot ('.') are assumed to represent a method in the controller. They are resolved by removing the leading dot and calling the method with the resulting name on the controller instance. So, in the example shown, the method onSayHello is called on the view controller when the user clicks or taps the button.

Controller Implementation

As an example, let's look at the file with the implementation of the controller that is referenced by the view discussed above.

Create and Use a View Controller

Business Scenario

In this exercise, you will place a button on the XML view that you created in the previous exercise. To react to the button click, you add a controller to the XML view and implement the corresponding event handler method there.

Template:	Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: `sol/4_views`
Model solution:	Git Repository: https://github.com/SAP-samples/sapui5-development-learning-journey.git, Branch: `sol/5_controllers`

Task 1: Add a Button to the View

Steps

Make sure the App.view.xml view file is open in the editor.
Remove the Hello World Text UI element from the view.
1. Delete the following line:
  Code Snippet
  Copy code
  Switch to dark mode
```
1
<Text text="Hello World"/>
```
Instead, add the following line to the view to create a button labeled Say Hello that, when pressed, will call the event handler method onSayHello in the view controller:
Code Snippet
Copy code
Switch to dark mode
```
1
<Button text="Say Hello" press=".onSayHello"/>
```
Note
The event handler method does not exist at the moment. It will be created in the next exercise step.
Result
The XML view should now look like this:
Add the following attribute to the <mvc:View> tag to define the name of the controller that should be instantiated and used for the view:
Code Snippet
Copy code
Switch to dark mode
```
1
controllerName="sap.training.exc.controller.App"
```
Note
The view controller does not exist at the moment. It will be created in the next exercise step.

Result

The XML view should now look like this:

Task 2: Implement a View Controller

Steps

Create a new file named App.controller.js in the subfolder controller of the webapp folder.
1. Open the context menu for the webapp/controller folder in the project structure.
2. Select New File.
3. In the New File dialog that appears, type App.controller.js and choose OK.
Result
The App.controller.js file is created and displays in the editor.
Add the following code to the App.controller.js file to implement the required view controller with the onSayHello method:
Note
A dialog with the text Hello World is to be displayed via the onSayHello event handler method. For this purpose, the information() method of sap.m.MessageBox is called. The view controller therefore also depends on the MessageBox module, which is why it is listed in the dependency array and as a parameter of the factory function.
Code Snippet
Copy code
Switch to dark mode
```
123456789101112131415
sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/MessageBox"
],
  function (Controller, MessageBox) {
    "use strict";

    return Controller.extend("sap.training.exc.controller.App", {

      onSayHello: function () {
        MessageBox.information("Hello World");
      }

    });
  });
```
Result
The App.controller.js file should be implemented as follows:
Test run your application by starting it from the SAP Business Application Studio.
1. Right-click on any subfolder in your sapui5-development-learning-journey project and select Preview Application from the context menu that appears.
2. Select the npm script named start-noflp in the dialog that appears.
3. In the opened application, check if the button is displayed and the Hello World dialog appears when the button is clicked.

Continue to quiz