SAPUI5基础知识1 - 概览,库,支持工具,自学教程

news2024/12/28 13:40:00

1. SAPUI5 概览

1.1 SAPUI5

SAPUI5是一种用于构建企业级Web应用程序的开发框架。它是由SAP开发的,基于HTML5、CSS3和JavaScript技术。

SAPUI5提供了一套丰富的UI控件和工具,使开发人员能够快速构建现代化、可扩展和可定制的应用程序。

它还提供了数据绑定、模型-视图-控制器(MVC)架构、国际化支持等功能,使开发人员能够更轻松地开发和维护复杂的企业应用程序。

SAPUI5还与SAP的其他产品和服务集成,可以与SAP后端系统进行通信,实现与企业资源计划(ERP)和其他业务系统的集成。

1.2 OpenUI5

SAPUI5是SAP内部使用的UI开发框架,而OpenUI5是SAPUI5的开源版本。它们之间有很多相似之处,包括相同的UI控件和MVC架构。

然而,SAPUI5是SAP的商业产品,提供了与SAP后端系统集成的特定功能和服务。而OpenUI5是一个独立的开源项目,可以与任何后端系统集成。

1.3 HTML5

HTML5是超文本标记语言(HTML)的第五个版本,它是一种用于创建和呈现网页内容的标准语言。HTML5由万维网联盟(W3C)开发,旨在改进Web的性能和兼容性,同时提供更丰富的Web应用开发功能。

HTML5提供了一系列新的元素和API,使开发人员能够创建更丰富、更交互性的Web应用。

以下是HTML5的一些主要特性:

  • 多媒体支持:HTML5引入了<video><audio>元素,使开发人员能够在网页中直接嵌入音频和视频,无需依赖插件。

  • 语义元素:HTML5引入了一系列新的语义元素,如<article><section><nav><header>等,这些元素使开发人员能够更清晰地描述网页的结构。

  • 表单控件:HTML5增强了表单控件,提供了新的输入类型(如email、date、time等)和新的元素(如<datalist><output>等)。

  • 图形和动画:HTML5引入了<canvas>元素,用于在网页上绘制图形和动画。此外,HTML5还支持SVG和WebGL,用于创建复杂的2D和3D图形。

  • Web应用API:HTML5提供了一系列新的API,用于创建更强大的Web应用,如地理位置API、离线存储API、拖放API等。

  • 响应式设计:HTML5支持响应式设计,使网页能够自适应不同的设备和屏幕尺寸。

1.4 CSS3

CSS3是层叠样式表(Cascading Style Sheets)的第三个版本,它是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的样式的样式表语言。

CSS3由万维网联盟(W3C)开发,旨在扩展CSS2.1,引入了许多新的特性和功能,以支持更复杂、更灵活的页面布局和设计。

以下是CSS3的一些主要特性:

  • 选择器:CSS3引入了许多新的选择器,如属性选择器、伪类选择器等,使开发人员能够更精确地选择和样式化元素。

  • 盒模型:CSS3增强了盒模型,引入了如边框半径(border-radius)、阴影(box-shadow)和边框图片(border-image)等新的样式属性。

  • 背景和颜色:CSS3提供了更多的背景和颜色选项,如背景大小(background-size)、背景原点(background-origin)和RGBA颜色等。

  • 文本效果和排版:CSS3引入了如文本阴影(text-shadow)、文字描边(text-stroke)和文字溢出(text-overflow)等新的文本效果,以及如多列布局(multi-column layout)等新的排版功能。

  • 2D/3D转换:CSS3支持2D和3D转换,使开发人员能够旋转、缩放、移动和倾斜元素。

  • 动画和过渡:CSS3引入了动画和过渡功能,使开发人员能够创建平滑的动画效果和状态变化。

  • 响应式设计:CSS3的媒体查询(media queries)功能使开发人员能够根据设备的特性(如屏幕尺寸、设备方向等)应用不同的样式规则。

1.5 JavaScript / jQuery / datajs

JavaScript 是一种高级的、解释型的编程语言,主要用于构建网页和Web应用。它是Web的三大核心技术之一,与HTML和CSS一起,为开发人员提供了创建交互式Web页面的能力。JavaScript支持事件驱动、函数式和面向对象的编程风格。

