iPhone - web development lotus notes domino

09.03.2010

IPhone Web-Applikationen
mit Domino

Bernhard Kolb
http://ebetest.ebe-edv.com/iphone

EBE GmbH
 Bernhard Kolb & Team
 www.ebe-edv.com
 Domino Consulting & Developent
 .net Development
 Windows Mobile
 iPhone

Domino Web Apps fürs iPhone
 Development environment
 Web Layout für Mobile Safari
 iWebKit Framework
 iPhone services (email, SMS, Phonecall)
 Drawing with Javascript
 Geolocation – wo bin ich?
 Google Maps
 Interaktion mit Domino
 Agent starten per AJAX
 Webservice konsumieren

1

09.03.2010

Prerequisites for Development

 Safari 4
 iPhone Emulator (MobiOne)
 Domino Designer
 iWebkit Framework (www.iwebkit.net)
 iPhone

Web App vs. iPhone Web App
 unübersichtlich  klar, einfach und begreifbar
 schlecht bedienbar  Look and Feel Like iPhone Native Apps

iWebKit Framework
 CSS
 Javascript Library
 Nette Bilder (32x32)

 www.iWebkit.net

2

09.03.2010

Basic layout
 HTML-Header
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="minimum-scale=1.0, width=device-width,
maximum-scale=0.6667,
user-scalable=no" name="viewport" />
<link href="css/iwkstyle.css" rel="stylesheet" type="text/css" />
<script src="javascript/iwkfunctions.js" type="text/javascript"
language=”JavaScript” ></script>

Screen Aufteilung
 TopBar
<div id="topbar">
<div id="title">AJAX</div>
<div id="leftnav">
<a href="index">
<img alt="home" src="images/home.png“ /></a>
</div>
</div>

 Content
 Footer
<div id="footer">
<a href=http://www.ebe-
edv.com>Bernhard Kolb, EBE</a>
</div>

Content Elemente
 ul class=„pageitem“
 li class=„textbox“
 li class=„menu“
 a
 Img (32x32), span
 Class „name“,“comment“,“arrow“

3

09.03.2010

Form Elemente
 li class=„form“
 <input placeholder=„default“ type=„text“/>
 <button name=„button1“>OK</button>
 <input name=„choice“ type=„checkbox“ />

 Beschreibung
 <span class=„choice“>
 <span class=„name“>text</span>
 <element…>

iPhone specifics
 Bist Du ein iPhone?
 Navigator.userAgent.indexOf(„iPhone“)!=-1

 Orientatation
 window.orientation
0, 90, 180, -90
 <body onorientationchange=„myhandler“>

Graphics…
 <Canvas> / context 2d
var context =
document.getElementById('map_canvas').getContext(„2d“)

 fillRect(x, y, width, height)
 arc
 Image
 Transformation
 transform(x,y)
 scale(x,y)
 rotate(angle)

4

09.03.2010

iPhone Services
 Phone
 Mail
 Google Maps
 Sms

iPhone Services - Phone
 <a target="_self" href="tel:(978) 555-1212" onclick="return
(navigator.userAgent.indexOf('iPhone') != -1)">(978) 555-1212</a>

iPhone Services - Email
 <a target="_self" href="mailto:bkolb@bkolb.at?subject=EC2010"
onclick="return (navigator.userAgent.indexOf('iPhone') != -1)">
bkolb@bkolb.at </a>

5

09.03.2010

iPhone Services – Google Maps

 <a
href="http://maps.google.com/maps?q=Wien
+1200+Dresdnerstraße+43+(Office)">Map
To Office</a>
 <a
href="http://maps.google.com/maps?saddr=
Wien+1200+Dresdnerstraße+43&daddr=ste
phansplatz+Wien">Route..</a>

iPhone Services – Sms
<a target="_self" href="sms:+43 1 33 40 295 850
" onclick="return (navigator.userAgent.indexOf('iPhone') != -1)">
sms</a>

Audio & Video
 <embed target="myself" type="audio/x-mp3" loop="true"
src="music.png" href="music1.mp3" width="84" height="84"
scale="1"/>
 <embed target="myself" src="youtube.png"
href=„myMovie.mp4" type="video/quicktime" width="84"
height="84" scale="1"/>

6

09.03.2010

Geo Location ermitteln
 function gps_click() {
 navigator.geolocation.getCurrentPosition(success, fail);
 }
 function success(position) // 'position' can be named anything
 {
 var x1= position.coords.latitude;
 var y1= position.coords.longitude;
 alert("latitude: " + x1 + " " + "longitude: " + y1);
 window.open("http://maps.google.com/maps?q=" + x1 + "," + y1);
 }
 function fail() {
 alert('failed');
 }

Graphics & Visual Effects
function drawRectangle() { function drawCircle() {
var canvas = var canvas = document.getElementById('Circle_Canvas');
document.getElementById('map_canvas'); var context = canvas.getContext('2d');
var context = canvas.getContext('2d'); context.beginPath();
context.fillStyle = "rgba(255,0,0,0.5)";
context.arc(125,65,30,0, 360, false);
context.strokeRect(10,10,150,140);
context.fillRect(15,15,140,130); context.fill();
} // Create empty circle
<canvas id="map_canvas" width="300" context.beginPath();
height="300" style="position:absolute; context.arc(125,65,35,0, 360, false);
left:10px; top:60px; z-index:1"/>
context.stroke();
context.endPath();
}
<canvas id="Circle_Canvas" width="300" height="300"
style="position:absolute; left:10px; top:50px; z-index:1"/>

Web Service mit JavaScript
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jqSOAPClient.beta.js"></script>

var action = "testws?OpenWebService";
var body = new SOAPObject("X").val($("#X").val());
body.ns = {name: "urn",uri: "urn:DefaultNamespace"};
var sr = new SOAPRequest("MAL2", body);
SOAPClient.Proxy = action;
SOAPClient.SOAPServer = 'testws?OpenWebService';
SOAPClient.SendRequest(sr, function(resp)
{ $("#Mal2Result").text($(resp).text());});

7

09.03.2010

Schnellzugriff auf Webseite

Domino specials…
 DB Properties
 Launch – Page – start
 Page Properties
 HTML, pass-through-HTML
 Agent Properties
 target: none
 WebService
 Port Type Class

Danke für Ihre Aufmerksamkeit
 Web App
 http://ebetest.ebe-edv.com/iphone
 Source Code
 http://ebetest.ebe-edv.com/iphone/iPhoneDB.zip
 Book
 Professional iPhone and iPod touch Programming:
Building Applications for Mobile Safari

8

iPhone - web development lotus notes domino

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to iPhone - web development lotus notes domino

Similar to iPhone - web development lotus notes domino (20)

More from dominion

More from dominion (20)

Recently uploaded

Recently uploaded (20)

iPhone - web development lotus notes domino