Geekly Articles each Day
📜 ⬆️ ⬇️

OpenUI5 - new javascript framework from SAP



Recently, an event occurred that unfairly went unnoticed on Habré. The SAP company has listened to the requests of the developers and has opened the code of its commercial framework for creating web applications. I would like to correct this unfortunate omission.

It all began in 2010, when the German company SAP, one of the world's largest software developers, began preparations for the transition to a new user interface. As a technology, a bunch of HTML5 and Javascript was chosen.


As soon as SAPUI5 was introduced as a commercial product, the developer community immediately began collecting petition signatures to open the framework source code and make it free for developers. This spring, the source code was opened and published under the Apache License 2.0.
An open framework is called OpenUI5 and is available for download at the following address: http://openui5.org/download.html
')
The advantages of OpenUI5 include the following points:


However, it is better to try once than read a hundred times. I will give the simplest example of an application on OpenUI5.
First, take an empty HTML file template.

<!DOCTYPE html> <html> <head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>Hello world</title> </head> <body> </body> </html>

Now we will connect the framework by placing the script loading in the file header.

  <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'></script>

And also add to the body of the HTML div-element inside which the application will be placed. Assign the id to the id = 'content' to know how to find it in the document.

 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <title>Hello World</title> <script id='sap-ui-bootstrap' src='resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.ui.commons'></script> </head> <body> <div id='content'></div> </body> </html>

After that it remains to add the code of the application itself. Our application consists of a button that issues an alert when clicked.

 <script> var btn = new sap.ui.commons.Button({ text:' !', press: function() { alert(" !") } }); btn.placeAt('content'); </script>

The whole application consists of two operators: first, create a button via new sap.ui.commons.Button (), then put it in our div with the identifier 'content' using placeAt ().
The program is ready for testing. You can save the resulting file as html and run it in the browser.



It is worth getting a hand and with more complex applications also will not have problems.



I hope that I was able to awaken the initial interest in the framework.
More information can be found at the following links (unfortunately everything is in English):

Project page: http://openui5.org/
Developer's Guide: https://openui5.hana.ondemand.com/#docs/guide/Documentation.html
Application examples: https://openui5.hana.ondemand.com/#demoapps.html
SCN Developer Forums (SAP Community Network): http://scn.sap.com/community/developer-center/front-end/content
GitHub Link: http://sap.imtqy.com/

PS added a link to GitHub

Source: https://habr.com/ru/post/227861/

More articles:


All Articles