Open sap ui51_week0_all_slides

Week 0 Unit 1: Course
Environment and Setup

Public© 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
& Events
Course Environment and Setup
Course 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 hours/week
ExamWeekly assignments for each week
Bonus Bonus* *

Week 0 – Preparation
Learn about the
development scenario
and set up accounts
Rest of this week:
Get ready for the course
Unit 0.1
Course Environment
and Setup
Unit 0.2
Do You Really
Understand
JavaScript?
Unit 0.3
SAPUI5 SDK –
Demo Kit
Unit 0.4
Debugging and
Troubleshooting
Unit 0.5
A Glance at the
Coding Exercises

Scenario and tools
IDE
Web Server /
App Platform
datadeploy
Develop and Test
SAP Web IDE
Publish the App
SAP HANA
Cloud Platform
Store/Fetch Data
SAP Gateway
(EPM Services)
Back-End
System
DB
Cloud
Connector *
* Establishes secure tunnel between cloud and on-premise systems

Develop Test Package
and Deploy
Extend
Developing with SAP Web IDE SAP Web IDE – Enablement @ SCN
SAP 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

SAP HANA Cloud Platform (HCP)
Integration AnalyticsUser Experience
Internet of Things
SecurityCollaborationDev & Ops
MobileData & StorageBusiness
More details:
hcp.sap.com

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

Related 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:
open@sap.com

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

Week 0 Unit 2: Do You Really
Understand JavaScript?

Do You Really Understand JavaScript?
Recommended 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

How 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) {
aQuestions.pop().answer();
}
You really
understand JavaScript!

JavaScript & 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 (e.g. 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

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

Linguistic inheritance of JavaScript
JavaScript
Java
Self
Scheme
Perl
JS

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
“5” * “2”
 10
Typeof (“Hello” + 1)
 String
1 == true
 True
1 === true
 False
var iAmount = 23;
var sString = “Hello”;
Types and implicit conversions
Beware of
truthy/falsy values,
always use “===” for
strict checks
Implicit type
conversions can be
nice or dangerous;
try to avoid them
Use Hungarian
notation

Objects
Objects are unordered collections of name-value pairs
Names are called “properties”, values can be of any type.
If it is a function, it becomes an object “method”.
Objects may have a constructor function
Attributes can then be stored and accessed with the “this”
pointer in the current context
Everything except for core types is an object
Even functions are just objects “with an executable part”
Inheritance is not based on classes but prototypes
Properties and/or 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
oObject.property;
oObject.method([parameter]);
// properties referenced using array notation
oObject["property"];
// adding a property to an object
oObject.newProperty = "Property Value";
// deleting properties or methods
delete oObject.myMethod;

Functions
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, …) 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
“asynchronous callbacks” 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 “function
scope”. 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(2,3); // 5
add(2,3); // 5

Asynchronous processing
Be careful! JavaScript is single-threaded
Long-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, sap.ui.define
 Divide long-running tasks with setTimeout(…, 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

Method 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");
});

Closures
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
“live” thing.
“A 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 created.”
Source: MDN
function outer(param) {
var attr1 = “One”;
inner();
// the nested function inherits all
// the outer variables and parameters
function inner() {
var attr2 = “Two”;
alert(attr1); // “One”
alert(attr2); // “Two”
alert(param); // “Three”
}
}
outer(“Three”);

Scope: this or that?
var myObj = {
whatsThis : function(that) {
setTimeout(function () {
// this is the global window object
console.log(this);
}, 0);
}
};
var that = this;
// access “that” closure
// for working with the context
}, 0);
// 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 lost
this in an asynchronous callback function is by
default the global window object!
Often, the “that” or “bind” construct is used to
build a closure and ensure that the value of
this is set correctly.

Week 0 Unit 3:
SAPUI5 SDK – Demo Kit

Releases
Latest release:
https://sapui5.hana.ondemand.com/
https://openui5.hana.ondemand.com/
Beta OpenUI5 release:
https://openui5beta.hana.ondemand.com/
Specific release:
https://sapui5.hana.ondemand.com/1.28.8/
https://openui5.hana.ondemand.com/1.32.5/
Your ABAP release:
https://<host>:<port>/sap/bc/ui5_demokit/

Explored
Metadata
Full Screen
Source Code
Preview
Settings
Filter
Controls
Samples

Communities and social networks
SCN Community: http://scn.sap.com/community/developer-center/front-end
Stackoverflow: http://stackoverflow.com/questions/tagged/sapui5
Slack: http://slackui5invite.herokuapp.com/
YouTube: https://www.youtube.com/openui5videos
Twitter: https://twitter.com/OpenUI5 (@openui5)
Blog: http://openui5.tumblr.com/

Week 0 Unit 4: Debugging and
Troubleshooting

Debugging and Troubleshooting
SAPUI5 support tools
Technical information dialog
 CTRL + ALT + SHIFT + P
 Main features: enabling of debug sources & checking of SAPUI5 version
 Works on our supported desktop browsers
Diagnostics window
 CTRL + ALT + SHIFT + S
 Main features: SAPUI5 control tree, view & change control properties & bindings
 Works on our supported desktop browsers
UI5 inspector
 Chrome developer tools extension (F12)
 Main features: SAPUI5 control tree, view & change control properties & bindings (more to come)
 Works only with Google Chrome

Useful SAPUI5 methods for debugging
Retrieving a control in the console
 yourControl =
sap.ui.getCore().byId(“yourID”);
 yourControl = $($0).control(0);
(if the respective DOM element is selected
in the Elements tab)
Getting information about a control
 yourControl.getMetadata()  useful to check for the class details
 yourControl.getParent()  returns the parent control in the control tree
 yourControl.  shows you all available methods in the console

Tips & 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

Week 0 Unit 5: A Glance at the
Coding Exercises

A Glance at the Coding Exercises
A typical unit this course – Learning by doing
Watch the video
?!
Do Self-Test
optional but recommended
Coding Exercise Validate Code
write.some.code();

How to do a coding exercise
write.some.
code();
Unit Exercise Handout
SAP Web IDE
SAP Web IDE
Testing Tools
Validator Script

How to run the validator
Press the
Button or
F9
Preparation:
Include validator
script in index.html
and run the app
Select a Unit
Check
Results
1
2
3

Read Task Coding Exercise Unlock PointsValidate Code
write.some.code();
Task
Backlog 08154711
How to do a bonus exercise

Open sap ui51_week0_all_slides

More Related Content

What's hot (10)

Viewers also liked (12)

Similar to Open sap ui51_week0_all_slides (20)

Recently uploaded (20)

Open sap ui51_week0_all_slides