sapui5教程——框架简介以及应用实践

author author     2022-09-06     225

关键词:


前言

SAPUI5是SAP公司推出的一款前端UI技术框架,基于HTML5技术,开发语言为JavaScript, 诞生于2011年,此款移动框架和SAP 系列产品贴合紧密,开发迅速,符合SAP系统的整体风格,SAPUI5是一款封闭框架(收费), 如果拥有SAP Netweaver License才可以免费试用,与SAPUI5相对应的还有一款开源框架被托管在github平台,大家可以去fork,学习一下。

作为一款重量级的框架,必然存在丰富的UI组件,SAPUI5提供了200+模块组件,可以自由组合,定制你需要的移动应用。

开发工具

开发SAPUI5可以使用多个IDE, 比如:

Eclipse: 最早一个开发工具,基于Eclipse的Plugin做的支持,可以让我在本地开发出你想要的app, 并可以借助代理server运行你的应用。

SAP WEBIDE: 一个收费版,基于BS结构的IDE工具,收费的工具,可以直接运行浏览器当中,次浏览器基于SCP云服务。

SAP Local WEBIDE: 一个WEB IDE的本地服务版本,主要是在本地搭建一个server, localhost运行你的webIDE, 但是功能比较局限,不支持部署,但是加载速度很快。

另外此核心类库支持debug运行调试,ctrl+alt+shift+s即可。

核心类库

SAPUI5提供了丰富的类库供我们选择,比如支持移动设备的sap.m, 支持图表的chart库,以及地图功能map库。

但是在实际项目中, 应用比较广泛的类库,主要有一下几个:

sap.m

主要用于移动设备的响应式组件,并支持很多移动设备特性检测,比如检测touch等,此库下面List, Table等组件使用比较广泛,而且包含了下拉刷新的功能,非常完善,并自动适应不同尺寸平台。

sap.ui

UI库包含的组件是最为丰富的,主要用于适应桌面平台,同样可以支持响应式的设计,比如sap.ui.table等组件。

sap.ca

sap.ca是官方标准app的常用类库,如果在实际开发过程当中想要拓展标准应用,必须要了解此类库的一些特性,否则拓展起来会有很大问题。

MVC模式

SAPUI5框架是一个MVC类型的框架设计,采用Model View Controller模式:

技术分享

常用组件

SAPUI5提供了比较丰富的组件,借助于这些组件可以让我们迅速的开发应用,那么常用的组件有哪些呢,我们来看一下:

SplitApp

这是一个Master Detail形式的结构,可以在移动,桌面不同尺寸的设备上自适应,也是大部分app需要采用的一种架构形式。

列表在任何应用中是比较常见的,List在SAPUi5定义功能比较完善,支持分批加载数据,提高运行效率,支持下拉等功能,并提供给我们丰富的标准Item, 可以简单配置使用,更可以根据自身需求定义item


这是一个表单性质的的组件,支持响应式,很多是够我们做一个表单展示需要此控件的支持。自身也携带了丰富的property供我们选择。

总结

总体来讲,SAPUI5的发展势头,以及产品迭代仍旧呈现一个良好的趋势,配合SCP云的到来,SAPUI5(SAP Fiori)变得愈发普及,希望更多的人能够关注和学习,共同交流。

中文版SAPUI5(SAP Fiori)视频教程,敬请关注!


本文出自 “天外野草畅谈” 博客,请务必保留此出处http://4676070.blog.51cto.com/4666070/1942586

html5开发移动web应用——sapui5篇

本次对之前学习的SAPUI5框架知识进行简单小结,以及重点部分知识的梳理。1、在UI5使用过程中,命名空间的概念很重要。2、一般的sap组件引用格式如下:sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONModel",&... 查看详情

html5开发移动web应用——sapui5篇

本次对之前学习的SAPUI5框架知识进行简单小结。以及重点部分知识的梳理。1、在UI5使用过程中,命名空间的概念非常重要。2、一般的sap组件引用格式例如以下:sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONMode... 查看详情

sapui5框架自学教程

参考技术AAsanapplicationdeveloperusingSAPUI5,whenIdealwithsomeissuesreportedbyendusers,itturnsoutthatIcannotfindouttherootcausewithoutdebuggingUI5frameworkcode.NormallyanUI5applicationconsistsofvariouscontrolsprovidedbyUI5library.Ifyoujustwanttouseacertaincontrolandmakeitworkinyourapplication,it... 查看详情

如何在sapui5应用里添加使用摄像头拍照的功能

