42
Week 0 Unit 1: Course Environment and Setup

Open sap ui51_week0_all_slides

Embed Size (px)

Citation preview

Page 1: Open sap ui51_week0_all_slides

Week 0 Unit 1 Course

Environment and Setup

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Week 2

Become a

Data

Binding

Expert

Week 1

Learn the

Essentials

Week 4

Master

SAPUI5

Week 3

Create

Responsive

Apps

Week 0

Get Started

Week 5

Final Exam

amp Events

Course Environment and SetupCourse structure points and requirements

Video Lectures

Exercises (optional)

4 weekly

assignments

4x30 = 120 points

Final exam

120 points

Record of achievement

when results above

120 points

(max 240 points)

Watch the deadlines

+

=

2 bonus exercises

(2x10 points)

+

Online forums during entire 6 weeks of course

Learning effort ~4-5 hoursweek

ExamWeekly assignments for each week

Bonus Bonus

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Course Environment and SetupWeek 0 ndash Preparation

Learn about the

development scenario

and set up accounts

Rest of this week

Get ready for the course

Unit 01

Course Environment

and Setup

Unit 02

Do You Really

Understand

JavaScript

Unit 03

SAPUI5 SDK ndash

Demo Kit

Unit 04

Debugging and

Troubleshooting

Unit 05

A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Course Environment and SetupScenario and tools

IDEWeb Server

App Platformdatadeploy

Develop and Test

SAP Web IDE

Publish the App

SAP HANA

Cloud Platform

StoreFetch Data

SAP Gateway

(EPM Services)

Back-End

System

DB

Cloud

Connector

Establishes secure tunnel between cloud and on-premise systems

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Develop Test Package

and Deploy

Extend

Developing with SAP Web IDE SAP Web IDE ndash Enablement SCN

Course Environment and SetupSAP Web IDE

SAP Web IDE is a powerful Web-based integrated development tool that simplifies the end-to-

end application development lifecycle for SAP Fiori apps Fiori-like apps and SAPUI5 apps

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Course Environment and SetupSAP HANA Cloud Platform (HCP)

Integration AnalyticsUser Experience

Internet of Things

SecurityCollaborationDev amp Ops

MobileData amp StorageBusiness

More details

hcpsapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

Course Environment and SetupSAP Fiori

SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Course Environment and SetupRelated openSAP courses

Course Scenario Main Focus

Developing Web Apps

with SAPUI5 (ui51)

Develop SAPUI5 Web apps

Deploy apps to SAP HCP

Use generic OData services

Learn the main concepts of the

SAPUI5 UI library by

developing responsive apps

Build Your Own SAP Fiori

App in the Cloud (fiux2)

Design and develop SAP Fiori apps

Deploy apps to SAP Fiori launchpad

Extend existing apps

Use the SAP Fiori design

guidelines and development

resources to build your own

SAP Fiori app

Developing Mobile Apps

with SAP HANA Cloud

Platform (mobile2)

Develop mobile-enabled apps

Deploy apps to mobile devices

Learn about mobile features

Build extend integrate and

mobilize SAP Fiori apps by

adding (native) mobile features

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 2: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Week 2

Become a

Data

Binding

Expert

Week 1

Learn the

Essentials

Week 4

Master

SAPUI5

Week 3

Create

Responsive

Apps

Week 0

Get Started

Week 5

Final Exam

amp Events

Course Environment and SetupCourse structure points and requirements

Video Lectures

Exercises (optional)

4 weekly

assignments

4x30 = 120 points

Final exam

120 points

Record of achievement

when results above

120 points

(max 240 points)

Watch the deadlines

+

=

2 bonus exercises

(2x10 points)

+

Online forums during entire 6 weeks of course

Learning effort ~4-5 hoursweek

ExamWeekly assignments for each week

Bonus Bonus

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Course Environment and SetupWeek 0 ndash Preparation

Learn about the

development scenario

and set up accounts

Rest of this week

Get ready for the course

Unit 01

Course Environment

and Setup

Unit 02

Do You Really

Understand

JavaScript

Unit 03

SAPUI5 SDK ndash

Demo Kit

Unit 04

Debugging and

Troubleshooting

Unit 05

A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Course Environment and SetupScenario and tools

IDEWeb Server

App Platformdatadeploy

Develop and Test

SAP Web IDE

Publish the App

SAP HANA

Cloud Platform

StoreFetch Data

