SAP Fiori Elements 应用里的 Title 显示的内容是从哪里来的

仅从静态代码分析来看，title 数据源有两处：

1. flpSandbox.html 里的 title 标签

2. manifest.json 文件里 sap.app 字段下的 title 字段。

下图这个语法并不是 Angular 里数据绑定的 interpolation，而是引用了 i18n.properties 文件里的同名属性。

i18n.properties 文件里的 appTitle place holder(占位符)：

运行时发现，应用程序 bootstrap 时，首先显示 html 里维护的值：

最终被 i18n.properties 里的 appTitle 的值所取代。

在函数 fnSetTitleForComponent 里，给 Component 设置 title 属性：

从下面这个函数，能看出 title 属性来自 manifest.json 文件：

	function getAppTitle(){
			return oNavigationControllerProxy.oAppComponent.getManifestEntry("sap.app").title;
		}

我们在本地 Visual Studio Code 里, 按照下面两篇文章，完成了 SAP UI5 的应用开发，

• 使用 yo 命令行向导创建 SAP UI5 应用
• 使用 yo 命令行向导给 SAP UI5 应用添加一个新的视图

最后能得到一个列表，效果如下：

本文我们使用 SAP UI5 提供的 Smart 控件来继续丰富这个应用。

从下面三个 namespace 引入 Smart 控件：

• xmlns:smartFilterBar=“sap.ui.comp.smartfilterbar”
• xmlns:smartList=“sap.ui.comp.smartlist”
• xmlns:smartTable=“sap.ui.comp.smarttable”

xml view 的实现源代码:

<mvc:View controllerName="tutorial.products.controller.Products" displayBlock="true"
xmlns="sap.m"
xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
xmlns:smartList="sap.ui.comp.smartlist"
xmlns:smartTable="sap.ui.comp.smarttable"
xmlns:mvc="sap.ui.core.mvc">
<Page id="Products">
  <smartFilterBar:SmartFilterBar id="smartFilterBar" persistencyKey="UniqueAndStablePersistencyKey" entitySet="Products" considerSelectionVariants="true" />
  <smartList:SmartList id="smartProductList" smartFilter="smartFilterBar" entitySet="Products" expandFields="Category" header="Products List" showRowCount="true" showFullScreenButton="true" enableAutoBinding="true">
    <smartList:listItemTemplate>
      <StandardListItem id="listTemplate" type="Navigation" press="handleListItemPress" title="{ProductName}" info="{= ${UnitPrice} + ' €' }" description="{Category/CategoryName}" />
    </smartList:listItemTemplate>
  </smartList:SmartList>
</Page>
</mvc:View>

npm run start 启动工
程，最后看到的 Smart List：

Smart Filter 控件提供的开箱即用的功能：