WebProgrammingUsingUI5 Day3

Web Programming using
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
Day 1 – September 30th

 Introduction
 HTML
 HTTP
 JavaScript
Day 2 – October 2nd

 Quiz
 Introduction
 Internet Architecture
 Internet Communication
 SAP UI5 Overview
 SAP UI5 Programming
 SAP UI5 Controls API
© 2013 SAP AG. All rights reserved. Internal 3

Agenda – part 2
Day 3 – October 4th

 Introduction
 MVC In SAP UI5
 Fragments
 Modularization
 Data Binding
 Quiz
 Introduction
 Charts
 Using external JavaScript libraries
 Styling and Theming
 Localization
 OData Binding

Agenda – part 3

 Quiz
 Custom Controls
 Security Concepts
 DEMO: Building A Sample Web Application From Scratch
 Final Quiz
 Feedback

Web Programming using
SAP UI5
1. Introduction
2. MVC in SAP UI5
2. MVC In SAP UI5
SAPUI5 supports development according to the MVC paradigm.

 Views and Controllers are usually maintained in different files
 The UI definition (View) can be done in different ways

– programmatically, using JavaScript code (JSView)
– declaratively, using either HTML, XML, or JSON to define the UI structure

(HTMLView/XMLView/JSONView)
 The classes related to Views and Controllers in SAPUI5 are

– sap.ui.core.mvc.Controller
– 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

2. MVC In SAP UI5
Objectives
 Provide support for MVC paradigm
 Support development in distributed teams with different source locations
 Support the separation of concerns between user interface structure/layout and functionality
 Suggest file structure, naming, and usage patterns
 Add capability of UI declaration (in comparison to a programmatic construction)

2. MVC In SAP UI5
When to use which type?

 JSViews are familiar to those not having used MVC in SAPUI5 so far.
– JSViews allow direct access to any feature of SAPUI5, for the other View types it might not be possible
to express and configure the usage of every SAPUI5 feature declaratively, hence their controllers may
need to enrich the View.
– JSViews are very hard to parse in general, so they are not suitable if the View definition needs to be
processed in tools

2. MVC In SAP UI5
JS View Example
Second level
 Third level

2. MVC In SAP UI5
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"});
In the declarative View types this is not required

2. MVC In SAP UI5

 XMLViews are a very formal method of defining the user interface.
– They are very compact, structured, and it is easy to get an overview of the UI very quickly.
– 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.
– Plain (non-SAPUI5) HTML parts can be mixed in very easily

2. MVC In SAP UI5
XML View Example

Second level
 Third level

2. MVC In SAP UI5

 HTMLViews are similar to XMLViews, as they contain the same information and have the
same structure, but the carrier format in this case is HTML, not XML.
– HTMLViews are more appealing to typical web developers.
– 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

2. MVC In SAP UI5
HTML View Example

Second level
 Third level

2. MVC In SAP UI5

 JSONViews are the most compact and very JavaScript-like way of defining Views.
– For hardcore JavaScript developers they may be the favorite View type and the most easy one to
understand, but to others they may look a bit too overwhelmingly compact at first glance.
– 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

2. MVC In SAP UI5
JSON View Example

Second level
 Third level

2. MVC In SAP UI5
Feature JS View XML View JSON View HTML View

Controls from Standard and Custom Libraries Yes Yes Yes Yes
Self-contained registration of custom library Yes No No No
locations
Properties of types string, int.boolean, float Yes Yes Yes Yes
Properties of other types (object) Yes No No No
Aggregation 1:1, 1:n, Association 1:1, 1:n Yes Yes Yes Yes
Single Event Listener Registration (maybe Yes Yes Yes Yes
limited to some scope, e.g. controller/window)
Multiple Eventlisteners and/or without scope Yes No No No
Simple Data Binding (Path, default or named Yes Yes Yes Yes
model, template approach)
Customized Data Binding (formatter, data type, Yes No No No
factory approach)
Embedded HTML (without use of HTML control) No Yes No No
Dynamic control creation (e.g. based on model Yes No No No
data, but outside the data binding features)
Code completion (Eclipse) Yes Yes, with No No
limitations
Templating (Eclipse) Yes No No No
Validation No Yes No No

