SAP UI5 應用如何載入自定義 Theme

要載入外部自定義主題，開發人員可以透過在頁面中靜態宣告或使用 Core.setThemeRoot() 方法來設定此主題。

這非常類似於對位於不同位置的 SAP UI5 庫使用 registerModulePath()。

下面是具體的操作步驟：

(1) 使用下面的程式碼告訴 SAP UI5 框架，我們自定義 theme 的地址。

sap.ui.getCore().setThemeRoot("my_theme", "http://url.to/the/root/dir");

SAPUI5 然後從該 URL 載入所有主題資源。比如sap.ui.core庫的 library.css檔案，在上述程式碼執行之後，就變成：

http://url.to/the/root/dir/sap/ui/core/themes/my_theme/library.css

base directory 也可以透過 core.applyTheme(...) 方法的第二個引數指定。

如果 theme 的某些部分位於不同的位置，可以使用上面的呼叫來設定預設值，但透過在陣列中將它們指定為第二個引數來覆蓋特定庫的主題位置：

sap.ui.getCore().setThemeRoot("my_theme", ["my.lib.one","my.lib.two"], "http://url.to/the/other/root/dir");

下面是不同的設定 theme 的實現方法：

(1) 在 SAPUI5 bootstrap script 的屬性中使用與 JSON 字串相同的物件結構:

<script id="sap-ui-bootstrap" 
    type="text/javascript"
    src="resources/sap-ui-core.js"
    data-sap-ui-theme-roots='{"my_theme" : "http://themes.org/ui5"}'>
</script>

(2) 透過 URL parameter 指定:

http://myserver.com/sap/myapp/?sap-ui-theme=my-theme@/sap/public/bc/themes/~client-111

(3) 透過全域性配置物件指定。

將下列程式碼插入到 bootstrap 指令碼之前：

<script type="text/javascript">
window["sap-ui-config"] = {
    themeRoots : {
        "my_preconfigured_theme" : "http://preconfig.com/ui5-themes",
        
        "my_second_preconfigured_theme" : {
            "" : "http://preconfig.com/ui5-themes",
            "sap.ui.core" : "http://core.com/ui5"
        }
    }
}
</script>

上面的程式碼達到的效果：

從指定位置為所有庫載入第一個主題。
從指定位置為 sap.ui.core 庫載入第二個主題。對於所有其他庫，主題從預設位置載入。

透過 sap-ui-theme/sap-theme URL 引數配置帶有 themeRoot URL 的主題時，存在一些出於安全方面考慮的限制。

預設情況下，與當前頁面不同來源的絕對 URL 被禁止訪問。路徑段將相對於當前頁面 origin 值進行解析。

根據 RFC 6454，為了允許透過 URL 引數使用某些 origin 來源，可以將 <meta> 標記新增到頁面的 <head> 中：

<meta name="sap-allowedThemeOrigins" content="https://example.com">

有了上面的語句之後，我們就可以在 SAP UI5 url parameter 裡，載入部署在另一個 url 上的 theme：

https://myserver.com/sap/myapp/?sap-theme=my_theme@https://example.com/custom-themes/

<meta> 標記中提供的來源必須包含與 URL 引數中提供的來源相同的協議、主機和埠。多個允許的來源可以用逗號分隔。

通用萬用字元 * 也可用於允許所有來源。然而，這應該只與其他安全機制結合使用，例如 CSP style-src 指令。不支援允許子域的萬用字元。

SAP UI5 應用如何載入自定義 Theme

相關文章