openSAP

Introduction to Mobile Solution Development for

the Enterprise
WEEK 1, UNIT 1
00:00:12 Hello, and welcome to this introduction to mobile solution development for the enterprise. This is
the second course in the openSAP online eLearning platform. My name is Craig Haworth, and I
have been working in the enterprise mobility space as a mobile developer for quite some time.
00:00:29 I'm now in the role of an enterprise mobility architect, and a trusted advisor on mobility topics in
the enterprise space. This openSAP course consists of 6 weeks, plus one additional week for
the final exam.
00:00:43 In each week, there will be a number of videos quite like this one, and at the end of each video,
there will be a self test to help you measure your learning progress.
00:00:52 We will also have weekly assignments, and these assignments are graded, and you will earn
points towards your record of achievement. We also have an online forum where you can go and
collaborate with your fellow students and ask questions.
00:01:06 Finally, you can expect that it should take you at least half a day per week to complete the
course. Now let's start with week 1 unit 1, where we begin by looking at what is driving the use of
mobile technologies in business today.
00:01:22 Mobile technologies have profoundly changed the way we interact with each other. Although
there are many places in the world where there is no network coverage, we can go almost
anywhere and be in contact with our business partners and the people that we care about.
00:01:38 It has become so normal for us that we cannot imagine a world without it. We are currently
seeing an explosive growth in mobile device adoption. Today, more than 90% of the world's
population has a mobile phone.
00:01:53 It is estimated that the number of active cellular devices will reach 7.3 billion by 2014, which
exceeds the number of people on the planet. Just last year, the number of smartphones shipped
doubled to that of pc shipments.
00:02:10 And tablet adoption isn't that far behind, and will probably outpace laptops by the end of this
year. A post-pc era is fast becoming a reality.
00:02:22 Some say that the mobile Internet connecting these billions of devices is one of the top
disruptive technologies of our time.
00:02:34 Mobility is rapidly spreading in key industries. Have you ever gone into a store and used your
phone to look up a competitive price on a product?
00:02:42 Deloites have predicted that by 2016 19% of all total in store sales will be influenced by
smartphones. Many of you have probably even used an app to compare prices.
00:02:55 Mobile wallets will likely become one of the preferred methods of payments, and retailers are
taking advantage of this in store use of phones for loyalty programs and for precision marketing.
00:03:09 Our society is super tech savy; we are fast becoming a world of information workers, and having
this information at our fingertips all the time gives us the opportunity to optimize our own lives.
00:03:20 We are interested in being more productive and more competitive, and smart devices are the
tools we use to make this happen. Mobility in its onset has always been consumer-orientated.

00:03:32 It's always been a volume-driven business. Smart device users' experience of mobile apps is
that they're cheaper than pc apps, that there's more variety, and that there's a larger variety of
free apps, to get you productive and connected to a wealth of news, entertainment, and social
communities.
00:03:50 This experience is what's driving expectation of what we want from our business mobile
applications. We want to interact with our business data on our devices, use similar tools we
have in our social and entertainment space to make our business lives more productive.
00:04:06 Why can I access all I want with my phone, except the business systems I use to do my work?
Top businesses like SAP have realized the potential of harnessing mobile technologies to
optimize employee performance.
00:04:22 Further to improve the return on investment on their ERP systems by optimizing interaction with
a system of record. Early adopters of mobile devices like the palm and Windows mobile devices
have been using mobile technologies to optimize business processes for more than 10 years.
00:04:40 But this has typically been in the process workers' space, in industries such as supply chain,
courier, warehousing, and more recently in field force and sales force automation.
00:04:50 The scales have tipped however, and it's the information worker who has the most need for
realtime information to be at their fingertips.
00:04:58 SAP's investment in in-memory technologies like HANA, business analytics. mobile and cloud
are core to each strategy to addressing the needs of the information worker in big business
today.
00:05:11 Adoption of mobile applications in business has been relatively slow as compared to the
consumer market. The main reason being businesses are very concerned around the security of
their customer information, transactions, and intellectual property.
00:05:27 After a huge investment in intranet, pc, and server security, adoption of an intrinsically insecure,
consumer-oriented technology as a means to access business data is a bitter pill to swallow.
00:05:39 Businesses have had to relook their entire security and infrastructure strategies, in order to
accommodated the demand for, and take up the advantage of mobile applications.
00:05:51 For most businesses, this started off with giving the employees access to email, and the first
strategy to deal with security was to create a homogeneous device environment, and demand
their employees used a corporate-owned device.
00:06:05 Effective thought this was, it meant that employees would end up carrying 2 or more devices:
their personal device of choice and the company-owned device.
00:06:14 It was from this that the bring your own device strategy, or BYOD arose, and with it the
complications of supporting a multi-platform mobile landscape.
00:06:27 It is clear there is an opportunity here for application developers. There is an increase in demand
for developers, and mobile application developer skills and know-how.
00:06:40 However, as a mobile application developer for the enterprise, we must have a good
understanding of the non-functional requirements, such enterprise security and supportability
requirements, to ensure the adoption of our applications in the enterprise space.
00:06:55 It is the aim of this course to give you an introduction to what it takes to make an enterpriseready mobile application.

Page 2

WEEK 1, UNIT 2
00:00:12

Welcome back to week 1 unit 2 of this course. In this unit, we're going to look at the
fragmentation of the mobile device landscape, and the implications that this has on mobile
application development techniques.

00:00:25

We will also look at the various development paradigms typically used in mobile application
development today.

00:00:33

Over the past 40 years, what we consider to be a mobile device has changed. Just a few
years ago, we thought a laptop was a mobile device, but today, when an average person
hears mobile device, they're thinking their smartphones or tablets.

00:00:45

This continuously evolving landscape is great for consumers, who get to play with the next
greatest thing every year, however, this is a struggle for businesses, who are typically riskaverse.

