Experiments in PhoneGap and Titanium

Experiments in PhoneGap & Titanium

WARNING! There will be code

1 App, 2 Techniques Take Photo Upload Image Display JSON Results PLay Streaming Audio Demo

Phone Gap Runs in Webkit Html5, CSS & JQuery Mobile XCode iPhone, Android, Blackberry, Symbian, Nokia & Palm http://www.phonegap.com/ http://jquerymobile.com/

Appcelerator Titanium Write Javascript to create Objective C Uses Native Components Titanium Developer & Text Editor of choice iPhone & Android only Blackberry in Beta http://www.appcelerator.com/

Structure:PhoneGap Pages defined as DIV’s inside HTML document, index.html Import CSS and JS files as required. <body onload="onBodyLoad()"> <div data-role="page" data-theme="c" id="photo"> <div data-role="header"> <h1>Upload a Photo</h1> </div> <div data-role="content" id="buttons"> <a href="#translation" data-role="button" onclick="getPictureEdit(pictureSource.SAVEDPHOTOALBUM);">Choose From Library</a> <a href="#translation" data-role="button" onclick="capturePhotoEdit();">Take Photo</a> </div> </div> <div data-role="page" data-theme="c" id="translation"> ... </div> </body>

Structure: Titanium One main file, app.js Windows as Javascript objects Add elements and other windows to the main window Import other Javascript files containing more behaviour

Camera: PhoneGap function capturePhoto() { navigator.camera.getPicture(onSuccess, onFail, { quality: 50 }); } // iPhone ONLY function getPicture(source){ navigator.camera.getPicture(onSuccess, onFail, {quality: 100, sourceType: source, allowEdit: false}); } function getPictureEdit(source){ navigator.camera.getPicture(onSuccess, onFail, {quality: 100, sourceType: source, allowEdit: true}); } function capturePhotoEdit() { navigator.camera.getPicture(onSuccess, onFail, {quality: 100, allowEdit: true }); }

Camera: Titanium b2.addEventListener('click',function(e) { Titanium.Media.openPhotoGallery({ success:function(event){}, cancel:function(){}, error:function(error){}, allowEditing:true, mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO] }); }); if(!Titanium.Media.NO_CAMERA) { b1.addEventListener('click',function(e) { Titanium.Media.showCamera({ success:function(event){}, cancel:function(){}, error:function(error){}, saveToPhotoGallery:true, allowEditing:true, mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO] }); }); win1.add(b1); }

Image Upload: PhoneGap <rant></rant> var request = new XMLHttpRequest(); request.onreadystatechange = function(e){ if(this.readyState == 4 && this.status == 200){ var response = eval('('+this.responseText+')'); audio.src = response.tts_english; console.log(postContent); var innerHtml = '<p>'+ response.text_english +'</p>'; $('div.output').html(innerHtml); } }; var boundaryString = "AaBbCcX30"; var boundary = "--"+boundaryString; var postContent = "rn"+boundary+"rn"+ "Content-Disposition: form-data; name="data"; filename="test.jpg"rn"+ "Content-Type: image/jpegrnrn” + imageData +”rnrn"+ boundary+"rn"; request.open("POST",feedURL, true); request.setRequestHeader("Content-type", "multipart/form-data; boundary=" + boundaryString); request.setRequestHeader("content-length", postContent.length); request.setRequestHeader("X_REQUESTED_WITH", "XMLHttpRequest"); request.send(postContent);

Image Upload: Titanium var xhr = Titanium.Network.createHTTPClient(); xhr.onerror = function(e){ Ti.UI.createAlertDialog({title:'Error', message:e.error}).show(); }; xhr.setTimeout(20000); xhr.onload = function(e){ try{ var response = eval('('+this.responseText+')'); ind.message = 'Image Uploaded'; inscriptionText.text = response.text_english; url = response.tts_english; } catch(E){ alert(E); } }; xhr.onsendstream = function(e){ ind.value = e.progress ; }; // open the client xhr.open('POST','http://ocr.aicookbook.com/upload'); xhr.setRequestHeader('Content-Type', 'multipart/form-data'); // send the data xhr.send({data:image});

Play Audio: PhoneGap No support for streaming media. Uses HTML5 Audio Tag Only available in iPhone - no support for Audio tag in Android - so far <audio id="audio" controls="controls"></audio>

Play Audio: Titanium playBtn.addEventListener('click',function(e) { var sound = Titanium.Media.createSound({url:url,preload:true}); sound.play(); var pause = Titanium.UI.createButton({ ... }); pause.addEventListener('click', function(){ if(!pause.selected){ sound.pause(); } else{ sound.play(); } }); var stop = Titanium.UI.createButton({ ... }); stop.addEventListener('click', function(){ sound.stop(); }); sound.addEventListener('complete', function(){ ... }); sound.addEventListener('resume', function(){ ... }); imageWin.addEventListener('close', function(){ clearInterval(i); }); });

Verdict? PhoneGap for Web programmers Also runs as a website PhoneGap has more platforms Titanium for rapid prototyping Access to more phone features Native wins every time if no need for

Blog Post to follow on emilytoop.com Code on github.com/radicalrobot @fluffyemily emily@radicalrobot.co.uk

Experiments in PhoneGap and Titanium

by fluffyemily on Nov 07, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 16

Statistics

Experiments in PhoneGap and Titanium — Presentation Transcript