关于 SAP Spartacus feature library 里的 _index.scss 文件
如下图所示:quick order 文件夹下存在一个 _index.scss 文件,其导入了 styles 文件夹下的 index: 然而,styles 文件夹下并没有 index.scss 文件,只有一个 _index.scss. 但是,ctrl + click 点击上图第一行代码后,会自动跳转到 styles 文件夹下的 _index.scss 文件: 查看这个 @import 的
Angular Public API 接口设计
按照 Angular 官方 Github repo的定义,Angular 的 semver、定时发布周期和弃用政策目前适用于这些 npm 包: @angular/animations@angular/core@angular/common@angular/elements@angular/forms@angular/platform-browser@angular/platform-brow
SAP 电商云 Spartacus UI 支持延迟加载的新功能的入口设计
假设我们要为 Spartacus UI 开发一个新功能,首先,这个新功能,应该放到 feature library 文件夹里: 这个新功能的入口,放置到 Feature Module 中。 新功能通过 public_api.ts 将公有功能暴露给外部消费者。后者从 index.ts 里导入,而 index.ts 又导入 quick-order.module.ts 中的内容。 QuickO
SAP Spartacus module 层级结构设计的一种实践
Reference App Structure 这个推荐的 Spartacus 应用程序结构旨在作为您设置自己的 Spartacus 应用程序时的参考。 Spartacus 是一个 Angular 库,这意味着它可以在 Angular 应用程序中单独使用,也可以集成到现有的 Angular 项目中。相反,您可以将任何其他 Angular 解决方案或库添加到您的 Spartacus 项目中。
各种 SAP 产品的自定义 UI 创建和集成方法一览
这是 Jerry 2021 年的第 70 篇文章,也是汪子熙公众号总共第 347 篇原创文章。 Jerry 之前通过下列两篇文章,介绍了构成 SAP 产品 UI 的逻辑单元:UI 组件和 UI 容器组件。 谈谈 SAP 产品 UI 开发中的组件概念 SAP 产品 UI 里的容器组件的概念和开发概述 对于合作伙伴来说,当 SAP 产品标准 UI 即使通过下面两篇文章介绍的增强技术,也
windows 操作系统里 git bash 和 git cmd 的区别
我们在 Windows10 安装 git 客户端之后,注意到安装文件夹下有 git-bash.exe 和 git-cmd.exe 两个执行文件。有什么区别吗? 参考这个 StackOverflow 讨论链接. Git CMD 就像带有 git 命令的常规 Windows 命令提示符。 它允许您通过命令行使用所有 Git 功能。 如果您已经熟悉 Windows cmd 并且您只在 Windo
SAP 电商云 Spartacus UI 模块延迟加载的入口程序
该入口位于下图第 218 行的 rxjs from Operator 调用: 这里我们将一个函数传入 from: 传入的具体函数如下: 这个函数返回一个 promise,该类型作为 from 操作符的输入类型。这个函数维护在 featureConfig json 对象的 module 字段里: 这个 json 对象是 Spartacus 代码里通过 provideConfi
SAP 电商云 Spartacus UI 的 proxy facade 是如何调用实际实现类
下列代码第 126 行,通过来自 Angular/core 的 Injector,手动注入一个 QuickOrderFacade 的实例: 调用这个 facade 的 get 方法,在执行实际被代理类的业务逻辑之前,需要先延迟加载包含该业务类实现的 core module: 只有当类型为 Observable 的方法才会被处理: 这里我们调用 Rxjs 标准的 Connectab
什么是 SAP Spartacus FacadeFactoryService 中的 Resolver
这个 resolver 只针对 Proxy Facade,根据 feature 名称和 FacadeClass,获取对应的 resolver. 该 resolver 知道怎样将函数调用,投递到该 facade 的具体实现类去。 featureName:cartQuickOrderCore 最后得到实际值:cartQuickOrder 返回 resolver 的逻辑放在一个 d
Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例
可以从 SAP 电商云 Spartacus UI 的实现中找到一个例子。 return this.resolveModuleFactory(moduleFunc).pipe( map(([moduleFactory]) => moduleFactory.create(parentInjector)), concatMap((moduleRef) =>
在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合
先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法(3) 手动通过 injector 注入 QuickOrderFacade(4) 手动通过 injector 注入 QuickOrderFacade,调用其方法 通过构造函数注入 QuickOrderFacade,但不
SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子
如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解释。 本文介绍一个实际例子。 当我们打开如下 url 时,默认是不会触发 Quick Order Core module 的加载的,因为我们根本没有使用到 Quick Order 任何功能:
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
Jerry 之前的文章SAP 产品 UI 里的容器组件的概念和开发概述介绍过,SAP Spartacus Angular Component,通过我们开发团队自定义的指令 cxComponentWrapper 进行渲染。 在运行时,根据 Angular Component 的名称,即第90行 flexType 字段包含的 QuickOrderComponent,我们能够使用 Angular
什么是 SAP 电商云 Spartacus UI 的 proxy façade
Proxy Facades 此功能在 3.2 版本引入。 代理外观是一种灵活的机制,可以从可延迟加载的功能模块中抽象出功能,这种功能抽线,可以对应用程序的任何部分完成,例如组件、服务、指令等。 在延迟加载的配置中,Facade 被定义为一个非常薄的层,它只是一个带有一些元数据的空类,并且这个 Facade 动态地创建了一个 Facade 实现的代理。 下图是一个例子: 一旦代码的任
SAP 电商云 Spartacus UI 的 urlParameter 配置原理
有个同事问我如下的问题: 本地启动 Spartacus 时,打开 localhost:4200, 默认会重定向到 base site,并且 url 自动变更成:http://localhost:4200/electronics-spa/en/USD/ 如何做到不显示 localhost:4200 后面的 electronics-spa/en/USD/ 呢? 在文件 projects\st
不使用任何框架,手写纯 JavaScript 实现上传本地文件到 ABAP 服务器
这是 Jerry 2021 年的第 69 篇文章,也是汪子熙公众号总共第 346 篇原创文章。 采用 SAP UI5 sap.ui.unified.FileUploader 控件,结合 Gateway 框架,实现本地文件上传到 ABAP 服务器,不是一件困难的事情。 但由于项目实施的客观条件限制,如果不使用 SAP UI5 和 SAP ABAP Gateway 这两个框架,又该如何实现呢?
SAP 产品 UI 里的容器组件的概念和开发概述
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 的引导过程 Bootstrap SAP UI5 初学者教程之三:开始接触第一个 SAP UI5 控件 SAP UI5 初学者教程之四:XML 视图初探 SAP UI5 初学者教程之五:视图
SAP 产品 UI 里的容器组件的概念和开发概述
这是 Jerry 2021 年的第 68 篇文章,也是汪子熙公众号总共第 345 篇原创文章。 Jerry 之前的文章,谈谈 SAP 产品 UI 开发中的组件概念,曾经提到,无论基于何等开发技术的 SAP 产品 UI,其呈现在最终用户面前的视觉效果,都是通过若干逻辑意义上的组件(Component)实现的。这些逻辑意义上的组件,代表了 SAP 产品提供给最终用户交互功能的细粒度的封装,比如查询订
OData metadata 定义中,entity type key 的作用是什么
什么是 OData entity type 的 key? 最权威的定义,来自 OData 官网: OData EDM 模型的核心概念是实体 entities 和关联即 associations. Entities 是 OData 模型描述对象的实体类型(例如,客户、员工等)的实例,它们是结构化记录,由name 和强类型属性组成,并带有一个 key. Complex Types(复杂类型)
介绍一个能避免 CORS 错误的 Chrome 扩展 - Moesif Origin & CORS Changer
在前端开发人员做开发时,当进入到和后台 API 联调阶段时,不可避免会遇到 CORS 错误。 本文介绍一个 Chrome 扩展,可以用来在开发阶段避免 CORS 问题。注意,这个扩展不能用于生产用途,以免引起 security issue. Chrome 扩展地址: https://chrome.google.com/webstore/detail/moesif-origin-cors-