SAPUI5应用之组件复用

1. 前提

1.1 需要具备在SAP Web IDE中开发SAPUI5应用的基本知识;

1.2 需要知道如何通过SAP Web IDE部署SAPUI5应用到前端ABAP服务器;

2. 步骤

2.1 创建被调用(Z_CALLED)项目,不选择任何UI5模板.

displayBlock="true" xmlns="sap.m">

2.3 将Z_CALLED项目部署到ABAP服务器端.

2.4 与Z_CALLED类似,创建调用应用(Z_CALLER)

2.5 在Z_CALLER的Component.js文件中,编写加载Z_CALLED 组件的代码

init: function() {

var sUrl = "http://:

/sap/bc/ui5_ui5/sap/z_called";

name: "called.viewZ_CALLED",

id: "myCalledComponent",

url: sUrl

});

// call the base component's init function

UIComponent.prototype.init.apply(this, arguments);

// set the device model

this.setModel(models.createDeviceModel(), "device");

}

displayBlock="true" xmlns="sap.m">

2.7 部署Z_CALLER项目到ABAP服务器

2.8 如果在服务器端单独运行Z_CALLED和Z_CALLED,修改对Z_CALLED和Z_CALLER下index.html做一下小更改,如下修改src的值,即去掉"/../..",只保留"resources/sap-ui-core.js";如果将应用部署到Fiori Launchpad下,则不许修改src的值。

3.结果【ABAP服务器端执行】

3.1 运行Z_CALLED

3.2 运行Z_CALLER

由上图可见,Z_CALLED下的CalledView已经成功的被复用在Z_CALLER应用下;实现SAPUI5组件或视图复用的方法可能不止这一种,我也会继续更新相关技术。备注:视图文件在其他SAPUI5应用的复用,不会影响其对应controller的功能。

从代码中可以看到,其实我们是复用的整个Z_CALLED组件(Component)。 如果有ABAP Web Dynpro的开发经验,会对组件复用理解的更深入。例如ABAP FPM技术其实就是基于ABAP Web Dynpro组件复用和ABAP动态编程而封装出的一种达到框架高度的UI语言。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171223G04FTE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券