OpenUI5 Developer: January 2014

Saturday, January 25, 2014

Simple chat server example using UI5 WebSocket

Today i will show you an example using node.js to provide a simple chat server to play around with the WebSocket API sap.ui.core.ws.WebSocket that is part of UI5.

To offer some useful tricks and features i blowed up the example with the following features:

5-Way-Model-Binding
WebSocket based data connectivity
adding 3rd party notification library (noty)
JSON stringify and parsing (to be able to use objects inside messages)

The result will look like this

Chrome and Firefox parallel chat

Now let us come to the more interesting part, the implementation.

How to add notifications to UI5

Just playing around with UI5 found out that i currently miss a lighweight notifier widget.

UI5 depends on jQuery and there a countless community plugins that will do such a job.

To make live easier just googling for best jquery notifier plugins and i found some useful blogs with pros ans cons on widely used libraries.

http://ned.im/noty/

After some investigation of 6 Best jQuery Notification Plugins i decided to use the (noty) plugin. The minified library jquery.noty.packaged.min.js has a footprint of 24KB and does not need an additional cascading stylesheet.

Now you can show some notifications like this:

(noty) notification styles

The following snippet will show you how easy it is to use the library.

Differences between OpenUI5 / SAPUI5

At the end of last year, SAP Employee Andreas Kunz wrote a blog post

What is OpenUI5 / SAPUI5?

explaining what is OpenUI5/SAPUI5 and also telling about the history of UI5 and the differences between the two versions.

Currently the main differences are some missing widgets (in a dedicated namespace) that are (mabye currently) not available in the open source version of the library.

Also the Theme Designer is currently not yet released as Open Source, but you are able to theme your app manually using LESS.

Tuesday, January 21, 2014

Application deployment without Eclipse

If you want to deploy you generated app on a SAP AS ABAP system, you normally would do this using the SAP Development Tools for Eclipse.

The ABAP Development Tools for SAP NetWeaver will allow you to deploy to SAP from inside eclipse.

If you will not or can not use this tools, there is a special report that will allow you to do this using the SAP GUI.

There are some possibilities depending on your installed technical base.

Mobile UI Design made easy with AppBuilder

SAP is offering a node.js based tool to visually design user interfaces.

AppBuilder is a browser-based Integrated Development Environment built with standard technology (HTML5/JavaScript) to create and manage mobile application projects for mobile devices. AppBuilder’s simple WYSIWYG interface leverages SAP UI5 controls and enables you to use data services from SAP Mobile Platform, OData, REST, or local file system. AppBuilder features the ability to integrate with SAP Mobile Platform so you can leverage the capabilities provided by SAP Kapsel plugins such as application life cycle such as application life cycle management, authentication and single sign-on functionality, and integration with SAP Mobile Platform Server-based push notifications.
SAP Help

App Builder 1.0

Introducing Syntax Highlighting

Just added Prism Syntax Highlighting to the Blog.

Now things like this will be more colorful and readable

<!DOCTYPE html>  
<html>
   <head>
      <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>   
      <script>  
         var btn = new sap.ui.commons.Button({
             text:'Press me!',
             press: function() {
                 alert("Hello!")
             }
         });
         btn.placeAt('content');  
      </script>
   </head>
   <body class='sapUiBody'>
      <div id='content'></div>
   </body>
</html>

Sunday, January 19, 2014

Kickstart the SDK

How can you get a quick start into the UI5 SDK?

What about just downloading the SDK and just open it inside Google Chrome?

SAP goes Open Source!

At the end of last year SAP decided to give his HTML5 libary "SAPUI5" to the public for free under the Apache 2.0 Open Source license.

http://sap.github.io/openui5/

UI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice. It’s based on JavaScript, using JQuery as its foundation and follows web standards. It eases your development with a client-side HTML5 rendering library including a rich set of controls and supports data binding to different models (JSON, XML and OData).

I see this as a big step into the right direction to bring this greate UI lib to the public community and get to know what is possible besides the enterprise app development.

Most of the innovations come from the community and this will be a win-win situation for both.

This blog will share some knowledge concerning HTML5 based ui development.

Let us start 2014 with this great offer from SAP using it with modern web based technologies like nodejs, mongodb and all the other great stuff available by the community.

Pages