00:00:56

Each time they think they have a solution for mobile adoption, the market changes. Example:
moving from a device that you carry in your hand to a wearable device like Google Glass.

00:01:07

We need to be continuously prepared as mobile developers to change and adapt.

00:01:17

Besides this high fragmentation of device type and form factor, there's also been a high
fragmentation of the development techniques for these devices.

00:01:28

This has ranged from client-server type of scenarios, even using SMS as an interface, to lowlevel embedded languages such as Embedded C and Assembly, and even early attempts at a
mobile Web application such as WAP, which unfortunately had a poor uptake.

00:01:44

But typically apps developed in the past were developed natively for each platform, and this
became the norm. Today, however, with increasing power of smartphones, how we develop
the mobile applications is changing.

00:02:01

So what are the typical app development paradigms today? Well certainly the first one I'd like
to mention is mobile Web applications.

00:02:10

Today, mobile browsers typically have a similar kind of power to desktop browsers. And with
the addition of mobile peripheral devices such as GPS, and touchscreens, we get additional
capabilities when we are having a Web browser experience.

00:02:27

However, the perception of a mobile Web app is that it's not as responsive as a native app:
the rendering is not as fast, the swipes are not as smooth. However, with the increase of
CPUs and GPUs in our modern-day devices, the gap between the Web experience and the
native experience is becoming smaller.

00:02:48

With these added CPU cycles and new technologies such as HTML5 and CSS3, developers
can dynamically create content on the device, reducing latency experienced by the end users.

00:03:02

This allows the Web app experience to be comparable to a native app experience. We are
finding that there are many HTML5 application frameworks that have been developed out
there, and SAP has developed its own framework, called SAPUI5, which has become the core
of its modernized mobile application interfaces, like SAP Fiori.

00:03:25

We will be using SAPUI5 extensively throughout this course.

00:03:33

The next paradigm I'd say is probably the most popular amongst developers, is the native
application development paradigm, and I think the reason why this is the most popular is
because of the total control of the user experience.

00:03:47

And further, the de facto tools for each platform tend to be the best, such as XCode for IOS or
Visual Studio for Windows 8, etc.

Page 3

00:03:57

Mobile devices tend to have many peripheral devices, such as GPS or gyroscope, or magnetic
compass, camera, and others, and typically, these aren't accessible from your average Web
browser, so writing a native app is necessary when using these kind of peripherals.

00:04:15

Also, there is this responsive experience with a native app that you just don't get with Web
apps. and users appreciate and expect this.

00:04:23

We will be building native apps in week 4, and we'll be delving in depth into the pros and cons
of these different paradigms in week 5.

00:04:36

This brings us to the implementation paradigm that is growing in popularity, and that is the
hybrid Web container.

00:04:45

This paradigm sits squarely between native and Web apps, and a loose definition is a native
application that is executing locally available Web assets in an embedded browser.

00:04:58

This is not a new paradigm, but has typically suffered from a poor user experience in the past
due to CPU limitations. Modern day computing architecture is increasing in power and the
user experience is now becoming comparable to that of a native application.

00:05:17

An example of the typical hybrid Web container used today is PhoneGap, which uses
javascript as its main controller language, HTML5 and CSS3 as its UI definition language, and
a plug-in architecture from native code to plug-in switch, providing the javascript to native
bridge.

00:05:36

We'll be using this technology to build our first integrated mobile app in this course.

00:05:45

This is not an exhaustive list of mobile development paradigms; there are also other
paradigms such as metadata-driven applications, like SAP's Agentry platform. Each paradigm
has its strengths and weaknesses, pros and cons, and there are many things you need to take
into consideration when you design your mobile application architecture, and we'll go into
these in week 5.

00:06:13

For now, let's build our first mobile app.

Page 4

WEEK 1, UNIT 3
00:00:12 Welcome back to week 1 unit 3 of this course. So far, we've been looking at the mobility drivers
in business today, and the fragmentation of the mobile device landscape that has been hindering
adoption.
00:00:26 In this unit, we'll look at the tools that we'll require in order to build our first integrated mobile
application.
00:00:36 To make building our first application accessible to all, I've selected a number of open source
technologies, along with some free trial licenses from SAP.
00:00:47 The first free trial license we will use is for SAP NetWeaver Gateway. In order to build an
integrated mobile application you'll need a back-end system to integrate into. SAP NetWeaver
Gateway will provide us that back end, plus the services we require for our mobile application.
00:01:05 For our application framework, we'll be using SAPUI5. And to write our code, we're going to be
using the Eclipse development environment.
00:01:14 To test out our code in an emulator, we are going to be using the android developer tools, or the
emulator that comes with android developer tools.
00:01:22 And to embed our Web assets into a hybrid Web container, we're going to be using Apache
Cordova, also knows as PhoneGap.
00:01:30 During our development, we'll be writing a lot of javascript and debugging a lot of javascript, and
we'll be using Google Chrome in order to do that.
00:01:41 So what is SAP NetWeaver Gateway? SAP NetWeaver Gateway was designed to expose SAP
data to non-SAP external systems.
00:01:52 Typically, the internal services of SAP are quite cryptic to developers that do not have an ABAP
background. And SAP NetWeaver Gateway exposes these services as OData services, which
can be easily consumed by external systems.
00:02:07 We will delve into OData in a lot more detail in week 4. You'll find a link to register for this trial
account on the Resources page for this unit.
00:02:19 That link should take you to this page, and you just need to click on the Register Now button in
order to initiate your registration for the NetWeaver Gateway consumption services.
00:02:35 So we've had a little look at SAPUI5, but what is it? It's an extensible javascript-based HTML5
browser rendering library for business applications, and this is the core of SAP's modern Web
business apps like SAP Fiori. SAP typically has a service-side component, but it can also be
embedded in a hybrid web container, and that's how we're typically going to use it.
00:03:03 However, during our development, we will use the online version. There is a great resource that
you can use to extend further your knowledge on SAPUI5, and this resource can be found at
SAPUI5.netweaver.ondemand.com.
00:03:21 ....and you will find a developer guide as well as an API reference.
00:03:31 So we'll be doing most of our development in Eclipse, and we'll be using a specific edition, the
Eclipse IDE for Java enterprise edition. You can download Eclipse from eclipse.org in the
download section, and I'll take you to that page right now.
00:03:47 But before we go there, Eclipse does have a dependency, you need to have at least one Java
runtime installed, so if you don't have a Java runtime installed, I recommend that you go and
download the Java SDK from Oracle.
00:04:03 The Eclipse download page looks like this, and we'll be using this Eclipse IDE for Java EE
Developers. You can download that from the platform of your choice.

