手摸手教你写 Fiori ui5

这个同学不太胖
1,175 阅读6分钟

前言

点赞的老师都是小可爱,白嫖请出示健康码

目录结构

想看详细的介绍,在官网可以看到ui5相关资料,这里不作过多赘述,主要介绍部分功能.
detail: ui5.sap.com/#/topic/28b…
ui5.sap.com/#/topic/003…

| － node_modules -- 安装*node*后用来存放用包管理工具下载安装的包的文件夹
| － webapp
|　　|－control -- 用来造轮子的文件夹
|　　|－controller -- 控制器文件夹
|　　|－css -- 引用css样式表文件夹
|　　|－i18n -- i18n 国际化文件夹
|　　|－model
|　　|－test
|　　|－view -- 视图文件夹
|　　|－component.js -- 初始化文件
|　　|－index.html
|　　|－manfiest.json -- 配置文件
| － package.json -- 定义了这个项目所需要的各种模块,以及项目的配置信息
| － ui5-deploy.yaml 可配置 tr

image.png

The webapp Folder

The webapp folder contains all the code that is related to the application. This means running and extending the application using the extensibility mechanism offered by SAPUI5. This includes the JavaScript files for the logic, view files written in xml, html, json or js format, and also files for localization, such as i18n.properties files. Any files that are only relevant for testing should be put inside the test folder. For more details about the webapp folder, see the section below. For more information about extensibility and localization, see Extending Apps and Localization respectively.

The Test Folder

The test folder contains all of the files needed for running automated tests for your application, as well as for launching your application in a sandbox mode so that you can do manual testing. For more details about the test folder, see the section below.

The Model Folder

The model folder is where you put any files needed for creating models and logic relating to model data. This includes grouping, filtering and formatting data.

Descriptor (manifest.json)

We recommend that you use the manifest.json file to configure the app settings and put all important information needed to run the app in there. Using this approach means you need to write less application code, and you can already access the information before the app is instantiated.

Component (Component.js)

The Component.js file holds the app setup. The init function of the component is automatically started by SAPUI5 when the component is instantiated.

package.json

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称/版本/许可证等元数据）。npm install命令根据这个配置文件，自动下载所需要的模块，也就是配置项目所需的运行和开发环境。

name：项目名字

version：版本号

author：作者

main：指定加载的入口文件

config：用来添加命令行的环境变量

scripts：指定了运行脚本命令的npm命令行缩写，比如 start 指定了运行 npm run start 时，所要执行的命令

dependencies：指定了项目运行所依赖的模块

devDependencies：指定了项目开发所需要的模块

ui5：指定了项目开发所需要的 ui5 模块

package.json文件可以手工编写，也可以使用npm init命令自动生成。创建好 Fiori 项目后脚手架会自动配置好 package.json

view 和 controller

sap ui5 采用的是 MVC 模式，代表 Model-View-Controller(模型-视图-控制器) 模式
创建好 ui5 项目后，在 view 文件夹下会有 *.view.xml，它将作为你的 rootView，在 controller 文件夹下便会有此 view 相关的 *.controller.js

view

  • jsView : 官方提供 xml 构建视图的方式, 同时也提供 js api 构建视图, 本人多用于构建轮子中使用
  • xmlView : (file or string in XML format); this type supports a mix of XML and plain HTML.
  • jsonView : (file or string in JSON format),在官方文档中,smart 控件多用于 jsonView,本人理解为low-code,如果理解有误,请务必提醒,谢谢各位老师

Data Binding

detail: ui5.sap.com/#/topic/68b…
使用数据绑定将 UI 元素绑定到数据源，以保持数据同步并允许在 UI 上编辑数据。 这里解释一下双向绑定， -- 视图驱动数据, 数据渲染视图,在 ui5 项目中建议使用官方文档提供的 api 处理双向绑定问题.

image.png

模块化AMD

