SAPUI5 MVC Walkthrough

Project Structure

Index.html

Let's have a look at sap.ui.getCore().attachInit(function ()

attachInit(fnFunction)

Registers a given function that is executed after the framework has been initialized.

The given function will either be called as soon as the framework has been initialized or, if it has been initialized already, it will be called immediately.

Run the function after frame initiation. Inside the function. It create a new component runtime by component ID. At the last. Place the content from component to the content of SAPUI5 framework.

#TK Shell

Component

Component is simple because most of settings have been moved into metadata. What this component do is initiation and get the router.

manifest.json

manifest.json defined controls's property and the routing rule. Component.js get the routing data from this file.

i18n.property

notFoundTitle=Not Found
notFoundText=The resource was not found
backToMaster=Back to Master List

masterViewTitle=Supplier Overview
tableNoDataText=No data
masterTableTitle=Supplier
tableIDColumnTitle=ID
tableNameColumnTitle=Name

detailTitle=Supplier Detail
ID=ID

appTitle=Simple Application descriptor Demo App
appDescription=Demo application showcasing the application descriptor

i18n.property defined the global Constant variable.

View

app.view.xml

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

Note the end of the file is xml. Which mean it's view type.

You must be curious that how app view link to other view? Let's look

"sap.ui5": {
		"_version": "1.1.0",
		"rootView": {
			"viewName": "sapui5.demo.mvcapp.view.App",
			"type": "XML"
		},
.
.
.
		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"viewPath": "sapui5.demo.mvcapp.view",
				"controlId": "app",
				"controlAggregation": "pages",
				"bypassed": {
					"target": "notFound"
				}
			},
			"routes": [{
				"pattern": "",
				"name": "master",
				"target": "master"
			},
			{
				"pattern": "detail/{ID}",
				"name": "detail",
				"target": "detail"
			}],

In the manifest.json file. because of the definition of rootview and routing. SAPUI5 would handle the relationship between app and master/detail view.

If you don't have manifest.json and component.js. you should do like this in app.view.xml:

<mvc:View
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true"
	xmlns="sap.m">
	<App id="app">
	    <pages>
	        <mvc:XMLView  
	            id="masterPage"
			    viewName="sapui5.demo.mvcapp.view.Master" />
			 <mvc:XMLView 
			    id="detailPage"
			    viewName="sapui5.demo.mvcapp.view.Detail" />
	    </pages>
    </App>
</mvc:View>

Master.view.xml

<mvc:View
    controllerName="sapui5.demo.mvcapp.controller.Master"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m">
	<Page
		id="page"
		navButtonPress="onNavBack"
		showNavButton="true"
		title="{i18n>masterViewTitle}">
		<content>
			<Table
				id="table"
				width="auto"
				class="sapUiResponsiveMargin"
				items="{/Suppliers}"
				noDataText="{i18n>tableNoDataText}"
				growing="true"
				growingScrollToLoad="true">
				<headerToolbar>
					<Toolbar>
						<Title id="tableHeader" text="{i18n>masterTableTitle}"/>
					</Toolbar>
				</headerToolbar>
				<columns>
					<Column id="nameColumn"><header>
						<Text text="{i18n>tableIDColumnTitle}" id="IDColumnTitle"/></header>
					</Column>
					<Column id="unitNumberColumn"><header>
						<Text text="{i18n>tableNameColumnTitle}" id="nameColumnTitle"/></header>
					</Column>
				</columns>
				<items>
					<ColumnListItem
						type="Navigation"
						press="onListPress">
						<cells>
							<ObjectIdentifier
								text="{ID}"/>
							<ObjectIdentifier
								text="{Name}"/>
						</cells>
					</ColumnListItem>
				</items>
			</Table>
		</content>
	</Page>
</mvc:View>

Basically there are some predefined components in the master view. The point you should notice :

  • use controllerName="sapui5.demo.mvcapp.controller.Master" to bind controller

  • use {Name} to bind the data

  • use navButtonPress="onNavBack" / press="onListPress" bind controller function

Detail.view.xml

<mvc:View
	controllerName="sapui5.demo.mvcapp.controller.Detail"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m">
	<Page
		id="page"
		navButtonPress="onNavPress"
		showNavButton="true"
		title="{i18n>detailTitle}">
		<content>
			<ObjectHeader
				id="objectHeader"
				title="{Name}"
				number="{i18n>ID}: {ID}">
				<ObjectAttribute
				    text="{Address/Country}">
				</ObjectAttribute>
			</ObjectHeader>
		</content>
	</Page>
</mvc:View>

It's same with Master so let's skip it.

Controller

BaseController.js

User getRouter, getModel, setModel, getResourceBundle to initiate router, model, resource from i18n.

Define function myNavBack for detail controller.

Master.controller.js

In the master controller. we defined 2 even handler.

  1. onListPress: call internal method _showObject to route to detail page.

Detail.controller.js

PreviousSAPUI5 Models and BindingNextABAP

Last updated