2. MVC In SAP UI5

 Performance is only slightly different:
– the declarative View types first need to be parsed before executing the code which creates the controls,
– 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.
 Within one application different View types can be mixed arbitrarily
 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.

2. MVC In SAP UI5
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.

2. MVC In SAP UI5
File names and locations
The require/declare concept: by default all files have to be located in a subfolder of

the resources folder in the Web application.
 jQuery.sap.registerModulePath(sModuleNamePrefix, sURL); or
 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.

2. MVC In SAP UI5
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.

2. MVC In SAP UI5
Event handlers and other functionality
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++;
});

2. MVC In SAP UI5
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
• viewName: The View name, corresponding to the module concept
• viewContent: XMLViews/JSONViews only - XML/JSON string representation of the View

definition. If viewName and viewContent are given, the View definition will be loaded with
the viewName
• 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

2. MVC In SAP UI5
View Instantion Example

3. Fragments
3. Fragments
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

3. Fragments
JS Fragment Example

3. Fragments
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")
 the oController may be given or null
 if a Controller is given, its methods can be used for the event handlers of controls

3. Fragments
But different than in Views:

 There is no getControllerName() method. Fragments cannot specify to have a Controller
 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.

3. Fragments
Usage of fragments
The generic function to instantiate Fragments is sap.ui.fragment() with the

following parameters
 A fragment name must be given. This name must be resolvable to the fragment file URL by
the UI5 module loading mechanism. In case of JS Fragments the name may also be defined
inline
 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

3. Fragments
Usage of fragments example

4. Modularization
4. Modularization
SAP UI5 framework has built-in support for modularizing comprehensive

JavaScript applications
 instead of defining and loading one large bundle of JavaScript code, an application can be
split into smaller parts which then can be loaded at runtime at the time when they are
needed
 These smaller individual files are called Modules
 To load a module, the jQuery.sap.require function must be used

4. Modularization
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

4. Modularization
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
• Dependencies - modules can use the jQuery.sap.require method to load

other modules that they depend on. While jQuery.sap.require internally has
the effect of a "loadModule" call, it can also be regarded as a dependency
declaration (therefore its name 'require')

4. Modularization
Example

4. Modularization
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.

4. Modularization

5. Data Binding
UI5 Data Binding
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
John Doe John Doe, 35 John Doe John Doe, 35

Age: 35 Age: 35
application data Resulting Resulting UI5 Control / Output

has been updated UI5 Control / Output application data has been updated
John Doe John Doe
John Doe, 36 John Doe, 36
Age: 36 Age: 36
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.

Data Binding: Model Types
UI5 data binding supports three different model implementations.
JSON model XML model OData model
 supports data in a  supports XML data  supports OData compliant

JavaScript Object  supports two-way data
Notation format binding  creates OData requests and
 supports two-way handles responses
binding  includes the open source
library dataJS to handle
OData requests and data
 experimental two-way binding
Additionally, the ResourceModel helps binding translated texts.

Applications can create their own Model implementations.

Creating a Model Instance
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:

Assigning the 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.

Property Binding
Most of the properties of a control can be bound to model properties.
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");
curly braces syntax:

var oControl = new sap.ui.commons.TextView({
controlProperty: "{modelProperty}"
});
(alternatively) by path:
var oControl = new sap.ui.commons.TextView({
controlProperty: { path: “modelProperty” }
});

Example for Simple Control
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/9282

Exercise 8 – Data Binding
1. Open SNIPPIX in your browser and load

snippet 84892 or your solution from Exercise 7.
2. Create some JSON sample data
3. Create JSON model instance / Set the data for
the model / Set the model to the core
4. Switch the controls in the „Enter Data“ panel
from the VerticalLayout to a MatrixLayout and
add 2 TextView controls
• new sap.ui.commons.layout.MatrixLayout
• new sap.ui.commons.TextView
5. Bind the data to the controls

6. Update-function to the Button (optional)

Solution for Exercise 8

Aggregation Binding
Aggregation binding is used to bind a collection of values, like binding multiple

rows to a table. To use aggregation you will have to use a control that acts as a
template.
The aggregation binding can also be defined using the bindAggregation method
of a control.

Example of Aggregation Binding

