Tiny~JJ的博客

SAP Fiori UI5

教程： https://developers.sap.com/tutorials/abap-environment-trial-onboarding.html。参考教程： https://developers.sap.com/tutorials/abap-environment-persistence.html。教程： https://developers.sap.com/mission.cp-starter-extensions-abap.html。直接next–Finish。完成后->Finish。

Data Source :使用SAP 官方的Odata:https://services.odata.org/V2/Northwind/Northwind.svc/定义项目的名字，Module Name ：小写规范 ，选择我们的NameSapce。dule Name ：小写规范 ，选择我们的NameSapce。找到我们的项目 my.fisrt.fiori.demo01。切换的CMD界面（可以不用切换 终端的操作方式）本文用到的SAP 官方的Odata文档。等待即可 首次加载很慢，。定义项目的名字，Mo。

新建webapp里创建manifest.json文件 在根目录里执行ui5 use SAPUI5@latest ，更新ui5.yaml。在 vscode 中输入：npm install --global @ui5/cli 安装UI5。中的"prefix -g"修改为"prefix --location=global",保存。根据提示，执行以下命令，就可以更新npm版本了。在新建的根目录文件下： npm init --yes 初始化界面。尝试之，果然奏效，又可以愉快的npm install 了。

如何找到UI5 Tooling?–通过UI5 Tooling命令 可以启动UI5 的一个应用程序。项目没有文件，请让 npm 生成该文件package.json: npm init --yes。如果您使用的是 Git 或类似的版本控制，请提交 和 到您的存储库。定义要使用的框架: ui5 use openui5@latest。生成文件：ui5.yaml : ui5 init。启动服务器并处理您的项目！:ui5 serve。使用 npm 包管理器安装 CLI。Node npm 环境。

确保你已经为ui5parser正确设置了exclusidefolderpattern属性。如果您有SAPUI5库或不应在工作区中解析的任何其他源，则此属性至关重要。此插件集成了SAP Fiori 的多个插件，安装这个将包含其他Fiori安装插件。此外，建议为JS/TS文件格式化安装例如Prettier扩展。formatOnSave”:真正的。这个插件为UI5开发者提供了额外的好处。

在webapp 的新建文件夹view，在view里面新建App.view.xml文件 （命名空间标识项目的所有资源，并且必须是唯一的）我们将控件的实例化替换为新的 XML 视图。该视图由 SAPUI5 的工厂函数创建，该函数可确保视图已正确配置并可由客户扩展。首先我们在define中声明定义要使用的空间 XMLView。为了区分上面的运行结果，我们改一下视图的文本内容。SAP UI5的视图都放在此文件夹下面。在index.js文件中打断点查看。问题一： 为什么使用xml视图。

我们将控件的构造函数调用链接到标准方法，该方法用于将 SAPUI5 控件放在文档对象模型 （DOM） 或任何其他 SAPUI5 控件实例的节点内。在上面的示例中，事件的回调是我们现在实例化 SAPUI5 文本控件的位置。对于我们的控件，我们将属性设置为值“Hello World”。首先我们得define中声明我们使用的是文本 “sap/m/Text”,function()参数传递类Text ，在前面展示在浏览器中的Hello World 是在Html body标签中，接下来我们展示 文本放在UI5控制中。

在使用 SAPUI5 执行某些操作之前，我们需要加载并初始化它。加载和初始化SAPUI5的过程称为 引导。打开浏览器输入： http://localhost:8080/index.html。打开浏览器F12进调试模式-开发者模式。