Building SAP mobile apps with Sencha Touch - part 1

[Former Member]

SAP and Sencha partnership

Earlier this year SAP announced partnerships with Adobe (PhoneGap), Appcelerator and Sencha. These partnerships provide mobile developers ever more options to build apps on top of SAP back-ends.

In a series of posts I would like to provide an introduction to building SAP mobile apps with Sencha Touch. In this post I will give you a brief overview of Sencha's frameworks and tools. In part 2 we will dive into some demo code to illustrate how Sencha Touch apps can connect to SAP Gateway.

So, please let me introduce you to the members of the family:

Sencha Touch

Sencha Touch is an HTML5 framework for mobile web apps. It provides a wide range of UI components such as lists, forms, selectors, tabs, buttons, toolbars and charts. Sencha Touch facilitates an MVC approach to organize your code. To get quick feel of the Sencha Touch UI components, open the ‘kitchen sink demo’ with Chrome or Safari or mobile device. Sencha Touch apps can be deployed as web apps or packaged with PhoneGap or Sencha’s own packager.

SAP OData connector

As a result of the partnership with SAP, Sencha released the SAP OData connector. This data proxy helps you connect Sencha Touch apps to SAP Gateway and SAP HANA, using OData.  Alternatively, it is possible to use Sencha Touch in a SUP HWC.

Here are some example of Sencha Touch apps accessing SAP data through SAP Gateway:

On the Sencha website you can find essential resources for learning and using Sencha Touch: the developer guides, API documentation and community forums.

ExtJs

ExtJs is a complimentary Javascript framework for developing desktop web apps. Sharing the same foundation and development concepts, developing with ExtJs is very similar to using Sencha Touch. While Sencha Touch targets mobile browsers and WebKit based desktop browsers (and IE10 support is announced), ExtJs offers support for wide range of desktop browser (e.g. IE6+).

Sencha Architect

Sencha Architect is a visual application builder for Sencha Touch and ExtJs apps. It provides a drag-and-drop environment to mix and match UI components, in addition to configuration and code editor to build out your apps. Because you can inspect the code it generates it also is a great learning tool.

Sencha Command

Sench Command is a set of command line tools you can use when generating, building and deploying apps. It performs tasks like:

• initiate a project/folder structure and application skeleton
• build optimized production versions of your app, by selecting required components from the library, source file concatenation and minification
• package your HTML5 application as a native app and give your app access to the Device APIs

Sencha Touch is licensed under free commercial and open source licenses for application development. You can buy support and the complimentary tools. See the Sencha site for more details.

Now you are familiar with the framework and tools, let's get started with some actual coding in part 2 of this series.