1. 迈进 SAP UI5 开发世界的第一步 - Hello World

原创 已于 2024-09-27 14:41:26 修改 · 8.9k 阅读 · 13
于 2021-10-05 11:50:17 首次发布

SAP UI5 应用开发教程之一：Hello World

SAP UI5 是一个用于开发企业级 Web 应用的前端框架，基于 HTML 和 JavaScript.

作为教程的第一步，我们需要了解最基础的 HTML 知识。

请大家在电脑上任意新建一个文件夹，将其命名，比如我取的名称为 Walkthrough. 进入 Walkthrough 文件夹，再新建一个文件夹名叫 01，代表本教程的第一个步骤。

进入 01 文件夹，新建一个 webapp 文件夹。这个名称是 web 应用约定俗成所使用的，大家都倾向于用这个名称，当然你要是想用其他名称也没有问题。

进入 webapp，新建一个 index.html 文件，将下面的代码粘贴进去:

<!DOCTYPE html>
<html>
标签
#html #html5 #javascript #SAP #FIORI
了解本专栏 订阅专栏 解锁全文
OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（上）
qianmarv的博客
07-23 3077
OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（上） 1 扫盲 什么是SAP Fiori？ 了解SAP UI5必须要从SAP Fiori开始，两者概念经常被混淆，而两者也确实有着非常紧密的关系。 用过SAP的同学们都对SAP的传统的界面（SAP GUI）表示“呵呵”，其实传统的SAP GUI的界面功能还是很强大的，但是对于一个新用户来说，学会使用这套界面就需要花上一
SAP Fiori UI5 开发环境搭建和部署（含增强开发）
最新发布
Cappuccino0001的博客
06-09 1762
本文介绍了 SAPUI5、OpenUI5 和 Fiori 的关系,记录了使用 VSCode 进行 Fiori 开发的步骤：环境搭建、两种开发模式（自由开发和增强开发）的工程创建与运行，以及应用部署和磁贴发布的完整流程。
sap ui5教程（1） Hello World及index代码三部分
Yichair的博客
01-14 1367
1、hello world代码解释 index.html分为三个部分，分别是bootstrap，Application area，UI area html> head> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta http-equiv='Content-Type' content=
UI5 Inspector，一款好用的 Chrome 扩展
02-22
适用于 SAP UI5 应用开发人员，我的专栏《一套适合 SAP UI5 开发人员循序渐进的学习教程》对这个工具有详细介绍。
sap ui5教程（0）简介、环境搭建、创建项目
Yichair的博客
01-13 5665
因为去sap公司实习原因，即将接触sap ui5框架，这里记录我对sap ui5的学习过程 1、简介 SAP UI5： sap ui5是sap公司推出的前端 UI框架，用js编写，有丰富的组件可以组合使用。 OpenUI5: SAP UI5的开源版本，核心框架和SAP UI5一样，但移除了一些库 模式： sap ui5采用MVC（model业务模型,view显示页面,controlle
SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
热门推荐
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-05 3万+
笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。 对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。
126. SAP UI5 进阶 - JSON 模型字段里的值，显示在最终 UI5 界面上的奥秘分析
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
09-08 1335
从我们在 XML 视图里书写了这行代码 ，到最后打开浏览器看到了 Input 元素显示出 `Hello World`，背后经历了这些事情： (1) XML 视图的 `App.view.xml` 文件被加载，解析，Input 的 value 属性的绑定路径被解析。 (2) App.controller.js 内的 JSONModel.setModel 方法调用，根据前一步骤解析出的绑定路径...
SAPUI5学习第三天-----（04）接下来轮到module和JSON module了！
'尤其是十月的风'的博客
05-28 564
上菜，module！ 在SAPUI5中，资源通常被称为模块。在这一步中，我们将最后一个练习中的警告替换为来自sap.m库的适当的Message Toast。所需的模块可以异步加载。 webapp/controller/App.controller.js sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function (Controller, MessageToast) { "use stric
SAP UI5学习笔记
weixin_39289390的博客
11-26 964
meta> 确定字符集，utf-8支持所有文字和字符。DOCTYPE> H5都必须以此开头；
Jerry的UI5框架代码自学教程
weixin_30699955的博客
01-06 180
SAP UI5对View元素基于jQuery的操作方式，使得其学习曲线相对Angular/React来说比较平缓，至少对于我个人而言是这样。对于已经有jQuery经验的前端开发人员来说很容易上手。 使用UI5开发SAP UI应用，在开发过程中往往会遇到各种各样的问题，比如最后出来的UI效果和你预料的不一样，或者console里面显示一些奇奇怪怪的error message. 对于后者来...
sap UI5开始教程——环境配置和helloworld
qq_54432686的博客
10-19 782
现在，启动网络服务器，提供“webapp”文件夹的源代码，然后在浏览器中打开 index.html 文件，或者直接进入网址：http://localhost:8080/index.html。我们加载来两个 UI 控件 —— 一个按钮和一个消息 toast ——并将按钮放在具有内容 ID 的元素中。这样，我们可以轻松地引用将在此步骤中创建的其他文件。为了方便起见，我们使用 OpenUI5 的内容交付网络(CND)路径。标签，我们使用典型的引导参数加载和初始化 SAPUI5。
SAPUI5教程——最全中文学习指南（必看）
weixin_30606461的博客
08-05 703
前言 技术的变革日新月异，求知的迫切与日俱增，现如今云计算，大数据，虚拟现实，无一不充斥着我们的眼帘，这一切的宗旨，旨在为凭借更高的体验，满足更多的需求，追求更高的价值，创造更多的利益。 那么我们今天要讲的是SAP公司所推出的一个革新的用户体验——SAP Fiori,SAP Fiori其实是一个很大的概念，可以称之为一套系统，更可以称为一个框架，其架构理念旨在为简化传统的操作流程，提供其...
使用Vscode工具搭建 SAPUI5开发环境
Tiny~JJ的博客
07-22 5887
SAP Fiori UI5
SAP UI5 教程大全之 01 面向初学者的 SAPUI5 简介
iCloudEnd的博客
04-25 1824
市场上有一些非常好的 HTML5 UI 框架，例如：Twitter Bootstrap、Foundation、Sencha Touch、KendoUI 等等。SAP 推出了 SAPUI5，正式名称为“HTML5 的 UI 开发工具包”。 SAPUI5 使用模型视图控制器 (MVC) 概念将信息的表示与用户交互分开。 模型、视图和控制器被分配了以下角色： 视图负责定义和呈现 UI。 模型管理应用程序数据。 控制器通过修改视图和模型对视图事件和用户交互做出反应。 在 Eclipse 上安装 SAPUI5 S
SAPUI5基础知识2 - 手动创建一个SAPUI5的项目
SAP领域技术博客
05-20 2304
本文通过一个hello world应用程序，展示了如何手动创建出一个SAPUI5的项目，并如何运行SAPUI5应用程序。
SAP UI5 应用的两种开发方式的教程
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
05-01 459
对于 SAP Fiori Elements 框架在运行时要考虑的注解，它必须驻留在应用程序的应用程序描述符文件 manifest.json 中注册的注解源中。此外，在 Web 应用程序清单中，可以找到应用程序基本元数据的描述，例如它的名称和版本，以及它的内容，例如应用程序页面、导航、使用的服务详细信息等。注解可以与元数据一起定义，也可以在专用 annotation 文件中定义，既可以在后端与服务一起定义，也可以在前端的本地注解文件中定义。对于单个页面中的 flex 更改，例如启用导出，可以使用页面编辑器。
【New】SAPUI5开发环境配置步骤
少年休闲海
09-05 2918
一、安装JAVA Runtime环境 要求：JRE version 1.6 or higher, 32-Bit or 64-Bit 下载地址：http://www.java.com/en/download/manual.jsp 记得进行环境变量的配置：计算机→属性→高级系统设置→高级→环境变量 系统变量→新建 JAVA_HOME 变量 。 ...
使用 Visual Studio Code 搭建 SAP UI5 本地开发环境
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-05 1万+
工欲善其事,必先利其器。时至今日，SAP 提供了非常多的 SAP UI5 开发工具，既包含本地搭建的，也包含浏览器里远端使用的工具，比如 WebIDE 和 Business Application Studio. 我们访问下面这个链接，就能找到所有这些工具的安装或者配置步骤： https://tools.hana.ondemand.com/#sapui5 如果想选择本地开发，SAP 推荐的工具是 Visual Studio Code，也就是本文要介绍的内容。 也可以下载 WebIDE 的本地安装包，将其安
SAP UI5 和 Angular 在企业级应用开发中的差异
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
02-27 334
比较维度SAP UI5Angular架构模式MVC架构，视图-控制器-模型分离 (使用声明式的XML视图定义界面。组件化架构，基于组件和模块组织应用；每个组件封装模板、逻辑和样式。技术栈基于 JavaScript（可使用ES5/ES6），HTML5，CSS；依赖 SAP 提供的库（如 sap.m 控件库）。基于 TypeScript，使用现代Web标准；需要构建工具（Angular CLI）和 Node.js 生态。UI组件内置丰富的企业级UI控件库，遵循SAP Fiori设计规范，开箱即用 (
139. SAP UI5 SmartForm 智能表单控件的使用方法介绍
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
10-02 1782
本教程到目前为止，演示的 OData 元数据定义中的 SAP 自定义注解，都是通过笔者手动编辑的方式，写入到 OData 元数据本地文件 `metadata.xml` 里，然后在运行时通过 Mock Server 返回给 SAP UI5 应用的。有朋友给我留言，询问在正式的项目开发中，如何给 OData 添加这些 SAP 自定义注解。因为这个问题属于 OData 后台开发的范畴，将会在笔者另一套教程 SAP OData 开发实战教程 - 从入门到提高进行介绍。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值