快速定制开发Freestyle App

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页面来做一些定制化开发：

1. 在Header上增加一些global action按钮

2. 在列表的工具栏上定制增加一些按钮

3. 增加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>
			<semantic:FlagAction />
		semantic:flagAction>

		<semantic:closeAction>
			<semantic:CloseAction />
		semantic:closeAction>

		
		<semantic:sendEmailAction>
			<semantic:SendEmailAction id="shareEmail" press=".onSendEmailPress"/>
		semantic:sendEmailAction>
		<semantic:closeAction>
			<semantic:CloseAction id="closeColumn" press=".onCloseDetailPress"/>
		semantic:closeAction>
		<semantic:fullScreenAction>
			<semantic:FullScreenAction id="enterFullScreen"
				visible="{= !${device>/system/phone} && !${appView>/actionButtonsInfo/midColumn/fullScreen}}" press=".toggleFullScreen"/>
		semantic:fullScreenAction>
		<semantic:exitFullScreenAction>
			<semantic:ExitFullScreenAction id="exitFullScreen"
				visible="{= !${device>/system/phone} && ${appView>/actionButtonsInfo/midColumn/fullScreen}}" press=".toggleFullScreen"/>
		semantic:exitFullScreenAction>
		
		
		<semantic:titleCustomIconActions>
			<OverflowToolbarButton icon="sap-icon://cart" text="cart" />
		semantic:titleCustomIconActions>

		 
		<semantic:discussInJamAction>
			<semantic:DiscussInJamAction />
		semantic:discussInJamAction>

		<semantic:shareInJamAction>
			<semantic:ShareInJamAction />
		semantic:shareInJamAction>

		<semantic:printAction>
			<semantic:PrintAction />
		semantic:printAction>

		<semantic:sendEmailAction>
			<semantic:SendEmailAction />
		semantic:sendEmailAction>

		<semantic:sendMessageAction>
			<semantic:SendMessageAction />
		semantic:sendMessageAction>

		
		<semantic:customShareActions>
			
			
		semantic:customShareActions>
		
		
		<semantic:positiveAction>
			<semantic:PositiveAction />
		semantic:positiveAction>

		<semantic:negativeAction>
			<semantic:NegativeAction />
		semantic:negativeAction>

		<semantic:messagesIndicator>
			<semantic:MessagesIndicator press="onMessagesButtonPress"/>
		semantic:messagesIndicator>

• Page Conent

  页面的主要内容，一般是一个Table，在table的toolbar上可以放一些actions

  具体的实现可以是OverflowToolbar，它的设计是按钮依次靠右侧显示，最重要的在最前面。

  另外，在显示面积缩小的时候，按钮能自动根据界面大小自动折叠显示。

<Table ...>
<headerToolbar>
					<OverflowToolbar id="otb1">
						<Label text="Buttons:"/>
						<ToolbarSpacer/>
						<Button text="New" type="Transparent"/>
						<Button text="Open" type="Transparent"/>
						<Button text="Save" type="Transparent"/>
						<Button text="Save as" type="Transparent"/>
						<Button text="Cut" type="Transparent"/>
						<Button text="Copy" type="Transparent"/>
						<Button text="Paste" type="Transparent"/>
						<Button text="Undo" type="Transparent"/>
						<Button text="Redo" type="Transparent"/>
					OverflowToolbar>
				headerToolbar>
Table>

• Footer

  在页面的最下面，也可以设计一些全局操作的action，比如审批，拒绝，取消等功能。

		<semantic:footerCustomActions>
			<Button text="Save" />
			<Button text="Cancel" />
		semantic:footerCustomActions>

运行效果

小结

UI5的Semantic Page是根据最佳实践，提供了很多预制的UI模板可以直接使用，通过它可以快速开发符合SAP Fiori Guideline的企业应用，大幅缩短开发时间，提高效率。

参考阅读

https://experience.sap.com/fiori-design-web/semantic-page/

https://experience.sap.com/fiori-design-web/toolbar-overview/

https://blog.csdn.net/starshus/article/details/105468922