所謂 SAP UI5 應(yīng)用的主-從-從布局模式,意思是屏幕水平方向分為左,中,右三部分。
每個(gè)部分分別顯示 Master,Detail 第一層和 Detail 第二層數(shù)據(jù)。
下面這個(gè) gif 是具備這種布局方式的一個(gè)具體例子:
該應(yīng)用程序提供以下功能:
基于 sap.f.FlexibleColumnLayout 控件的最多三列布局。此布局具有預(yù)定義的布局類型和它們之間的定義路由,可以在應(yīng)用程序的主從模式之間平滑導(dǎo)航。
基于 sap.f.DynamicPage 控件的 Master 頁(yè)面,其中列出了可用產(chǎn)品并具有過(guò)濾和排序選項(xiàng)。
基于 sap.uxap.ObjectPageLayout 控件的詳細(xì)信息頁(yè)面,其中包含有關(guān)母版頁(yè)中所選對(duì)象的詳細(xì)信息,它實(shí)現(xiàn)了 ObjectPageLayout 控件的動(dòng)態(tài)標(biāo)題。
sap.f.Avatar 控件用于標(biāo)題區(qū)域以顯示所選產(chǎn)品的圖像。
通過(guò)向下滾動(dòng)頁(yè)面內(nèi)容或單擊/點(diǎn)擊標(biāo)題區(qū)域,可以折疊標(biāo)題標(biāo)題區(qū)域(捕捉到標(biāo)題)。標(biāo)題區(qū)域也可以固定,以便在用戶向下滾動(dòng)頁(yè)面內(nèi)容時(shí)保持可見(jiàn)。
標(biāo)題區(qū)域右側(cè)有一組動(dòng)作。標(biāo)題區(qū)域可以在標(biāo)題被捕捉時(shí)顯示特定內(nèi)容。
浮動(dòng)頁(yè)腳位于頁(yè)面底部,位于頁(yè)面內(nèi)容的頂部。它在右側(cè)保存最終操作。
基于 sap.f.DynamicPage 的詳細(xì)信息頁(yè)面,用于顯示詳細(xì)信息頁(yè)面中所選對(duì)象的更多詳細(xì)信息。
一個(gè)基于 sap.f.DynamicPage 的簡(jiǎn)單關(guān)于頁(yè)面,用于從詳細(xì)信息頁(yè)面顯示所選對(duì)象的更多詳細(xì)信息,即 Detail 第二層數(shù)據(jù)。
所謂 Dynamic Page,就是一種布局控件(Layout control),可以用來(lái)實(shí)現(xiàn)一個(gè)最終用戶看到的網(wǎng)頁(yè),由標(biāo)題、具有動(dòng)態(tài)行為的抬頭區(qū)域、內(nèi)容區(qū)域和可選的浮動(dòng)頁(yè)腳區(qū)域組成。
DynamicPageTitle - 由左側(cè)的標(biāo)題、中間的內(nèi)容和右側(cè)的操作組成。 顯示的內(nèi)容會(huì)根據(jù) DynamicPageHeader 的當(dāng)前模式而變化。
DynamicPageHeader - 一個(gè)通用容器,可以包含單個(gè)布局控件并且不關(guān)心內(nèi)容對(duì)齊和響應(yīng)性。 抬頭區(qū)域在展開(kāi)(expanded)和收起兩種模式下工作,并且可以借助不同的屬性調(diào)整其行為。
內(nèi)容區(qū)域 - 一個(gè)通用容器,可以有單個(gè) UI5 布局控件,不關(guān)心內(nèi)容對(duì)齊和響應(yīng)性。
頁(yè)腳 - 位于底部,有一個(gè)小的偏移量,用于附加操作,頁(yè)腳浮動(dòng)在內(nèi)容上方。 它可以是任何 sap.m.IBar 控件。
具體實(shí)現(xiàn)步驟如下。
聯(lián)系客服