摄影网站源代码,学历教育网站建设,搭建网站服务器需要什么配置,微信公众号运营分析1. 背景
SAPUI5 是一个用于构建企业级 Web 应用程序的 JavaScript 框架。它提供了丰富的 UI 控件和工具#xff0c;帮助开发者创建复杂的用户界面。Nested Views 是 SAPUI5 中的一种设计模式#xff0c;允许在一个视图中嵌套另一个视图。这种模式有助于模块化和重用代码帮助开发者创建复杂的用户界面。Nested Views 是 SAPUI5 中的一种设计模式允许在一个视图中嵌套另一个视图。这种模式有助于模块化和重用代码特别是在构建复杂的应用程序时。 Nested Views 是指在一个主视图Parent View中嵌入一个或多个子视图Child Views。这种嵌套可以通过 XML、JSON 或 JavaScript 代码来实现。通过这种方式可以将应用程序的不同部分分离到独立的视图中从而提高代码的可维护性和可重用性。 通过Nested Views 这种技术我们可以实现
模块化开发将应用程序的不同功能模块分离到独立的视图中便于开发和维护。代码重用相同的子视图可以在多个主视图中重用减少重复代码。动态视图加载根据用户操作或其他条件动态加载不同的子视图提高应用程序的灵活性。
2. 示例
假设我们有一个主视图MainView其中包含两个子视图 HeaderView 和 ContentView。
2.1 子视图HeaderView
子视图HeaderView对应的XML视图代码和控制器代码如下
HeaderView.view.xml
mvc:ViewcontrollerNamemyApp.controller.HeaderViewxmlns:mvcsap.ui.core.mvcxmlnssap.mBarcontentLeftButton textHome pressonHomePress//contentLeftcontentMiddleTitle textHeader//contentMiddle/Bar
/mvc:ViewHeaderView.controller.js
sap.ui.define([sap/ui/core/mvc/Controller
], function (Controller) {use strict;return Controller.extend(myApp.controller.HeaderView, {onHomePress: function () {// Home button press logic}});
});2.2 子视图ContentView
子视图ContentView对应的XML视图代码和控制器代码如下
ContentView.view.xml
mvc:ViewcontrollerNamemyApp.controller.ContentViewxmlns:mvcsap.ui.core.mvcxmlnssap.mVBoxText textThis is the content area//VBox
/mvc:ViewContentView.controller.js
sap.ui.define([sap/ui/core/mvc/Controller
], function (Controller) {use strict;return Controller.extend(myApp.controller.ContentView, {// Content view logic});
});2.3 创建主视图MainView并嵌套子视图
主视图MainView对应的XML视图代码和控制器代码如下
MainView.view.xml
mvc:ViewcontrollerNamemyApp.controller.MainViewxmlns:mvcsap.ui.core.mvcxmlnssap.mPagemvc:XMLView viewNamemyApp.view.HeaderView/mvc:XMLView viewNamemyApp.view.ContentView//Page
/mvc:ViewMainView.controller.js
sap.ui.define([sap/ui/core/mvc/Controller
], function (Controller) {use strict;return Controller.extend(myApp.controller.MainView, {// Main view logic});
});注意引用视图时必须指定应用程序的命名空间e.g. myApp来引用视图。 通过使用 Nested Views我们可以将应用程序的不同部分分离到独立的视图中从而提高代码的可维护性和可重用性。这种设计模式在构建复杂的 SAPUI5 应用程序时非常有用。 3. 练习
在前序练习的基础上让我们将应用程序中Panel面板控件的内容移动到一个单独的视图文件。
3.1 创建一个新的视图文件
首先在视图文件夹下创建一个新的视图文件HelloPanel.view.xml并指定其controllerName属性来指定视图的控制器。 并将App.view.xml视图文件中Panel面板控件中的内容已添加到新文件HelloPanel.view.xml。
新创建的HelloPanel.view.xml文件中的代码如下
mvc:ViewcontrollerNamezsapui5.test.controller.HelloPanelxmlnssap.mxmlns:mvcsap.ui.core.mvc
PanelheaderText{i18nhelloPanelTitle}classsapUiResponsiveMarginwidthautocontentButtontext{i18nshowHelloButtonText}press.onShowHelloclassmyCustomButton/Inputvalue{/recipient/name}valueLiveUpdatetruewidth60%/FormattedTexthtmlTextHello {/recipient/name}classsapUiSmallMargin sapThemeHighligh-asColor myCustomText//content/Panel
/mvc:View
3.2 创建一个新的控制器文件
在控制器文件夹下创建新的控制器文件HelloPanel.controller.js并将App.controller.js中对应的onShowHello( )方法移到此处。 HelloPanel.controller.js文件中的代码如下
sap.ui.define([sap/ui/core/mvc/Controller,sap/m/MessageToast
], function (Controller, MessageToast) {use strict;return Controller.extend(zsapui5.test.controller.HelloPanel, {onShowHello: function () {// read msg from i18n modelconst oBundle this.getView().getModel(i18n).getResourceBundle();const sRecipient this.getView().getModel().getProperty(/recipient/name);const sMsg oBundle.getText(helloMsg, [sRecipient]);// show messageMessageToast.show(sMsg);}});
});3.3 简化主控制器
我们现在已经将的onShowHello( )方法从主控制器App.controller.js中移至HelloPanel.controller.js。
在此我们更新主控制器文件中的逻辑更新后主控制器中的逻辑为空我们稍后的练习中将使用它来添加更多功能。 更新后App.controller.js文件中的代码如下
sap.ui.define([sap/ui/core/mvc/Controller
], function (Controller) {use strict;return Controller.extend(zsapui5.test.controller.App, {});
});3.4 调整应用程序的主视图
最后让我们在主视图App.view.xml中引用我们新创建出来的视图HelloPanel.view.xml。 使用SAPUI5库sap.ui.core.mvc中对应的XMLView标签引用子视图。 改动后的主视图App.view.xml文件内容如下:
mvc:ViewcontrollerNamezsapui5.test.controller.Appxmlnssap.mxmlns:mvcsap.ui.core.mvcdisplayBlocktrue
!--在视图中想要使用的库的命名空间列表--ShellApp classmyAppDemoWTpagesPage title{i18nhomePageTitle}contentmvc:XMLView viewNamezsapui5.test.view.HelloPanel //content/Page/pages/App/Shell
/mvc:View
3.5 运行程序
运行改动后程序其界面并未发生变化 通过ctrl shift alt s打开辅助工具查看控件结构我们可以发现新增加的XMLView控件。 4. 小结
本文介绍了SUPUI5中视图嵌套的技术并通过实际的代码示例展示了其用法。
