UI5 lesson1

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

Reasons

... ideme s dobou










R/2 from 1979

R/3 Dynpro

v4 from 1998


Webdynpro

from 2003

NWBC

from 2005

SAPUI5

from 2012
independent of device resolution => responsive

Connections

SAP UI5
OpenUI5 - open source

Fiori

SAP applications

Technologies








+ preprocessor

BUT...



Good to know

JSON
XML


MVC

Model-View-Controller
SAPUI5 Model View Controller Concept

SAPUI5 Architecture Overview

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

Directory structure

 +---assets
|   +---css
|   +---img
|   \---js
+---i18n
+---model
+---util
|---view
|   +---detail
|   +---fragments
|   \---master
|
+---Component.js
\---index.html

what can we do

Development

Notepad
...
Eclipse + Developer Tools
Sublime Text





Substitution

Miles plus
...
SAP interconnection
authorization

Before we start


JSON

JSON

JavaScript Object Notation

  • number
  • string
  • boolean
  • array
  • object
  • null

http://jsonformatter.curiousconcept.com/

Simple Page

start with HTML

IMPORT Library

 <script id="sap-ui-bootstrap"
		src="path/to/library.js"
		data-sap-ui-theme="sap_bluecrystal"
		data-sap-ui-libs="sap.ui.commons"
></script>
CDN

 <script src="assets/js/app.js"></script>

ADD Button


icon - try to add  custom image

action after press event

UI5 lesson1

By Roman Veselý

UI5 lesson1

in english

  • 1,074