SAP Gateway

(EPM Services)

Back-End

System

DB

Cloud

Connector

Establishes secure tunnel between cloud and on-premise systems

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Develop Test Package

and Deploy

Extend

Developing with SAP Web IDE SAP Web IDE ndash Enablement SCN

Course Environment and SetupSAP Web IDE

SAP Web IDE is a powerful Web-based integrated development tool that simplifies the end-to-

end application development lifecycle for SAP Fiori apps Fiori-like apps and SAPUI5 apps

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Course Environment and SetupSAP HANA Cloud Platform (HCP)

Integration AnalyticsUser Experience

Internet of Things

SecurityCollaborationDev amp Ops

MobileData amp StorageBusiness

More details

hcpsapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

Course Environment and SetupSAP Fiori

SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Course Environment and SetupRelated openSAP courses

Course Scenario Main Focus

Developing Web Apps

with SAPUI5 (ui51)

Develop SAPUI5 Web apps

Deploy apps to SAP HCP

Use generic OData services

Learn the main concepts of the

SAPUI5 UI library by

developing responsive apps

Build Your Own SAP Fiori

App in the Cloud (fiux2)

Design and develop SAP Fiori apps

Deploy apps to SAP Fiori launchpad

Extend existing apps

Use the SAP Fiori design

guidelines and development

resources to build your own

SAP Fiori app

Developing Mobile Apps

with SAP HANA Cloud

Platform (mobile2)

Develop mobile-enabled apps

Deploy apps to mobile devices

Learn about mobile features

Build extend integrate and

mobilize SAP Fiori apps by

adding (native) mobile features

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 3: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Course Environment and SetupWeek 0 ndash Preparation

Learn about the

development scenario

and set up accounts

Rest of this week

Get ready for the course

Unit 01

Course Environment

and Setup

Unit 02

Do You Really

Understand

JavaScript

Unit 03

SAPUI5 SDK ndash

Demo Kit

Unit 04

Debugging and

Troubleshooting

Unit 05

A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Course Environment and SetupScenario and tools

IDEWeb Server

App Platformdatadeploy

Develop and Test

SAP Web IDE

Publish the App

SAP HANA

Cloud Platform

StoreFetch Data

SAP Gateway

(EPM Services)

Back-End

System

DB

Cloud

Connector

Establishes secure tunnel between cloud and on-premise systems

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Develop Test Package

and Deploy

Extend

Developing with SAP Web IDE SAP Web IDE ndash Enablement SCN

Course Environment and SetupSAP Web IDE

SAP Web IDE is a powerful Web-based integrated development tool that simplifies the end-to-

end application development lifecycle for SAP Fiori apps Fiori-like apps and SAPUI5 apps

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Course Environment and SetupSAP HANA Cloud Platform (HCP)

Integration AnalyticsUser Experience

Internet of Things

SecurityCollaborationDev amp Ops

MobileData amp StorageBusiness

More details

hcpsapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

Course Environment and SetupSAP Fiori

SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Course Environment and SetupRelated openSAP courses

Course Scenario Main Focus

Developing Web Apps

with SAPUI5 (ui51)

Develop SAPUI5 Web apps

Deploy apps to SAP HCP

Use generic OData services

Learn the main concepts of the

SAPUI5 UI library by

developing responsive apps

Build Your Own SAP Fiori

App in the Cloud (fiux2)

Design and develop SAP Fiori apps

Deploy apps to SAP Fiori launchpad

Extend existing apps

Use the SAP Fiori design

guidelines and development

resources to build your own

SAP Fiori app

Developing Mobile Apps

with SAP HANA Cloud

Platform (mobile2)

Develop mobile-enabled apps

Deploy apps to mobile devices

Learn about mobile features

Build extend integrate and

mobilize SAP Fiori apps by

adding (native) mobile features

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 4: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Course Environment and SetupScenario and tools

IDEWeb Server

App Platformdatadeploy

Develop and Test

SAP Web IDE

Publish the App

SAP HANA

Cloud Platform

StoreFetch Data

SAP Gateway

(EPM Services)

Back-End

System

DB

Cloud

Connector

Establishes secure tunnel between cloud and on-premise systems

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Develop Test Package

and Deploy

Extend

Developing with SAP Web IDE SAP Web IDE ndash Enablement SCN

Course Environment and SetupSAP Web IDE

SAP Web IDE is a powerful Web-based integrated development tool that simplifies the end-to-

