Skip to Content

/wp-content/uploads/2015/07/sap_logo_751627.png

Appendix C:  UI Frameworks

SAPUI5
jQuery Mobile
Sencha Touch

This section will provide a brief overview of three common UI libraries and will demonstrate a Kapsel OData app using each framework.

SAPUI5

Also known as SAP UI Development Toolkit for HTML5, this is the SAP client-side HTML5 rendering library.  The Logon Plugin uses this library to display its screens as does the SMP 3.0 Management Cockpit.  The below links contain additional information on SAPUI5.
SAPUI5
SAPUI5 for Mobile
SAPUI5 Mobile Demo Apps
UI5 at Fiori Guidelines
Running SAPUI5 Mobile Apps in Hybrid Web Containers
OpenUI5
SAP WEB IDE Enablement

Perform the following steps to create a simple OData based app using SAPUI5.

  • Create a folder named CarrierCollection_sapUI5.
  • Save index.htmlinto that folder.  Modify line 15 and provide the user name and password for the OData service.  Note, this example loads the SAPUI5 libraries from a public server
    https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js

    See the commented code at the top of index.html for alternative locations to load the files from.

  • Try it out in Chrome (with –disable-web-security) and then as a Kapsel app.
    image1.PNG

    image2.PNG

  • Note, the version of SAPUI5 can be determined by pressing CTRL-ALT-SHIFT-P in a desktop browser or in JavaScript by executing
    sap.ui.version

jQuery Mobile

jQuery Mobile is an HTML5 based user interface system for mobile devices.  It provides a customization tool called Theme Roller enabling an application to easily have a custom theme added to it.
jQuery mobile uses progressive enhancements so an existing page can easily be enhanced with jQuery Mobile and does not need to be rewritten.

Perform the following steps to create a simple OData based app using jQuery Mobile.

  • Create a folder named Products_jQueryMobile.
  • Download jQuery Mobile into the Products_jQueryMobile folder.  jQuery Mobile 1.3.2 was used in this sample.
  • Download jQuery the Products_jQueryMobile folder.  jQuery 2.0.3 was used in this sample.
  • Save index.html into the Products_jQueryMobile folder.  Modify line 32 and provide the user name and password for the OData service.
  • Place datajs-1.1.2.min.js into the Products_jQueryMobile folder.
  • At this point the folder should look like the image below. 
    image3.PNG
  • Try it out in Chrome (with –disable-web-security) and then as a Kapsel app.
    image4.PNGimage5.PNG

Sencha Touch

Sencha Touch is a high-performance HTML5 mobile application framework which encourages a model, view, and, controller pattern.
The following links may also be of interest.
Building SAP mobile apps with Sencha Touch
SAP and Sencha Touch

Perform the following steps to create a simple OData based app using Sencha App.

  • Create a folder named Products_SenchaTouch.
  • Download Sencha Touch.  Sencha Touch 2.3 was used in this sample.
  • Download the SAP OData connector for Sencha Touch.
  • Save index.html into the  Products_SenchaTouch folder.
  • Save app.js into the Products_SenchaTouch folder.
  • Place OData.js from the SAP OData connector for Sencha Touch into the Products_SenchaTouch folder.  Modify lines 15 and 16 to provide the user name and password for the OData service.
  • Place sencha-touch.css and sencha-touch-all.js from the Sencha Touch download into the Products_SenchaTouch folder.
  • At this point the folder should look like the image below. 
    image6.PNG
  • Try it out in Chrome (with –disable-web-security) and then as a Kapsel app.
    image7.PNG

Back to Getting Started With Kapsel

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply