Fiori/UI5 - 使用WebIDE开发第一个应用

上一章介绍了WebIDE的安装和配置,如果童鞋们有什么问题,可以加我的微信,注明 sapfiori ,我尽量给予解答,当然也可以在文章后面评论,我会定期查看。
接下来,我们使用webIDE来做一个应用,通过使用webIDE提供的模板,这将会变成一件非常简单的事情,当然,要满足以下几个前提:

  • Odata Model已经创建好
  • Service已经register在gateway server
  • 通过浏览器能够访问odata service

让我们正式开始吧

运行 HANA connector,确定里面注册的系统正常连接

Fiori/UI5 - 使用WebIDE开发第一个应用_第1张图片
HANA Connector

打开webIDE,我比较习惯使用chrome,选择file->new->Project from Template

Fiori/UI5 - 使用WebIDE开发第一个应用_第2张图片
SAP WebIDE

选择Fiori master detail app, 点next, 输入project name, 选择gateway server,在列出来的service中选择要使用的odata service

Fiori/UI5 - 使用WebIDE开发第一个应用_第3张图片
Odata Service Selection

输入project相关信息,定义master页面和detail页面要显示的信息.

Project NameSpace:随意,根据公司的namespace来定义;
Master Section以及detail section如图:

Fiori/UI5 - 使用WebIDE开发第一个应用_第4张图片
设置模板内容

定义navigation section.

这个用于detail页面显示不同的iconTabBar,而odatamodel却不在相同的entitySet的时候使用,同时,从主entity到这个entitycascading要是1:0…1,在本例中,由于model不支持,所以不需要定义。

都输入好了之后,点击NextFinish即可.

通过以上几个步骤,这个Application已经完成,现在我们可以测试了,首先,这个应用还在本地,进行本地测试,webIDE下可以直接进行,打开创建的项目,选中index.html,直接运行,测试如下:

Fiori/UI5 - 使用WebIDE开发第一个应用_第5张图片
选择Index文件

Fiori/UI5 - 使用WebIDE开发第一个应用_第6张图片
在WebIDE下测试

如果本地测试没有问题,可以把这个UI5应用发布到gateway server上去.

这样就不需要通过HANA connector以及WebIDE进行测试,同时可以使用EclipseServer的程序版本下载到本地,进行后续的编辑。

Fiori/UI5 - 使用WebIDE开发第一个应用_第7张图片
发布到后端系统

发布应用

进入deploy选项,其中选择gateway server系统,创建一个新的应用,输入名字,描述以及package,这些定义都是和传统的ABAP开发一样,需要以Y、Z开头,如果想生成TR,需要输入package名字,否则使用$TMP.Deploy会需要1,2分钟,然后就可以直接到gateway server测试应用了。

本文仅对UI5开发工具WebIDE做个简单介绍,至于如何创建odata model,如果在gateway server进行配置,将在后续文章中逐一介绍。

你可能感兴趣的:(Fiori/UI5 - 使用WebIDE开发第一个应用)