所謂 SAP UI5 應(yīng)用的主-從-從布局模式，意思是屏幕水平方向分為左，中，右三部分。

每個部分分別顯示 Master，Detail 第一層和 Detail 第二層數(shù)據(jù)。

下面這個 gif 是具備這種布局方式的一個具體例子：

該應(yīng)用程序提供以下功能：

• 基于 sap.f.FlexibleColumnLayout 控件的最多三列布局。此布局具有預(yù)定義的布局類型和它們之間的定義路由，可以在應(yīng)用程序的主從模式之間平滑導(dǎo)航。

• 基于 sap.f.DynamicPage 控件的 Master 頁面，其中列出了可用產(chǎn)品并具有過濾和排序選項(xiàng)。

• 基于 sap.uxap.ObjectPageLayout 控件的詳細(xì)信息頁面，其中包含有關(guān)母版頁中所選對象的詳細(xì)信息，它實(shí)現(xiàn)了 ObjectPageLayout 控件的動態(tài)標(biāo)題。

• sap.f.Avatar 控件用于標(biāo)題區(qū)域以顯示所選產(chǎn)品的圖像。

• 通過向下滾動頁面內(nèi)容或單擊/點(diǎn)擊標(biāo)題區(qū)域，可以折疊標(biāo)題標(biāo)題區(qū)域（捕捉到標(biāo)題）。標(biāo)題區(qū)域也可以固定，以便在用戶向下滾動頁面內(nèi)容時保持可見。

• 標(biāo)題區(qū)域右側(cè)有一組動作。標(biāo)題區(qū)域可以在標(biāo)題被捕捉時顯示特定內(nèi)容。

• 浮動頁腳位于頁面底部，位于頁面內(nèi)容的頂部。它在右側(cè)保存最終操作。

• 基于 sap.f.DynamicPage 的詳細(xì)信息頁面，用于顯示詳細(xì)信息頁面中所選對象的更多詳細(xì)信息。

• 一個基于 sap.f.DynamicPage 的簡單關(guān)于頁面，用于從詳細(xì)信息頁面顯示所選對象的更多詳細(xì)信息，即 Detail 第二層數(shù)據(jù)。

所謂 Dynamic Page，就是一種布局控件(Layout control)，可以用來實(shí)現(xiàn)一個最終用戶看到的網(wǎng)頁，由標(biāo)題、具有動態(tài)行為的抬頭區(qū)域、內(nèi)容區(qū)域和可選的浮動頁腳區(qū)域組成。

• DynamicPageTitle - 由左側(cè)的標(biāo)題、中間的內(nèi)容和右側(cè)的操作組成。 顯示的內(nèi)容會根據(jù) DynamicPageHeader 的當(dāng)前模式而變化。

• DynamicPageHeader - 一個通用容器，可以包含單個布局控件并且不關(guān)心內(nèi)容對齊和響應(yīng)性。 抬頭區(qū)域在展開(expanded)和收起兩種模式下工作，并且可以借助不同的屬性調(diào)整其行為。

• 內(nèi)容區(qū)域 - 一個通用容器，可以有單個 UI5 布局控件，不關(guān)心內(nèi)容對齊和響應(yīng)性。

• 頁腳 - 位于底部，有一個小的偏移量，用于附加操作，頁腳浮動在內(nèi)容上方。 它可以是任何 sap.m.IBar 控件。

具體實(shí)現(xiàn)步驟如下。