JavaScript的主要特性包括:

  • 动态类型:JavaScript是一种动态类型语言,这意味着你不需要提前声明变量的类型,系统会在运行时自动判断。
  • 对象和函数:在JavaScript中,几乎所有的东西都是对象,而函数则是一种可以被执行的对象。
  • 事件驱动:JavaScript允许你创建丰富的交互式应用,通过监听和操作浏览器事件(如点击、鼠标移动等)。

jQuery 是一个快速、小巧且功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等任务变得更简单,具有易用性、灵活性和效率等优点。jQuery的语法设计使得开发更加便捷:浏览器兼容性的问题,它都已经为你解决了。

datajs 是一个JavaScript库,用于帮助开发人员更容易地处理和操作数据。它提供了一系列API和工具,用于处理各种数据源,包括OData、JSON和XML等。datajs的主要特性包括数据缓存、数据绑定、数据查询和数据更新等。

2. SAPUI5与SAP Fiori是什么关系

SAP Fiori是一种UI设计风格,SAP旨在通过SAP Fiori为客户提供简单、直观和一致的用户体验,无论用户在使用哪种设备(桌面、平板或手机)。

而SAPUI5是一种UI技术框架,SAP为SAP Fiori应用程序构建UI的首选方式是使用SAPUI5。

可以说,SAP Fiori定义了应用程序的设计风格,SAPUI5提供了实现SAP Fiori应用程序的技术基础(包括所需的UI控件和设计模式)。

3. SAPUI5的技术架构

SAPUI5是一种基于JavaScript,CSS和HTML5的客户端UI技术。SAPUI5库提供了一组可被应用程序使用的控件和类型(controls,types)。

SAPUI5应用程序可以在任何设备(手机、平板电脑或台式电脑)的浏览器中运行。

SAPUI5中使用模型-视图-控制器(Model - View - Controller, MVC)概念将信息的表示与用户交互分离开来。
在这里插入图片描述

SAPUI5应用程序和相关的SAPUI5库是从Server加载的。访问应用程序业务数据的首选方法是通过SAP网关(Gateway)或SAP Cloud平台使用OData模型。

3.1 MVC

SAPUI5中使用模型-视图-控制器(Model - View - Controller, MVC)概念将信息的表示与用户交互分离开来。

  • 模型Model负责保存应用数据,以及提供读取、设置和更新数据的一系列方法
  • 视图View负责定义和渲染UI
  • 控制器Controller通过修改视图和模型来响应视图事件和用户交互。控制器将视图逻辑与模型逻辑分离
    在这里插入图片描述

3.2 SAPUI5库

SAPUI5提供了以下的库:

  • sap.ui.core: UI5的基本功能,包括MVC,路由,渲染框架
  • sap.m: 最重要的一组响应式控件(多设备支持)
  • sap.f: 专用于SAP Fiori应用程序的控件
  • sap.tnt: 专门用于管理和工具页应用程序的控件
  • sap.ui.layout: 用来帮助元素排列的控件
  • sap.ui.comp: 智能控件库
  • sap.viz: 图表实现
  • sap.ui.table: 支持分析表和树表-不支持电话设备。
  • sap.uxap: sap.m库的附加控件

但请注意,SAPUI5控件库间可能存在兼容性问题,例如sap.ui.richtexteditor不但能与sap.m这个控件库同时使用。有关兼容性的最新消息,可以查看SAPUI5文档 。

3.3 SAPUI5的版本

SAPUI5使用3位的版本符,例如1.48.5 。

  • 第一位(1)代表发布号(release number);
  • 第二位(48)代表版本号(version number);
  • 第三位(5)代表补丁号(patch number);

每个月SAPUI5都会发布一个新的版本,对于SAP Cloud 平台,SAPUI5的版本会自动更新至最新版;对于AS ABAP(ABAP应用服务器环境),每年SAPUI5会有两个版本的更新,作为SAP_UI组件的一部分。

与此同时,每年SAPUI5都会发布一个“long-term support” 长期支持版本,更多的信息,可查看SAPUI5版本策略。

4. SAPUI5的相关工具

4.1 帮助文档

SAP UI5开发工具包的帮助文档 https://ui5.sap.com/或https://sapui5.netweaver.ondemand.com/ 。
在这里插入图片描述

4.2 浏览器工具

使用浏览器自带的调试工具(F12), 可以查看SAPUI5应用程序的DOM和样式, 调试 JavaScript等。

4.3 UI5 Inspector(浏览器扩展插件)

UI5 Inspector是调试SAPUI5应用程序的一个浏览器插件,可以从Chrome Web Store下载安装。
在这里插入图片描述

