FreeStyle Development
在很多通用的需求下,可以通过SAP Fiori Element技术来快速开发Ui5应用。对于一些比较特别的需求,还是需要来通过代码的方式来开发Freestyle UI5应用。
之前通过webide自动创建项目的方式,自动生成了代码,可以直接运行。
一般情况下,都会需要对代码做一定的修改。
今天通过之前的小例子来看一下,如何通过代码来定制开发Freestyle的app。
Demo项目是一个List Report,查看源代码,detail view的实现是通过Semantic Page。
Semantic Page
我们先看一下Semantic Page的设计,它是一种特殊的Dynamic Page。
Dynamic Page是Fiori设计中最为广泛使用的page layout,大多数我们看到的页面都是基于Dynamic page,最灵活,定制性也最强。
Semantic Page把一些能够复用的UI特性提炼出来,达到尽量复用,降低开发effort的作用。
参见SAP Fiori Guildline对Semantic Page的描述:
Dynamic Page Layout – Semantic Page
- You are building a freestyle application.
- You want to use a predefined layout to reduce development time.
示例
下面我来对Order detail页面来做一些定制化开发:
-
在Header上增加一些global action按钮
-
在列表的工具栏上定制增加一些按钮
-
增加Footer actions
-
Header
header这里,顾名思义,包含了业务对象的整体信息,这里可以放一些对全局操作的action
<semantic:titleMainAction>
<semantic:TitleMainAction text="Edit"/>
</semantic:titleMainAction>
<semantic:addAction>
<semantic:AddAction />
</semantic:addAction>
<semantic:deleteAction>
<semantic:DeleteAction />
</semantic:deleteAction>
<semantic:copyAction>
<semantic:CopyAction />
</semantic:copyAction>
<semantic:editAction>
<semantic:EditAction />
</semantic:editAction>
<semantic:favoriteAction>
<semantic:FavoriteAction />
</semantic:favoriteAction>
<semantic:flagAction>
<s