SAPUI5
SAPUI5 及 OpenUI5
stone0823
财务、SAP以及编程
展开
-
OpenUI5 开发的辅助工具 generator-sapui5-templates 介绍
generator-sapui5-templates 包含根据 3 种模板搭建脚手架代码和测试的工具集。package 的 url:@sapui5/generator-sapui5-templates本篇博文介绍 generator-sapui5-templates 的基本使用方法,使用 Visual Studio Code 作为编辑器。假设你的电脑上已经安装 node.js。环境准备node.jsnpm yonode.js 的安装比较简单,不说明。安装 node.js 后,在命令行中使用下原创 2020-07-22 20:57:01 · 1012 阅读 · 1 评论 -
SAPUI5 (40) - SAP 后端调试工具
本篇介绍 SAP 后端提供的两个调试工具。 - SAP 外部断点 - SAP Gateway Service Error Log原创 2017-06-28 16:37:22 · 3721 阅读 · 3 评论 -
SAPUI5 (39) - 直接提交 HTTP 请求实现 CRUD
OpenUI5 作为一种客户端的 UI 技术,自身并不直接与后端的服务器或者数据库交互。客户端只是提交 HTTP request,不管是 OData 的 create / update / delete 等方法,还是单向绑定或双向绑定时的 submitChanges 方法,都是对 HTTP Request 的一种封装。本篇介绍 OData 提交 HTTP request 的方法。原创 2017-06-08 10:33:56 · 4156 阅读 · 0 评论 -
SAPUI5 (38) - OData Model 的单向绑定和双向绑定
单向绑定和双向绑定概述所谓的单向绑定 (one-way binding),是指 OData model 与 UI 控件之间在数据绑定时, OData model 中数据的变化会同步反应在 UI 控件中,但 UI 控件数据的变化需要手工提交到 OData model;而双向绑定 (two-way binding),则是指 OData model 和 UI 控件的数据双向同步变化。原创 2017-05-22 07:42:57 · 3944 阅读 · 0 评论 -
SAPUI5 (37) - 使用 Grunt 实现 Cross Origin 代理
如果使用 Eclipse 作为开发工具,可以使用 Simple proxy servlet 来测试,作为 cross-origin 的代理工具。但 SAP Web IDE 编写的代码,并不能在不做任何修改的情况下运行。为了能较好地实现代码移植,另外一个比较好的方法是使用 Grunt。原创 2017-05-18 10:48:34 · 1590 阅读 · 0 评论 -
SAPUI5 (36) - OData Model 连接后端 SAP 系统 (下)
继续上一篇的内容,完成使用 OData Model 连接到后端 SAP 系统,实现 CRUD 操作。原创 2017-05-18 10:46:28 · 5735 阅读 · 0 评论 -
SAPUI5 (35) - OData Model 连接后端 SAP 系统 (中)
完成上一篇的配置,现在我们可以在 SAP 系统中创建基于 SAP Netweaver Gateway 的 OData Service。本篇主要是介绍在 SAP 系统中创建 OData service 的过程,为后续在 OpenUI5 中通过 OData Model 使用 SAP 系统提供的 OData 数据服务。原创 2017-05-01 18:15:00 · 8325 阅读 · 2 评论 -
SAPUI5 (34) - OData Model 连接后端 SAP 系统 (上)
准备分三个部分介绍如何连接到后端 SAP 系统,先说明 SAP 系统提供 OData 服务所需的配置。原创 2017-04-25 22:45:02 · 5893 阅读 · 1 评论 -
SAPUI5 (33) - 使用 SAP Web IDE 提供的代理服务
在 SAP Web IDE 中编写代码的话,Web IDE 也提供了代理服务。本篇我们就来看看如何使用 SAP Web IDE 提供的代理服务。原创 2017-04-23 16:39:17 · 3933 阅读 · 0 评论 -
SAPUI5 (32) - SAP Web IDE
SAP Web IDE 是基于 Eclipse 内核的在线开发 IDE,可以使用在线的试用版本,也可以使用 Personal Edition,在本机启动和编写代码。原创 2017-04-21 21:35:40 · 7643 阅读 · 3 评论 -
SAPUI5 (31) - OData 中 Image 的显示和编辑 (下)
给出一个完整例子,介绍如何对含有 Image 字段的数据进行增删改查。原创 2017-04-16 23:22:56 · 2018 阅读 · 0 评论 -
SAPUI5 (30) - OData 中 Image 的显示和编辑 (上)
数据库中对图片的保存可以采取二进制格式,也就是我们平常所说的 blob 类型 ( Binary large object)。当图片使用 blob 类型来存储的时候,OpenUI5 如何处理据呢? 本篇就来作一个详细介绍。原创 2017-04-15 23:08:44 · 2482 阅读 · 1 评论 -
SAPUI5 (29) - 使用 ViewSettingsDialog 实现排序分组和筛选
应用程序的筛选、排序和分组必不可少。为简化开发的工作量,SAPUI5 做了几个通用控件,包括 OpenUI5 的 sap.m.ViewSettingsDialog 和 SAPUI5 的 Smart Filter Toolbar。本篇介绍 `ViewSettingsDialog` 如何帮助在 UI 中实现数据的筛选、排序和分组。原创 2017-04-04 15:27:32 · 2189 阅读 · 0 评论 -
SAPUI5 (28) - 基于 ODataModel 的排序和分组
OData 如何排序OData 支持使用 $orderby 参数实现数据排序。排序的时候有两种顺序:升序 (asc) 和降序 (desc),默认是升序。我们以 Northwind OData 数据服务为例,介绍基于 oDataModel 的排序和分组实现方法。原创 2017-03-27 10:10:00 · 2594 阅读 · 1 评论 -
SAPUI5 (27) - 基于 ODataModel 的筛选
本篇介绍基于 oDataModel 的筛选实现原创 2017-03-21 21:55:45 · 4253 阅读 · 3 评论 -
SAPUI5 (26) - 基于 ODataModel 的增删改查
本篇介绍基于 OData v2,对 Northwind 进行 CRUD 操作。介绍的重点包括:1)http 请求;2)使用 Postman 发送 http 请求;3)使用 ODataModel (v2)提交 CRUD 方法和查看返回结果。原创 2017-03-15 22:21:50 · 7821 阅读 · 3 评论 -
SAPUI5 (25) - 了解 OData 和 OpenUI5 的 OData Model
本篇介绍几个比较重要的概念,REST 和 OData,并介绍 OpenUI5 OData model的基本使用方法。原创 2017-03-10 20:41:04 · 6088 阅读 · 0 评论 -
SAPUI5 (24) - 增删改查之查询数据
CRUD是应用程序的核心。openui5是一个前端的UI库,CRUD是通过oData的服务来完成。openui5提交基于http协议的请求给服务器,其它交给服务器端处理。oData协议是微软公司发起,比web service更轻量级的通讯协议。SAP的Neweaver Gateway 就是SAP以OData形式暴露后端业务数据的一个组件。SAPUI5提供的方便的数据绑定功能,将前端展示组件绑定到后端原创 2017-03-04 11:35:55 · 4503 阅读 · 0 评论 -
SAPUI5 (23) - 使用mock server模拟oData提供者
模拟服务器(mock server)的作用所有的应用程序都涉及CRUD操作,openui5在真实的场景中是通过oData和后端SAP系统交互。但在开发过程中,为了测试的需要,可以使用模拟服务器,openui5将模拟服务器称作mock server。模拟服务器的基本功能是模拟oData数据提供者,截获应用程序的对服务器端的htpp或https请求,并传回模拟请求的回应。原创 2017-03-01 22:41:22 · 3248 阅读 · 4 评论 -
SAPUI5 (22) - Routing 实现多页面导航
前面我们实现了基于组件的多页面程序,这个程序还有两个主要的缺点:1)存在全局变量oApp (sap.m.App); 2)多个页面全部在程序启动时加载,多个页面也是在一个URL下由openui5框架进行管理,这种模式满足不了多页面的需求。解决的办法是:路由(routing)。通过routing实现多页面的导航,通过异步实现按需加载。原创 2017-02-25 15:11:35 · 5587 阅读 · 4 评论 -
SAPUI5 (21) - 如何实现多语言
在 SAPUI5 中,通过两种方法来实现多语言,一是 SAPUI5 提供 Resource model,Resouce model 读取资源包 (Resource bundle) 并与 View 中的控件绑定。第二种方法是使用 jQuery.sap.resources 相关的 API 读取资源包。两种方法都需要资源包文件并且在配置中设置。原创 2017-02-22 07:38:04 · 3174 阅读 · 2 评论 -
SAPUI5 (20) - 在 Component 中封装启动代码
本篇对上篇的 Master-detail 代码进行重构。SAP Fiori 的 app 并不是通过 index.html 启动的,而是通过 Component 启动,因为 Launchpad 包含多个app。所以我们学习 OpenUI5 也应该是熟悉这种模式。原创 2017-02-18 20:49:15 · 4369 阅读 · 7 评论 -
SAPUI5 (19) - 多页面程序及简单的页面导航
Master-detail是一种非常常见的数据关系。本篇以供应商清单和供应商明细为例,介绍master-detail的实现方法,并在后续介绍Component的时候,还要用到这个例子,对代码进行重构。我们要实现的功能是:先用一个页面显示供应商清单:当点击某一个供应商所在行的时候,跳转到供应商明细页面:并且,点击“返回”按钮的时候,回到概览界面。原创 2017-02-14 19:28:13 · 4891 阅读 · 8 评论 -
SAPUI5 (18) - 数据显示格式设定
在sapui5中,除了使用数据类型来帮助在UI中设定显示格式外,还可以使用formatter。本篇介绍设置数据显示格式的4种方法。原创 2017-02-11 23:53:22 · 4196 阅读 · 0 评论 -
SAPUI5 (17) - 数据校验
对用户输入的数据进行校验,是开发过程中不可少的基本要求。sapui5提供了基于数据类型灵活的校验。本篇介绍常用方法。原创 2017-01-21 23:50:19 · 2653 阅读 · 0 评论 -
SAPUI5 (16) - 数据类型
介绍简单数据类型和简单数据类型的输出格式设置。原创 2017-01-20 15:02:23 · 2535 阅读 · 0 评论 -
SAPUI5 (15) - 绝对绑定和相对绑定
sapui5的绝对绑定和相对绑定。原创 2017-01-19 13:10:20 · 2263 阅读 · 0 评论 -
SAPUI5 (14) - 数据绑定之元素绑定(element binding)
元素绑定适用于主从数据显示(master-detail data)的情况。比如我们有一个供应商的清单,当选择供应商的时候,显示该供应商所提供的产品。本篇介绍element binding。原创 2017-01-17 16:09:40 · 5955 阅读 · 1 评论 -
SAPUI5 (13) - 数据绑定之聚合绑定(aggregation binding)
属性绑定用于绑定单条数据。如果需要绑定多条数据,则需要使用聚合绑定(aggregation binding),比如我们常见的ListBox, Combox或者表格,都是含有多条数据的。概念比较容易理解,关键是绑定的语法。本文介绍aggregation binding的语法和要点原创 2017-01-14 11:16:03 · 4940 阅读 · 5 评论 -
SAPUI5 (12) - 对象显示组件
SAPUI5提供了几个专门用于显示数据的组件,可以让编码更加简单,显示更加漂亮原创 2017-01-09 22:11:29 · 4399 阅读 · 1 评论 -
SAPUI5 (11) - 数据绑定之属性绑定(property binding)
数据绑定指将model的数据绑定到控件,如果是双向绑定(two-way binding),则任何一方的变化会反映在另外一方; 如果是单向绑定(one-way binding),则方向是从model到控件,即model数据的变化会反映在控件,而不会有相反的方向。原创 2017-01-07 20:46:39 · 6675 阅读 · 3 评论 -
SAPUI5 (10) - XMLView
SAPUI5 Demo Kit的示例程序,大多使用的是XMLView,所以开发ui5程序必须掌握xmlview。简单地说,xmlview相对于前面的javascript,主要的变化在view的部分,其它基本不变。原创 2017-01-05 23:17:00 · 4543 阅读 · 3 评论 -
SAPUI5 (09) - 模块化
JavaScript并没有对模块提供内在支持,下一代版本(ECMAScript 2015)将提供,ECMAScript 2015可能还需要相当长的一段时间才能普及。本篇介绍sapui5提供对模块的支持以及使用sap.ui.define()定义controller。原创 2017-01-03 23:07:57 · 4071 阅读 · 1 评论 -
SAPUI5 (08) - MVC的Model和数据绑定
前面的MVC介绍只有view和controller,还没有涉及数据,所以没有model的部分。本篇增加数据,介绍Model以及数据绑定,展示一个完整的MVC示例。原创 2017-01-01 23:55:10 · 7111 阅读 · 3 评论 -
SAPUI5 (07) - MVC 文件的名称和位置
使用 MVC,model、view 和 controller 的代码分别放在不同的文件中,那么,OpenUI5 如何确定 view 和 controller 文件的名称和位置呢? 有以下三种方法来声明文件的位置:sap.ui.localResources()jQuery.sap.registerModulePath()bootstrap 声明: data-sap-ui-resourcer原创 2016-12-31 14:57:46 · 4648 阅读 · 4 评论 -
SAPUI5 (06) - MVC 基础
MVC是一种架构模式,SAPUI5 对 MVC 提供了良好的支持。本文介绍 OpenUI5 的基础知识。原创 2016-12-27 20:25:57 · 5395 阅读 · 2 评论 -
SAPUI5 (05) - 主题 (Theming)
SAPUI5 提供了哪些预设的主题呢?本篇就通过一个小例子,了解这些主题,顺便复习一下 控件共用 event handler, 还有 grid layout。原创 2016-12-26 22:50:54 · 5515 阅读 · 3 评论 -
SAPUI5 (04) - 控件的布局
如果多个控件都放在页面上,SAPUI5 会怎么安排控件的位置呢?如何按自己的想法安排控件的位置呢?layout 控件就是专门来对控件的位置进行管理的。本篇介绍表格型布局 (grid layout)。原创 2016-12-25 20:15:18 · 7346 阅读 · 6 评论 -
SAPUI5 (03) - 简单控件的使用
SAPUI5 控件的基本使用方法,以及控件的两种基本关系 agrregation 和association。原创 2016-12-23 23:46:51 · 8640 阅读 · 8 评论 -
SAPUI5 (02) - OpenUI5 Hello World
Hello World详细解释原创 2016-12-21 11:02:09 · 7491 阅读 · 2 评论