Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
SAP UI5
Bogdan MIHAI
Research Scientist, Performance and Insight Optimization
September 30th, October 2nd, 7th, 9th and 11th 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, 7th, 9th and 11th 2013
Agenda – part 1
– sap.ui.core.mvc.XMLView
– sap.ui.core.mvc.JSView
– sap.ui.core.mvc.JSONView
– sap.ui.core.mvc.HTMLView
The base class for defining other view types is: sap.ui.core.mvc.View
Objectives
Provide support for MVC paradigm
Support the separation of concerns between user interface structure/layout and functionality
– JSViews are very hard to parse in general, so they are not suitable if the View definition needs to be
processed in tools
JS View Example
Second level
Third level
JS View definition
The suffix for such a file is .view.js.
There are two default methods that can be implemented and that would usually always be
used:
getControllerName() - Specifies the Controller belonging to this View. In the case that it is
not implemented, or that "null" is returned, this View does not have a Controller
getControllerName() - Specifies the Controller belonging to this View. In the case that it is
not implemented, or that "null" is returned, this View does not have a Controller
If you want to define IDs for controls inside a JSView, in order to guarantee their uniqueness in
case of View re-use, you cannot give hardcoded IDs, but give the View the chance to add its
own instance ID as prefix.
var oButton = new sap.ui.commons.Button(this.createId("myButton"), {text:"Hello JS View"});
– Making use of the benefits of XML, they can be validated and easily parsed by tools.
– Using XML may not feel very web-like to those having experience with HTML development and
preferring web technologies to create the UI.
– Content can still be parsed easily enough, but the View definitions get more lengthy to write and may
not be as easy to read because e.g. control types are defined in attributes instead of the node names.
– Plain HTML can also be mixed in easily, but one should be aware that the View definition HTML will not
be directly used in the resulting HTML document, so one e.g. cannot bind event handlers to HTML
elements in the View definition
– Real-world usage of this View type is less than of the other types, but this does not need to be a reason
not to use JSONViews
– browsers can parse HTML, XML and especially JSON very efficiently, so this difference should not be a
deciding factor and will not play a significant role in real applications.
Choice is also a matter of preference, but a general rule of thumb could be that
– a clean structure, mixed with plain HTML between the SAPUI5 controls is best supported by XMLViews
or HTMLViews
– developers coming from languages like Java, C++ or from other JavaScript libraries which use the
programmatic approach will prefer to use JSViews.
Usage
View is responsible for defining and rendering the UI, the Model manages the application
data, and the Controller reacts to View events and user interaction by modifying View and
Model.
This pattern defines a useful separation of concerns which helps developing or changing
parts independently.
Views and Controllers often form a 1:1 relationship; alternatively it is also possible to have
UI-less Controllers which are also named application controllers; creating Views without
Controllers is also possible. Since a View is a SAPUI5 Control from the technical point of
view, it can have or inherit one or more SAPUI5 Models.
Views and Controllers represent reusable units, and distributed development is highly
supported.
sap.ui.localResources(sModuleNamePrefix);
If your files are located at " http://<localhost:8080>/<myapp>/", for example, you can
use registerModulePath as follows:
jQuery.sap.registerModulePath("myapp","http://<localhost:8080>/<myapp>/");
or
sap.ui.localResources("myapp");
All Views and Controllers having a name starting with myapp, for
example myapp.MyView, will now be loaded from your local machine.
Controllers
Definition – suffix “.controller.js”
sap.ui.controller("sap.hcm.Address", {
// controller logic goes here
});
Functions – predefined lifecycle hooks you can implement
onInit() - Called when a View is instantiated and its controls (if available) are already
created. Can be used to modify the View before it is displayed to bind event handlers and do
other one-time initialization.
onExit() - Called when the View is destroyed. Use this one to free resources and finalize
activities.
onAfterRendering() - Called when the View has been rendered (therefore its HTML is part of
the document). Post-rendering manipulations of the HTML can be done here. This hook is
the same one that SAPUI5 controls get after being rendered.
onBeforeRendering() - Is invoked before the Controller's View is re-rendered. You would use
onInit() in the case that the hook shall be invoked only before the first rendering.
In addition to the lifecycle methods, a Controller can define any additional methods
that can serve as event handlers, or as some functionality offered by the Controller.
sap.ui.controller("sap.hcm.Address", {
increaseCounter: function() {
this.counter++;
});
View Instantiation
Views can be instantiated with the factory method sap.ui.view, with the following
properties
• type: Type can be JSON, JS, XML. All possible types are declared in the
enumeration sap.ui.core.mvc.ViewType
• Controller: Any Controller instance. The given Controller instance overrides the
Controller defined in the View definition
• viewData: JSViews only - can hold user specific data. This data is available during the
whole lifecycle of the View and the Controller
Fragments
Fragments are pieces of UI - just like SAPUI5 MVC Views, but without the View
Control around the content and without their own Controller.
Fragments are light-weight UI parts (UI sub-trees) which can be re-used, defined similar to
Views (in XML, HTML, JS)
they are independent of the MVC concept and can be used without using MVC
As of the initial release of Fragments in version 1.15.0 of SAPUI5, they are marked
as experimental
Types
– XML Fragments
– HTML Fragments
– JS Fragments
JS Fragment Example
Like in Views:
the structure is very similar: a name and an object is given, where the object has a
createContent() function
the createContent function is responsible for the UI definition and has to return a Control
(might be extended to an Array of controls in the future)
this definition can happen at any place - either inline or in a file on its own
("…/my/useful/UiPartX.fragment.js")
if a Controller is given, its methods can be used for the event handlers of controls
Fragments are no Controls. While Views are Control instances which have their own HTML
and their own set of properties and may (usually will) contain other controls, the Fragments
just consist of their content. Views contain their content Controls, Fragments consist of their
content Controls
Whether oController is given or not is NOT a decision of the Fragment, but a decision of the
code instantiating the Fragment.
Usage of fragments
A Controller can be optionally given (some Fragments may require a Controller and
certain methods to be present in this Controller)
An ID can be optionally given. If no ID is given, any Control IDs specified in the Fragment
are used as-is
The UI5 framework initializes and then loads the 'sap.ui.commons.MessageBox' module.
Internally, the framework analyzes the module name and derives the module URL from it:
./resources/sap/ui/commons/MessageBox.js
What is a Module?
A module simply is a JavaScript file that can be loaded and executed in a browser.
There are no rules or definitions what code belongs to a module and what code
doesn't. It is totally up to the developer what content to bundle into a single module
• Name
• Declaration - jQuery.sap.declare
• Description
Example
Module loading
A call to jQuery.sap.require ensures that the required module is loaded and has
been executed before execution of the caller continues - as long as no cyclic
dependencies occur.
• Its dot-separated name must be transformed to an URL. This is done by replacing all dots
('.') with slashes ('/') and appending the standard suffix '.js' to it.
In UI5, DATA BINDING is used to bind UI5 With TWO-WAY-BINDING the application
controls to a data source that holds the data is updated whenever the value of a
application data, so that the controls are bound control changes, e.g. through user
updated automatically whenever the input.
application data is changed.
application data UI5 Control / Output application data UI5 Control / Output
Data binding supports binding of simple controls like TextField and list type controls like.
See the complete documentation on how data binding works and how to implement it in an application.
To use data binding in a SAPUI5 applications you will need to instantiate the
appropiate model first. The constructor takes the URL of the model data or the data
itself as the first parameter.
JSON-Model:
XML-Model:
OData-Model:
After the model has been created you can assign the model to the Core or specific
controls with the setModel method.
The relevant model for a control is the one which is nearest to it on the path up to
the root (UI area). If there is no model in the root path found, the one attached to
the core becomes the relevant model.
There are two ways to bind properties to the model, in the constructor with curly
braces or using the bindProperty method.
bindProperty method:
oControl.bindProperty("controlProperty", "modelProperty");
(alternatively) by path:
var oControl = new sap.ui.commons.TextView({
controlProperty: { path: “modelProperty” }
});
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/9282
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/62232
The aggregation binding can also be defined using the bindAggregation method
of a control.
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/60875
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/34089
Instead of just using the token name of a model property you can also use the
extended data binding syntax. This enables you to use formatters and the type
system for property binding and templates, filter and sorters for aggregation binding.
To use the extended syntax you supply an object literal for the bound
property/aggregation.
For properties you can supply a formatter function which will be called with the
value of the model property. The return value of the formatter function is used as the
value of the bound control.
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/41894
Data binding supports the definition of types which can be handed over when
binding properties. Bound properties with a defined type will automatically be
formatted when displayed in the UI, input values in UI controls are parsed and
converted back to the defined type in the model.
For each Type you can define the following parameters in the constructor:
format options:
Format options define how a value is formatted and displayed in the UI.
constraints (optional):
Constraints define how an input value entered in the UI should look like. When
parsing the value will be validated against these constraints.
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/65230
When using aggregation binding, you can provide initial sorting and filtering.
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/8719
Property Declaration
Formatter Function
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/76601
5. Display the first names in the first column, the last names in the second column and a
combination of first name, last name, gender and occupation in the last column.
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/67575
A master-detail relationship is a
1:n type relationship.
Examples of a master-detail
relationship are:
• a set of purchase orders and a set
of line items belonging to each
purchase order
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/30500
© 2013 SAP AG. All rights reserved. Internal 75
Example of Master-Detail: Code Part 1
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/30500
© 2013 SAP AG. All rights reserved. Internal 76
Example of Master-Detail: Code Part 2
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/30500
© 2013 SAP AG. All rights reserved. Internal 77
Input Validation
To catch invalid user input, you can register the following handlers to the SAPUI5
Core.
• attachFormatError
• attachParseError
• attachValidationError
• attachValidationSuccess
Example:
1. Open the SAPUI5 Developer Studio, and create a new JSView in the „training“ project,
name it „musicstore“
2. In createContent of the Shell View, add one more workset item (text: „Music Store“, key:
„musicstore“) to the Shell
• One sap.ui.commons.SearchField, calling the Controller‘s „doSearch“ method with the Controller
being the „this“ context: search:[oController.onSearch, oController]
• One sap.ui.table.Table (new control library “sap.ui.table” to be added to bootstrap!); use an
extended binding object to bind and sort the Table rows:
new sap.ui.table.Table({
rows:{
path:"/results",
sorter: new sap.ui.model.Sorter("artistName")
}
rowSelectionChange:[oController.onSelectionChange, oController]
})
• One sap.ui.commons.layout.VerticalLayout with width set to “100%”
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text:"Cover"}),
template: new sap.ui.commons.Image({src:"{artworkUrl30}"})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text:"Title"}),
template: new sap.ui.commons.TextView({text:"{trackName}"})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text:"Artist Name"}),
template: new sap.ui.commons.TextView({text:"{artistName}"})
}));
10. In onSearch, read the event parameter „query“, put it into an iTunes search URL and set the
data on the JSONModel:
Contact information:
Bogdan MIHAI
Research Scientist, Performance and Insight Optimization
bogdan-eugen.mihai@sap.com
+40 745 394 340