Page 5

00:04:19 We'll also be using the Android developer tools, or ADT, and you have a choice here: Android
developer tools come in 2 flavors, you can have a full download that has an embedded
developing environment; it actually embeds Eclipse in it, or you can download the developer
tools separately, specifically if you have already got a developing environment that you want to
use.
00:04:41 I prefer this method because then I can control the version of Eclipse I want to use. But the
choice is up to you.
00:04:49 On the Android SDK page, you have an link here from which you can download the SDK with
everything embedded, or you can use the Existing IDE link to just download the ADT tools.
00:05:03 However, if you do go this route, you are going to have to do a number of things. First of all, you
are going to have to extract of course the files that you get down to any directory, really.
00:05:13 I've just extracted mine to my C drive and put it under Android, and you can see, I've extracted
my Eclipse environment to the Eclipse directory. But you will need to link these two together. In
order to do that, you'll need to use the ADT plug-in for Eclipse, and in order to get to the plug in,
you'll need to install the plug-in.
00:05:37 To install the plug-in is quite simple: We just need to go to Eclipse, go Help Install New
Software, and here you just need to enter the update site.
00:05:49 The link to the update site will be on the Resources page. I already have mine here so I'm just
going to select it. Once you've entered that site, you'll see that there are components that you
can install, inside here.
00:06:06 And I'll just select all of them, and then Next, follow the prompts, and you will install the ADT
plug-in, so that you can link your Eclipse environment to the Android Development environment.
00:06:27 We'll need to download PhoneGap, also knows as Apache Cordova, and again, we have a
couple of methods of doing this: One, you can use Node JS to install it, and you can use the
npm install command to install the Cordova code.
00:06:42 And then, we use a command line in order to generate the Cordova project that we're going to
use. I find it a lot easier, though, just to go to the Cordova site, and... I'll show it to you here...
00:06:56 Click on the Download link and it takes you to Download & Archives, and you can just download
the source.zip file.
00:07:04 This source.zip file when extracted, I'll show you, has a very simple structure, and this is typically
the way I prefer to use it, is... you can see I've already gone to this directory here, and basically,
for each platform, android or IOS, there'll be a directory, and a bin directory, with a create
command line....
00:07:31 ...function, where you can create your own Cordova android project.
00:07:42 Last but not least, we can download Google Chrome from the Google site, and this will provide
us with the capability of doing javascript debugging in our Web browser.
00:07:56 So that pretty much brings us to the end of the tools section that we'll need to build our first
integrated mobile application.

Page 6

WEEK 1, UNIT 4
00:00:12 Welcome back to week 1 unit 4 of this course. In the last unit, we looked at the tools that we're
going to need to build our mobile app. In this unit, we're going to look at the programming
knowledge that we're going to require.
00:00:26 To give you an overview, we're going to be going through a number of examples. We're going to
first of all be looking at some javascript, getting some javascript knowledge; we're going to learn
how to manipulate the document object model, and we're going to learn how to incorporate third
party libraries like jQuery.
00:00:42 Next, we're going to be looking at HTML5 features and some code that uses the canvas tag,
which is one of the new tags that are defined in the standard.
00:00:53 The we'll have a look at the principle of a model view controller by developing an SAPUI5
application.
00:01:02 Finally, we'll briefly look at some OData examples, and as we do all of this, we're going to be
using Chrome GT bug.
00:01:14 So for javascript, this should be old hat for you Web developers out there. As the name implies,
javascript is a scripting language, which is essentially a lightweight programming language.
00:01:24 Why should we use javascript for mobile application development? Well, what is so powerful
about javascript and what makes it so relevant today, is that all mobile Web browsers support
it,...
00:01:35 ...which effectively means that it can be executed on pretty much any smartphone, any tablet,
and most of the feature phones out there today.
00:01:44 This makes it an excellent cross-platform programming language for mobile applications.
Javascript is essentially the programming language for our hybrid Web container application.
00:01:56 It is easy to learn, and I encourage you to go on to the net, they have a lot of learning material
out there for you to get familiar with javascript. And there are many resources which you can use
to enhance your mobile applications.
00:02:07 For the newbies, I have created a simple exercise to get you started.
00:02:15 For this exercise, we'll be using 2 files: We'll be using this JavaScriptBasics.html file, and this is
where we'll be loading our javascript code, through the body onLoad event, so we'll be using this
load value.
00:02:30 You can see that I have incorporated the other file, which is the source file for our javascript,
which is called ColorList.javascript, and I've also incorporated the jQuery library, which we can
use to manipulate the document object model.
00:02:48 Let's have a look at colors, and some of the features of javascript. So in javascript, all objects
are represented in Json, which stands for javascript object notation.
00:03:00 And I'll just show you an example here of how quickly to build up a javascript object. Json
notation uses curly brackets to denote an object in javascript.
00:03:18 Within these curly brackets, all we need to do is specify name value pairs in order to denote
properties and their values. So I will specify ColorName... and the property name, and the value
is separated by a colon... so here's the value, and then I can have multiple properties defined in
this object just by using commas, so comma.
00:03:45 And then I will define another property, so I'll just uncomment this one here to show you the full
object. So here we have an object that's got 2 properties; a color name and a color value.
00:03:57 In javascript you can also dynamically build up an object, so for instance, I can specify this

