UI5 lesson2

https://github.com/crazko/ui5lessons/tree/lesson2

Make a Mobile app

need to add mobile library - sap.m
add sap.m.Shell as a root for application
add assets/img/logo.png to Shell

MVC

Model-View-Controller

DEBUG mode

use defined functions for debugging instead of alert();
create assets/js/config.js and paste it into index.html

$.sap.log.setLevel($.sap.log.Level.DEBUG);

function fnCallback(result) {
	alert('Result is ' + result);
}

function fnCallback(result) {
	jQuery.sap.log.info('Result is', result);
}

Namespace

data-sap-ui-resourceroots='{ "your.namespace": "./" }'

View

defines user interface
4 types: JavaScript, XML, JSON, HTML

view/My.view.js

sap.ui.jsview('your.namespace.view.My', {
	createContent: function(oController) {}
});

app.js

var myView = sap.ui.view({
	viewName: 'your.namespace.view.My',
	type: sap.ui.core.mvc.ViewType.JS
});

Move button logic from app to the view

Controller

update config.js

 sap.ui.localResources('myapp');

change view -> myapp/My.view.xml

<core:View controllerName="myapp.My"
	xmlns="sap.m" xmlns:core="sap.ui.core">

	<Button
		text="My Button"
		icon="sap-icon://popup-window"
		press="handleShowPopup"
	/>

</core:View>

add myapp/My.controller.js

sap.ui.controller('myapp.My', {

});

move application logic to controller

Controller

add 4 default methods of controller

onInit();
onExit();
onAfterRendering();
onBeforeRendering();

MODEL

CLIENT SIDE

JSON model

XML model
Resource model - translations mostly

SERVER SIDE

OData model

one app <-> one main model
other models in their own namespace

Bindings modes

One Time

One way

Two way

Model

implement resource model in app.js
set it to Shell
create i18n/titles.properties
create and use translation in view
```
text={i18n>placeholder} 
```

 placeholder=Translation
 secondPlaceholder=Long Translation

JSON MODEL

create model/inbox.json

{
    "Data": [
        {
            "name": "string",
            "description": "string",
            "subject": "string",
            "status": "New / In Progress",
            "sent": "2015-03-21 12:24:36",
            "content": "",
            "attachments": [
                {
                    "name": "project.pdf"
                }
            ]
        }
    ]
}

http://jsonformatter.curiousconcept.com/

App / splitapp

create

myapp/master/

Master.controller.js
Navigation.view.xml

myapp/detail/

Empty.controller.js
Empty.view.xml

implement in app.js

create Navigation and Empty views
sap.m.App
sap.m.SplitApp

create inbox

add JSON model to Master controller
implement List object in Navigation view
show Data in StandardListItems
...