Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

SAPUI5 MasterDetail Screen App with Detail Screen as Splash Screen

$
0
0

Hello Everyone,

 

As we all know We can create Full Screen(Detail) And Split Screen(Master-Detail) application in SAPUI5. But there may be some scenarios where may require both App types in one single application.


For example we may require to show a full screen(Detail view) splash page before showing Split screen.

 

Before starting take a look at the followings:

 

  • Shell (sap.m.Shell) : The Shell control can be used as root element of applications, it can contain an App or SplitApp control. The Shell provides some overarching functionality for the overall application and takes care of visual adaptation, like a frame around the App, on desktop browser platforms.To be more specific it maintains one NavContainer.
  • App (sap.m.App) :App is the root element of a UI5 mobile application. It maintains only one screen at a time.
  • SpliApp (sap.m.SplitApp) : SplitApp is another root element of a UI5 mobile application besides App control. It maintains two screens based upond the device(table or phone).To be more specific it maintains two NavContainers.

 

Now lets return to the example application :

 

1. Create Splash Screen View

2. Create Master View

3. Create Detail View

4. In Splash Screen View controller onInit() set a timer function for the splash screen.

 

oController = this;      this.myVar = setInterval(function(){oController.myTimer();},5000);

 

5. Add myTimer() function in Splash Screen View:

 

myTimer : function(){           //Remove sap.m.App(Splash Screen) from Shell first           sap.ui.getCore().byId("Shell").destroyApp();           //Stop Timer           clearInterval(this.myVar);           // Create Split App now           this.app = new sap.m.SplitApp();           // load the master page           var master = sap.ui.xmlview("firstView", "view.firstView");           this.app.addPage(master, true);           // load the empty page           var detail = sap.ui.xmlview("secondView", "view.secondView");           this.app.addPage(detail, false);           //Add sap.m.SplitApp to Shell now           sap.ui.getCore().byId("Shell").setApp(this.app);     },

Its Done !

 

As 'myTimer' Function executes Splash Screen is Removed from Application and SplitApp is loaded on the screen

 

I hope this help

 

Regards,

Rauf


Viewing all articles
Browse latest Browse all 789

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>