SAP Learning Journey

Working with View Controllers

Objectives
After completing this lesson, you will be able to:

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

  1. Make sure the App.view.xml view file is open in the editor.

  2. Remove the Hello World Text UI element from the view.

    1. Delete the following line:

      Code snippet
      <Text text="Hello World"/>
      Copy code

  3. 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
    <Button text="Say Hello" press=".onSayHello"/>
    Copy code
    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:

  4. 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
    controllerName="sap.training.exc.controller.App"
    Copy code
    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

  1. 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.

  2. 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
    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");
      }

    });
  });
    Copy code

    Result

    The App.controller.js file should be implemented as follows:

  3. 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.

Log in to track your progress & complete quizzes