Intro To PhoneGap for RPG Programmers - Mow Your Lawn

ubiquitousstrumpetMobile - Wireless

Dec 10, 2013 (4 years and 21 days ago)

107 views


the intro
for RPG programmers

Making mobile app development easier...
by
Aaron Bartell
of KrengelTech
aaronbartell@mowyourlawn.com
Copyright Aaron Bartell 2012
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!!

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
downloads
30,000
messages
40+
tools
50+
contributors
800,000
visits/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.com
Great “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"
);
}
}
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.
<!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 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
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
aaronbartell@mowyourlawn.com
lead 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