Building a PhoneGap App Development Notes

crickettachyphagiaΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

73 εμφανίσεις

Building a PhoneGap App
Development Notes
25 May, 2012
Giavaneers, Inc.
1545 1/2 Pacific Avenue, Santa Cruz, California 95060
T
831.459.9064

info@giavaneers.com

www.giavaneers.com
Contents
Introduction
2
First Step
2
Preparing Your GWT Project Output
3
Preparing Your PhoneGap Project
6
Running Your PhoneGap Project
7
Giavaneers, Inc.
Building a PhoneGap Application - Development Notes Giavaneers, Inc.
Introduction
This document provides some simple notes for packaging an Eclipse GWT project
as an Eclipse PhoneGap project, suitable for installation into an Android mobile
device. These notes are primarily annotated screen shots, with some very brief
explanatory material.
First Step
The first step is to get grounded in the PhoneGap technology and basic procedures
for putting together a PhoneGap application. Two online videos, though short, are
adequate for establishing a working perspective. Go to
http://corlan.org/
2012/01/13/getting-started-with-phonegap-resources/
to get to the Adobe
tutorials, and then view "Getting Started with PhoneGap", followed by "Developing
for Android".
Giavaneers, Inc.
Building a PhoneGap Application - Development Notes Giavaneers, Inc.
Preparing Your GWT Project Output
The figure below shows the template Eclipse GWT project.
Figure 1: The Template Eclipse GWT Project
In order to package your GWT code in PhoneGap, you need to run the GWT
Compiler to compile your code into final Javascript.
Giavaneers, Inc.
Building a PhoneGap Application - Development Notes Giavaneers, Inc.
Run the compiler by selecting it from the dropdown menu as shown in the figure
below:
Figure 2: Compiling the GWT Project into Final Javascript
Giavaneers, Inc.
Building a PhoneGap Application - Development Notes Giavaneers, Inc.
Copy the three project output files as shown in the figure below:
Figure 3: Copy the Javascript, HTML and CSS Files
Giavaneers, Inc.
Building a PhoneGap Application - Development Notes Giavaneers, Inc.
Preparing Your PhoneGap Project
The figure below shows the template PhoneGap project with the changes you need
to make to accommodate the output from your GWT project.
Figure 4: Template PhoneGap Project
Giavaneers, Inc.
Building a PhoneGap Application - Development Notes Giavaneers, Inc.
Running Your PhoneGap Project
The figure below shows how to run your PhoneGap project.
Figure 5: Run the PhoneGap Android Emulator
Giavaneers, Inc.
Building a PhoneGap Application - Development Notes Giavaneers, Inc.
Look at the time record in the log pane below. Be patient; it takes quite a while for
the emulator to come up.
Figure 6: Launching the Android Emulator Takes Time
Giavaneers, Inc.
Building a PhoneGap Application - Development Notes Giavaneers, Inc.
When the log pane indicates "Activity Manager: Starting: Intent...", your app is
ready to be viewed on the emulator. Slide the circle and drop it on the lock to open
the device as shown in the figure below:
Figure 7: When the Emulator is Ready, Unlock the Device
Giavaneers, Inc.
Building a PhoneGap Application - Development Notes Giavaneers, Inc.
If all is well, you'll see your app working!
Figure 8: Your GWT App on the Android Emulator
Giavaneers, Inc.
Building a PhoneGap Application - Development Notes Giavaneers, Inc.