快速定制開發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 ShareMenu Buttons-->
		<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} &amp;&amp; !${appView>/actionButtonsInfo/midColumn/fullScreen}}" press=".toggleFullScreen"/>
		</semantic:fullScreenAction>
		<semantic:exitFullScreenAction>
			<semantic:ExitFullScreenAction id="exitFullScreen"
				visible="{= !${device>/system/phone} &amp;&amp; ${appView>/actionButtonsInfo/midColumn/fullScreen}}" press=".toggleFullScreen"/>
		</semantic:exitFullScreenAction>
		
		<!-- Custom Title Icon Content-->
		<semantic:titleCustomIconActions>
			<OverflowToolbarButton icon="sap-icon://cart" text="cart" />
		</semantic:titleCustomIconActions>

		 <!--Semantic ShareMenu Buttons-->
		<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>

		<!-- Custom Share Actions -->
		<semantic:customShareActions>
			<Button icon= "sap-icon://bed" text="Bed" />
			<Button icon= "sap-icon://flight" text="Flight" />
		</semantic:customShareActions>
		
		<!-- Semantic Footer Buttons -->
		<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，比如審批，拒絕，取消等功能。

<!-- Custom Footer Content-->
		<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