I’d like to confess: I’m the greatest fan of SAP UI5. :cool:
If SAPUI5 was a singer – I would be the 1st to buy tickets to the show! Such amazing experience, so my thoughts won’t let me go till I’ll convince at least some of you that SAP UI5 is the best library, for almost any client development task based on HTML5 and JavaScript. And you, if you belong to NetWeaver Cloud Portal family, then you really should try to develop your own application using SAP UI5 whenever it is possible, and believe me – it is always possible.
This blog isn't about the product,
This blog isn't about its marketing,
This blog is just about how simple things could be from a development perspective.
Where did the story begin?
I was an ABAP Developer, interested with new products in SAP, especially interested with SAP Portal Portfolio offering. One day it happened - I was invited to internal Demo pods session in our lab; I was exposed to another generation of Portal products and decided to take the opportunity and join to this journey of Portal Products development.
One day, my manager told me: “Welcome to NetWeaver Cloud Portal, your first task is to work on "theme management" screen for the administrator, SAP UI5 should be used for that purpose”. Fully motivated, I started to explore the library. I could not believe that this fully powered library exists for only 2 years.
Why did I find it so amazing?
Cause it runs on all browsers and Mobile devices. IE9, Safari, FireFox (starting 3.6) and Chrome are fully supported. Internet Explorer 8 is supported with graceful degragation for CSS3 features like rounded corners, text-shadows, etc. With sap.m they offer a dedicated library also for the mobile world.
Cause it supports SAP Standards without additional effort. Accessibility, localization and others. Good example is that UI5 has a built-in translation concept, which is aligned to the ResourceBundle concept in Java. One can get the current language
var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
Get the resource bundle for a given language :
jQuery.sap.require("jquery.sap.resources");
var oBundle = jQuery.sap.resources({url : sUrl, locale: sLocale});
And then access the texts in the resource bundle
var sText = oBundle.getText(sKey);
Cause it has multi-themes support. It comes with Gold Reflection and High Contrast Black themes. Every theme uses "base" theme CSS plus specific theme related CSS files on top. It is possible to generate and merge files and append specific themes to base theme. It is easy to adjust the themes using standard CSS directly or by changing parameters for the main features of a theme (based on LESS concept).
Cause it is extensible. The extend() method is available on all Controls (and the base classes) and is used to define a new subclass. If I'd like to create a new control I only need to declare: sap.ui.core.Control.extend(sName, oDefinition); But I find it more useful to extend an existing control which inherits from another one, for example: sap.ui.commons.Label.extend(sName, oDefinition);
Cause it makes the developer work much simpler. SAPUI5 Developer Studio is a set of tools for Eclipse that greatly simplify the development process for UI5 applications and controls, including: Wizards for project and view/controller creation and also for control development. In addition, it provides code Completion, application preview with an embedded Jetty server and even proxy-servlet to prevent cross-site-scripting errors.
What did I find in this library?
Various controls and responsive support.
Complex controls out of the box - The UI5 Core includes base, core and model modules. It has a class-Loader to load control libraries. The UI5 Core includes other JavaScript libraries: jQuery UI and data.js – but you can filter it according your needs. They provide 3 additional sub libraries for the basic controls, complex controls (UX3 patterns) and a dedicated library for the table control.
Great documentation and support - You will never know everything about SAPUI5, however, they have a great community, where it does not matter if you are a UI5 beginner or expert – for sure, you will get a reply after few hours, with code samples and various point of views. From the very first time, it was a great online support for me as a developer.
If you are looking for Mobile Web HTML5 Framework for Mobile App Development, then jQuery mobile, Sencha Touch or MooTools Mobile, will probably come up first. And believe me, in the office next door, we have “tigers” which are well familiar with those libraries. However, if you will ask their opinion, they will agree that "you should use UI5, this is much more simple" in many cases.
How long will it take to develop with UI5?
It's fast. A matter of minutes…
Lately, I participated in partner testing event in Walldorf, where I ran a short demo demonstrating how it is possible to create a site in 5 minutes, now I’d like to share with you my experience of creating some elements from the demo... in couple of minutes.
Create a shell with tabs
By simple code, we created a shell which is application frame with navigation capabilities:
//Creates the Shell with navigation items
createShell: function createShell() {
this.oShell = new sap.ui.ux3.Shell("oMyShell", {
appIcon: "http://www.sap.com/global/images/SAPLogo.gif",
appTitle: oBundle.getText("author_shell_title"),
showLogoutButton: true,
showFeederTool: false,
showInspectorTool: false,
showSearchTool: false,
}
});
return shellManager.oShell;
}
Some navigation items were added to the shell. It is possible to add 2 navigation items, but in our application, one level is enough. Each navigation item is added to the shell by a simple method:
var navItem = new sap.ui.ux3.NavigationItem({key: "contentTab"});
shellManager.oShell.addWorksetItem(navItem);
by using that, we created a shell with 4 navigation items. In this screenshot, the "content" tab is being selected by the user:
When the "content" tab is selected, the tab content is being rendered. the main element in this page is a table, that is bind to content. The Table control provides a set of sophisticated functions for design and use. For each column a template control defines the visualized data. For example the 1st column is an image type and the "Name" column is a label type. Sorting, filtering, re-sizing and reorder capabilities are available as well. For the selection of rows, a Multi/ Single/ None mode are available. An interesting binding and model concepts are involved, and will be described in my next blog.
Sniffing to simple and complex controls
UI5 provides out of the box controls, like charts, tree tables, carousel, color picker, quick-views and many others.
In NetWeaver Cloud Portal, we implemented some of the provided controls and even extended them. Some examples:
The "toolPopup" control was extended using 2 column matrix. 10 code lines (only!), and you have a popup to create new widget that contains drop down menu, text input area, image uploader and other simple controls (labels, buttons etc.) that were added to the matrix. NO CSS FILE behind that – this is part of the default golden reflection theme that is defined in UI5 library.
Another example is the content catalog to select the widgets when creating a site:
"ThingInspector" is also a useful control. Look at the next screenshot. It is a representation of one or several entities in the form. We use it for example to inspect single provider of content. For example, if Enterprise Portal (known as EP7.30) is defined as a provider of content, thingInspector will provide a deep dive of the properties of this provider and a view of the content that is consumed from the portal (Beta Version).
When should you start using it?
Right Now :wink:
A trial version of the SAPUI5 framework has been released in the SAP Community Network: http://scn.sap.com/community/developer-center/front-end . It includes static JavaScript-Files, war-Files and the Demokit.
To sum it up, it is simple to refer to the libraries that you previously got used to work with. But from a developer point of view, sometimes we need to have open-minded attitude. You find it as efficient, easy-to-use and support SAP standards without any effort.
My 2 cents for you:
Dude, come alive! Start to drive with SAP UI5
Inbal Sabag
- SAP Managed Tags:
12 Comments
