Skip to Content

<body>

<p>The iPhone is probably one of the most popular Smart phones on the plant. Those who have it - are in love with it. We have found the iPhone to be an amazing platform for Business
Applications  because it's interface is really innovative. At last we
have a large enough screen for effective applications which are easy to
use and can be very functional. It's also always connected to the
internet and supports VPN connections so it can easly be used in a
corporate environemnt. The touch screen is really fun to use and is
also a big advantage and can help us create new and more innovate user
interfaces for our applications.</p><p>One of the major complaints against Apple have been that iPhone is not open source, and in general it's not that easy to create native iPhone applications. You'll need a Mac and purchase a development kit from Apple. To actually deploy the application it'll have to be approved by Apple before it's made available in Apple's Appstore where it's available to anyone, free or for a charge. This is in our view not a very comfortable approach for Enterprise Applications development. </p><p>So what's the solution?</p><p>Apple have said right from the start that iPhone is Web 2.0 ready, so we'll use those qualities to develop advanced Web 2.0 applications for iPhone. This means the user will browse using the iPhone's browser to reach our application. Fortunantly iPhone supports saving a URL on your phone's desktop so a Web app feels just like any other app on the iPhone. </p><p>Using a third party UI framework, we can create really cool Web apps for iPhone which mimic the native iPhone look and feel. One such framework is the Open Source iUI framework (http://code.google.com/p/iui/wiki/Introduction). </p><p>In this example we'll show you how to develop  a simple iPhone application using iUI and ABAP BSPs.</p><p> </p><p>First off, create your standard BSP application, with it's layout and event handler (usually you'll use the event handler OnInitialize for loading your data into the data attributes you define under the Attributes tab. Then we'll use those Attributes for building the Layout which is the application's UI). </p><p> </p><p> </p><table border="1"><tbody><tr><td><p><%@page language="abap"%><br/><br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br/><br/><html xmlns="http://www.w3.org/1999/xhtml"><br/><head><br/><title>Xact's Address book</title><br/><meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/><br/><style type="text/css" media="screen">@import "iui.css";</style><br/><script type="application/x-javascript" src="iui.js"></script><br/></head><br/><br/> <div class="toolbar"><br/>   <h1 id="pageTitle"></h1><br/>

     (#)

<br /></div><br/><br/><ul title=Contacts selected=true><br/><%<br />  DATA: itab_line type BAPIEMP_LS.<br/>  DATA: itemText(80) type C.<br/>  DATA: itemKey(80) type C.<br/><br/><br/>  LOOP AT EMPLOYEE_LIST2 INTO itab_line.<br/>  itemText = itab_line-ENAME.<br/>  itemKey = itab_line-PERNR.<br/><br/>%><br/>    <li><br/>    [<%= itemText %> | iDetail?PERNO=<%=itemKey%>]<br/>    </li><br/><br/><%<br />    SKIP.<br/><br/>  ENDLOOP.<br/><br/>%> </p><p> </p><p></ul> </p></td></tr></tbody></table><p> </p><p>Notice that in this example, the layout reads the Persons stored in the  EMPLOYEE_LIST2 attribute. For each person, a line is created. </p><p>An exmple HTML result would be:</p><table border="1"><tbody><tr><td><p><br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br/><br/><html xmlns="http://www.w3.org/1999/xhtml"><br/><head><br/><title>Xact's Address book</title><br/><meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/><br/><style type="text/css" media="screen">@import "iui.css";</style><br/><script type="application/x-javascript" src="iui.js"></script><br/></head></p><p><br/><div class="toolbar"><br/>
   <h1 id="pageTitle"></h1><br/>

     (#)

    Herr James Bond  (iDetail?PERNO=00000010)

    0.1.

   

0.2.

    Miss Beryl Broughton  (iDetail?PERNO=00000070)

    0.1.

   

0.2.

    Dr. Herbert Braunstein  (iDetail?PERNO=00001009)

   

 

 The result may seem really simple, just an HTML list, but notice the few lines at the begining of the code:

 

These include the JaveScript and CSS of iUI, making it render the page wonderfully on your iPhone (you can also see the result if you download Apple’s Safari browser for your PC):

 

Of course each line is a link to a detail BSP page, which should get  the person’s details and show them nicely.

Here is an example HTML output for the details page:

|

James Bond

mobile

+1(941)555-1234

email

JAMES.BOND@IDES.COM

address

Messedamm / D-14057 Berlin

  

Here is an example of how the detail page might look like on the iPhone:

!https://weblogs.sdn.sap.com/weblogs/images/251883722/photo1.jpg|height=480|alt=|width=320|src=https://weblogs.sdn.sap.com/weblogs/images/251883722/photo1.jpg!</body>

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Oliver Kohl
    Hi Roy,

    good to see you here blogging about the background of your DemoJam application. Let’s hope some of the manager types love their iPhone as much as we do and we can develop more for this awesome device. What I really like about this approach is that we don’t have to care about IE6 🙂

    When we talked short before DemoJam I showed you my app running as a stand alone web app. Here is a link on this topic.

    http://tinyurl.com/3kokxm

    Keep up the good work.

    Cheers,
      Oliver

    (0) 

Leave a Reply