Page 7

GreenColor object as an empty object, and then just by referencing properties on that object, I'm
adding properties to the object, so there I'm adding a color name and a color value.
00:04:17 And we'll see how the object gets built up when we debug through this application. Arrays in
Json are defined between square brackets.
00:04:27 And here I've created another variable which starts with square brackets, and all I've done is I've
listed a number of objects inside the square brackets.
00:04:39 You can see that I can do an inline definition of an object and also refer to existing objects in this
array list.
00:04:50 Finally, an array is also an object, so I can just define another empty object and assign this array
that I've created to another property on the object, as I've done here... so we can see that colors
is now a property of this myData object which I've created.
00:05:10 Here is our first use of jQuery. So what we're trying to do here in this example is, we're going to
take this color list that we've created, and we're going to dynamically create a dropdown of
colors in an HTML element.
00:05:26 We're going to use this HTML input called Select... so you can see here that I've got this select
tag, and it's got an ID called colors.
00:05:37 Normally within the select tag we have a whole load of option tags which define the dropdown
list, but we are going to dynamically create that dropdown list with javascript.
00:05:51 As you can see here in javascript we have the typical program structures like If and For, and
here I'm just checking to see that the length of my color array is greater than zero, and then I'm
using a typical For loop to get direct through that.
00:06:10 In order to get the tags from my document I'm using a selector this is called a CSS selector
and the hash represents that I want to select a tag in my document that has got the ID Colors.
00:06:28 And this is just using the jQuery notation to do that. Once I've got my ComboBox back, which is
really just a Select tag, I can now add options to it dynamically with my javascript code.
00:06:44 Another great thing about using jQuery is that you can chain commands together, so here you
can see that I'm using jQuery to create a tag, and then I'm using the result of that to set that
tag's value, and then I'm using the result of that to set the inner HTML value of that tag, so I'm
setting the value of the tag to ColorValue and the inner HTML to colorName.
00:07:11 So let's run through this in the Chrome browser so that we can debug through it. So I've already
started this up, and we can see that I've got the Chrome debugger on it. To get to the Chrome
debugger, you just use Ctrl-Shift, and i.
00:07:29 So here we're on this blue color and I can just step over this, and we can see the structure of the
blue color object that has been created, so it's colorName, colorValue.
00:07:38 And let's see how we build up an object... so we can see greenColor, it's an empty object, there
are no properties in it, and then as we reference a property, it adds the property to that object.
And then here with have the same structure.
00:07:54 And then when we create a colors array, you can see we create an array of objects, and we can
look at each object and we see that they have also got the same structure.
00:08:06 Stepping through this, we can use a jQuery with our selector to get our ComboBox back, which
is really just a Select, and then we can iterate through our list and add options to it, and
eventually end up with a dropdown box with a list of colors.
00:08:32 So a very basic simple intro example, and I encourage you as a research topic to go online and
learn some more javascript.

Page 8

00:08:47 So the next piece of programming knowledge we need to address is HTML5. HTML5 is the next
major release of the HTML standard. It is still officially under development, but this hasn't
stopped browser developers from supporting this standard.
00:09:07 In HTML5 revolutionizes the way in which Web applications and mobile Web applications are
being built. It introduces a number of new syntax features such as video, audio, and canvas, and
in this example, which I'm going to run you through, I'm going to use the canvas tag to draw a
circle on this canvas.
00:09:37 So for this example, we'll be using the HTML5Basics HTML page, and we'll be using the
RenderCircle javascript file. In the HTML5Basics you can see that I've just referenced or created
a canvas tag, given it an ID again, so we can go and retrieve it using javascript, and specify its
width and height.
00:10:04 You can see as this application loads up I'm going to run this RenderCircle function which is
defined inside RenderCircle.js. Inside RenderCirclejs I have 2 functions: one which draws 2
arcs, so in order to draw my circle, I'm actually drawing an ring with 2 arcs, with a fill between
the two.
00:10:27 And within the circle is where I actually go and get my elements; in this case, I'm using the
standard way to get an element from the document getElementByID we could also have
used jQuery here. But here, I'm using a specific function from that element called getContext.
00:10:47 This gives me a drawing context which I can use to set properties such as this shadowColor and
Offset, and then also a number of functions like drawArc or drawLine that I can use to render
images to the canvas.
00:11:06 Here you can that all I'm doing is passing this context that I've retrieved into my draw function,
and then in my draw function, I just render 2 arcs and a fill between the two. And of course,
along with this drop shadow, I'll show you the effect that this achieves.
00:11:21 So let's go to HTML5 Basics. You see here I'm going to step through the code, as we did before.
I'm getting a context; you can see the structure of the context, and then we can step through,
save the state of that context, specify that I want a drop shadow for each stoke that I make on
the canvas, and then I draw the canvas.
00:11:46 And there you go. So we've drawn a circle with a shadow. Along with HTML5 we have CSS3.
Now CSS3 stands for cascading style sheets. It's really the way we used to control the style and
layout of Web pages. And this CSS3 is the latest standard for CSS.
00:12:13 So let's have a quick look at some of the things we can do with CSS3. For this example, I will be
using the CSS3Basics.html. So CSS is defined between style tags, and you can see that I've
defined some style here.
00:12:37 So here a normal div would be white, it wouldn't have a border or anything, it wouldn't have a
specific width; but here, what we're doing is specifying a style for all divs, actually, within this
page, by using a tag selector.
00:12:51 You'll notice that here I'm using another selector where I'm specifying a specific ID, by using the
hash selector again, which you've seen before, so I'm saying, all divs with this identifier need to
have these additional styles.
00:13:09 So this is gong to give us a box which is 96 pixels by 96 pixels, blue background, it's going to
have round edges, and then this one will give us a box that has been rotated by 30 degrees.
00:13:23 So let's have a look at what this does to these 2 divs. So there we have our first div, and then we
have our div with an identifier.
00:13:40 Great, CSS Basics, so there you can see we've managed to manipulate what the normal
behavior of a div is, an we've even been able to do some transfer just using CSS.

