UI5 lesson3

Content

  • recreate as Component
  • enhance Master view
  • add Router and routing functionality
  • implement Formatter
  • define Detail view

Changes

in index.html

data-sap-ui-resourceroots='{ "your.namespace": "./" }'
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
				"myapp" : "./",
				"view" : "./view"
}'


in assets/js/config.js

  • remove localResources usage

Directory structure

  • rename myapp to view
  • create view/App.view.js

sap.ui.jsview('view.App', {
	
	createContent: function(oController) {
		// to avoid scrollbars on desktop the root view must be set to block display
		this.setDisplayBlock(true);

		this.app = new sap.m.SplitApp("splitApp", {
			afterDetailNavigate: function(){
				this.hideMaster();
			}
		});

		return this.app;
	}
}); 

Change to component

assets/js/app.js
var oShell = new sap.m.Shell('mainShell', {
	app: new sap.ui.core.ComponentContainer({
		name: 'myapp'
	}),
	logo: 'assets/img/logo.png'
});

oShell.placeAt('content'); 
  • copy favicon.ico to assets/img
  • try to use it in homeIcon attribute
  • copy Component-1.js and MyRouter.js to root dir
  • rename to Component.js

UI5 lesson3

By Roman Veselý

UI5 lesson3

  • 664