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

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.mfbz.cn/a/597819.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32CubeMX学习笔记32---FreeRTOS资源管理

一、CPU利用率简介 1 基本概念 CPU 使用率其实就是系统运行的程序占用的 CPU 资源&#xff0c;表示机器在某段时间程序运行的情况&#xff0c;如果这段时间中&#xff0c;程序一直在占用 CPU 的使用权&#xff0c;那么可以人为 CPU 的利用率是 100%。CPU 的利用率越高&#xf…

JVM调参实践总结

JVM调优–理论篇从理论层面介绍了如何对JVM调优。这里再写一篇WIKI&#xff0c;尝试记录下JVM参数使用的最佳实践&#xff0c;注意&#xff0c;这里重点介绍HotSpot VM的调参&#xff0c;其他JVM的调参可以类比&#xff0c;但不可照搬。 Java版本选择 基于Java开发应用时&…

面向新手在无人机竞速场景下的飞行辅助系统——浙大 FAST-Lab 高飞团队 ICRA 论文三项 Best Paper 入围

恭喜浙江大学 FAST-Lab 钟宇航同学的论文 A Trajectory-based Flight Assistive System for Novice Pilots in Drone Racing Scenario 顺利发表 ICRA 2024&#xff0c;并同时入选三项 Finalist&#xff1a; the IEEE ICRA Best Conference Paper Awardthe IEEE ICRA Best Pape…

干货!Kali Linux命令大全(建议收藏)

系统信息 arch 显示机器的处理器架构 name -m 显示机器的处理器架构 name -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 -(SMBIOS/DMI) hdparm -i /dev/hda 罗列一个磁盘的架构特性 hdparm -tT /dev/sda 在磁盘上执行测试读取操作 cat /proc/cpuinfo …

[综合应用]dns nfs httpd php mysql

第一步&#xff1a;搭建三台主机 主机名称 Ip地址 角色 503A 192.168.68.10 Mysql从 503B 192.168.68.11 Mysql从&#xff0c;nfs服务端&#xff0c;dns服务端 503Cmysql 192.168.68.12 MySQL主&#xff0c;web客户端 第二步&#xff1a;在503B上配置DNS 2.1 下载…

【3dmax笔记】027:配置修改器集、工具栏自定义与加载

文章目录 一、配置修改器集二、自定义工具栏三、加载工具栏 一、配置修改器集 可以把自己常用的修改命令放到右边框中的部分&#xff0c;便于自己的操作&#xff0c;省去了每次都要花半天时间找命令的尴尬。新建一个二维或者三维物体&#xff0c;点击修改面板&#xff0c;点击…

三分钟了解计算机网络核心概念-数据链路层和物理层

计算机网络数据链路层和物理层 节点&#xff1a;一般指链路层协议中的设备。 链路&#xff1a;一般把沿着通信路径连接相邻节点的通信信道称为链路。 MAC 协议&#xff1a;媒体访问控制协议&#xff0c;它规定了帧在链路上传输的规则。 奇偶校验位&#xff1a;一种差错检测方…

【含win+Mac整合包】本地部署Stable Diffusion,超详细(AI 绘画保姆级教程,100%成功部署)

什么是stable diffusion? stable diffusion是在2022年发布的基于扩散模型的文本到图像生成模型&#xff0c;起初它只有一堆api供开发者使用&#xff0c;可以说非常难上手&#xff0c;随着2023年5月由AUTOMATIC1111大佬基于SD API开发的SD WebUI的发布&#xff0c;SD第一次有了…

C++进阶之路:何为引用、内联函数、auto与指针空值nullptr关键字

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

【运维自动化-配置平台】如何对主机进行纳管

主机是配置平台管控最常见的资源&#xff0c;也是运维日常主要的管控对象&#xff1b;如何对主机进行全生命周期管理呢导入主机 直接导入 直接导入仅适用于直连区域&#xff08;default area&#xff09;的主机&#xff0c;也就是网络跟蓝鲸平台能内网互通的。 资源–>主…