Page 9

00:13:55 So again, another research topic. There's a lot to learn about CSS. Just go online. It's very good
to know this when developing hybrid Web applications.
00:14:07 Well, the second last bit is to look at SAPUI5, so we're going to do an example here where we
take the color list that we've been using before and we're going to now put it into an SAPUI5
application.
00:14:29 So SAPUI5 combines the power of javascript, jQuery, and HTML5 into a cross-platform, robust
Web application framework. It allows the developer to maintain a strict model view controller
design pattern.
00:14:46 And in this demo I will show you the basics of using SAPUI5 by extending what we've learned
on javascript so far.
00:15:04 We'll be using 2 files here again: the SAPUI5Basics.html file and the SAPUI5ColorList file. With
SAPUI5Basics, just like any other javascript library, we need to import the script into our Web
page.
00:15:30 And notice, I'm referencing an online javascript file, and this specific command does
bootstrapping, so essentially it is a small piece of code that loads a bigger piece of code.
00:15:43 This bootstrapping will load a specific control set or a specific library set that I specify in these
additional tags, so there I'm specifying the style or the theme, and here I'm just specifying the
sap.m or the mobile controls.
00:16:03 I'll also incorporate my javascript file and then again specify that on the load, I need to find a
specific script. Also note the root element here that we'll use to place our particular application.
00:16:20 So let's go and look at what this looks like. So this is really extending the color list example we
had before, but here, instead of just using jQuery and manipulating the document object model
directly, we're using a model view and controller design pattern.
00:16:43 So first of all we need to create the model. And there are a number of different types of model
you can create in SAPUI5, but here we're creating a Json model, which means I can just assign
my Json object directly to this model, and I will tell the SAPUI5 core that this is the main model
that I'm going to bind my controls to.
00:17:03 So SAPUI5 uses dynamic data binding, so you can bind your data model to your UI. So I've got
my model, and next, I need to specify my view.
00:17:15 You specify a view by using this sap.ui.jsview class, and I specify the class name of my view. So
I'm basically creating a type of a view.
00:17:29 In here are the 2 main functions that you need to override: the getControllerName, so I need to
link a controller to my view, and then of course I need to specify how to create the content for my
view.
00:17:42 In this createContent I'm creating a list; it's just a normal, typical list that you would see on a
mobile device, and I'm specifying a few types, saying that it's a DetailAndActive, so it shows a
title and a description, and it indicates an arrow that you're going to go to detail.
00:18:03 And then, in order to be able to bind the list to the data model, I need to specify a template, so
how do I bind the data to the UI. And in here, you can see that I'm specifying that I want to bind
the colorName property to the title property of the list item, and I'm going to bind the colorValue
to the description.
00:18:27 Next I need to specify what object in the data model that I want to bind the view to, and you can
see that I'm specifying the Colors property which is, as you can see here, just this colors
property I specified on my data.
00:18:47 So we've got our view, and finally we embed that view into a page, and then the last part of the

Page 10

model view controller, of course, is the controller itself.

00:19:00 Also in my view here, when I specified my template, I specified the tap function. This is an event,
so if I tap on the list, it needs to call a specific function on my controller, this colorListTap
function...
00:19:16 And in my controller, I define this colorListTap function, and you can see, all I'm doing is just
calling window.alert, and just popping up the message saying that color was tapped.
00:19:27 There is another object we need to create; so, we've got pages which are embedded in views,
and views are then embedded into an application.
00:19:38 That application is then used to navigate to the different views. So here I've created an
application object, I've created an instance of my view, added that as a page to my application,
and then told my application to navigate to that page.
00:19:54 I then place my entire application at that div that I pointed out earlier, and that is here, this root
div here. So let's have a look and see how that works inside Chrome.
00:20:13 So here I've got it up and running. You'll notice another thing here, is that I've appended this to
the URL to specify which OS I'm going to be rendering for.
00:20:25 Because depending on which device SAPUI5 runs on, it will look like the paradigm of that
device; if it's on IOS it'll look like an IOS app, if it's on android it'll look like an android app.
00:20:37 So I'm specifying I want it to look like android. So let's go through this; this is all the same, I
create my model, set my model, create my view. And you'll notice that the create content wasn't
called yet, because I haven't created an instance on the view.
00:20:54 And then here, I'm going to put a breakpoint on the color was tabbed. Create my application,
create an instance on my view, and now we go to this create content, and it creates my
template, binds the list, inserts it into a page, and voil!
00:21:13 We have our new list now, but it's looking much more like a mobile app would look. And of
course if I tap on this, it will run the function that was associated with the tap event.
00:21:25 And then pop up a message, and that will work for all of them. So that's a brief introduction to
SAPUI5, to give you an idea of the structure of a typical SAPUI5 application.
00:21:44 The last bit of programming knowledge we need for this unit is OData. OData is very much like
an ODBC driver for the Web, and one can draw parallels with how OData and SQL works.
00:22:01 SAP has adopted OData as a service enablement standard for SAP Web and mobile
applications. And we'll delve into OData in a lot more detail in week 4, but for now I'd like to
show you a basic demo.
00:22:18 We'll be using a specific endpoint for this demo which you can get by registering for the SAP
NetWeaver Gateway consumption service on the SEN.
00:22:36 You will find this endpoint on the resources page. So what you're seeing here is actually the
service document for the service, and it's specifying the number of collections, or the collections
that are available for the service.
00:22:52 So OData has collections and entities and functions. And the collections are collections of a
specific entity type. So here, for instance, I have a collection of products. And in order to see that
collection of products, all I have to do is extend this URL, and get a collection of products back.
00:23:12 And there you go, you get a collection of products, and in order to see the entity type that this list
is bringing back, I just specify $metadata on the service endpoint, and this will bring back all the
entities that are used in this service.
00:23:36 So I can go down and I can see exactly what my product entity looks like.

