iPhonize your SAP Data - Part 1

Former Member · ‎10-22-2008

<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):