如何实现多流模式？

Question

在SAPUI5/OpenUI5文档的"应用程序最佳实践 - 准备"部分中提到了多流模式.(https://openui5.hana.ondemand.com/#docs/guide/f377376842914da7a6716192ecffc9d0.html - 它几乎在底部)

我需要实现这种模式,但绝对不知道如何继续下去.

1. 我是否需要更换组件的"根视图"参数？
2. 或者我是否需要替换App.view.xml中的App控件？那我该怎么办？
3. 或者我是否需要使用splitApp控件导航到视图？因此将splitApp放在App控件中？我可以相应调整路由器中的路由吗？我将如何继续呢？

我目前正在遵循"最佳实践"中所示的实现,因此我将组件和路由器以及xml视图用于我的应用程序.

我对任何帮助或指向正确方向感到高兴.提前致谢!(而且,是的,我已经广泛搜索过,唉,复杂的例子很少见,很难找到.但是.)

再见,克莱奥

Answer 1

所以经过几天摆弄并从@TobiasOetzel推进正确的方向后,我想出了这个解决方案.它基于tdg示例,并在组件和xml视图中使用路由器.

零件:

rootView : "my.ui5.multiflow.view.App",

[...]

routes : [ 
{
  pattern : "",
  name : "_index",
  view : "Main",
  targetAggregation: "pages",
  targetControl : "idAppControl",
},
{
  pattern : "foo",
  name : "_foo",
  view : "SplitContainer",
  targetAggregation : "pages",
  targetControl : "idAppControl",
  subroutes : [
  {
     pattern : "foo",
     name : "foo_sub1",
     view : "Master",
     targetAggregation : "masterPages",
     targetControl : "idSplitContainerControl",
     subroutes : [
     {
        pattern : "foo",
        name : "foo_sub2",
        view : "Detail",
        targetAggregation : "detailPages",
     },
     {
        pattern : "foo/foo/:all*:",
        name : "foo_sub3",
        view : "Detail2",
        targetAggregation : "detailPages",                                  
     }]
  }]
}]

App.view看起来像这样:

<mvc:View
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m">
   <App id="idAppControl" />
</mvc:View>

SplitContainer.view看起来像这样:

我必须给它一个高度,否则内容将被隐藏.默认情况下,高度为100%但显然无助于渲染/显示它.(同样的行为btw.在图标标签栏中有一个瓷砖容器.)但这是另一个我将在另一个时间解决的问题.

<mvc:View
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m">
   <SplitContainer 
       id="idSplitContainerControl" 
        height="500px"
   />
</mvc:View>

那么我该怎么做这些路线:当最初调用应用程序时,App控件实例化("idAppControl").视图"Main"被放置在App控件的"pages"聚合中.

当导航到myApp.html#/ foo /时会发生三件事:

1. 视图"SplitContainer"正被加载到App控件的"pages"聚合中.现在我们有类似于拆分应用程序的东西.
2. 视图"主"正从1加载到拆分容器的"masterPages"聚合中.
3. 视图"详细信息"将从1加载到拆分容器的"detailPages"聚合中.

可以通过使用this.getRouter().navTo("foo_sub3")或myApp.html#/ foo/foo /或myApp.html#/ foo/foo/somethingElse导航来加载路径"foo_sub3"的视图

非常有帮助的是http://scn.sap.com/community/developer-center/front-end/blog/2014/02/17/nested-ui-routing-in-openui5虽然我最终没有使用他提议的任何内容变化.
并在openui5-sdk-1.22.10\test-resources\sap\ui\core\samples\routing中进行SDK示例

我欢迎任何改进和/或改进建议.