How to implement the Multi Flow pattern?

Question

In the SAPUI5/OpenUI5 documentation's part "Application Best Practices - Preparing" is mentioned the Multi Flow Pattern. (https://openui5.hana.ondemand.com/#docs/guide/f377376842914da7a6716192ecffc9d0.html - it's almost at the bottom)

I need to implement this pattern but have absolutely no idea how to go on about it.

1. Do I need to replace the component's "root view" parameter?
2. Or do I need to replace the App control in App.view.xml? And how would I do that?
3. Or do I need to navigate to a view with a splitApp control? Thus placing a splitApp inside the App control? Can I then adjust the routes in the router accordingly? And how would I go on about that?

I am currently following the implementation as shown in "Best Practices", so I use the component and router and xml views for my application.

I'd be happy about any help or pointer to the right direction. Thanks in advance! (And, yes, I already googled extensively, alas, complex examples are rare and hard to find. Yet.)

Byebye, Cleo

Answer 1

So after a few days fiddling around and a push in the right direction from @TobiasOetzel, I came up with this solution. It is based on the tdg example, and uses the router in a component, and xml views.

Component:

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 looks like this:

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

---

SplitContainer.view looks like this:

I had to give it a height, as otherwise the content would be hidden. By default the height is a 100% but that apparently does not help rendering it/showing it. (The same behaviour btw. with a tile container in an icon tab bar.) But that is another problem that I'll solve another time.

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

---

So what do I do with these routes: when initially calling the app, the App control gets instantiated ("idAppControl"). The view "Main" is placed into the "pages" aggregation of the App control.

When navigating to myApp.html#/foo/ three things happen:

1. the view "SplitContainer" is being loaded into the "pages" aggregation of the App control. Now we have something similar to a split app.
2. the view "Master" is being loaded into the "masterPages" aggregation of the split container from 1.
3. the view "Detail" is being loaded into the "detailPages" aggregation of the split container from 1.

The view for the route "foo_sub3" can be loaded by navigating with this.getRouter().navTo("foo_sub3") or with myApp.html#/foo/foo/ or myApp.html#/foo/foo/somethingElse

Very helpful was http://scn.sap.com/community/developer-center/front-end/blog/2014/02/17/nested-ui-routing-in-openui5 though I ended up not using anything from his proposed changes.
And the SDK samples in openui5-sdk-1.22.10\test-resources\sap\ui\core\samples\routing

I welcome any corrections and/or suggestions for improvements.