Thursday, July 26, 2018

Basics of SAP OpenUI5 javascript library - Hello world example

In this post, We will discuss the basics of OpenUI5 tutorials.

SAP OpenUI5 Introduction

OpenUI5 is opensource modern javascript framework for building Software Web applications based on HTML5 specification OpenUI5 is a responsive and interactive framework which supports all devices and all popular browsers. This framework is developed by SAP as opensource and similar to the SAPUI5 framework
It has support for Inbuilt 200+ components To learn this frontend library, You need basic knowledge and understanding javascript, HTML and CSS technologies. We can easily develop rapid application development as there are almost all controls available ranging from the button, Dropdowns to complex grid and tree.

OpenUI5 supports following features 

 200 + UI components are available
MVC support for data binding
Support for Remote API integration and has integrated support for various formats like JSON, XML and ODATA
 Internalization support - LOcalization and Globalization
Responsive which works on all devices including Desktop applications, Tablet, and Mobile devices
Support all major browsers
 Popular widgets are available Layout and themes extending capabilities Opensource Framework Hybrid Application development and deployment Consistent and Rich UX design principles
Two-way data binding Keyboard Interaction

Advantages

1. Rapid application development
2. Consistent UI across all devices
3. As this developed by SAP, Large Community Support available
4. Productivity is improved as large UI component available
5. The learning curve is less as this is based on javascript/html5/css

IDE and Tools Support.

This is extensible and has several plugins and tools available for different IDE and editors. There is no recommendation for specific IDE. Eclipse as primary IDE for developing applications OpenUI5. SAP UI development tools are available for Eclipse Plugins are available for Sublime Text and Webstorm IDE. SAP UI5 and OpenUI5 both provide rich control set. SAP UI5 is one of the products of their product suite. OpenUI5 is open source released under Apache license. Both are the same and the license is different.

You can also use SAP web IDE  which is cloud IDE for writing code without doing the setup in your local environment

SAP OpenUI5 Hello World Example 

To write applications, Need to download runtime library as well as SDK. Both are required for running any application including mobile apps. The code can be deployed to any web server. For this sample application, We will use CDN library  for this example

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>SAPUI OpenUI5 Demo Applicaotn</title>
  

   <script id="sap-ui-bootstrap"
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.ui.commons"
       data-sap-ui-compatVersion='edge'>
        </script>
<script>
            var oBtn;
            
            oBtn = new sap.ui.commons.Button({
                text : "Button Sample Demo",
                press : function (oEvent) {
                    alert(this.getText());
                }
            });
            oBtn.placeAt("main");
            

        </script>
  
</head>
<body class='sapUiBody'>
    <div id='main'></div>

</body>
</html>
The above example has a button and on clicking this button, alert shown with content. This is sample hello world example to show cause OpenUI5 Code.

SAP Fiori design library 

All the openUI5 controls are based on Fiori library. SAP Fiori is a design language that provides Rich consistent UX experience across all components/themes/devices. fiori provides different Simple and complex controls which we can do integrate into front-end applications

Fiori Design principles 

  • Based on your needs, you can customized design 
  • Simple to use and integrate it 
  • Consistent UX across all devices 
  • Fluid user experience

Related article