SAP前端路---为XML添加Controller

最新推荐文章于 2025-06-14 07:24:31 发布

原创最新推荐文章于 2025-06-14 07:24:31 发布 · 置顶 · 562 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#SAPUI5

openUI5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在SAPUI5项目中为XML视图添加控制器，以实现代码逻辑的分离。作者遵循SAPUI5 SDK的示例，提供了一个包含按钮的demo，并详细说明了创建控制器文件夹、引入控制器到视图以及编写App.controller.js文件的步骤。通过调用sap.ui.core.mvc.Controller.extend来扩展控制器，并利用sap自带的model进行数据操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我也刚刚接触SAPUI5。边学边记录，希望大家不吝赐教。

文章中demo将遵循SAPUI5 SDK中所提供的demo例子。

本文demo地址 https://sapui5.hana.ondemand.com/#/topic/50579ddf2c934ce789e056cfffe9efa9 （本文的demo有我自己的延申和链接里的demo不尽相同，但可参照）

在前文SAP前端路---Hello World入门中我有提到说使用XML进行开发可以将视图和控制器分开，使代码逻辑更加清晰。本文我们将对文件App.view.xml添加控制器 App.controller.js。项目结构如下图

首先建立controller文件夹，以后的控制器文件我们都将写在controller文件夹下，为保持一致性，我们将App.view.xml的控制器文件命名为App.controller.js。

在App.view.xml中引入控制器文件，并添加一个按钮button

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

在controller文件夹下创建App.controller.js文件

sap.ui.define([
	"sap/ui/core/mvc/Controller"
],function(Controller){
	"use strict";
	//sap.ui.demo.walkthrough.controller 告诉控制器控制的是哪个视图文件   此处控制App.view.xml
	return Controller.extend("sap.ui.demo.walkthrough.controller.App",{
		onShowHello:function(){
			alert("hello from button")
		}
	});
});

sap.ui.define([]) []中是引入的sap.ui的核心文件，本例中我们引入sap/ui/core/mvc/Controller文件,在function中我们可以声明参数Controller，此时就可以调用Controller.extend来给页面添加控制器

此外调用sap自带的model 可在define内声明为 sap/m/xxx function(xxx) 即可引入模板xxx

如

//引入消息弹出框toast
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
],function(Controller,MessageToast){})

运行结果