the intro - mowyourlawn · 2016-06-16 · following the getting started tutorial you then...
TRANSCRIPT
the intro
for RPG programmers
Making mobile app development easier...
by Aaron Bartellof KrengelTech
[email protected] Aaron Bartell 2012
AbstractWriting 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!!
• 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
About PhoneGap
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
iOS >= 3.2 Android >= 1.5 BlackBerry >= 4.6 webOS >= 1.4.5 Symbian >= 1
Windows Phone >= 7.5 Samsung Bada = 1
800,000
downloads30,000messages
40+tools
50+contributors
800,000visits/month
Contributors... Adobe, IBM, Microsoft, RIM, HP/Palm, Salesforce.com
Platform/version support...
Stats...
Information curtesy of Dave Johnson (twitter.com/davejohnson)
Download Eclipse from eclipse.org
Environment Setup
Download PhoneGap SDK from phonegap.comGreat “Getting Started” tutorial phonegap.com/start#android
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.
Environment Setup
<!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!') } </script> </head> <body> <h1>Hug a member of congress today. You might be the only friend they have. </h1> </body></html>
index.html
Javascript is invoked once native portion of PhoneGap is completely loaded (native would be iOS or Android).
public class PhoneGap1Activity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); }}
JavaThis 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.
<!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> </head> <body> <h1>Hug a member of congress today. You might be the only friend they have. </h1> </body></html>
Call on hardware buttons
Add listeners for hardware related user actions.
Code to be invoked when user selects the device’s menu button.
<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 Sample
geolocation is a <div> defined in the HTML body (not shown).
Communicating with RPG
Technologies Used...
OpenRPGUI.com
jQuery.com
PhoneGap.com
Screenshot from Android device...
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
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
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.
Currently supported mobile platforms...
Same app, different phoneYou 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
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
Aaron Bartell [email protected] developer of RPG-XML Suite (www.rpg-xml.com)
and owner of www.MowYourLawn.com and check out his latest effort at www.SoftwareSavesLives.com
We have reached the end!
.com/aaronbartell