安装成功后,它就可以在浏览器的开发者工具中使用(F12),并在加载SAPUI5应用程序时自动运行。

通过UI5 Inspector可以检查SAPUI5控件并检查它们的属性、绑定和数据模型;动态修改控件属性,看看这会如何影响渲染和行为;以及查找基于sapui5的应用程序的相关框架信息。

在这里插入图片描述

4.4 支持工具

在SAPUI5应用程序中,通过快捷键 ctrl + alt + shift + s可以启动 SAPUI5 Diagnositics工具,通过ctrl + alt + shift + p可以启动技术信息对话框。

  • SAPUI5 Diagnositics
    在这里插入图片描述
  • SAPUI5技术信息对话框
    在这里插入图片描述

5. SAPUI5自学教程

SAPUI5的开发者文档中提供了一系列的demo程序,可以通过学习这些文档中的示例程序,来了解SAPUI5的功能。
在这里插入图片描述

6. 小结

本文介绍了SAPUI5的基础概念,以及常用的库,调试工具和支持工具,同时给出了自学SAPUI5的demo教程的访问方式。希望对你有帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1647269.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

cmake进阶:变量的作用域说明一(从函数作用域方面)

一. 简介 如同 C 语言一样&#xff0c;在 cmake 中&#xff0c;变量也有作用域的概念&#xff0c;本文我们就来聊一聊关于 cmake 中变量作用域的问题。 接下来从三个方面进行介绍&#xff1a;函数作用域、目录作用域以及全局作用域。 二. 函数作用域 我把这个作用域叫做函数…

文献速递:深度学习医学影像心脏疾病检测与诊断---利用深度学习进行动态心脏PET的自动帧间患者运动校正

Title 题目 Automatic Inter-frame Patient Motion Correction for Dynamic Cardiac PET Using Deep Learning 利用深度学习进行动态心脏PET的自动帧间患者运动校正 01 文献速递介绍 OSITRON正电子发射断层扫描&#xff08;PET&#xff09;心肌灌注成像已被证明相较于其他…

LeetCode-741. 摘樱桃【数组 动态规划 矩阵】

LeetCode-741. 摘樱桃【数组 动态规划 矩阵】 题目描述&#xff1a;解题思路一&#xff1a;动态规划&#xff0c;定推初遍举。解题思路二&#xff1a;倒序循环解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个 n x n 的网格 grid &#xff0c;代表一块樱桃地&#xff0…

Android硬件加速hardwareAccelerated支持/不支持的绘图接口

Android硬件加速hardwareAccelerated支持/不支持的绘图接口 Android硬件加速也即在Androidmanifest.xml配置开启GPU渲染&#xff1a; <application android:hardwareAccelerated"true" > 配置后&#xff0c;Android将启用GPU渲染&#xff0c;在trace里面看会…

2023 年全国职业院校技能大赛(高职组)“云计算应用”赛项赛卷 B(容器云)

#需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私聊博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包及镜像&#xff09;或有问题的&#xff0c;可私聊博主&#xff01;&#xff01;&#xff01; #需要资源&#xff08;软件包…

【一起深度学习——kaggle叶子分类】

kaggle 叶子分类 目的&#xff1a;将叶子进行分类。实现步骤&#xff1a;1、数据处理&#xff1a;2、加载数据3、 定义残差块4、定义Resnet模型。5、定义训练以及评估函数&#xff1a;6、开始训练&#xff1a;7、输出结果&#xff1a; 目的&#xff1a;将叶子进行分类。 实现步…

观测与预测差值自动变化系统噪声Q的自适应UKF(AUKF_Q)MATLAB编写

简述 基于三维模型的UKF&#xff0c;设计一段时间的输入状态误差较大&#xff0c;此时通过对比预测的状态值与观测值的残差&#xff0c;在相应的情况下自适应扩大系统方差Q&#xff0c;构成自适应无迹卡尔曼滤波&#xff08;AUKF&#xff09;&#xff0c;与传统的UKF相比&…

【Qt】按钮类控件

文章目录 1 :peach:Push Button:peach:2 :peach:Radio Buttion:peach:3 :peach:Check Box:peach:4 :peach:Tool Button:peach: 1 &#x1f351;Push Button&#x1f351; 使⽤ QPushButton 表⽰⼀个按钮&#xff0c;这也是当前我们最熟悉的⼀个控件了&#xff0c;QPushButton …

Ubuntu添加非root用户到Docker用户组