Page 11

00:23:48 You can also do queries in OData, so for instance if I do not want to bring back the entire list of
product collection, but just want to bring back the top 2, I can specify a query saying top equals
2.
00:24:03 So again, very similar to select statements, you can bring filters, etc., but we'll go into that in a
lot more detail in week 4.
00:24:13 And that's all fine and well, I can bring up this data in a Web page, but how do I do this in
javascript?
00:24:20 So I have an example here to do this in javascript. and we'll be using this ODataBasics.html
00:24:31 And in here you see that I've actually incorporated another javascript library called datajs
00:24:38 And in datajs we have this OData object, which has a function called read.
00:24:43 Now inside here you see I'm just using the exact same URL but I've just added this format=json.
00:24:50 The format that was bringing before was an atom xml format, but it's much more efficient to
bring it back in json format when using javascript.
00:25:00 I'm just using more jQuery here to manipulate the document object model, to basically take the
name of each product that is returned and just output it into a div into the page.
00:25:11 So if we have a quick look at how this works, you can see I've actually got a breakpoint here,
and we run through this.
00:25:20 I've made a call to that endpoint and it's brought back a whole lot of results. We can look at
these results, I say data, you can see that there are objects that have been brought back.
00:25:32 Each object, you can see, has a product structure, and then I'm just using the name of the
product, and now putting that as divs onto the page, and there you go.
00:25:47 As you can see, as we start combining all of these things we've got all the elements we need to
build up our mobile application.
00:25:55 So that brings us to the end of all the programming knowledge that you require in order to build
a mobile application.
00:26:02 In the next unit, we'll be combining all of this knowledge together to build our first integrated
mobile app.

Page 12

WEEK 1, UNIT 5
00:00:12 Welcome back to week 1 unit 5 of this course. Now that we have some background information,
and the requisite skills in order to build our integrated mobile application,
00:00:22 and by integrated, I mean uses data from a system of record, such as an EIS or enterprise
information system we will be using the SAP NetWeaver Gateway as our system or record,
so please make sure that you have registered as a user at the SEN developer center ES1
system.
00:00:46 The overall process that we'll be following is that essentially we will be building our application
first as a Web application using SAP UI5. Then we'll be using Cordova tools to generate an
android Cordova starter application, which will become the native container for our Web assets.
00:01:06 We will import this generated object into Eclipse and incorporate our Web assets. And finally it's
a matter of building, and deploying and testing the application on an android device.
00:01:17 All the source files that you will need to build this application are in a downloadable archive that
is accessible from the resource page for this unit.
00:01:30 Our app is going to look as follows: Essentially, we're going to display a list of products, with the
product name and some details around the product, and this will navigate to product details,
whenever we click on one of these products, and then of course there's going to be a supplier
page as well for each product, so we can click on a supplier link and look at the supplier details;
so, a basic project.
00:01:56 As mentioned, you will need your trial account for the ES1 system in order to build this project,
so if you haven't done so, please go to the ES1 system now and register. We'll be using this
import that we used in a previous unit, and when you access this import for the first time you'll
probably be challenged for a user name and password just enter the credentials that were
sent to you when you registered.
00:02.:23 With this service document you're going to see the number of collections that are available, etc.
We'll be using 2 of these collections we'll be using the product collection and the business
partner collection. So let's go through to...
00:02:39 ...that site, and use those collections. You can see here I've got those collections up already.
And what we're going to do here is, I'm going to try and call the product collection again, if I just
type in product collection...
00:02:58 Right, so this brings back all the products. Now, in our application we have a product list, and
then we go to product details and then to the supplier. The supplier is actually a business
partner, so we need to go and look for the supplier property here. You can see there's a supplier
ID.
00:03:19 And now we can use this supplier ID as an OData query to bring back just the business partner
we want. So I'm going to use business partner collection and then all that you do is you put this
primary key in brackets and in inverted commas at the end of your URL and this will bring back
the specific business partner with that key. And there you go, we have that specific business
partner coming back.
00:03:53 So essentially, we now know how to use OData to bring back the data we need, and we need to
see now how we can integrate this into our mobile application. Right, so, let's...
00:04:08 ...start off by opening up this downloaded resource and incorporating it into our Eclipse
environment. So the first thing that we can do is...
00:04:23 ...that we'll just open up the Eclipse environment and we can import this project that I've created
for you into Eclipse, so that's just a matter of right-clicking on the Project Expolorer Import
Import to choose General Existing Projects into Workspace Next, and then Browse for that

Page 13