end application development lifecycle for SAP Fiori apps Fiori-like apps and SAPUI5 apps

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Course Environment and SetupSAP HANA Cloud Platform (HCP)

Integration AnalyticsUser Experience

Internet of Things

SecurityCollaborationDev amp Ops

MobileData amp StorageBusiness

More details

hcpsapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

Course Environment and SetupSAP Fiori

SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Course Environment and SetupRelated openSAP courses

Course Scenario Main Focus

Developing Web Apps

with SAPUI5 (ui51)

Develop SAPUI5 Web apps

Deploy apps to SAP HCP

Use generic OData services

Learn the main concepts of the

SAPUI5 UI library by

developing responsive apps

Build Your Own SAP Fiori

App in the Cloud (fiux2)

Design and develop SAP Fiori apps

Deploy apps to SAP Fiori launchpad

Extend existing apps

Use the SAP Fiori design

guidelines and development

resources to build your own

SAP Fiori app

Developing Mobile Apps

with SAP HANA Cloud

Platform (mobile2)

Develop mobile-enabled apps

Deploy apps to mobile devices

Learn about mobile features

Build extend integrate and

mobilize SAP Fiori apps by

adding (native) mobile features

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 5: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Develop Test Package

and Deploy

Extend

Developing with SAP Web IDE SAP Web IDE ndash Enablement SCN

Course Environment and SetupSAP Web IDE

SAP Web IDE is a powerful Web-based integrated development tool that simplifies the end-to-

end application development lifecycle for SAP Fiori apps Fiori-like apps and SAPUI5 apps

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Course Environment and SetupSAP HANA Cloud Platform (HCP)

Integration AnalyticsUser Experience

Internet of Things

SecurityCollaborationDev amp Ops

MobileData amp StorageBusiness

More details

hcpsapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

Course Environment and SetupSAP Fiori

SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Course Environment and SetupRelated openSAP courses

Course Scenario Main Focus

Developing Web Apps

with SAPUI5 (ui51)

Develop SAPUI5 Web apps

Deploy apps to SAP HCP

Use generic OData services

Learn the main concepts of the

SAPUI5 UI library by

developing responsive apps

Build Your Own SAP Fiori

App in the Cloud (fiux2)

Design and develop SAP Fiori apps

Deploy apps to SAP Fiori launchpad

Extend existing apps

Use the SAP Fiori design

guidelines and development

resources to build your own

SAP Fiori app

Developing Mobile Apps

with SAP HANA Cloud

Platform (mobile2)

Develop mobile-enabled apps

Deploy apps to mobile devices

Learn about mobile features

Build extend integrate and

mobilize SAP Fiori apps by

adding (native) mobile features

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 6: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Course Environment and SetupSAP HANA Cloud Platform (HCP)

Integration AnalyticsUser Experience

Internet of Things

SecurityCollaborationDev amp Ops

MobileData amp StorageBusiness

More details

hcpsapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

Course Environment and SetupSAP Fiori

SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Course Environment and SetupRelated openSAP courses

Course Scenario Main Focus

Developing Web Apps

with SAPUI5 (ui51)

Develop SAPUI5 Web apps

Deploy apps to SAP HCP

Use generic OData services

Learn the main concepts of the

SAPUI5 UI library by

developing responsive apps

Build Your Own SAP Fiori

App in the Cloud (fiux2)

Design and develop SAP Fiori apps

Deploy apps to SAP Fiori launchpad

Extend existing apps

Use the SAP Fiori design

guidelines and development

resources to build your own

SAP Fiori app

Developing Mobile Apps

with SAP HANA Cloud

Platform (mobile2)

Develop mobile-enabled apps

Deploy apps to mobile devices

Learn about mobile features

Build extend integrate and

mobilize SAP Fiori apps by

adding (native) mobile features

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 7: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

Course Environment and SetupSAP Fiori

SAP Fiori Design GuidelinesSAP Fiori User Experience SAP Fiori Demo Cloud Edition

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Course Environment and SetupRelated openSAP courses

Course Scenario Main Focus

Developing Web Apps

with SAPUI5 (ui51)

Develop SAPUI5 Web apps

Deploy apps to SAP HCP

Use generic OData services

Learn the main concepts of the

SAPUI5 UI library by

developing responsive apps

Build Your Own SAP Fiori

App in the Cloud (fiux2)

Design and develop SAP Fiori apps