Asynchronous Module Definition 见名知意，就是异步模块定义，当然是为了解决上述同步加载问题。
AMD对应的就是很有名的RequireJS。

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// ui5中的模块化
sap.ui.define([
	"sap/ui/core/mvc/Controller"
],
	/**
	 * @param {typeof sap.ui.core.mvc.Controller} Controller
	 */
	function (Controller) {
		"use strict";

		return Controller.extend("sellinggasapp.controller.RootView", {
			onInit: function () {

			}
		});
	});
/*
注意 extend 的第二个参数,可以处理多个函数
其中 return 哪个实例, this 就指向哪个.
在造轮子中,多使用 Control 扩展,所以 return Control.extend, 那么 this 则指向 Control
*/

SAPUI5常用的布局标签和样式

Shell、App、Page和Panel

Shell标签是页面上两侧的空白部分，用于在超大页面上显示时能够调整宽度使画面正常显示。

PS:常见问题, 在本地起服务中明明没有使用 shell组件,但部署到 lanchpand 后, app 则显示 shell.

//在 manifest.json 中配置,  如果没有配置 fullWidth 则默认 false
"sap.ui5": {
    "config": {
        "fullWidth": true
    },
}

App标签是为了保证在移动设备上页面也能正常显示。
Page标签表示一个页面。
Panel标签内部封装了值为true的displayBlock属性用于页面内控件分组。

PS:在使用 app,page,panel,DynamicPage 标签时,常报错不能使用该组件(你使用的官方组件),是因为你没有在默认组件下使用该组件

//注意官方文档中 Aggregations部分, 此处用 sap.m 库 page为例
<Page>
    //查看官方 api 中page 组件包含默认组件
    <customHeader></customHeader>
    <content> content(default) </content>
    <footer></footer>
</Page>

所以多注意官方 api 中的 Aggregations 聚合部分,才能正确的使用控件

Margins和Paddings

Margins是调整外边框的属性。

上下左右的外边框同时都调整，SAPUI5提供了以下四种样式，外边框依次变大：
sapUiTinyMargin
sapUiSmallMargin
sapUiMediumMargin
sapUiLargeMargin

如果想分别调整上、下、左、右的外边框，在上面属性后面加Top、Bottom、Begin、End即可：
例如sapUiTinyMargin：
上：sapUiTinyMarginTop
下：sapUiTinyMarginBottom
左：sapUiTinyMarginBegin
右：sapUiTinyMarginEnd
还可以同时调整上下或者左右两个方向的外边框：
例如对于sapUiTinyMargin：
sapUiTinyMarginTopBottom
sapUiTinyMarginBeginEnd

并且还提供了一组负边距样式，它们为元素添加了双面（BeginEnd）负边距。负边距可用于将元素与内置填充对齐。
sapUiTinyNegativeMarginBeginEnd
sapUiSmallNegativeMarginBeginEnd
sapUiMediumNegativeMarginBeginEnd
sapUiLargeNegativeMarginBeginEnd

Padding是调整内边框。

SAPUI5提供了以下三种样式：
sapUiNoContentPadding
sapUiContentPadding
sapUiResponsiveContentPadding


Padding的使用范围有限制，一般适用于容器类的控件中，如Page、Panel、List、Table等。

具体可以在SAPUI5 帮助文档里搜索Margin和Padding详细了解。

链接地址：sapui5.netweaver.ondemand.com/sdk/#/topic

控件生命周期

  • init：

    控件的生命周期主要是由确定你的小控制诞生了！函数在构造函数执行期间由框架调用。在这里做你的初始化东西。

  • onBeforeRendering：在控件的呈现开始之前由框架调用。在每次（重新）渲染之前触发。

  • onAfterRendering：在控件呈现完成后由框架调用。每次（重新）呈现后触发。

  • exit：RIP小控制！在销毁之前清理元素实例。由框架调用。在这里做你的清理。顺便说一句：如果你需要明确地破坏一个控制/元素，你应该调用destroy而不是直接退出。

关于轮子 (占坑)

灵活的运用ui5 控件的聚合关系更有效的提高个人开发 Fiori能力

avatar
文章
阅读
粉丝