SAPUI5
文章平均质量分 86
xiayutian_c
欢迎同行的兄弟姐妹们一起交流学习
展开
-
SAP ScreenPersonas
跟着这个练习做一遍就了解了Personas。原创 2024-06-21 13:32:31 · 281 阅读 · 0 评论 -
笔记-Building Apps with the ABAP RESTful Application Programming Model-Week3
Week3Unit 1: The Enhanced Business Scenario本节介绍了将要练习的demo的业务场景,在前两周成果的基础上,也就是只读列表,也可以说是报表APP基础上启用了事务能力,也就是CURD以及自定义业务功能的能力,从创建基本的behavior definition,然后behavior definition projection,同时介绍了EML(Entity Manipulate Language),使用EML实现实际的业务逻辑,然后扩展到了validations,d原创 2024-04-06 16:06:10 · 1121 阅读 · 1 评论 -
UI5 Tooling
UI5 Tooling是一个基于Node.js开发的开源项目。它提供了一个模块化的、可配置的和可扩展的命令行接口,为应用程序、库和重用组件的高效开发定制了UI5框架。开源工具重用,灵活扩展,宜集成,先进语言特性,多IDE适用。总之,好用高效。从架构去了解UI5 Tooling,我的理解是首先它是一组命令行工具,基于NodeJS集成了File System,Project,Logger,Server,Builder这几个模块,不但可以本地执行,还可以用于SAP webIDE以及SAP Business原创 2022-06-28 22:26:26 · 516 阅读 · 0 评论 -
SAPUI5-Formatter实现动态背景图片
有点潦草,但应该能看懂两种方法实现图片的动态路径:方法一:XML View 中使用src属性<Image src="{imgModel>/location}">在对应Controller.js中,通过动态指定Model的location值实现使用不用路径(首先使用jQuery.sap.getModulePath取得当前app绝对路径)的图片: var sRootPath = jQuery.sap.getModulePath("cn.bmwbrilliance.wit_.原创 2020-06-30 17:48:29 · 323 阅读 · 0 评论 -
如何在WEBIDE个人版中添加其它版本的资源库
SAP 资源库不断的在更新,怎么在本地的WEBIDE中使用新版本中的控件呢?答案就是添加相应版本的SDK到本地的resource库1. 下载所需要版本的源这里下载所需要的SDK2. 添加源到WEBIDE只需要解压resource和test-resource这两个文件夹到本地WEBIDE路径下,参照本地orion所在的目录路径在这个路径下对应下载的SDK的版本新建一个文件夹,我下的...原创 2019-03-26 15:36:58 · 717 阅读 · 0 评论 -
Walkthrough-Step19 Reuse Dialog
窗口复用是一个非常常见和重要的能力,一定要熟练再熟练。脱离IDE,脱离输入帮助,notepad里写也要能写出来才可以。这个也是面试Fiori开发的一个必问问题。理解Step19后就可以理解UI5中是如何服用组件的。首先,想象一下,要想跨View或是跨app之间公用Fregement,它的初始化和Open方法的实现一定是在能全局访问的组件中,比如component.js所以首先看compon...原创 2020-02-21 22:51:05 · 320 阅读 · 0 评论 -
CDS View-Part18 不用JS和HTML做Fiori之条形图+甜甜圈图
闲来无事跟着帖子做个甜甜圈图和条形图原文:https://sapyard.com/cds-part-18-bar-chart-donut-chart-using-cds-views/最关键的就是理解CDS View中各个Annotation关键字的含义,理解之后,如果客户没有过多客制化需求,做一个Fiori App可以非常之高效。我想这也是SAP的努力所在。条形图原文分6步,太细了,两步就行:后端CDS开发、并暴露注册OData,对照下图和编号依次是:(1):使用IDE工具Eclip.原创 2020-06-27 16:56:16 · 480 阅读 · 0 评论 -
Walkthrough-Step16 Dialogs and Fragments
Fragment是没有Controller的可重用轻量级UI元素,当遇到多个页面都需要重用的页面片段时,或者不同的情况下需要使用不同页面片段时(比如根据用户角色,不同的用户,有的是显示,有的是编辑 )Fregment就是首要选择。一个Fregment可以由1到n个控件组成。在运行时,控件放置在View中的和放在Fregment是一样的,这意味着在呈现时,Fregment中的控件将被包含到Vie...原创 2019-04-03 17:55:04 · 214 阅读 · 0 评论 -
Walkthrough-Step15 Nested Views
页面的复用,这节主要是把之前页面中的panel分离出来单独做一个view,它有自己单独的处理逻辑,这样就可以方便了view的复用webapp/view/App.view.xml<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core...原创 2019-03-29 17:37:53 · 187 阅读 · 0 评论 -
Walkthroug-Step14 Custom CSS and Theme Colors
文件结构中加入新的文件夹css和新的文件css.stylewebapp/css/css.stylehtml[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn { margin-right: 0.125rem}html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn { margin-...原创 2019-03-29 17:14:19 · 224 阅读 · 0 评论 -
Walkthrough-Step13 Margins and Paddings
Margins 边距Paddings内边距这里用sapUiResponsiveMargin给panel的周转加了一些空间,这里的Margin也会自动适应不同的屏幕。用sapUiSmallMarginEnd给按钮和输入控件中间加入了一些边距。sapUiSmallMargin对最后一个控件进行了边距控制...原创 2019-03-29 16:54:57 · 237 阅读 · 0 评论 -
Walkthrough-Step12 Shell
Shell就是一个壳,它可以做为app的一个root元素,它可以用来自动调节以适应不同设备屏幕的显示。如下图,在屏幕比较宽时两边可以出现一定宽度的条幅。应用也很简单,XML View中在<app>的上层加一层<shell>标签即可加了shell出不来,什么情况!!...原创 2019-03-29 16:02:22 · 185 阅读 · 1 评论 -
Walkthrough-Step11 Pages and Panels
这一节开始加入更多的页面控件,控件的用法在官方的API Reference中可以看到很详细的说明,只要学会怎么去查API还有控件之间的关系和限制,就是控件的aggregations因为之前是通过向导创建的XML View,自动创建的代码中已经有了Pages和Page标签,再加一个Panel 来对比差别<mvc:View xmlns:core="sap.ui.core" xmlns:m...原创 2019-03-29 15:29:23 · 268 阅读 · 0 评论 -
Walkthrough-step10 Descriptor of Application(Manifest.json)
这节主要是介绍应用的描述文件Manifest.json可以把应用的一些配置信息都放到这个manifest.json里面,UI5提供了API来检索相应的配置信息,同时,当需要把这个app放到Fiori Launchpad的时候,一些相应的配置信息也会被Fiori Launchpad读到。manifest.json文件是一个使用JSON格式来保存应用所需要的全局设置和参数。包括三个由names...原创 2019-03-28 14:45:14 · 200 阅读 · 0 评论 -
Walkthrough-step9 Component Configuration
前面Step4 5 7包括8用到了MVC的概念,这一步用的是另一个很重要的结构组件Component。我们可以把UI assets装到一个index.html之外的一个独立的组件中,组件是可以被复用的,我们访问资源的时候就可以直接关系到这个组件而不是再关系到index.html。这种形式使APP更容易的被周围的Container使用,比如Fiori Launchpad。**webapp/Co...原创 2019-03-28 11:01:19 · 196 阅读 · 0 评论 -
Walkthrough-step8 Translatable Text
多语言,相当于SAP GUI中的数据元素的translate,WEB应用的SOTR_EDIT把UI中的文本放到一个单独的文件中,这样集中进行维护,方便翻译至其它语言。这个国际化的过程简称 i18n( internationalization 这个单词,取首位两个字母,中间字母数为18), 在SAPUI5中通过数据绑定来绑定一种特殊的resource model来实现的,区别是绑定时前面没有...原创 2019-03-27 17:36:46 · 228 阅读 · 0 评论 -
Walkthrough-step7 JSON Model
MVC的结构让代码更清晰,分工更明确,维护也更轻松。step7介绍了Model中的一种类型JSON Model,示例增加了一个输入控件,并且与对应的Model进行绑定,从而实现对控件数据的控件通常View和Controller是1:1的关系,但也有可能是Controller并没有对应的UI,那些称为应用控制器,或者是没有Controller的View。** Model **Model...原创 2019-03-27 15:09:36 · 181 阅读 · 0 评论 -
Walkthrough-step6 Modules
Modules可以理解成一个个已经编写好的可以拿来就用的功能,比如本节用到的MessageToast通过layout Editor往页面上拖入一个按钮,改text指定Press所调用的事件,向导会自动生成controller文件并且增加onClickMe事件sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller...原创 2019-03-27 13:32:26 · 213 阅读 · 0 评论 -
Walkthrough-step5 Controllers
这节的示例是页面中一个按钮,点击后相应的事件响应这一节使用了一个按钮控件,用Controller来处理按钮的press事件。首先修改App.view.xml<mvc:View controllerName=".controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Button ...原创 2019-03-26 15:07:57 · 150 阅读 · 0 评论 -
Walkthrough-step4 XMLView
SAPUI5支持多种视图类型(XML、HTML、JavaScript),主要是以XMLview为主,官方的示例也以XML为主。所以先学XMLview肯定没错,理解了什么是XML标签什么是XML属性,还有命名空间之类的基础知道 ,编码会一目了然。(最新版本很多不方便,CDN速度也时快时慢,还以为代码出了问题,所以还是用回了本地的库)webapp/index.html<!DOCTYPE...原创 2019-03-26 14:49:02 · 189 阅读 · 0 评论 -
Walkthrough-step3 Control
控件,sapui5提供了很多控件可以直接拿来用,但是很重要的一点是用前一定确认控件适用的core版本(没办法src只能用CDN的,本地的版本太低)** webapp/index.html **<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>new ...原创 2019-03-25 16:41:19 · 243 阅读 · 0 评论 -
Walkthrough-step2 Bootstrap
这一节的关键点是Bootstrap,字面意思是引导程序,我觉得可以理解成框架的意思,核心的JS源,引入了SAPUI5的Bootstrap才算是在UI5的架构写运行的程序,正常情况下我们可以在HTML中嵌入JS来弹出提示框,但这次要做的是引入SAPUI5的Bootstrap后弹出提示框。SAP官方网站有一章节专门解释了源的加载和初始化Bootstrapping: Loading and Ini...原创 2019-03-15 16:39:47 · 263 阅读 · 0 评论 -
Walkthrough-step1
两年前开始接触sapui5并且做了第一个UI5项目,一年左右的时间学了皮毛又放下了,做了点笔记(guojz3.github.io)又因为图床”幸运“地选择了七牛,一下全打不开了,大爷!也好,重新来过,walkthough一直是我强烈推荐给身边学习UI5朋友的入门教程,跟着做两到三遍,一个关键字一个关键字的敲下去并理解了,自然就学会了,不过对于我这种忘性好的另说,这不是又重新开始学了么…部分内容...原创 2019-03-14 22:58:16 · 331 阅读 · 0 评论