Deploy apps to SAP Fiori launchpad

Extend existing apps

Use the SAP Fiori design

guidelines and development

resources to build your own

SAP Fiori app

Developing Mobile Apps

with SAP HANA Cloud

Platform (mobile2)

Develop mobile-enabled apps

Deploy apps to mobile devices

Learn about mobile features

Build extend integrate and

mobilize SAP Fiori apps by

adding (native) mobile features

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 8: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Course Environment and SetupRelated openSAP courses

Course Scenario Main Focus

Developing Web Apps

with SAPUI5 (ui51)

Develop SAPUI5 Web apps

Deploy apps to SAP HCP

Use generic OData services

Learn the main concepts of the

SAPUI5 UI library by

developing responsive apps

Build Your Own SAP Fiori

App in the Cloud (fiux2)

Design and develop SAP Fiori apps

Deploy apps to SAP Fiori launchpad

Extend existing apps

Use the SAP Fiori design

guidelines and development

resources to build your own

SAP Fiori app

Developing Mobile Apps

with SAP HANA Cloud

Platform (mobile2)

Develop mobile-enabled apps

Deploy apps to mobile devices

Learn about mobile features

Build extend integrate and

mobilize SAP Fiori apps by

adding (native) mobile features

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 9: Open sap ui51_week0_all_slides

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 10: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 11: Open sap ui51_week0_all_slides

Week 0 Unit 2 Do You Really

Understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 12: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Do You Really Understand JavaScriptRecommended JavaScript tutorials

If you are fairly new to JavaScript you might want

to read one of the following free tutorials during

the preparation week of this course

Codecademy JavaScript Fundamentals

The JavaScript Tutorial

JavaScript Garden

JavaScript Developer Documentation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 13: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Do You Really Understand JavaScriptHow to test your knowledge

Do self-test questions

for this unit

Enjoy the rest of this

video as a recap

Use documentation

link in question to

learn the concept

while (aQuestions)

aQuestionspop()answer()

You really

understand JavaScript

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 14: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Do You Really Understand JavaScriptJavaScript amp browsers

JavaScript code is interpreted at runtime

All modern desktop and mobile browsers are highly

optimized for processing JavaScript code with their

JavaScript engines

JavaScript is properly known as ECMAScript

Browser engines implement ECMAScript but with slight

variations in the range of supported features and

implementation details (eg the exact details of how

XMLHttpRequest XML API and the DOM API have

been implemented vary between browsers)

Client-side JavaScript is executed in a sandbox

For security reasons you cannot access the local (file)

system from a Web page

Internet Explorer

Mozilla Firefox

Safari

Google Chrome

Chakra

SpiderMonkey

Nitro

V8

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 15: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Do You Really Understand JavaScriptClient-side scripting

All presentation logic is done on the client

Only resources (HTML file code data) are loaded from

the Web server The code is then processed on the client

to create DOM elements on the screen

JavaScript is single-threaded

There is only one JavaScript thread per window Other

activities like rendering or downloading resources may be

managed by separate threads but can be blocked by

scripts

Data is loaded with XHR requests

During execution data is often requested from a back-end

system such as an OData or a REST-based service The

data is usually supplied in JSON or XML format

DBJSON or XML

XHR Requests

Compose UI

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 16: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

Do You Really Understand JavaScriptLinguistic inheritance of JavaScript

JavaScript

Java

Self

Scheme

Perl

JS

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 17: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

There are only 6 data types in JavaScript

Number

double-precision 64-bit format (IEEE 754)

String

Sequences of Unicode characters

Boolean

True or false

Object

Function Array Date RegExp

Null

Deliberate non-value

Undefined

Indicates an uninitialized value

ldquo5rdquo ldquo2rdquo

10

Typeof (ldquoHellordquo + 1)

String

1 == true

True

1 === true

False

var iAmount = 23

var sString = ldquoHellordquo

Do You Really Understand JavaScriptTypes and implicit conversions

Beware of

truthyfalsy values

always use ldquo===rdquo for

strict checks

Implicit type

conversions can be

nice or dangerous

try to avoid them

Use Hungarian

notation

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 18: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 8

Do You Really Understand JavaScriptObjects

Objects are unordered collections of name-value pairs

Names are called ldquopropertiesrdquo values can be of any type

If it is a function it becomes an object ldquomethodrdquo

Objects may have a constructor function

Attributes can then be stored and accessed with the ldquothisrdquo