project; that project will be on your file system, and the project that I'm going to be using is
MyFirstIntegratedWebApp, that's week 1 unit 5.
00:04:59 There you go, and once it's in, we can start looking at the source code. So I have this open in
another workspace, and I'm going to go there right now. Let's go to this workspace. Great.
00:05:16 So one of the main differences about the project that we have here today is that in the first SAP
UI5 app that we built, we had all of the data in one file.
00:05:31 One of the big differences here is that we're going to separate all of our view and controllers into
separate files to make the code a lot more manageable. We're also going to be using the central
model as we did before with a simple global access for our data and for our data binding.
00:05:48 So let's have a look at each of these views and controllers that we've created. So the first view
I'm going to look at is the product list view. The product list view is really just an SAP UI5 list.
00:06:10 Again, it's a detail and action list, and again, our product header, we'll give it a header called
product list. Once again, I'll create an item template for this list, and I am binding the name and
description of the product.
00:06:29 And here, I'm binding the whole product list to a root object in my data model or products which
we will populate with an data.js query to our back-end system. This is called an aggregated
binding, because we are not just binding one object, but we are binding a list of objects or an
area of objects.
00:06:54 So for each object in our product list, we will be binding each object to title and description,
the property name and description, to those two. So if we go and look at the controller, we'll see
how we handle the navigate feature sorry, as soon as I tap on one of these products, I need
to navigate to the details so...
00:07:24 ...the Navigate button on product list controller, the first thing it does is it goes and gets the
source of the event. The source of the event is essentially the list item that we touched, and in
order for me to get the data for that list item, all I need to do is get the binding context.
00:07:44 So as soon as I've got the binding context, that means I have the object that was bound to that
list, and I can now pass that object through to the product list detail so that I can show the detail
of that object, and you can see this is exactly what I'm doing here. I'm basically using the app.to,
which is a navigation feature, so remember, in our unit 4 when we built this application, we had
an application object which we added pages to, and then we navigate using that application
object to the various pages that we want to navigate to.
00:08:19 So in this case, this to function allows you to specify data in the event, and you can then actually
create that product object as your data that you're sending through to your product detail. So
let's look at the product detail view then.
00:08:36 Notice this, is that onBeforeShow, this is an event that gets thrown every time, just before a view
is being shown, I am actually getting the controller, and calling an event on that controller, and
this event will have the data that I actually need to display.
00:09:00 So when the application navigates to the screen, it passes event data to the screen, and part of
that event data is the data for the product. So then we can just go straight into the
ProductDetailcontroller, and we can see that the event has data, and it has context.
00:09:22 That context there is the binding context that we passed through, so I'm setting the binding
context for this view to that data, so it means I'll show that specific product's data. In the
ProductDetail.view it's slightly different: although we're using a list, we are not doing an
aggregation binding here, we're binding to a single object, so I'm creating display list items for
each object that I want to show, and explicitly setting the bindings to the specific context that
we've already set.

Page 14

00:09:58 So here I'm just using name, description, price, and I'm also using the supplier name. Notice
here as well that I'm creating some custom data for this list item. It means when I click on this list
item I'll be able to grab this custom data and use that custom data as part of my context.
00:10:21 So I'm getting the supplier ID, which of course is the business partner ID, which we're going to
use to do an additional query to the business partner collection in order to get that data and
display it as the supplier information.
00:10:35 Another thing that you should notice here as well is that I'm also showing a product picture, so
the binding is quite sophisticated, in that I can specify a formatter for my binding. Now in the
product information that I get back from the server, I get a URL, but it's not a complete URL, so
the base of the URL is not there. So I've created a formatter to add the base of the URL to the
value I receive in the product entity.
00:11:08 This means I can actually reference that image. Finally, let's have a look now at how this is
actually working. You can just go to Index Properties and actually grab that location, copy it,
and then paste it into a Chrome browser.
00:11:36 One important aspect around using Chrome here is, there is a security feature in browsers that
doesn't allow you to make ajax call across domains, so in order for this demo to actually work,
what you need to do is, you need to add a parameter, a command line parameter, to Chrome,
and I'll show it to you here: It's called minus minus disable minus web minus security.
00:12:10 If you don't do that, your http calls aren't going to get through to the server and you get an error.
Another thing to note is that if you have a Chrome browser up already, and you try and open up
another Chrome browser with this command line parameter, it's still not going to work. You have
to close all of them down, and then open it up with this command line parameter.
00:12:35 So here we see our first product list let me just run this again and step through the code.
So here, I'm doing an aggregate binding on the entire list, and as soon as I click on one of these,
obviously, it will respond to that tap event, it will take the binding context of that specific list item
and then pass it on to the product details screen.
00:13:02 And then here, I'm just showing display list items and of course making reference to the image.
But how did I get this data? This data is done with a data.js query, and we're actually doing this
query right in the index file, in a script. So I'm doing like we did in unit 4, an OData read. This
time I'm actually passing in my user name and password so I don't get challenged for the user
name and password each time.
00:13:38 And then, as before, creating a model, and then binding the results of this OData call to my
model. And you can see here that the root of my model is myData, and one of the root objects of
my model is Products, so I'm binding the product list to this root data object. And I've set it to the
core so it will automatically bind to all of my views.
00:14:07 One thing we haven't discussed yet is that the main controller of this application we've looked
at the product list and we've looked at the product list details the main controller is handled by
the app view.
00:14:36 So the app view is just a view like any other; the difference is that it contains an application
object. So what I've done here is within the app view I've created an application object and I've
set that as one of the properties of the app view.
00:14:36 I've then gone and created instances of all of the views that I've defined and I'm adding them as
pages to this app object, and then I'm returning this application back.
00:14:51 So, you'll see here in the index that after I've got my data what I do is I create an instance of app
and I place that at the root element in my document
00:15:10 Right, so that should be quite clear, and the last step is now to make that additional OData query
when we select the supplier. So let's just look at an example of that. If I click on the supplier
Page 15