...头拍照的web应用。而我同事遇到的实际情况是,需要使用SAPUI5这个前端框架来开发web应用。在有了前一篇文章的知识储备后,在SAPUI5里完成这个功能,可以采取同样的思路。我们先回忆前一篇文章里提到的技术实现的要点:(1)在... 查看详情

01《git入门实践教程》课程简介

本节视频链接:  Git是目前世界上最先进的分布式版本控制系统。  版本控制系统(VCS,RevisionControlSystem)可以追踪文件的变更,记录什么时候、什么人更改了文件的什么内容等信息。版本控制还用于支... 查看详情

shiro安全框架简介以及身份验证(代码片段)

...ro.apache.org/download.htmlApacheShiro是一个强大且易用的Java安全框架,执行身份验证、授权、密码学和会话管理。使用Shiro的易于理解的API,您可以快速、轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序。三... 查看详情

sapui5教程——aggregationbinding的应用

前言对于SAPUI5的程序开发而言,通常我们会使用XMLView,但是在某种特殊情况下,需要动态绑定数据,或者声场动态view,这个时候难免会使用JS去处理,因此AggregationBinding的用法,我们一定要有所了解。数据模型... 查看详情

手动搭建一个完整的angular实践项目

...又没有使用过angular的前端开发人员,因为我看到网上的教程又都配套的使用了一些其他框架或者打包工具,以及进行一些复杂的开发环境配置,不利于初级的人学习和理解。后续我也会陆续写几篇结合不同工具框架,以及在混... 查看详情

html5开发移动web应用——sapui5篇

SAPUI5中支持利用Component对组件进行封装。想封装一个组件,Component的基本代码例如以下:sap.ui.define(["sap/ui/core/UIComponent"],function(UIComponent){"usestrict";returnUIComponent.extend("",{init:function(){//calltheinitfunctionoft 查看详情

sapui5应用manifest.json文件里routes数组元素的相对顺序,不可忽视的试读版

​​SAPUI5应用manifest.json文件里Routes数组元素的相对顺序,不可忽视的试读版​​ 本教程第77篇文章发表之后,一位学习非常仔细的朋友发现了一个问题:​​SAPUI5应用开发教程之七十七-SAPUI5动态页面路由的高级用法:路由记... 查看详情

html5开发移动web应用——sapui5篇

SAPUI5中支持利用Component对组件进行封装。想封装一个组件,Component的基本代码如下:sap.ui.define(["sap/ui/core/UIComponent"],function(UIComponent){"usestrict";returnUIComponent.extend("",{init:functio 查看详情

html5开发移动web应用——sapui5篇

...是基于显示的,现在我们来格式化一下,引入更多的SAPUI5组件概念。这使得APP的一个界面更有层次性,更像是一个手机应用的界面,并且更好地使用SAPUI5中提供的功能。每个不同的层次都有不同的功能。首先修改App.view.xml文... 查看详情

html5开发移动web应用——sapui5篇

...于显示的。如今我们来格式化一下,引入很多其它的SAPUI5组件概念。这使得APP的一个界面更有层次性。更像是一个手机应用的界面,而且更好地使用SAPUI5中提供的功能。每一个不同的层次都有不同的功能。首先改动App.view.xml... 查看详情

ssm框架简介及整合教程

1.SpringSpring框架是Java应用最广的框架,它的成功来源于理念,而不是技术本身,它的理念包括IoC(控制反转)和A面向切面编程)。Spring框架是个轻量级的JavaEE框架,所谓轻量级,是指不依赖于容器就能运行的。简单来说,Spring是一... 查看详情

serverless工程实践|零基础上手knative应用(代码片段)

简介: Knative是一款基于Kubernetes的Serverless框架。其目标是制定云原生、跨平台的Serverless编排标准。Knative介绍Knative通过整合容器构建(或者函数)、工作负载管理(动态扩缩)以及事件模型这三者实现其Server... 查看详情

springsecurity框架教程-简介与springsecurity框架教程-入门案例准备工作(代码片段)

SpringSecurity框架教程-简介简介       SpringSecurity是spring家族中的一个安全管理框架。相比与另外一个安全框架Shiro,它提供了更丰富的功能,社区资源也比Shiro丰富、    一般来说中大型的项目都是使用SpringSecurity来... 查看详情

springboot简介以及案例

...你的配置文件。简单来说就是SpringBoot其实不是什么新的框架,它默认配置了很多框架的使用方式,就像maven整合了所有的jar包,springboot整合了所有的框架(不知道这样比喻是否合适)。2.2、SpringBoo 查看详情

sapfioriforios框架应用简介

...动平台,其核心就是SAP开发了一套基于Swift语言的IOS框架以及SAPCloudPlatform云平台工具,让开发人员能够快速搭建一个IOS版本的FIOR 查看详情