Walkthrough-step1
两年前开始接触sapui5并且做了第一个UI5项目,一年左右的时间学了皮毛又放下了,做了点笔记(guojz3.github.io)又因为图床”幸运“地选择了七牛,一下全打不开了,大爷!
也好,重新来过,walkthough一直是我强烈推荐给身边学习UI5朋友的入门教程,跟着做两到三遍,一个关键字一个关键字的敲下去并理解了,自然就学会了,不过对于我这种忘性好的另说,这不是又重新开始学了么…部分内容从之前的笔记直接copy过来了,毕竟那是一个字一个字的码的。
在这次重做的过程中发现这个walthrough几乎每一个step的代码都和两年前学时的有了有不同,SAP的同学还是蛮勤奋的,我们可以新旧一起对比下
Step1 Hello world
传说中的hello world又现江湖,开始吧!
- UI5的开发工具WEBIDE下载地址https://tools.hana.ondemand.com/#sapui5
这一节的关键是在根目录下创建index.html 的同时要创建一个neo-app.json文件
neo-app.json
这个文件是做什么用呢?这是一个项目配置文件,下面是文件的内容:
{
"welcomeFile": "index.html",
"routes": [
{
"path": "/resources",
"target": {
"type": "service",
"name": "sapui5",
"version": "snapshot",
"entryPath": "/resources"
},
"description": "SAPUI5 Resources"
},
{
"path": "/test-resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/test-resources"
},
"description": "SAPUI5 Test Resources"
}
]
}
neo-app.json文件指明了两个配置对象,对象有3个属性:path target description,其中path和entryPath指定了资源保存在服务器的那个相对位置,webIDE在执行app时会自动运行这些设置。WelcomeFile 指定了app的入口,web应用一般用index.html来做为入口文件。
index.html(旧)
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Walkthrough</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
index.html(新)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
</head>
<body>
<div>Hello World</div>
</body>
</html>
这里没什么好解释的,学习UI5肯定是要掌握有关html的基础知识的。
可以注意到新的index.html把<meta http-equiv="X-UA-Compatible" content="IE=edge">
这句话拿掉了,X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式。这句的作用就是指定浏览器兼容,现在既然SAP这句拿掉了,应该就是这里使用标准模式渲染就够了。
执行
执行以后会自动生成一个*.user.project.json*文件