Exercise 9 – Aggregation Binding

2. Create a new JSON model instance
3. Set multiple first name options as data for the
model and assign a key to each of them
4. Replace the “first name” Textfield with a
Combobox and the “first name” Textview with a
Textfield
• new sap.ui.commons.ComboBox
• new sap.ui.core.ListItem
5. Bind the data to the Combobox

6. Include a function to update the new Textfield
with the chosen value from the Combobox
(optional)


About Binding Paths
{ Absolute binding paths within this model:

company: { /company/name
name: "ACME", /company/info/employees
info: { /company/contacts (a collection!)
employees: 3 /company/contacts/0/name
},
contacts: [
Relative binding paths within the "/company"
{
context:
name: "Barbara",
phone: "873" name
},{ info/employees
name: "Gerry", contacts
phone: "734"
} Relative binding paths within an aggregation
] binding of "/company/contacts":
} name
} phone

Multiple Models / Named Models
It is possible to set multiple models for an element or the core by specifying

individual names for the models, which are used to identify them.
Property bindings for a named model:
Aggregation bindings for a named model:

Extended Data Binding Syntax
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.
Extended property binding: Extended aggregation binding:

Formatters
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.

Exercise 10 – Formatters

2. Add a formatter to the Textview with the „Last
Name“ data
3. Create a function using the toUpperCase ()
Method
4. Capitalize the output in the Textview


Type System
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.

Example – Date Type

Exercise 11 – Date Type

snippet 41894 or your solution from
Exercise 10
2. Create a new panel with today‘s date in
the format DD.MM.YYYY as its text


Custom Types

Sorters and Filters
When using aggregation binding, you can provide initial sorting and filtering.

Exercise 12 – Sorting & Filtering

snippet 65320 or your solution from Exercise 11
2. Duplicate the „First Name“ ComboBox
3. Sort the data in one of the ComboBoxes
alphabetically
• sap.ui.model.Sorter
• sap.ui.model.Filter
• sap.ui.model.FilterOperator
4. Filter the data in the other ComboBox by

names between the letters A and M


Calculated Fields
The Calculated Fields feature allows the binding of multiple properties in different
models to a single property of a control. For example the value property of text
field may be bound to a property firstName and a property lastName in a model.
The application can access these values in a formatter function and can decide
how they should be processed or combined together:
Property Declaration
Formatter Function

Calculated Fields – Extended Syntax
The extended syntax for calculated fields can be used in declarative views such as
html and xml views. Because it is still experimental, it needs to be switched on via
the configuration flag xx-bindingSyntax=„complex“ within the bootstrap.
Now you can mix the text and calculated fields:

Example of Calculated Fields

Exercise 13 – Calculated Fields
1. Open SNIPPIX in your browser and

load snippet 8719 or your solution
from Exercise 12.
2. Create a new panel named
„Calculated Fields“
3. Create a dataset with first names,
last names, gender and
occupations
4. Create a table with 3 columns
(you need to add the sap.ui.table library to the bootstrap)
• sap.ui.table.Table
• sap.ui.table.Column
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.


Master-Detail Relationship
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
• an expense report with a set of

expense line items
• a department with a list of

employees belonging to it
An application can use this master-detail relationship to enable users to navigate

through the purchase order data and see the detail data for line items only related to
the master purchase order selected.
Example of Master-Detail
Example of Master-Detail: Code Part 1
Example of Master-Detail: Code Part 2
Input Validation
To catch invalid user input, you can register the following handlers to the SAPUI5
Core.
• attachFormatError
• attachParseError
• attachValidationError
• attachValidationSuccess
Example:

Exercise 14 - Data Binding with AJAX
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
3. Instantiate the new View and assign it to mContent.musicstore

part 2
4. In createContent of the musicstore View, create the following controls:
• 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%”
5. Add SearchField and Table to the layout and return it

6. Implement both controller methods (empty for now): onSearch and onSelectionChange
7. Test the UI and verify the Music Store comes up (empty table)

part 3
8. Add three columns to the Table, binding them to certain attributes – including an Image
column:
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text:"Cover"}),
template: new sap.ui.commons.Image({src:"{artworkUrl30}"})
}));
label: new sap.ui.commons.Label({text:"Title"}),
template: new sap.ui.commons.TextView({text:"{trackName}"})
}));
label: new sap.ui.commons.Label({text:"Artist Name"}),
template: new sap.ui.commons.TextView({text:"{artistName}"})
}));
The complete View code is available here:


