【IDEA-SAPUI5-Walkthrough学习】Step7:JSON Model

最新推荐文章于 2024-08-11 06:12:47 发布

斑布yaa

最新推荐文章于 2024-08-11 06:12:47 发布

阅读量192

点赞数 2

分类专栏：【IDEA-SAPUI5-Walkthrough学习】文章标签： intellij-idea 学习 json 前端框架

本文链接：https://blog.csdn.net/Bamboo_sqz/article/details/136344795

版权

【IDEA-SAPUI5-Walkthrough学习】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了在SAPUI5开发中，如何创建控制器、设置数据模型、以及控制器生命周期方法（如onInit）的应用，还涉及如何在视图中绑定控件属性。重点讲解了App.controller.js中的onInit和onShowHello方法以及JSONModel的使用。

摘要由CSDN通过智能技术生成

学习资料：

SAPUI5学习第二天----（01）index分析+SAPUI5的加载顺序+controller生命周期_sapui5生命周期-CSDN博客

webapp/controller/App.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast",
    "sap/ui/model/json/JSONModel"
],(Controller,MessageToast,JSONModel) => {
    "use strict";
    return Controller.extend("ui5.walkthrough.controller.App",{
    onInit:function(){
        const oData = {
            recipient : {
                name : "World"
            }
        };
        const oModel = new JSONModel(oData);
        this.getView().setModel(oModel);
    },
    onShowHello:function(){
    MessageToast.show("Hello World!");
    }
});
});

相比于上一步
- 添加依赖模块、传参给工厂函数
- 添加工厂函数中Controller子类的方法：onInit（onInit是SAPUI5的生命周期方法之一，在创建控制器时由框架调用，类似于控件的构造函数）
  - 实例化JSONModel：创建常量对象oData（属性recipient中包含附加属性name）并将其赋给JSONModel的对象oModel
  - 在包含该控制器的视图中添加该模块

Controller.extend方法（extend-继承类）：返回sap.ui.core.mvc.Controller类的子类，子类扩展了父类，加了onShowHello方法。第一个参数是子类的名字，任意取，但最好能标识出具

体是哪个js文件，所以是使用【ui5.walkthrough.controller.App】比较好。

webapp/view/App.view.xml

<mvc:View
        controllerName="ui5.walkthrough.controller.App"
        xmlns="sap.m"
        xmlns:mvc="sap.ui.core.mvc">
    <Button
            text="Say hello"
            press=".onShowHello"
    />
    <Input
        value="{/recipient/name}"
        description="Hello {/recipient/name}"
        valueLiveUpdate="true"
        width="60%"
    />
</mvc:View>