Question

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

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

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

我目前正在执行“最佳实践”中所示的实现，因此我将组件和路由器以及xml视图用于我的应用程序。

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

Byebye，Cleo

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％但显然无助于渲染/显示它。（与图标标签栏中的图块容器相同的行为。）但这是另一个我将在另一时间解决的问题。

<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时会发生三件事：

视图“SplitContainer”正被加载到App控件的“pages”聚合中。现在我们有一个类似于拆分应用程序的东西。
视图“Master”正从1加载到拆分容器的“masterPages”聚合中。
视图“详细信息”将从1加载到拆分容器的“detailPages”聚合中。

可以通过使用this.getRouter（）。navTo（“foo_sub3”）或myApp.html＃/ foo / foo /或myApp.html＃/ foo / foo /导航来加载路径“foo_sub3”的视图somethingElse

非常有帮助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

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

Answer 2

我设法使用以下Flow与路由调整SAPUI5教程应用程序： F - F - MD D D - F

（F = FullScreen; M = SplitApp MasterPage; D = SplitApp DetailPage）

Dropbox link

谢谢Cleo

Answer 3

要实现它，你需要一个应用程序和一个拆分容器。

我做了一个简单的示例，其中包含一个全屏页面和一个主/详细信息+按钮来导航

http://jsbin.com/fikocuxiloha/3/

最好的问候

Answer 4

好的@TobiasOetzel :-)

我修改了导航，使其向后滑动而不是向前滑动，从全屏幕返回到主 - 细节

fullscreen = new sap.m.Page({
  title : "fullscreen",
  content : new sap.m.Button({
    text : "to master detail",
    press : function () {
      app.back() // modified line 
    }
  })
});

如何实现多流模式？

4 个答案: