# SAPUI5 MVC Walkthrough

## Project Structure

![SAPUI5のMVCのプロジェクトのファイル構成](https://3536919124-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LaJGzuTd3rg88xS__Wx%2F-LaZDCuAWgexP8GkgwD8%2F-LaZEcMUvC9tvRpl0R3G%2Fimage.png?alt=media\&token=b138d531-5c74-4472-b12f-ddcd1e91e03e)

### Index.html

{% embed url="<https://gist.github.com/b84748affe5eb13611f7e2188ce47975#file-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.<br>

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

{% embed url="<https://gist.github.com/9cf0fef50ead24036c63c0c219a47063#file-component-js>" %}

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

### manifest.json

{% embed url="<https://gist.github.com/20271cb48f5ed057f11914f0102a3445#file-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.&#x20;

## 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

{% embed url="<https://gist.github.com/6869c09f3f0434bb38c9f89a8c89a730#file-basecontroller-js>" %}

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

Define function myNavBack for detail controller.

### Master.controller.js

{% embed url="<https://gist.github.com/c139c05e8e6ada3d8b8e337a7020e141#file-master-controller-js>" %}

In the master controller. we defined 2 even handler.&#x20;

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

### Detail.controller.js

{% embed url="<https://gist.github.com/8b8ce2129d6990d999e85c235bc6bf89#file-detail-controller-js>" %}

&#x20;