the intro for RPG programmers Making mobile app development easier... Copyright Aaron Bartell 2012 by Aaron Bartell of KrengelTech aaronbartell@mowyourlawn.com
Abstract Writing native applications for the various mobile operating systems can be quite the task because you have to learn the the various languages (i.e. Java, Objective-C) and deal with the idiosyncrasies of each platform. But what if that wasn't the case? What if you could develop in a single language (i.e. Javascript) and do your layout with HTML5 + CSS3 and then deploy to Android/iOS/ WebOS/Blackberry without changing a line of application code? With PhoneGap that becomes a reality!! This session teaches how to develop your first PhoneGap application that communicates in real-time with an RPG program on the IBM i. The session will focus on the Android development environment because it is much easier to deploy with Android than with Apple. The SenchaTouch framework will be used for the graphical layout and communication portions of the client-side app. Everything discussed in this session is free and open source!!
About PhoneGap What? Open source solution for building cross-platform mobile apps with standards-based web technologies (i.e. HTML5, Javascript, CSS). Where? www.phonegap.com, though it is also in incubation at Apache: incubator.apache.org/cordova (this is the future of PhoneGap - a good thing!!) Cost? FREE! License? Apache 2.0 License (good it s not GPLv3 because then it would be much harder to use commercially). How? PhoneGap creates a bridge between the browser and the native device API s. Documentation? docs.phonegap.com
Why use PhoneGap? InfoWorld Best Software Award Read about it: http://bit.ly/ybraqm
Thousands of Apps Full(er) list: http://phonegap.com/apps Information curtesy of Dave Johnson (twitter.com/davejohnson)
More PhoneGap Info Platform/version support... ios >= 3.2 Android >= 1.5 BlackBerry >= 4.6 webos >= 1.4.5 Symbian >= 1 Windows Phone >= 7.5 Samsung Bada = 1 Contributors... Adobe, IBM, Microsoft, RIM, HP/Palm, Salesforce.com Stats... 800,000 downloads 30,000 messages 40+ tools 50+ contributors 800,000 visits/month Information curtesy of Dave Johnson (twitter.com/davejohnson)
Download Eclipse from eclipse.org Environment Setup Download PhoneGap SDK from phonegap.com Great Getting Started tutorial phonegap.com/start#android
Environment Setup After creating an Eclipse Android project by following the Getting started tutorial you then copy/paste the downloaded PhoneGap (aka callback ) files to the folders in Eclipse. The environment is now setup and next you need to create an index.html file.
index.html <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="phonegap-1.4.1.js"></script> <script type="text/javascript"> document.addeventlistener("deviceready", ondeviceready, false); function ondeviceready() { alert('hug harder!') } Javascript is invoked once native </script> portion of PhoneGap is completely loaded (native would be ios or </head> Android). <body> <h1>hug a member of congress today. You might be the only friend they have. </h1> </body> </html>
Java This is the extent of the Java. You only make two small changes from the original class that was generated during the Eclipse Android project creation. 1 - Change Activity to DroidGap 2 - Add super.loadurl(...) line. public class PhoneGap1Activity extends DroidGap { @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); super.loadurl("file:///android_asset/www/index.html"); } }
Call on hardware buttons <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="phonegap-1.4.1.js"></script> <script type="text/javascript"> document.addeventlistener("deviceready", ondeviceready, false); function ondeviceready() { document.addeventlistener("menubutton", onmenubutton, false); } function onmenubutton(){ alert('it is not working! Hug harder!') } </script> Code to be invoked when user selects the device s menu button. Add listeners for hardware related user actions. </head> <body> <h1>hug a member of congress today. You might be the only friend they have. </h1> </body> </html>
Geolocation Sample <script type="text/javascript"> document.addeventlistener("deviceready", ondeviceready, false); function ondeviceready() { var options = { frequency: 3000 }; navigator.geolocation.getcurrentposition(onsuccess, onerror, options); } function onsuccess(position) { var element = document.getelementbyid('geolocation'); element.innerhtml = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />' + 'Altitude: ' + position.coords.altitude + '<br />' + 'Accuracy: ' + position.coords.accuracy + '<br />' + 'Altitude Accuracy: ' + position.coords.altitudeaccuracy + '<br />' + 'Heading: ' + position.coords.heading + '<br />' + 'Speed: ' + position.coords.speed + '<br />' + 'Timestamp: ' + new Date(position.timestamp) + '<br />'; } function onerror(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } </script> geolocation is a <div> defined in the HTML body (not shown).
Communicating with RPG Technologies Used... Screenshot from Android device... OpenRPGUI.com jquery.com PhoneGap.com
Communicating with RPG <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" /> <script src="jquery-1.6.4.min.js" /> <script src="jquery.mobile-1.0.1.min.js" /> </head> <body> <script> $("#btn1").click(function() { $.ajax({ url: "http://code.openrpgui.com/pgm/mirror", type: "POST", data: "tf1=" + $("#tf1").val(), success: function(rsp){ $("#results").html(rsp); } }); }); </script> <input type="text" id="tf1" /> <a href="#" data-role="button" id="btn1">call IBMi</a> <div id="results"></div> </body> </html>
Communicating with RPG Code for MIRROR.RPGLE - http://code.openrpgui.com/pgm/mirror All it does is receive in the request contents and immediately send it back to the requester. Good for testing. H dftactgrp(*no) actgrp(*caller) bnddir('orubnd') /copy qrpglecpy,http /free http_outstr('content-type: text/plain' + x'1515'); http_outstr( http_instr() ); *inlr = *on; /end-free
Same app, different phone You can use the SAME EXACT HTML5 app and deploy it to another platform. Android is the easiest to start with because it has less chains from Google. ios (Apple) is simple to get the app running in xcode Apple s IDE) but is more complicated to get published - that and the fact you need a Mac. Not every phone is created equal! Check out this page to learn what each phone OS/Platform supports... phonegap.com/about/features Currently supported mobile platforms...
Where s My App? Eclipse creates a.apk file that contains everything your application needs to run. This of this as being similar to a zip file. You can copy this to your Android phone using Windows Explorer while your device is connected via USB.
To the Next Level... Once you understand the various features of accessing device functionality you can move onto building your application. Your application can be built entirely by hand with raw HTML, Javascript and CSS OR you can use a framework like Sencha Touch - I prefer a framework. This is a PhoneGap app I developed named Krengel Contact that I published to the Android Market. Instead of using the contacts on the device I am occupying the list with contacts from an IBM i DB2 table using OpenRPGUI. Android Market Link http://bit.ly/u0byue Modeled after this Sencha tutorial http://bit.ly/xpeiqj
We have reached the end! Aaron Bartell aaronbartell@mowyourlawn.com ( www.rpg-xml.com ) lead developer of RPG-XML Suite and owner of www.mowyourlawn.com and check out his latest effort at www.softwaresaveslives.com.com/aaronbartell