sapui5 - 如何实现多流模式？

Question

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

我需要实现这个模式，但完全不知道如何继续。

1. 我需要替换组件的“ Root View ”参数吗？
2. 或者我需要替换App.view.xml中的App控件吗？我该怎么做呢？
3. 或者我需要导航到带有 splitApp 控件的 View 吗？因此将 splitApp 放置在 App 控件内？我可以相应地调整路由器中的路由吗？我该如何继续呢？

我目前正在遵循“最佳实践”中所示的实现，因此我为我的应用程序使用组件、路由器和 xml View 。

如果有任何帮助或指向正确方向的指示，我会很高兴。提前致谢!(是的，我已经在谷歌上进行了广泛的搜索，唉，复杂的例子很少见而且很难找到。但是。)

再见，克莱奥

Answer 1

所以经过几天的摆弄并在@TobiasOetzel的正确方向插入下，我想出了这个解决方案。它基于 tdg 示例，并在组件中使用路由器和 xml View 。

组件:

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%，但这显然无助于渲染/显示它。 (顺便说一句，在图标选项卡栏中使用图 block 容器具有相同的行为。)但这是另一个问题，我将在下次解决。

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

<小时/>

那么我该如何处理这些路由:当最初调用应用程序时，应用程序控件被实例化(“idAppControl”)。 View “Main”被放置到应用程序控件的“pages”聚合中。

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

1. View “SplitContainer”正在加载到应用程序控件的“pages”聚合中。现在我们有了类似于拆分应用程序的东西。
2. View “Master”正在从 1 开始加载到拆分容器的“masterPages”聚合中。
3. View “Detail”正在从 1 开始加载到拆分容器的“detailPages”聚合中。

可以通过使用 this.getRouter().navTo("foo_sub3") 或使用 myApp.html#/foo/foo/或 myApp.html#/foo/foo/导航来加载路线“foo_sub3”的 View 其他的东西

非常有帮助的是http://scn.sap.com/community/developer-center/front-end/blog/2014/02/17/nested-ui-routing-in-openui5尽管我最终没有使用他提议的更改中的任何内容。
SDK示例位于openui5-sdk-1.22.10\test-resources\sap\ui\core\samples\routing

我欢迎任何更正和/或改进建议。