前言 首先平常公司的Linux生产环境为了防止误操作导致灾难性问题&#xff0c;一般都不会给我们开发开放root管理员的账号权限。所以平常在Ubuntu的普通用户登录的时候&#xff0c;要操作Dcoker一般都需要带上sudo来提升命令执行权限。为了解决这一问题&#xff0c;我们只需要将…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-13-按键实验

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

Axure中继器介绍以及案例分享

中继器是 Axure 中一个比较高阶的应用&#xff0c;它可以让我们在纯静态网页中模拟出类似带有后台数据交互的增删改查的效果。 一、中继器的基本使用方法&#xff1a; 整体流程分为三个步骤 ☆创建中继器 我们先在 Axured画布中拖入一个中继器元件 双击中继器后的效果 打开之…

java高并发实战<1>

我们一个请求--->tomcat--->db 我们只需要把我们的应用部署在tomcat中&#xff0c; 就可以了 这就是你单体的感念&#xff0c;单机结构你只用一个服务器就完成了你项目的部署单点问题一旦这台机器挂了,用户就没有办法用你这个服务,单机能力有限 随着你用户量增长的过程…

04.添加自定义监控项

添加自定义监控项 监控项就是监控每一个指标 1.命令行&#xff0c;手动取值 [rootyunlong66 ~]# iostat |awk $1 ~/sda/ sda 5.89 36.10 122.71 557910 1896585 [rootyunlong66 ~]# iostat |awk $1 ~/sda/{print $2} 5.892.修改zabbix-age…

OpenNJet下载安装及入门实战教程

一、什么是OpenNJet OpenNJet是一款开放原子开源基金会孵化及运营的开源项目。OpenNJet采用C语言实现。是一款高性能、轻量级的WEB应用及代理软件。    OpenNJet 应用引擎是高性能、轻量级的WEB应用与代理软件。作为云原生服务网格的数据平面&#xff0c;NJet具备动态配置加载…

【Git】回滚旧提交版本且不影响最新提交版本

【Git】回滚旧提交版本且不影响最新提交版本 一、场景假设 远程仓库origin中有一个分支main&#xff0c;有4次提交记录&#xff1a;v1、v2、v3、v4。 二、需求 需要回滚旧提交版本&#xff0c;但不影响已有的所有提交版本&#xff08;即不影响最新提交版本&#xff09;&…

k8s保持pod健康

存活探针 Kubemetes 可以通过存活探针 (liveness probe) 检查容器是否还在运行。可以为 pod 中的每个容器单独指定存活探针。如果探测失败&#xff0c;Kubemetes 将定期执行探针并重新启动容器。 Kubemetes 有以下三种探测容器的机制&#xff1a; HTTP GET 探针对容器的 IP 地…

深入探索归并排序算法:分而治之的排序艺术

在计算机科学领域&#xff0c;排序算法是一项基础且重要的技术&#xff0c;归并排序作为一种经典的分治算法&#xff0c;以其稳定性和高效性而闻名。本文将带您深入探索归并排序算法的原理、实现方法以及应用场景&#xff0c;揭示这一排序艺术背后的精髓。 **归并排序算法简介…

【管理篇】管理三步曲:管理规划(一)

目录标题 管理到底都要做哪些事呢如何开始带团队&#xff1f; 职能&#xff1a;如何界定团队是干什么的&#xff1f;目标&#xff1a;如何为团队设定合理的目标规划资源&#xff1a;需要申请哪些资源&#xff08;1&#xff09;你是否了解资源的丰富性&#xff1f;&#xff08;2…

判断dll/lib是32/64位、查看lib是导入库/静态库的方法 、查看dll包含的符合、lib包含的函数

一、判断dll/lib是32/64位 原文链接&#xff1a;https://www.cnblogs.com/bandaoyu/p/16752602.html 1. 简便方法&#xff1a; 直接用记事本或者notepad(或txt文本)打开exe文件&#xff08;dll文件&#xff09;&#xff0c;会有很多乱码&#xff0c;不要头疼&#xff0c;接下…

优雅处理返回信息状态码:Result对象在Spring Boot中的应用

前言 在开发过程中&#xff0c;处理返回的信息状态码是一个重要的问题&#xff0c;尤其是在大型项目中。为了统一处理这些状态码&#xff0c;我在Spring Boot中创建了一个名为Result的Java对象&#xff0c;用于封装返回的信息和状态码。在本文中&#xff0c;我将分享如何实现这…