Step 5: Controllers

介绍

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.

1.练习效果

2.源码

You can view and download all files at Walkthrough – Step 5.

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.

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.

4.Note

The “use strict”; literal expression was introduced by 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.

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.