咱们在本地 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 控件提供的开箱即用的性能：
更多 Jerry 的原创文章，尽在：” 汪子熙 ”: