Introduction to SAPUI5 and OpenUI5
JavaScript is ubiquitous. It is used both for frontend and backend development. When it comes to web development developers can choose between many different JavaScript libraries, i.e. jQuery (just to name one of them). It can be quite hard to follow everything. I find the movement of JavaScript MVC frameworks very interesting, or to be more precisely MV* frameworks. todoMVC gives you a great overview of what is available by offering the same todo list application implemented with the different frameworks. You can have a look at the sources hosted on Github and decide which of the frameworks you prefer and might want to use for your next project.
Whenever you hear MVC keep in mind that MVC can be interpreted differently. There are even variations of the original pattern, i.e. MVP and MVVM. Martin Fowler covers this topic in his great article on GUI architectures. He says that "Different people reading about MVC in different places take different ideas from it and describe these as MVC". AngularJS, for example, calls itself MVW, which stands for Model-View-Whatever. The "Whatever" stands for "whatever works for you". So make sure you don't get confused about all that...
Probably the most popular MV* frameworks are currently AngularJS, Backbone, KnockoutJS and Ember. SAP, Europe's largest software company, has also jumped on that train. The company has developed the SAPUI5 framework, a powerful JavaScript framework which is based on jQuery behind the scenes. People often simply say UI5 instead of SAPUI5. Just yesterday on December 11th, 2013, SAP has announced to make SAPUI5 OpenSource as OpenUI5. The first version of OpenUI5 is 1.16.7. Read Andreas Kunz' article about the differences between OpenUI5 and SAPUI5, some little history and some plans for the future. Andreas Kunz is one of the key people/developers behind SAPUI5 and his comments are always valuable not only for developers. A big Thank You goes out to the SAPUI5 team who always wanted to make SAPUI5 OpenSource. I am sure they had to struggle a lot with their plans and now they really made it happen. Thank You - this is a great gift for Christmas 2013!
At nabisoft we have been developing with SAPUI5 since 2011, and we really like it. Developing with SAPUI5 can make a lot of fun and it can cause a lot of trouble if you don't know what you are doing (applies also for the other frameworks). If you know a little about Java Swing then you might feel familiar with SAPUI5. While I was developing on my client's project with SAPUI5 I collaborated frequently with the guys at SAP who develop the SAPUI5 framework. It is incredible how fast they were with fixing the bugs I reported. Sometimes I also offered them the source code for a bugfix which they accepted and integrated into one of their next releases. After all that experience I have to say that the guys who stand behind SAPUI5 at SAP are talented, skilled, agile and passionate developers! It definitely makes a lot of fun to collaborate with them. As time passes SAP will deliver more and more applications based on SAPUI5. Now even the OpenSource Community can develop SAPUI5 based applications with OpenUI5. Making SAPUI5 "free as beer" is such a great step of SAP.
In our SAPUI5 tutorials we would like to share our experience. To run the applications you need to reference the SAPUI5 libs somehow. SAPUI5 is OpenSource as OpenUI5 which means you could simply download and deploy your own version to follow our tutorials on your own. I will simply use the version of OpenUI5 which is currently deployed on the SAP Cloud Platform. There is also a SAPUI5 version deployed to the SAP Cloud Platform, but I think it's better not to use it because of its license (although I never heard anyone had licensing/legal issues with SAP because of using SAPUI5 in tutorials). Below you find links to some resources you might be interested in.
The links below are great for starting with SAPUI5. You can find there lots of documentation, tutorials, hints and source code published by SAP. Especially the SAPUI5 Demo Kit is interesting because it contains the APIs and controls which you can use.
- OpenUI5 (http://openui5.org)
- SAPUI5
Both OpenUI5 and SAPUI5 are accessible via CDN powered by Akamai! It's quite easy to use UI5 from the CDN, all you need is to reference UI5 as you can see below. For more information have a look at Bootstrapping: Loading and Initializing or directly Variant for Bootstrapping from Content Delivery Network in the official documentation.
- OpenUI5 via CDN
- SAPUI5 via CDN
- https://sapui5.hana.ondemand.com/resources/sap-ui-core.js
- https://sapui5.hana.ondemand.com/1.44.19/resources/sap-ui-core.js
- https://ui5.sap.com/resources/sap-ui-core.js (This shortcut is not explicitly communicated, maybe it will become standard in future)
Wanna see a few examples? Let's go for it! Some years ago I dived a little deeper into AngularJS (and I love ng, be it AngularJS or Angular!). I remember how much I liked the first AngularJS example I saw, so I decided to re-implement it with SAPUI5 (see below). The examples are good for the very first contact with SAPUI5. However, they do not show you all the possibilities you have with SAPUI5. Furthermore, there are multiple ways you could implement things in UI5, and I decided to show you some of them (even though some of them you might not see much in real world UI5 apps).
Example 1: UI5 with handlebars
I haven't seen many UI5 apps using handlebars, but this has been possible from the early days of UI5! The example below gives you an idea how you can work with handlebars in UI5!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAPUI5 with handlebars</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/1.44.19/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"></script>
<script>
sap.ui.getCore().attachInit(function () {
var oModel, oInput;
//let's create an empty model
oModel = new sap.ui.model.json.JSONModel();
// instead of setting the model for each control we simply set it once:
sap.ui.getCore().setModel(oModel);
oInput = new sap.m.Input({
value: "{/myModelText}",
placeholder: "Enter a name here",
valueLiveUpdate: true
}).placeAt("content");
//register our template
sap.ui.template("myHandlebarsTemplate");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div style="width:300px">
<div>Name:</div>
<div id="content"></div>
<br>
<div id="myHandlebarsTemplate"> <!-- data-type="text/x-handlebars-template" -->
<div>Hello {{text path="/myModelText"}}!</div>
<br>
<div>"{{text path="/myModelText"}}" is a nice name!</div>
</div>
</div>
</body>
</html>
Example 2: UI5 with plain JavaScript
This plain JavaScript example is just for demonstration purposes. In real life applications you would not really write much code similar to this one, but it's still a good show case. For example, in real apps you would most probably add your Controls to some XMLView instead of instantiating them and calling placeAt("myElemId").
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAPUI5 with plain JavaScript</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/1.44.19/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"></script>
<script>
sap.ui.getCore().attachInit(function () {
var oModel, oInput, oText1, oText2;
//let's create an empty model
oModel = new sap.ui.model.json.JSONModel();
// instead of setting the model for each control we simply set it once:
sap.ui.getCore().setModel(oModel);
oInput = new sap.m.Input({
value: "{/myModelText}",
placeholder: "Enter a name here",
valueLiveUpdate: true
}).placeAt("content1");
oText1 = new sap.m.Text({
text: "{/myModelText}"
}).placeAt("content2");
oText2 = new sap.m.Text({
text: "{/myModelText}"
}).placeAt("content3");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div style="width:300px">
<div >Name:</div>
<div id="content1"></div>
<br>
<div>Hello <span id="content2"></span>!</div>
<br>
"<span id="content3"></span>" is a nice name!
</div>
</body>
</html>
Example 3: UI5 with XMLView (Single File Example)
So called XMLViews are the preferred and suggested view types. This example shows you how to use XMLViews in a single HTML file. However, this demo is nothing more but a demo. In real life apps you would modularize your code into several views and each one would be in a separate file. Typically, Views are linked to controllers that contain your JavaScript code which in turn use all the powerful enterprise grade APIs UI5 has to offer. Many APIs can be used directly from within XMLViews!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SAPUI5 with XMLView (all in one single file)</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/1.44.19/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"></script>
<!-- XMLView -->
<script id="myXmlView" type="ui5/xmlview">
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<VBox width="300px">
<Label text="Name:"/>
<Input
value="{/myModelText}"
placeholder="Enter a name here"
valueLiveUpdate="true"/>
<Text text="Hello {/myModelText}!"/>
<Text text='"{/myModelText}" is a nice name!'/>
</VBox>
</mvc:View>
</script>
<script>
sap.ui.getCore().attachInit(function () {
//let's create an empty model
var oModel = new sap.ui.model.json.JSONModel();
// instead of setting the model for each control we simply set it once:
sap.ui.getCore().setModel(oModel);
// place the XMLView somewhere into DOM ###
sap.ui.xmlview({
viewContent : jQuery("#myXmlView").html()
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>