Build your first Mobile web app using jQuery Mobile and ABAP – Part 1
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.
that's a fantastic series. I've already implemented part 2 in a PM/CS scenario and I'm looking forward to read your next blog!
It would be awesome if you could suggest some 'best practices' in the end (part 4?)!
Thanks for your efforts and best regards,
Alej
Thanks, I just submitted Part 3 so hopefully it will be approved and released soon. On the topic of 'best practices', since I have only been exploring the web app side for a little while (having spent 6 months on iPhone development) I am not sure I would be the best person to comment until perhaps later. Someone like SAP Mentor John Appleby would be better qualified. Also I am hoping we can have some community discussion on Part 3 so that others can share how they would improve on the simple scenario I have described in this blog series. Perhaps then we can all head towards 'best practice'!
This blog is excellent. You've done a fantastic job.
Regards,
Fendy
Best Regards.
Excellent start up series, taught me a lot.
one question though, I've designed my app on the same principles (one html with multiple page division), one problem that I'm facing is that when I try to direct the user to one of the page division, it doesn't work out with the mobile device (works on the browser though). The user still lands on the home page (main.do) E.g. in your example direct the user directly to #emp_svc so the end url would look ...sap/ztest/main.do#emp_svc.
Have you come across any issues like that or know a way to get this done?
best regards,
Asim
Hi john, excellent blog..this blog helped me in building a mobile handheld application. I have developed a BSP mobile app with mobile jQuery, this App runs fine in the ECC 6.0 release 731, but it returns blank page under ECC 6.0 release 701. Is this approach good for release 701 also?
I have opened a discussion, please see my discussion. I appreciate your help this regard. SAP ECC release(701, 702...731...) that support mobile jQuery