OpenSAP Ui51 Week 1 All Slides

Week 1 Unit 1:
Introducing SAPUI5
Introducing SAPUI5
Week 1 Learn the Essentials
Unit 1.1 Unit 1.2 Unit 1.3 Unit 1.4 Unit 1.5 Unit 1.6
Introducing Defining the UI Structuring with Creating a Data Models Containers
SAPUI5 Using Controls Controllers and Configurable and Inter- and Layout
and Views Modules App Component nationalization
Get to know Rest of this week:

SAPUI5 and Learn the fundamental concepts of
start the coding
SAPUI5 in a simple Web app
exercises
2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Introducing SAPUI5
Motivation
Chrome Android
Internet Apple
Explorer
Firefox Windows
Safari BlackBerry

Introducing SAPUI5
Key Features
FEATURE-RICH UI CONSISTENT USER
CONTROLS EXPERIENCE
http://openui5.org/features.html
POWERFUL
DEVELOPMENT
CONCEPTS
ENTERPRISE- RESPONSIVE ACROSS

READINESS BROWSERS & DEVICES
Introducing SAPUI5
Open Standards

Introducing SAPUI5
Main Building Blocks
Flexibility Services
SAPUI5 WebIDE Templates 3D Visualization OpenUI5
Smart Controls Toolkit
table
sap.viz layout ABAP
unified
Server
OVP uxap sap.m Blue Crystal
commons Theme
APF
NDC dt
suite Render
Message Manager
ux3 Handling Grunt
Routing
tnt Test
Core Base
Devices Classes
MVC
SAP jQuery
Plug-Ins

Introducing SAPUI5
SAPUI5 and OpenUI5 Key Differentiators
SAPUI5 OpenUI5
LICENSE OPEN SOURCE
(APACHE LICENSE 2.0)
NW ABAP / NW JAVA / HCP /

SAP HANA XS / CDN http://openui5.org / CDN
NO PREVIEW BETA RELEASES
NO CONTRIBUTIONS GitHub CONTRIBUTIONS
SUPPORT / SERVICE GitHub ISSUE REPORTS

MARKETPLACE
stackoverflow COMMUNITY,
OpenUI5 slack CHANNEL

Introducing SAPUI5
Bootstrapping
<!DOCTYPE html> The SAPUI5 bootstrap script initializes

<html> SAPUI5 runtime automatically as soon as the
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
script is loaded and executed by the browser.
<meta charset="utf-8">
<title>Hello World</title>
<script
id="sap-ui-bootstrap"
Bootstrap
Configuration
src="resources/sap-ui-core.js" Resource of bootstrap file*

Attributes
data-sap-ui-theme="sap_bluecrystal" Default theme for this app

data-sap-ui-libs="sap.m" Requested control libraries
>
</script>
</head>
<body class="sapUiBody" id="content"> Side-Note:
</body> SAP Fiori apps run as components in the
</html> SAP Fiori Launchpad and do not need their
own HTML page with a manual bootstrap.
*URL depends on platform and development scenario

Introducing SAPUI5
Get more details on SAPUI5 and OpenUI5
SAPUI5 OpenUI5
SAPUI5 SDK [Link] THE OFFICIAL OPENUI5 WEBSITE [Link]
SAPUI5 ROADMAP AS PART OF THE DOWNLOAD OPENUI5 [Link]
SAP UI TECHNOLOGY ROAD MAP [Link]
OPENUI5 on GitHub [Link]
UX EXPLORER [Link]
CONTRIBUTING [Link]
SCN COMMUNITY [Link]
OPENUI5 SDK [Link]
OPENUI5beta SDK [Link]
slack CHANNEL [Link]
YouTube CHANNEL [Link]
stackoverview COMMUNITY [Link]

Thank you
Contact information:
open@sap.com
2016 SAP SE or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.
Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SEs or its affiliated companies strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

Week 1 Unit 2: Defining the UI
Using Controls and Views
Defining the UI Using Controls and Views
Control libraries
SAPUI5 contains more than

180 controls
Controls are organized in control
sap.ui.comp
libraries
sap.suite sap.ui.core
Only certain library combinations sap.ui.commons
are encouraged sap.m sap.ui.layout
sap.ui.richtexteditor
sap.ca sap.ui.unified
Libraries at the intersection can sap.ui.suite
be used together with libraries on sap.me sap.ui.table
sap.ui.ux3
the left or the right hand side sap.ushell sap.viz
sap.uxap
Developer Guide Supported Library Combinations

Control configuration options
Explored App provides quick access to the most

important control configurations:
Properties:
Configure appearance and behavior
Aggregations
Add/remove child controls
Associations
Add/remove links to individual controls via HTML
data attribute
Demo Kit Explored App