pointer in the current context

Everything except for core types is an object

Even functions are just objects ldquowith an executable partrdquo

Inheritance is not based on classes but prototypes

Properties andor methods can be added to the object

itself or to the prototype and deleted at runtime

object literal

var oObjLiteral =

an Object object

var oObject = new Object()

properties referenced using dot notation

oObjectproperty

oObjectmethod([parameter])

properties referenced using array notation

oObject[property]

adding a property to an object

oObjectnewProperty = Property Value

deleting properties or methods

delete oObjectmyMethod

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 19: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 9

Do You Really Understand JavaScriptFunctions

Functions are objects with an executable part

They can be created and destroyed dynamically Since

a function is just an object in addition to its executable

code you can also assign your own properties (name

arguments hellip) to it

Functions can be passed as arguments to other

functions

Functions are frequently passed as parameters to other

functions in JavaScript This is the basis upon which

ldquoasynchronous callbacksrdquo work

JavaScript variables exist within the scope of a

function

All variables declared with a function are visible to all

coding within that function This is known as ldquofunction

scoperdquo There is no block scope in JavaScript

function expression (anonymous)

var fnAdd = function(a b)

return a + b

function declaration (named)

function add(a b)

return a + b

function calls

fnAdd(23) 5

add(23) 5

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 20: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 10

Do You Really Understand JavaScriptAsynchronous processing

Be careful JavaScript is single-threadedLong-running or resource-intensive tasks should be performed

asynchronously otherwise the UI might become unresponsive

and your users might see a message like this

Asynchronous module definition (AMD)

Helper tools for module loading requireJS sapuidefine

Divide long-running tasks with setTimeout(hellip 0)

It will continue with the execution immediately after all other tasks are

processed

Use callback functions event listeners promises and framework

hooks

These patterns help you to efficiently structure and process application logic

Use asynchronous XHR calls

Avoid synchronous server requests because script execution will pause until

the resource is loaded

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 21: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 11

Do You Really Understand JavaScriptMethod chaining (cascading)

If a function returns a reference to the current context then a programming technique called

method chaining can be used

Method chaining is widely used in many JavaScript frameworks including jQuery and SAPUI5

Chaining is a nice time-saver (the element in the example has to be looked up only once)

Debugging long method chains is more difficult

jQuery(myButton)

text(Click me)

css(color c00)

bind(click function(e)

alert(Thanks for clicking)

)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 22: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 12

Do You Really Understand JavaScriptClosures

Nested functions inherit the scope of their

parent function

Closures adapt to variable changes even if the

changes happen a long time after the function was

created So you have to think of a closure as of a

ldquoliverdquo thing

ldquoA closure is a special kind of object that combines

two things a function and the environment in

which that function was created The environment

consists of any local variables that were in-scope

at the time that the closure was createdrdquo

Source MDN

function outer(param)

var attr1 = ldquoOnerdquo

inner()

the nested function inherits all

the outer variables and parameters

function inner()

var attr2 = ldquoTwordquo

alert(attr1) ldquoOnerdquo

alert(attr2) ldquoTwordquo

alert(param) ldquoThreerdquo

outer(ldquoThreerdquo)

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 23: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 13

Do You Really Understand JavaScriptScope this or that

var myObj =

whatsThis function(that)

setTimeout(function ()

this is the global window object

consolelog(this)

0)

var that = this

setTimeout(function ()

access ldquothatrdquo closure

for working with the context

0)

setTimeout(function ()

this is still the context

bind(this) 0)

this is a reference to the current

execution context and depends on the

scope

Global scope window

Object scope current object instance

Function scope depends on us

When using callbacks the context may

be lostthis in an asynchronous callback function is by

default the global window object

Often the ldquothatrdquo or ldquobindrdquo construct is used to

build a closure and ensure that the value of

this is set correctly

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 24: Open sap ui51_week0_all_slides

Week 0 Unit 3

SAPUI5 SDK ndash Demo Kit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 25: Open sap ui51_week0_all_slides

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 2

SAPUI5 SDK ndash Demo KitReleases

Latest release

httpssapui5hanaondemandcom

httpsopenui5hanaondemandcom

Beta OpenUI5 release

httpsopenui5betahanaondemandcom

Specific release

httpssapui5hanaondemandcom1288

httpsopenui5hanaondemandcom1325

Your ABAP release

