Phonegapping APEX!!

Screenshot 2013-11-28 08.47.52

So we have been looking at phonegap for a while now and also the jQuery mobile templates in APEX . Wouldn't it be great to create an APEX mobile app and then create it as a native mobile app so we thought we would put APEX and Phonegap to the test. The benefits of this are vast as you can have both web applications, mobile web applications and now native mobile applications.

This is how we created a very simple example.

 

So first off, create a new APEX app using the jquery mobile templates

Screenshot 2013-11-27 21.19.20

Set the authorization to open door at the moment to make the app simple.

Next Create a few page items on the first page

Screenshot 2013-11-03 21.13.51

See what it looks like

Screenshot 2013-11-28 08.46.23

Next we need to put this output into phonegap.

Install phonegap on your computer , see the phonegap website for details. http://phonegap.com/install/

We are using OSX so ran the following commands to install phonegap and cordova.

Installed node http://nodejs.org/

# sudo npm install -g phonegap

# sudo npm install -g cordova

Once phonegap is installed create your phonegap project through the command line

# cordova create bz_timesheet com.beezapps-cloud.timesheet  BZ_timesheet

The code generates the structure of the project within the bz_timesheet directory.

Now we need to move the APEX webapp to phonegap.

I found firefox to be the best at exporting the application, open the page in firefox and right click and select “save as” . This will download the webpage and the files needed

Screenshot 2013-11-27 21.33.08

We need to move those files into our phonegap directory structure. Within the phonegap folder move the js files to the www/js/ folder and the css to the www/css/ folder .  Move the .html file to www/ , and rename to  index.html file.

Screenshot 2013-11-27 21.34.52

Edit the html file and all the references to the css and js files need to point to the phone gap folder so you would change to cs/4_2.css or js/jquery.js. Check the static webpage is ok and that is about it!

Run the following to generate an iOS native app.

# cordova platform add ios

# cordova build ios

# cordova prepare ios

#  cordova compile ios

# cordova emulate ios

Screenshot 2013-11-27 21.41.11

 

It needs a bit of fine tuning but it is a starter for 10.