the intro for RPG programmers Making mobile app development easier... of KrengelTech by Aaron Bartell

Size: px

Start display at page:

Download "the intro for RPG programmers Making mobile app development easier... of KrengelTech by Aaron Bartell aaronbartell@mowyourlawn.com"

Matthew Chambers
8 years ago
Views:

1 the intro for RPG programmers Making mobile app development easier... Copyright Aaron Bartell 2012 by Aaron Bartell of KrengelTech

2 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!!

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.

3 About PhoneGap What? Open source solution for building cross-platform mobile apps with standards-based web technologies (i.e. HTML5, Javascript, CSS). Where? 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

org/cordova (this is the future of PhoneGap - a good thing!!) Cost? FREE! License? Apache 2.

5 Why use PhoneGap? InfoWorld Best Software Award Read about it:

6 Thousands of Apps Full(er) list: Information curtesy of Dave Johnson (twitter.com/davejohnson)

7 More PhoneGap Info Platform/version support... ios >= 3.2 Android >= 1.5 BlackBerry >= 4.6 webos >= Symbian >= 1 Windows Phone >= 7.5 Samsung Bada = 1 Contributors... Adobe, IBM, Microsoft, RIM, HP/Palm, Salesforce.com Stats ,000 downloads 30,000 messages 40+ tools 50+ contributors 800,000 visits/month Information curtesy of Dave Johnson (twitter.com/davejohnson)

.. Adobe, IBM, Microsoft, RIM, HP/Palm, Salesforce.com Stats.

8 Download Eclipse from eclipse.org Environment Setup Download PhoneGap SDK from phonegap.com Great Getting Started tutorial phonegap.com/start#android

9 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.

downloaded PhoneGap (aka callback ) files to the folders in Eclipse.

10 index.html <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="phonegap 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>

addeventlistener("deviceready", ondeviceready, false); function ondeviceready() { alert('hug harder!

11 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 public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); super.loadurl("file:///android_asset/www/index.html"); } }

project creation. 1 - Change Activity to DroidGap 2 - Add super.loadurl(...) line.

12 Call on hardware buttons <!DOCTYPE HTML> <html> <head> <script type="text/javascript" src="phonegap 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>

addeventlistener("menubutton", onmenubutton, false); } function onmenubutton(){ alert('it is not working! Hug harder!

13 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).

latitude + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />' + 'Altitude: ' + position.coords.altitude + '<br />' + 'Accuracy: ' + position.coords.accuracy + '<br />' + 'Altitude Accuracy: ' + position.

14 Communicating with RPG Technologies Used... Screenshot from Android device... OpenRPGUI.com jquery.com PhoneGap.com

15 Communicating with RPG <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="jquery.mobile min.css" /> <script src="jquery min.js" /> <script src="jquery.mobile min.js" /> </head> <body> <script> $("#btn1").click(function() { $.ajax({ url: " 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>

ajax({ url: "http://code.openrpgui.com/pgm/mirror", type: "POST", data: "tf1=" + $("#tf1").val(), success: function(rsp){ $("#results").

16 Communicating with RPG Code for MIRROR.RPGLE - 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

17 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...

ios (Apple) is simple to get the app running in xcode Apple s IDE) but is more complicated to get published - that and the

18 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.

19 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 Modeled after this Sencha tutorial

This is a PhoneGap app I developed named Krengel Contact that I published to the Android Market.

20 We have reached the end! Aaron Bartell ( ) lead developer of RPG-XML Suite and owner of and check out his latest effort at

com ) lead developer of RPG-XML Suite and owner of www.

Introduction to PhoneGap

Introduction to PhoneGap Web development for mobile platforms Master on Free Software / August 2012 Outline About PhoneGap 1 About PhoneGap 2 Development environment First PhoneGap application PhoneGap API overview Building PhoneGap