Thanks to all the brilliant blogs that have been posted and most notably John Moy's series of 5 blogs around JQuery Mobile and SAP. I was inspired to do some more research around the different HTML5 Javascript Frameworks out there, and to my surprise I discovered there are actually very many of them. However, many of them are immature and not overly impressive, and were mostly catering for smartphones, and not as much for tablet devices such as iPads.

There were however 2 alternatives to JQuery Mobile that caught my attention;
Those were DHTMLX Touch and Sencha Touch. More so DHTMLX Touch, hence the reason I decided to start playing around with it and subsequently why I'm writing this blog.

I found DHTMLX Touch contains an extensive library of powerful UI components, components which I found were somewhat lacking in some of the other frameworks. UI Components which are particularly useful for designing complex user interfaces, especially for tablet devices where real estate is not as scarce as on a smartphone.

These UI components are:

  • Layout Component - allows you to design complex multi pane screens. 

  • Accordion Component - similar to the layout component but the views can be collapsed or expanded, both horizontally and vertically. Similar to the Tray UI element in Web Dynpro.

  • Grid Component - this is a table with rows and column, the grid has built in sorting capability by each column.

  • Data View Component - allows you to display a collection of objects in a multi pane view where you can specify the number of columns it is displayed in, as well as the ability to define a custom HTML template for the cells.

  • Chart Component - pie charts, bar charts and a few other types of charts can be displayed using this component

Those are the main components that make it notably different to other  frameworks but it also includes components such as Google Maps, windows, popups, lists, forms( including all HTML5 form components), carrousel, iFrame, calendar,  group list, page list, multi view ( tabbed view), scroll view, template view,  video view and toolbars.

For some good sample screenshots of the components and UI look and feel check out this link: http://www.dhtmlx.com/blog/?p=668

The framework also includes features such as navigation, pages transitions, touch event, table/list sorting & filtering etc.

An extremely power feature of DHTMLX touch is that many of the UI Components can be directly bound to a data source of any of these 4 formats: XML, JSON, JSArray or CSV. This data source can either be from a file, or from a RESTFul web service call. With minimal effort by just specifying the data source and field names per column, you can easily display the contents of a data source in table format using the grid component.

As a very quick and basic proof of concept, I wrote a few lines of code to populate an internal table from the MARAV view.  I tried using DHTMLX via a BSP, just converting the contents of an internal table into a JSON string, and binding that string to the data grid component and that worked perfectly with no problems at all.

Second task was to try an offline capable version that used a RESTFul web service call into the SAP system, again just populating some data into an internal table from view MARAV view, then converting the contents of the internal table into a JSON string and returning it in the http response. At this point i stumbled upon the issue of a CORS (Cross-Origin Resource Sharing) exception, where the browser restricts an http get/post request from communicating across multiple domains. I managed to overcome this by returning an extra header field in the http response as: Access-Control-Allow-Origin=*

Screenshot of the simple table read app I wrote as a proof of concept:

image

 

DHTMLX Touch fully supports iPhone, iPad and Android devices, and may be compatible with some others as well. It is also compatible with Phone Gap, so by using this your apps can be converted into native apps.

Another really cool feature is the online UI Design application that allows you to build your UI through a graphical designer. Very similar to the layout designer offered in Web Dynpro ABAP. You can design your UI with no code at all, and once complete you can then download the application source.
Check it out here: http://www.dhtmlx.com/touch/designer/

This is a framework I really see a lot of potential in, so I thought I would just put it out there to let people know it exists.

 

How to recreate this on your own system

Step 1 

Create HTTP Handler Class implementing IF_HTTP_EXTENSION image

 

Step 2

image

Paste the following code into the IF_HTTP_REQUEST~HANDLE_REQUEST method

 

Step 3

In transaction SICF Create a new service called zget_marav

image

 

Setting the handler to ZCL_GET_MARAV_HANDLER image

 

Lastly, activate the service.

image

 

 

Step 4

Download the following file http://dev.abap.me/get_marav.html by either right clicking on the link, and saving target, or by going to the link and viewing the source of the page. You will not be able to see anything as the file only has a place holder server url and user and password. Replace the server URL on line 14 with your own server, and on line 36 replace the user, password and client.

I am unable to paste the code here as some of the characters get changed.

 

Step 5

Either download the entire DHTMLX Framework (17MB) from here http://www.dhtmlx.com/x/download/dhtmlxTouch/dhtmlxTouch_10rc_110527.zip

Or you can download just the codebase directory zipped (174KB) that is needed from here dev.abap.me/codebase.zip

Place the codebase directory which contains the DHTMLX JavaScript library into the directory where you have created the get_marav.html file.

 

Online Demo

To view the above app on a mobile device or via a compatible web browser (Chrome, Safari or Firefox) go to: http://dev.abap.me

 

Additional Reading

I recommend reading the below blogs by John Moy on JQuery Mobile and SAP, as he goes into alot more detail on creating BSP applications, using PhoneGap and more.

Build your first Mobile web app using jQuery Mobile and ABAP - Part 1

Build your first Mobile web app using jQuery Mobile and ABAP - Part 2

Build your first Mobile web app using jQuery Mobile and ABAP - Part 3

Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features - Part 1

Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features - Part 2

 


Actions