part 4
9. In the controller, implement the „onInit“ method, create an empty JSONModel, assign it to
„this.model“ and set it on the View:
this.model = new sap.ui.model.json.JSONModel();

this.getView().setModel(this.model);
10. In onSearch, read the event parameter „query“, put it into an iTunes search URL and set the
data on the JSONModel:
var searchTerm = oEvent.getParameter("query");

var url = "http://itunes.apple.com/search?term=" + searchTerm +
"&country=FR&media=music&entity=song&callback=?";
this.model.setData(data);
The complete Controller code is available here:


Run the application, enter an artist or song name and press Enter. After a second, the Table will
be populated with the search results from iTunes.

Thank you
Contact information:
Bogdan MIHAI
Research Scientist, Performance and Insight Optimization
bogdan-eugen.mihai@sap.com
+40 745 394 340

WebProgrammingUsingUI5 Day3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WebProgrammingUsingUI5 Day3

Uploaded by

Copyright:

Available Formats

Web Programming using

Day 1 – September 30th

Day 2 – October 2nd

© 2013 SAP AG. All rights reserved. Internal 3

Day 3 – October 4th

© 2013 SAP AG. All rights reserved. Internal 4

Day 5 – October 9th

© 2013 SAP AG. All rights reserved. Internal 5

SAPUI5 supports development according to the MVC paradigm.

 The UI definition (View) can be done in different ways

– declaratively, using either HTML, XML, or JSON to define the UI structure

 The classes related to Views and Controllers in SAPUI5 are

© 2013 SAP AG. All rights reserved. Internal 9

 Support development in distributed teams with different source locations

 Suggest file structure, naming, and usage patterns

 Add capability of UI declaration (in comparison to a programmatic construction)

© 2013 SAP AG. All rights reserved. Internal 10

When to use which type?

© 2013 SAP AG. All rights reserved. Internal 11

© 2013 SAP AG. All rights reserved. Internal 12

In the declarative View types this is not required

© 2013 SAP AG. All rights reserved. Internal 13

When to use which type?

– Plain (non-SAPUI5) HTML parts can be mixed in very easily

© 2013 SAP AG. All rights reserved. Internal 14

XML View Example

© 2013 SAP AG. All rights reserved. Internal 15

When to use which type?

© 2013 SAP AG. All rights reserved. Internal 16

HTML View Example

© 2013 SAP AG. All rights reserved. Internal 17

When to use which type?

© 2013 SAP AG. All rights reserved. Internal 18

JSON View Example

© 2013 SAP AG. All rights reserved. Internal 19

Feature JS View XML View JSON View HTML View

© 2013 SAP AG. All rights reserved. Internal 20

When to use which type?

 Within one application different View types can be mixed arbitrarily

© 2013 SAP AG. All rights reserved. Internal 21

© 2013 SAP AG. All rights reserved. Internal 22

File names and locations

The require/declare concept: by default all files have to be located in a subfolder of

© 2013 SAP AG. All rights reserved. Internal 23

© 2013 SAP AG. All rights reserved. Internal 24

Event handlers and other functionality

© 2013 SAP AG. All rights reserved. Internal 25

• viewName: The View name, corresponding to the module concept

• viewContent: XMLViews/JSONViews only - XML/JSON string representation of the View

© 2013 SAP AG. All rights reserved. Internal 26

View Instantion Example

© 2013 SAP AG. All rights reserved. Internal 27

© 2013 SAP AG. All rights reserved. Internal 29

© 2013 SAP AG. All rights reserved. Internal 30

 the oController may be given or null

© 2013 SAP AG. All rights reserved. Internal 31

But different than in Views:

© 2013 SAP AG. All rights reserved. Internal 32

The generic function to instantiate Fragments is sap.ui.fragment() with the

© 2013 SAP AG. All rights reserved. Internal 33

Usage of fragments example

© 2013 SAP AG. All rights reserved. Internal 34

SAP UI5 framework has built-in support for modularizing comprehensive