- SAP Managed Tags:
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
See the commented code at the top of index.html for alternative locations to load the files from.https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js - Try it out in Chrome (with --disable-web-security) and then as a Kapsel app.
- 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.
- Try it out in Chrome (with --disable-web-security) and then as a Kapsel app.
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.
- Try it out in Chrome (with --disable-web-security) and then as a Kapsel app.