西奥机电食品质构分析仪:揭秘水果蔬菜硬度等指标的测试原理

西奥机电食品质构分析仪&#xff1a;揭秘水果蔬菜硬度等指标的测试原理 在食品科学领域&#xff0c;对水果蔬菜硬度的精准测量是评估其品质与口感的重要步骤。西奥机电食品质构分析仪凭借其先进的技术和独特的测试原理&#xff0c;为这一领域带来了革命性的变革。下面&#xf…

非标类型导致Dubbo接口出入参异常的本质 | 得物技术

一、概述 笔者支持过程中多次发现诡异的Dubbo接口异常问题&#xff0c;抓耳挠腮最后定位到代码上和代码外的原因&#xff0c;事后只感觉脑瓜子嗡嗡的。考虑到这不是第一次&#xff0c;也绝不会是最后一次出现类似问题&#xff0c;下面笔者将尽可能详细的梳理、总结一下该问题的…

6个月小猫成长必备!福派斯无麸质幼猫粮评测

你知道吗&#xff1f;给小猫选择适合的猫粮是一件非常不容易但很重要的事情。那么&#xff0c;对于6个月大的小猫来说&#xff0c;什么样的猫粮是最适合它们的呢&#xff1f;&#x1f431; 我们首先要考虑的是猫粮的营养成分。6个月大的小猫正处于快速生长期&#xff0c;所以需…

vue3 + ts实现canvas绘制的waterfall

实际运行效果(仅包含waterfall图表部分) component.vue <template><div ref="heatmap" :style="{ height: props.containerHeight + px }" /> </template><script setup> import ColorMap from "colormap"; import…

Labels and Databases for Mac:强大的标签与数据库管理工具

Labels and Databases for Mac是一款集标签制作与数据库管理于一体的强大工具&#xff0c;专为Mac用户打造&#xff0c;旨在提供高效、便捷的标签制作与数据管理体验。 这款软件拥有丰富的内置标签格式&#xff0c;用户可轻松创建各种标签、信封和卡片&#xff0c;满足个性化需…

掌控网络流量,优化网络性能 - AnaTraf网络流量分析仪登场

在当今日新月异的网络环境中,网络流量监控和性能诊断已成为企业IT部门不可或缺的重要工作。只有充分了解网络流量状况,才能有效优化网络性能,提高业务运营效率。针对这一需求,全新推出的AnaTraf网络流量分析仪应运而生,为企业提供全面的网络监控和性能诊断解决方案。 快速定位…

Java双亲委派机制

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 概述 Java程序在运…

pygame实现鼠标绘制并调节画笔大小

pygame实现鼠标绘制并调节画笔大小 pygame介绍调节画笔大小鼠标绘制效果 pygame介绍 Pygame是一个开源的Python库&#xff0c;专为电子游戏开发而设计。它建立在SDL&#xff08;Simple DirectMedia Layer&#xff09;的基础上&#xff0c;允许开发者使用Python这种高级语言来实…

C语言趣味代码(五)

我想以此篇结束关于C语言的博客&#xff0c;因为在C语言拖得越久越不能给大家带来新的创作&#xff0c;在此我也相信大家对C语言已经有了一个新的认知。进入正题&#xff0c;在这一篇中我主要编一个“英语单词练习小程序”来给大家展开介绍&#xff0c;从测试版逐步改良&#x…

数据结构——图的基础知识与其表示

一&#xff1a;定义 由顶点的集合和边的集合组成&#xff1b;常以 G(V,E) 表示&#xff0c;G 代表图&#xff0c;V代表 顶点的集合&#xff0c;E代表边的集合&#xff1b; 如图&#xff1a; 在G1图中&#xff0c;有 0~4 五个顶点&#xff0c;有 0-1&#xff0c;0-2&…
最新文章