Orchestration
Master View Detail View
Page control
Split App control (sap.m)
(sap.m)
Object Header control
(sap.m)
Page control Icon Tab Bar control
(sap.m) (sap.m)
Simple Form control
List control (sap.ui.layout)
(sap.m)
Progress Indicator control

(sap.m)
Vertical Box control

(sap.m)
Table control
(sap.m)

Thank you
open@sap.com

Week 1 Unit 3: Structuring with
Controllers and Modules
Structuring with Controllers and Modules
Model View Controller (MVC)
Controller
Updates using data binding

Model (two-way or one-way) View
Developer Guide Essentials Model View Controller (MVC)

Asynchronous module definition (AMD)
1 2
sap.ui.define(
[
path/to/dependency/One,
path/to/dependency/Two Code Execution
],
function (One, Two) { Synchronous loading
// this code is during execution
1
// executed as soon as
2
// both dependencies
// are loaded
}
Load
); Code Execution
Load
Asynchronous loading
Developer Guide Tutorials Walkthrough Step 6

Controller lifecycle hooks
onInit
Called when a view is instantiated and its controls
(if available) have already been created; used to
bind event handlers and do other one-time
initialization
onExit
Called when the view is destroyed; used to free
resources and clean up events, animations, or
callbacks registered inside the controller
Developer Guide Essentials Model View Controller (MVC) Controllers

Thank you
open@sap.com

Week 1 Unit 4: Creating a
Configurable App Component
Creating a Configurable App Component
SAP Fiori launchpad as a component container
SAP Fiori, Demo Cloud Edition

App overview: The basic files of your app
Developer Guide Developing Apps App Overview

App Initialization: What happens when an App is started
Developer Guide Developing Apps App Initialization

Thank you
open@sap.com

Week 1 Unit 5: Data Models and
Internationalization
Data Models and Internationalization
Model View Controller (MVC)
Controller
Updates using data binding

Model (two-way or one-way) View
Developer Guide Essentials Model View Controller (MVC)

Binding modes
updates
One-way binding View Model
Two-way binding View updates Model
Binding Modes in Developer Guide

Binding path syntax for JSON models
{
"company": {
"name": "Treefish Inc",
"info": { Absolute binding paths within the model:
"employees": "3"
}, /company/name
"contacts": [ /company/info/employees
{
"name": "Barbara", /company/contacts
"phone": "873"
},
{
"name": "Gerry",
"phone": "734"
}
]
}
}
Binding Path Syntax for JSON Models

Resource model
Resource Bundle
loads language-specific file

App Resource Model
(i18n Model)
Instantiating a Resource Model

Thank you
open@sap.com

Week 1 Unit 6:
Containers and Layout
Container controls
Controls to aggregate other controls
Browse the Explored App and check out numerous UI5 container controls to match you requirements

Icon Explorer
Searchable and categorized

collection of smoothly
scaling icons

Layout controls
Arrange and align your controls

within a container
Example Form Layout:
Labels aligned to the right, input
fields aligned to the left

Margins and paddings
Give your layout the final polish Margin

SAPUI5 comes with easy-to-use, Border
predefined CSS classes to add
margins and paddings to your Padding
containers and controls Content
Documentation:
Using Predefined CSS Margin Classes
Using Container Content Padding CSS
Classes

Thank you
open@sap.com

OpenSAP Ui51 Week 1 All Slides

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

OpenSAP Ui51 Week 1 All Slides

Uploaded by

Copyright:

Available Formats

Week 1 Unit 1:

Get to know Rest of this week:

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

ENTERPRISE- RESPONSIVE ACROSS

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 5

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

NW ABAP / NW JAVA / HCP /

NO PREVIEW BETA RELEASES

NO CONTRIBUTIONS GitHub CONTRIBUTIONS

SUPPORT / SERVICE GitHub ISSUE REPORTS

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 7

<!DOCTYPE html> The SAPUI5 bootstrap script initializes

src="resources/sap-ui-core.js" Resource of bootstrap file*

data-sap-ui-theme="sap_bluecrystal" Default theme for this app

*URL depends on platform and development scenario

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 8

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 9

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 11

SAPUI5 contains more than

Developer Guide Supported Library Combinations

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Explored App provides quick access to the most

Demo Kit Explored App

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

Master View Detail View

Progress Indicator control

Vertical Box control

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

Updates using data binding

Developer Guide Essentials Model View Controller (MVC)

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

Developer Guide Essentials Model View Controller (MVC) Controllers

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

SAP Fiori, Demo Cloud Edition

Developer Guide Developing Apps App Overview

Developer Guide Developing Apps App Initialization

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6

Updates using data binding

Developer Guide Essentials Model View Controller (MVC)

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Two-way binding View updates Model

Binding Modes in Developer Guide

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

loads language-specific file

Instantiating a Resource Model

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 5

National product specifications may vary.

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 7

Controls to aggregate other controls

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Searchable and categorized

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3

Arrange and align your controls

2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4

Give your layout the final polish Margin