now, what it should do is make an OData query and bring back the business partner record, and
then I can display whatever fields I wish to in this business partner record.
00:15:36 So how that is achieved is that similarly to when I clicked on a product list item, I had an event.
So let me go to that event now. This product detail controller handles the event; and this is the
SupplierTap event.
00:16:00 So you'll see here that in this specific case, I looked at the event, I got the source object, and I
got the custom data object which we created before. Let me show you that again.
00:16:13 In the product detail view, there is this custom data object that I created. That custom data
object is passed in to the event with this source object. So in this product detail controller now, I
can use that ID, and I can use it as part of my OData query, like we did in the beginning, to go
and get the business partner record.
00:16:47 And here you can see I'm just using the business partner collection and I'm passing in that
supplier ID as a parameter. And when I get it back, all I do is an app to to get it back to the
supplier detail and pass in the data I received as the binding context that will be bound to the
supplier detail page.
00:17:13 In the supplier detail view, I'm not doing an aggregate bind here, I'm just doing a bind to the
individual items that were passed in, in the business object.
00:17:28 Right, so that gives us a good idea of how to build up one of these applications. Let's continue.
00:17:40 So we've now built up our Web application, but what we need to do now is pull this together into
a hybrid Web container. So in this next part of the process, what we're going to be doing is we're
going to be generating our application using the Cordova app generation tools.
00:18:02 We'll then be looking through this project structure, just getting familiar with the structure, seeing
where we need to embed our web assets, seeing what modifications we need to make to the
default Web assets that are put there.
00:18:17 And additionally, we'll do some modifications to the container. Especially if you are making a
long running query as the application starts up, you may need to do something like adjust the
load time-out, because Cordova has a load time-out of 2 seconds. So if your initial query to the
back end lasts longer than 2 seconds, it's going to time out and it's going to crash.
00:18:41 So that's sometimes what happens. Alright, so in this section, we first of all are going to
generate a Cordova project. In order to do that, you need to navigate to the Cordova source and
also navigate to the Cordova android version.
00:19:05 In the bin directory, there is a function called Create. If we just run this now, we'll be able to see
all the command line parameters. Essentially, to create a new Cordova or android project, we
need 3 command line parameters. The first one is the path, where the source must go, the
second is the namespace of the application, and the third one is the name of the application,
which will essentially be your first android activity.
00:19:37 So let me do this quickly... Create... and we'll just do a test run here... say MyFirstAppTest... so
that's where it's going to place the source code. We'll just give it the com.opensap.myfirstapp
namespace, and of course we give the activity name, which will be myfirst, for instance.
00:20:10 We run that, it'll create the project... it takes a few seconds... we can go and have a look at that.
So I should now be able to go and browse to that directory.... and we'll see that we've actually
got an android project that has been generated for us.
00:20:40 We can now import this project into Eclipse.... let me just use my Eclipse here.... there we go
Import, and we say Existing Android Code Into Workspace... we go and browse to the root folder
we just created... and we're done.

Page 16

00:21:15 Now we can actually go and look through this code. You can see there's a lot of files here. The
important file to note from the beginning is this config file so there's some configurations
that you can do in here, and especially later on, in week three, when we build our own Cordova
plug-in, we'll be using the config.xml file.
00:21:46 The other file that you should be aware of is this first activity or this main activity that is created,
and it's here that we can do things like adjust the time-out or do different configuration settings
for the hybrid Web container itself.
00:22:02 Finally, where we put all our Web assets is in the assets folder. So in the assets folder, you'll
see a www folder and you can see a typical structure that you'd see in most websites today.
00:22:19 The two main files that you'll want to adjust here is the index.js file and the index.html file. By
default when we run this it will just show a Cordova logo saying device is ready. We are
obviously going to adjust this to load up and run our application.
00:22:41 Well I've already done this so I'll go and step you through what I've already done in this space
and then we can build this and deploy it to our mobile device.
00:23:00 So this project is also downloadable from the resource page, so I'll grab this project and import it
like the other one, and we'll first have a look at a couple of the changes that I've made.
00:23:13 One of the first changes I've made is I've added this line of code here, which essentially changes
the load time-out value to 60 seconds instead of 2. So if you are making online queries, say, for
instance, to load the SAP UI5 javascript from a server, then it could take longer than 2 seconds,
so this will just prevent any errors happening during that process.
00:23:42 Additionally, I put all our Web assets into www directory, so I put all our controllers in here and
all our views in here. Additionally, I've added data into the js folder, which we're going to use to
do our OData queries to the back end.
00:24:05 So the modifications I've made is in index.html, I've deleted pretty much all that stuff that comes
defaulted, and I've just added in the root tag like we've done in all our other applications. I've
kept this app.initialize; it's quite important because when app.initialize runs it kicks off an event
once the Cordova container is ready to start rendering html, and it's only at that point that I want
to start making calls into the back end when it's not showing our pages.
00:24:41 To respond to that on initialize event you have to modify index.js, and you can see here that on
this device onDeviceReady, this is where I've added the code that was originally in the index file,
and this is really just doing the OData read to the back end service, and creating the data model,
and then of course, initializing the app and navigating to our first page.
00:25:06 So let's go ahead and see how this runs on the device. So what I'm going to do is, I click, I've
got my device ready here... and what I'll do is Debug As android application this will
take a couple of seconds to load up and run.
00:25:45 And there we go, we've got the same application up and running, and we can navigate through
to our detail page, and of course, click on our supplier, do that additional OData call and get the
business partner, and then we can of course navigate back, etc.
00:26:09 So there we have it, we've embedded our mobile application into our hybrid Web container and
are running it on a device.
00:26:19 So we have built our first integrated mobile application. However, this is not the end of the story.
We have not yet made our application enterprise-ready. Nest week we'll look into the
considerations you'll need to take into account when deploying your mobile app into the
enterprise environment.
00:26:39 And next week we'll introduce you to a tool that will help you do this: The cloud version of the
SAP Mobile platform.

Page 17

www.sap.com

2013 SAP AG 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 AG. The
information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors
contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP AG and its affiliated companies
("SAP Group") for informational purposes only, without representation or
warranty of any kind, and SAP Group shall not be liable for errors or
omissions with respect to the materials. The only warranties for SAP
Group 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.
SAP and other SAP products and services mentioned herein as well as
their respective logos are trademarks or registered trademarks of SAP
AG in Germany and other countries.
Please see http://www.sap.com/corporate-en/legal/copyright/index.epx
for additional trademark information and notices.