Documente Academic
Documente Profesional
Documente Cultură
SAP UI5
Bogdan MIHAI
Research Scientist, Performance and Insight Optimization
September 30th, October 2nd, 4th, 7th and 9th, 2013 Internal
Web Programming using SAP UI5
From zero to hero in just 5 days
Bogdan MIHAI (bogdan-eugen.mihai@sap.com)
Performance and Insight Optimization
September 30th, October 2nd, 4th, 7th and 9th, 2013
Agenda – part 1
Files on disk
Data Independence
Logical Independence: The ability to change the logical schema without changing
the external schema or application programs:
Can add new fields, new tables, without changing views
Lesson: Try your best to keep the VIEW (what the user sees) independent of the
MODEL (domain knowledge)
Significance of Tiers
Business Logic
Data
N-tier architecture try to separate the components into different tiers or layers
1-Tier Architecture
2-Tier Architecture
3-Tier Architecture
Architecture Principles
Client-server architecture
Presentation Layer
Provides a user interface
Logic Layer
The set of rules for processing information
Data Layer
The physical storage layer for data
persistence
2-Tier Architecture – modern desktop applications, small web and mobile applications
One can replace any tier (or layer) without affecting the others.
A template for how to solve a problem that has been used in many different
situations
Design Problems
• Need to present data under different contexts (e.g., powerful desktop, web,
mobile device).
• Need to interact with/access data under different contexts (e.g., touch screen on
a mobile device, keyboard on a computer)
• Need to maintain multiple views of the same data (list, thumbnails, detailed, etc.)
Design Solutions
• Separate core functionality from the presentation and control logic that uses this
functionality
MVC Advantages
Clarity of Design
• model methods give an API for data and state
• eases the design of view and controller
Efficient Modularity
• any of the components can be easily replaced
Multiple Views
• many views can be developed as appropriate
• each uses the same API for the model
Easier to Construct and Maintain
• simple (text-based) views while constructing
• more views and controllers can be added
• stable interfaces ease development
Distributable
• natural fit with a distributed environment
Communication
• 3-tier: The presentation layer never communicates directly with the data layer-
only through the logic layer (linear topology)
Usage
• 3-tier: Mainly used in web applications where the client, middleware and data
tiers ran on physically separate platforms
– Some “old” applications even use lower-level protocols such as CORBA and RMI
Web Services - they use the HTTP protocol, thus the name “web”
Universally available - 99.99% of the computers connected to the Internet have the default
HTTP port open)
Exchanged data has a text format (and not binary), thus less optimized
Web Services
JSON–based
OData
others
Bloated and heavy Lightest (just plane data and nothing else)
Despite its name, it can be used to retrieve any type of data (not just XML, but JSON also,
for example) over other protocols than just HTML (FTP for example)
Example of a XMLHTTPRequest
try {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState === 4) {
if(request.status === 200) {
alert("success");
} else {
alert("server response: " + request.status);
}
}
};
request.open("GET", "http://path.to.my/webservice", true);
request.setRequestHeader("Content-Type","application/json");
request.send(null);
}
catch (e) {
alert("error: " + e.message);
}
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
Some Methods
void abort()
void open(DOMString method, DOMString url, optional boolean async, optional DOMString? user,
optional DOMString? Password)
void send(null/ArrayBuffer/Blob/Document/FormData)
Some Properties
readyState
responseText
responseType
status
withCredentials
NOTE: One must add the event listeners before calling open() on the XHR!
var xhr = new XMLHttpRequest();
xhr.open();
TL/DR version: set the ”async” flag of the ”open” method to ”true”
From the architecture point of view, where does SAP UI5 fit in?
SAP UI5 is a JavaScript framework that handles only the front-end tier (the
Presentation tier), either web or mobile.
No security concepts – it needs an Application (web) server for this
No business logic or data access tier – it needs an Application (web) server for this also
Could be paired with OData for direct database access (experimental features)
Official Info
Home page: http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5
o Portal powered by Python, no dogfooding
The official long name: SAP UI5 Development Toolkit for HTML5
UI5 used to be named "Phoenix", it was changed to SAPUI5 in the summer of 2011 because
the name Phoenix was not suitable to be used publicly.
Main characteristics
Business-application orientated
Key Components
Run time:
– Control libraries (JavaScript, CSS and image files)
– Theming generator
Browser support
On mobile:
Release Plan
Development track
Identified by a major and an odd minor version number, e.g.
1.5.1
Release track
Identified by a major and an even minor version number,
e.g. 1.4.1
Extensibility
UI5 allows application developers to
Include their own JavaScript, HTML and CSS into UI5 based pages
SAPUI5 Developer Studio is a set of tools for Eclipse that greatly simplify the
development process for UI5 applications and controls, including:
• Wizards for project and view/controller creation
• Wizards for control development
• Code Completion for UI5 controls
• TeamProvider for NGAP and BSP repositories
• Application preview with an embedded Jetty server
• Proxy-servlet to prevent cross-site-scripting errors
http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/Documentation/Tools/
download
Prerequisite: Install the latest Java Development Kit (currently Version 7), if it is not
installed already.
Download and install one of the preconfigured IDEs. If you want to use the SAPUI5
Repository Team Provider you should choose the 32bit version.
It is also possible to setup Eclipse on your own by using one of the available update
sites for Eclipse.
Once Eclipse has been (re)started, the SAPUI5 Eclipse tools should be available.
One way to confirm a successful installation is to check whether you can create a
UI Library Project / SAPUI5 Application Project.
Last but not least: Install a web server, like Apache Tomcat for testing purposes.
Click "Next".
Click "Next".
Click "Next".
First level
Second level
Third level
First level
Second level
Third level
First level
Second level
Third level
UI5 pages always have to start with the bootstrap, to load the UI5 runtime.
Attributes of the script tag are evaluated and used to configure the runtime
After the bootstrap script tag an "application script" can follow in which the UI5
application is written
• Display your controls in an HTML element called "UI area" by invoking the placeAt method
(there can be multiple UI areas)
jQuery.sap.domById(id)
Useful core functions Gets any HTML element with id id
sap.ui.getCore() If there is also a UI5 control with id id, the
Gets a core instance element returned is the topmost HTML
element of this UI5 control (the UI5
sap.ui.getCore().byId(id) control id is always used there)
Gets an instance of a UI5 control which was Similar to document.getElementById but
created with id id gets rid of IE bug which also retrieves
elements with the name of id
Can be used to access removed controls
(even though the id doesn’t exist in the
jQuery.sap.byId(id)
DOM anymore)
Returns the jQuery object of the DOM
sap.ui.getCore().applyChanges() element with the specified id
Carries out and renders the changes for UI5 Similar to jQuery(„#myId“) or
controls immediately, before the runtime $(„#myId“) but handles escaping of
would do it (use carefully!!) dots and adds the hash character
UI5 control tree(s) are only rendered when the HTML page is finished loading
Only then the UI areas do actually exist in the browser’s DOM
This corresponds with jQuery’s $(document).ready() function
Must reads:
JavaScript Coding Guidelines
API Reference
Developer Guide
Runtime Concepts
Dialog
Layout
Simple
UX3
Value Holders
Complex Controls
Application Header
Paginator
Progress Indicator
Row Repeater
Table
Toolbar
VIZCharts
View Repeater
Dialog Controls
Dialog
Message Box
Layout Controls
Form
GridLayout
HorizontalLayout
MatrixLayout
Panel
Splitter
VerticalLayout
Simple Controls
Button
Image
Label
Link
UX3 Controls
DataSet
NavigationBar
NotificationBar
Shell
ToolPopup
CheckBox
ComboBox
DatePicker
DropdownBox
LixtBox
TextField
TextArea
Contact information:
Bogdan MIHAI
Research Scientist, Performance and Insight Optimization
bogdan-eugen.mihai@sap.com
+40 745 394 340