httpslthostgtltportgtsapbcui5_demokit

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 26: Open sap ui51_week0_all_slides

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 3

SAPUI5 SDK ndash Demo KitExplored

Metadata

Full Screen

Source Code

Preview

Settings

Filter

Controls

Samples

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 27: Open sap ui51_week0_all_slides

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 4

SAPUI5 SDK ndash Demo KitCommunities and social networks

SCN Community httpscnsapcomcommunitydeveloper-centerfront-end

Stackoverflow httpstackoverflowcomquestionstaggedsapui5

Slack httpslackui5inviteherokuappcom

YouTube httpswwwyoutubecomopenui5videos

Twitter httpstwittercomOpenUI5 (openui5)

Blog httpopenui5tumblrcom

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 28: Open sap ui51_week0_all_slides

Thank you

Contact information

opensapcom

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 29: Open sap ui51_week0_all_slides

Publiccopy 2015 SAP SE or an SAP affiliate company All rights reserved 6

copy 2015 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 30: Open sap ui51_week0_all_slides

Week 0 Unit 4 Debugging and

Troubleshooting

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 31: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

Debugging and TroubleshootingSAPUI5 support tools

Technical information dialog

CTRL + ALT + SHIFT + P

Main features enabling of debug sources amp checking of SAPUI5 version

Works on our supported desktop browsers

Diagnostics window

CTRL + ALT + SHIFT + S

Main features SAPUI5 control tree view amp change control properties amp bindings

Works on our supported desktop browsers

UI5 inspector

Chrome developer tools extension (F12)

Main features SAPUI5 control tree view amp change control properties amp bindings (more to come)

Works only with Google Chrome

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 32: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

Debugging and TroubleshootingUseful SAPUI5 methods for debugging

Retrieving a control in the console

yourControl =

sapuigetCore()byId(ldquoyourIDrdquo)

yourControl = $($0)control(0)

(if the respective DOM element is selected

in the Elements tab)

Getting information about a control

yourControlgetMetadata() useful to check for the class details

yourControlgetParent() returns the parent control in the control tree

yourControl shows you all available methods in the console

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 33: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

Debugging and TroubleshootingTips amp tricks

General

Use Google Chrome if possible for debugging

Check the console log for errors (press F12 key in Chrome)

Set breakpoints and step through your code to understand where something is going wrong

SAPUI5

If your control is not visible check in the DOM inspector if your respective HTML exists

Use debug sources for easier debugging

Check if your respective file is loaded or if there is a 404 (Not Found) error on the Network tab

Check if your respective file contains the changes you made on the Sources tab

Have a look at the Troubleshooting section in the Demo Kit

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 34: Open sap ui51_week0_all_slides

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 35: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 6

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 36: Open sap ui51_week0_all_slides

Week 0 Unit 5 A Glance at the

Coding Exercises

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 37: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 2

A Glance at the Coding ExercisesA typical unit this course ndash Learning by doing

Watch the video

Do Self-Test

optional but recommended

Coding Exercise Validate Code

writesomecode()

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 38: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 3

A Glance at the Coding ExercisesHow to do a coding exercise

writesome

code()

Unit Exercise Handout

SAP Web IDE

SAP Web IDE

Testing Tools

Validator Script

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 39: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 4

A Glance at the Coding ExercisesHow to run the validator

Press the

Button or

F9

Preparation

Include validator

script in indexhtml

and run the app

Select a Unit

Check

Results

1

2

3

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 40: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 5

Read Task Coding Exercise Unlock PointsValidate Code

writesomecode()Task

Backlog 08154711

A Glance at the Coding ExercisesHow to do a bonus exercise

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 41: Open sap ui51_week0_all_slides

Thank you

Contact information

opensapcom

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation
Page 42: Open sap ui51_week0_all_slides

Publiccopy 2016 SAP SE or an SAP affiliate company All rights reserved 7

copy 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 httpglobal12sapcomcorporate-enlegalcopyrightindexepx 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 SErsquos or its affiliated companiesrsquo strategy and possible future

developments products andor 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

  • openSAP_ui5_Week_0_Unit_1_CEAS_Presentation
  • openSAP_ui5_Week_0_Unit_2_DYRUJ_Presentation
  • openSAP_ui5_Week_0_Unit_3_SSDKT_Presentation
  • openSAP_ui5_Week_0_Unit_4_DAT_Presentation
  • openSAP_ui5_Week_0_Unit_5_AGACE_Presentation