Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

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

former_member182638
Active Contributor
‎11-20-2010 4:34 AM

This year in pursuing self learning activities in mobile app development and sharing my experiences and results with the SAP community, I have sought to build applications across the three broad categories of apps as outlined in the Apple Human Interface Guidelines ...

  • A native iPhone application.  The app Uber Geek is an example of this, and is documented in a separate Benchmarking your NetWeaver knowledge in an iPhone App.
  • A hybrid application, which is an iPhone application that provides access to web content primarily through a web-content viewing area, but with some iPhone iOS user interface elements.  The app myHelp for SAP Professionals is an example of this, and is documented in a separate iPhone App for searching HELP.SAP.COM.
  • Web only content (websites that behave like built-in iPhone applications).  This is the focus of this blog.

When choosing to build a mobile web app, the first thing to consider is whether to hand code the UI layer from scratch with HTML/CSS/Javascript, or to use an existing framework.  There are several open source frameworks available.

Early adopters for iPhone web apps utilised for instance the iUI framework originally built by Joe Hewitt in 2007. In fact users of the Uber Geek iPhone app will find themselves linking to a website built using iUI, which displays the summary scores for all users.  It can be accessed here, using any decent browser with the exception of Internet Explorer (bear in mind that iPhone users will launch it in Safari).  A sample screen shot is shown in Figure 1.

Subsequent to iUI, more powerful frameworks such as jQTouch (created by David Kaneda) and Sencha Touch have been developed, and a comparison of these two frameworks is provided here. In fact the jQTouch framework is covered heavily in the O'Reilly book 'Building iPhone Apps with HTML, CSS and JavaScript' by Jonathan Stark.

Some of you might wonder why we wouldn't consider the Web Dynpro ABAP framework?  Apart from the fact that it is not supported for mobile scenarios, it is also NOT light.  The file size of javascript libraries for Web Dynpro ABAP amount to over 400Kb (compressed).  This is a significant payload to download if you are connected on a low bandwidth connection, even before taking into consideration the actual content.  By comparison, the lightweight libraries mentioned above are all under 40Kb (compressed).  

Some of you also might point out that Web Dynpro Java has some support for limited mobile platforms, but it does not offer the best user experience for the world of touch screens, so I have not considered it.

Figure 1. Example of iUI web app

For this exercise however I have chosen to use jQuery Mobile, which is a very new framework.  This is a lightweight framework which is based on the very popular jQuery javascript library.  Why is this framework very exciting?  Here are some reasons:

  • The project goals of jQuery Mobile is for it to be 'seriously cross-platform and cross-device'.  As per the website, it is intended to be 'a unified user interface system across all popular mobile device platforms'.
  • The intended device support for this framework can be found here.  You will see that device support will include iOS (iPhone), Android, Blackberry, Windows Phone, Symbian and others.  The quality of the user experience will vary depending upon the platform, but nonetheless this framework intends to have the broadest reach of any that I have seen to-date.
  • This framework is built on the principle of 'progressive enhancement', which means that it leverages HTML5 and CSS3 features for the most capable browsers, but less capable browsers will still receive a workable experience.
  • This framework is targeted at Smartphones AND Tablets. 
  • This framework will provide accessibility support.  All components can be navigated using a screen reader.
  • This framework provides theme support. 
  • The development of this framework has some serious project sponsors and a development team behind it (instead of being created by one individual like the earlier frameworks).  Sponsors include Blackberry, Nokia, Adobe, Mozilla, Palm and others.
  • Even though at the time of writing this framework is only available as an Alpha release (Version 1 is planned for January 2011), it is already extremely well-featured and documented (see the website for documentation).  There are bugs, sure, but don't forget this is currently in Alpha release.

I have documented my experience building the web app in this blog as a 3-Part series, as follows:

Part 1 - Selection of framework (this blog)

Build your first Mobile web app using jQuery Mobile and ABAP - Part 2 - Implementation of display scenarios

Build your first Mobile web app using jQuery Mobile and ABAP - Part 3 - Implementation of update scenario

If you are interested in the end result, the YouTube video below demonstrates the app.

If you wish to try building this yourself, continue to Parts Build your first Mobile web app using jQuery Mobile and ABAP - Part 2 and Build your first Mobile web app using jQuery Mobile and ABAP - Part 3 of this blog series.

6 Comments
Labels in this area
Popular Blog Posts