SAPUI5 navigation between apps definitions

I'm new in SAPUI5 development and I'd like to know how can I navigate through different apps definitions.

In my case, I'm developing a mobile app that uses the sap.m.App and in some views I'd like to use sap.m.splitApp.

First, I have a login page and a tile container with some options. Depending on the user's choice, I'm showing an splitApp with master and detail page.

Main App Controller: With this method I can navigate to my splitApp view

toApp: function (pageId, context) {

   var app = this.getView().app;

   // load page on demand
   var master = ("Login" === pageId);
   if (app.getPage(pageId, master) === null) {
     var page = sap.ui.view({
        id : pageId,
        viewName : "view." + pageId,
        type : "JS",
        viewData : { component : this }
      });
      page.getController().nav = this;
      app.addPage(page, true);
      console.log("app controller > loaded page: " + pageId);
   }

   // show the page
   app.to(pageId);

   // set data context on the page
   if (context) {
      var page = app.getPage(pageId);
      page.setBindingContext(context);
   }
},

Ticket.view.js: Here I add my master and detail pages to my App

createContent : function(oController) {
  // to avoid scroll bars on desktop the root view must be set to block display
  this.setDisplayBlock(true);

  // create app
  this.app = new sap.m.SplitApp();


  // load the master page
  var master = sap.ui.xmlview("MyTicketsList", "view.MyTicketsList");
  master.getController().nav = this.getController();
  this.app.addPage(master, true);

  // load the empty page
  var empty = sap.ui.xmlview("Empty", "view.Empty");
  this.app.addPage(empty, false);

  return this.app;
}

And it's working fine. I can navigate to my splitApp. The problem is that I have to go back to my Main page (with the tile container) in case the user choice other option. I hope to do that using the following method in my Ticket.controller.js

back : function (pageId) {
  this.getView().app.backToPage(pageId);
}

And, on the MyTicketsList controller, I did the handleNavButtonPress using:

this.nav.back("MainPage");

But this, doesn't work!

How can I navigate through apps? Or, perhaps, How is the better way to create my splitter pages view, with Master and Detail pages?

P.S.: I'm following this tutorial

Thanks in advance!

回答1:

In the splitApp first you should instantiate the view as

oSplitApp.addDetailPage(your view);

then to navigate from the splitapp use, oSplitApp.toDetailPage(your view);

回答2:

It's easier than it appears.

I had the same problem and to make the SplitApp preview you just have to call the view like a normal XML view but Insert the TAG

回答3:

   onInit: function() {
     this.bus = sap.ui.component(sap.ui.core.Component.getOwnerIdFor(this.getView())).getEventBus();
},

doNavBack: function(event) {
    this.bus.publish("nav", "to", {id : "Page1"});
},