SAPUI5标准控件在外观和功能上都非常吸引人。但有时您可能需要超出标准功能的功能。侧导航是这些控件之一。它有一个很好的外观和感觉和一个很好的滑动效果。但它只允许两个级联级别，这在很多情况下是不够的。
因此，在这篇博文中，我们将扩展SideNavigation控件，使其允许多个级别（根据您的需要）。这篇博文由三部分组成。在第1部分中，我们将探索标准的侧导航控件，并以编程方式创建两级菜单。在第2部分中，我们将扩展NavigationListItem以使SideNavigation具有多个级别。在第3部分中，我们将调整扩展控件的外观并添加一些附加功能。
您可以从GitHub SideNavigationExtend克隆整个项目。
这是我们在本教程结束时将得到的：
大纲将是：
第1部分：
1。关键点
2。创建SAPUI5应用项目
3。调整资源根
4。创建标准侧导航
第2部分：
5。扩展导航列表项控件
第3部分：
6。调整XNavigationListItem
7。微调外观和感觉
8。调整按钮点击事件为最后一级
我们有很多事情要做，所以让我们开始
1。关键点
侧导航以NavigationList作为其聚合。此聚合具有0..1基数，低价的云服务器，这意味着SideNavigation中最多有一个NavigationList。（multiple:false）
和NavigationList将NavigationListItem作为基数为0..n的聚合。（multiple:true）
最后，NavigationListItem将NavigationListItem（自身）作为聚合。在sapui5api引用中，它表示此聚合为0..n。这意味着您可以在NavigationListItem中放置任意数量的NavigationListItem，这是真的。但奇怪的是API引用没有指定级别。我们可以把NavigationListItem放在NavigationListItem中到底有多深。这不是说，物联网大赛，事实上答案是两个层次。我们只能创建带有标准侧导航的两级菜单。（当我们扩展渲染器时，您将看到原因。）
您可以在这里看到文档：SideNavigation API参考
在下面的图像中，您可以看到SideNavigation的标准结构和扩展控件后我们将实现的结构。
所以现在，我们知道了关键点在哪里（NavigationListItem），我们将集中讨论这个。更准确地说，我们将扩展NavigationListItem以允许多个聚合级别到它自己。创建SAPUI5应用程序项目
首先，让我们在sapwebide中创建一个项目。在工作区上单击鼠标右键，淘客发单软件，然后从模板中选择"项目"。从模板列表中选择SAPUI5应用程序，然后单击下一步。输入项目名称为"SideNavigationExtend"，名称空间为"sap演示"然后单击"下一步"。（我们将大量使用这个名称空间。）
在下一个屏幕中，选择JavaScript作为视图类型，选择"App"作为视图名称。
单击Finish创建您的UI5应用程序。WebIDE将为您创建所有必要的结构。
在webapp文件夹中创建一个文件夹作为"控件"。我们将把扩展名文件保存在这个文件夹中。
为什么选择jsview？
我们选择JavaScript（jsview）而不是XML视图，因为我们将以编程方式创建侧导航及其子项。
3。调整资源根
我们将在索引.html, 应用程序视图.js, 应用程序控制器.js, 组件.js以及清单.json文件夹。（我不知道原因，但是WebIDE将项目名称连接到名称空间中。这就是为什么我们要改变它。如果您的版本没有这样做，您可以跳过此部分。）
打开索引.html文件。"更改"sap.demoSideNavigationExtend"至"sap演示"在数据sap ui resourceroots中，位于html页面头部区域的script标记内。
old:data sap ui resourceroots='{"sap.demoSideNavigationExtend"：""}"
新建：数据sap ui resourceroots='{"sap演示"：""}'
并更改"名称："sap.demoSideNavigationExtend"属性到"名称："sap演示""在新的sap.ui.core.ComponentContainer构造函数
打开应用程序视图.js文件。"改变"sap.demoSideNavigationExtend.查看应用程序"至"sap.demo.view.App"
打开应用控制器在webapp->controller文件夹中。给你，换衣服sap.demoSideNavigationExtend.控制器.App"至"sap.demo.controller"应用程序"。"和"sap.demoSideNavigationExtend.控制器.App"至"sap.demo.controller.App"
打开组件.js文件。将"sap/demoSideNavigationExtend/model/models"更改为"sap/demo/model/models"并sap.demoSideNavigationExtend.组件"至"sap.demo.Component组件"
打开清单.json文件。"改变"sap.demoSideNavigationExtend"至"sap演示"在"sap应用程序"部分。更改"viewName"：sap.demoSideNavigationExtend.查看应用程序至"视图名称"：sap.demo.view.App"在"sap.ui5版本"部分。最后更改"bundleName"：sap.demoSideNavigationExtend.i18n.i18n"到"bundleName"："sap演示.i18n.i18n"保存所有文件。现在我们调整了名称空间。要检查应用程序是否已启动并运行，请运行索引.html文件。您应该在浏览器中看到Shell。如果你没有看到这个，打开浏览器的开发者工具（我更喜欢googlechrome，按F12打开开发者工具）。并检查开发工具控制台以查看错误是什么。
4。创建标准侧导航
在扩展控件之前，物联网是啥，让我们先创建标准侧导航及其子项。请参见SDK中的示例：SideNavigation示例
首先添加sap.tnt公司库中的引导程序索引.html文件：data sap ui libs="sap.m，sap.tnt公司"（我们需要这样做，才能使用sap.tnt公司控件。）
在我们的应用程序视图.js文件，在createContent函数中：
