Sunday, 3 November 2013

Creating an Android PhoneGap 1.x application using IntelliJ IDEA

You can create an Android PhoneGap application by using the Android SDK, the PhoneGap API, and the IntelliJ development environment. The PhoneGap API can be used to develop mobile applications for iPhones, Androids, BlackBerries, and other mobile devices. You can use an IntelliJ Android project to wrap HTML, cascading style sheets (CSS), and JavaScript code to create a mobile application. Also, when developing a PhoneGap application, you can use other  open source APIs like jQuery Mobile to create rich graphical user interfaces (GUIs). You can also make AJAX calls to enterprise servers to send or retrieve mobile data.

Note: Future PhoneGap development articles will illustrate how to develop PhoneGap applications that interact with Adobe Experience Manager (AEM). One use case that you can perform is taking a picture with the mobile device's camera and then sending the photo to the AEM DAM.

Most end to end articles that you find on the web show how to develop a PhoneGap application using Eclipse or the command line (I personally like IDEs much better than command line). While I use the Eclipse IDE in many articles appearing on Scott's Digital Community, in this development article, I am going to use IntelliJ (version 12.6).

This development article walks you through downloading the PhoneGap API, the Android SDK, and then how to use the IntelliJ IDEA to develop a PhoneGap application. The PhoneGap application is deployed to an Android device.

An Android PhoneGap application

To create an Android PhoneGap application by using IntelliJ IDEA, perform these tasks:
  1. Install the Android SDK.
  2. Download the PhoneGap API.
  3. Create the PhoneGap application using Intellij IDEA.

Install the Android SDK

The first step to create an Android PhoneGap application is to install the Android SDK. You use the Android SDK from the IntelliJ IDEA. For information about installing the Android SDK, see the detailed instructions at http://developer.android.com/sdk/index.html.

Install the PhoneGap API

You can download the PhoneGap API from the following URL:


When downloading the PhoneGap API, you have library files for IOS devices, Android devices, Blackberry devices, and so on as shown in this illustration. 

PhoneGap library files

This development article uses the PhoneGap API for Android. Download the PhoneGap ZIP file from the PhoneGap archive section, as shown here.

PhoneGap Download options
In this development article, the PhoneGap 1.8.1 is used. The three files that are used in this development article are cordova-1.8.1.jar, cordova.js, and plugins.xml.

Note: You can also install the PhoneGap API using a command line. However, this development article does not use the command line to install the PhoneGap API. 

Create an Android PhoneGap project using IntelliJ

After you have installed the Android SDK and downloaded the PhoneGap API, you can use IntelliJ IDEA to create an Android PhoneGap application. This development article uses IntelliJ version 12.1.6.

Create an IntelliJ project

The first step is to create an IntelliJ Android project as shown here.

IntelliJ Android New Project

Create an Android PhoneGap project by performing these tasks:
  1. Start IntelliJ IDEA.
  2. Click File, New Project. 
  3. In Project Name, type MyPhoneGap.
  4. In Project Location, specify a location for your project. In this example, C:\PhoneGapFirst is specified. 
  5. In the Project SDK, specify the location to where you downloaded the Android SDK. 
  6. Click Next.
  7. In the application name, specify a name for your application. Specify MyPhoneGap.
  8. In the package field, specify: com.example.PhoneGapFirst.
  9. In the Activity name field, keep the default value: MyActivity.
  10. Click the show device chooser dialog radio button.
  11. Click Finish. 

Add sub folders to your project

After you create the IntelliJ Android project, your project should reflect the following illustration:

Project files generated by IntelliJ

Next, add new folders to your project. In the assets folder, create a sub folder named www. Place the cordova.js in the www folder. 

Place the cordova-1.8.1.jar in the libs folder.  Also add the cordova-1.8.1.jar to your IntelliJ project's class path. Right click on the Project Name ( PhoneGapFirst) and press F4. This action opens the Project Structure dialog.

Select Libraries and then click the little '+' icon near the top of the dialog. Select Java and browse to the cordoba.jar file. Click OK, then click OK again.

Expand the res folder, right click and create a new folder named xml. Copy the plugins.xml file from your PhoneGap installation and add this file to the xml folder.

The following illustration shows the PhoneGap files that you added to your Android IntelliJ project. 

PhoneGap files added to the IntelliJ project 

Modify the Java file

The next step is to modify the MyActivity Java class. Add the following import statement to this file:

import org.apache.cordova.*;

Next change the class that the MyActivity class extends from Activity to DroidGap. This class is the main Android activity that represents a PhoneGap application. For more information, see DroidGap.

The following represents the modified MyActivity class.

package com.example.PhoneGap;

import android.app.Activity;
import android.os.Bundle;
import org.apache.cordova.*;

public class MyActivity extends DroidGap
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

Notice that the loadURL method references an HTML file named index.html. This is the HTML file where you can add your PhoneGap JavaScript logic. This PhoneGap JavaScript API is very rich API that lets you interact with most features of your smartphone. This development article simply writes out text. 

Modify the AndroidManifest.xml file

Modify the AndroidManifest XML file located in your IntelliJ project. Copy and paste the following XML to this file between the <uses-sdk.../> and <application.../> tags:

<supports-screens 
    android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" 
    android:resizeable="true" 
    android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

The following XML represents the entire XML file. 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.PhoneGap"
          android:versionCode="1"
          android:versionName="1.0">
    <uses-sdk android:minSdkVersion="4" android:targetSdkVersion="4"/>
    <supports-screens
            android:largeScreens="true"
            android:normalScreens="true"
            android:smallScreens="true"
            android:resizeable="true"
            android:anyDensity="true" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />
    <application android:label="@string/app_name" android:icon="@drawable/ic_launcher" android:debuggable="true">
        <activity android:name="MyActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

Notice the bolded line: android:debuggable="true". This lets you write your project to an Android device. 

Add the HTML file that references the  PhoneGap JavaScript file

In the assets/www folder that you created, add a new HTML file named index.html. This is the file where you can place your PhoneGap JavaScript code. However, for this article, the HTML writes text. Add the following HTML to this file.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <title>Hello PhoneGap</title>
</head>
<body>
<h2>Hello, this is a very basic Android PhoneGap application!</h2>
</body>
</html>

Notice that the cordova.js file is referenced. This is how you can use the PhoneGap JavaScript API within an Android application. 

Deploy your PhoneGap application to an Android Device

The final task is to deploy the PhoneGap to the Android device. For this to be successful, you have to perform a few tasks:

1. Declare your application as "debuggable" in your Android Manifest. (this is shown in this article). 
2. Enable USB debugging on your device.
3. Configure your computer to detect your device. You may have to install a driver file. 

For information about performing these tasks, see http://developer.android.com/tools/device.html.

Once you are done with these tasks, you can run your Android IntelliJ application. You will be presented with the Choose Device dialog:

The IntelliJ Choose Device dialog that shows a device

Notice that under the Serial Number column, you device is displayed. Also make sure that the Compatiable column displays yes. Ensure that you specify the correct Android OS version in the AndroidManifest XML file. If your device does not match the values that you specified, you will not be able to run your PhoneGap application on your device.

Run your application and choose your device from the Choose Device dialog. Congratulations, you have just developed and deployed your first PhoneGap application using IntilliJ IDEA. 


Join the Adobe Experience Cloud Community 

Join the Adobe Experience Cloud Community by clicking this banner




I (Scott Macdonald) am a Senior Digital Marketing Community Manager at Adobe Systems with 20 years in the high tech industry. I am also a programmer with knowledge in Java, JavaScript, C#,C++, HTML, XML and ActionScript. If  you would like to see more CQ or other Adobe Digital Marketing end to end articles like this, then leave a comment and let me know what content you would like to see.


TwitterFollow the Digital Marketing Customer Care team on Twitter @AdobeExpCare.

YouTube: Subscribe to the AEM Community Channel


19 comments:

  1. Why did you use an old version of PhoneGap? -James

    ReplyDelete
  2. I try and use versions where community may be on - I find that the community is not always on the latest version - great question!!!

    ReplyDelete
  3. I just tried something. I was wrong. While you are using a higher API with Phonegap 1.9, you can still compile it and release it for lower versions, like 2.2 -- So no worries.

    ReplyDelete
  4. Scott thanks much for this.. bookmarking. Now I need phonegap to CF (cfc) examples. ;)

    ReplyDelete
  5. Thanks. I downloaded the latest version of phonegap and don't see the cordova.*.jar anywhere except BBOS example folder. Do you know which jar to fetch for 2.9.1 on mac os x.

    ReplyDelete
  6. i am using Android PhoneGap 1.x application, really this is to good and this is informative. mobile app development ca

    ReplyDelete
    Replies
    1. شفط الصرف الصحي بالدمام
      اقبل الشتاء وسيواجه اهالى مدينة الدمام مشكلة من اصعب واخطر المشكلات المتعبة
      أولها انسداد بيارات المجارى وانسداد شبكات الصرف الصحى وهى المواسير
      و يعانى من هذة المشكلة الجميع ويظلون فى البحث عن شركة رائدة متخصصة فى اصلاح كافة المشاكل الخاصة باعطال انسداد المجارى
      ونحن شركة تسليك مجارى بالخبر لدينا من الخبرات الكبيرة التى نكتسبها من اعمالنا السابقة نؤكدلك عملينا العزيز أننا وبكل جدارة وخبرة
      افضل شركة تسليك مجارى بالدمام رخيصة التكلفة وفى نفس الوقت ماهرين فى العمل
      تعمل الشركة بافضل الطرق الحديثة والاساليب المتطورة علي ايدي افضل العاملين والمتخصصين في هذا المجال
      حيث ان الشركة تمتلك طاقم عمل مدرب علي اعلي مستوي علي ايدي خبراء ماهرين وفنيين محترفين
      حيث لاتتواجد هذه المواد الخاصة بالعمل الا داخل شركتنا فقط وهذه واحده من اهم ما يميز
      افضل شركة تسليك مجارى بالدمام عن غيرها من باقي الشركات الاخرى المنافسة فى المجال
      كما يوجد لدينا العديد من الخصومات الهائلة فنقدم خدماتنا باقل الاسعار التى تتناسب مع جميع عملائنا الكرام
      يوجد لدينا فنيون ومهندسون وخبراء مدربون على اعلى مستوى
      وذلك حيث يمكنهم معرفة تحديد الاسباب التى تتسبب فى انسداد المجارى ولان من اصعب الاشياء هو انسداد المجارى الخاصة بالمنزل فهو يوقف الحياه بالمنزل
      و يتسبب فى مشاكل فى غاية الخطورة لاننا دائما نستعمل الحمامات والمطابخ
      وعند انسداد المجاى تتوقف الحياه كما ينتج عنها الروائح الكريهه التى تضر بالمنزل
      وايضا انسداد المجارى وذلك ينتج عنها اضرار خطيرة بالمنزل نفسه من تسربات بالمياه وتحت البلاط وتسربات بالجدران
      فلا تقلق عملينا العزيز من كل ذلك فلدينا المهارة والخبرة العالية فى اعمالنا لحل كل ذلك .

      Delete
  7. I tried your code AndroidManifest.xml, its working great.. thanks for sharing your article.
    Android training

    ReplyDelete
  8. Thanks for sharing this informative blog. If anyone wants to get Android Training in Chennai reach FITA Academy located at Chennai, Velachery.

    ReplyDelete
  9. Nice tutorial on android technology hats-off to your effort. Your article explained the potential of android technology in coming years. Android Course in Chennai

    ReplyDelete
  10. Unix Training

    Thanks for sharing this informative blog. Suppose if anyone interested to learn Unix Training in Chennai, Please visit Fita Academy located at Chennai, Velachery.

    Regards....

    Unix Training Institutes in Chennai

    ReplyDelete
  11. This is really an awesome article. Thank you for sharing this.It is worth reading for everyone. Visit us:
    Oracle Training in Chennai

    ReplyDelete
  12. Thanks for your wonderful post. I am very happy to read your post.

    Embedded Training Institutes in Chennai

    ReplyDelete
  13. I agree with your post. Android software development kit makes the application development process lot simpler and effective. You can create best performing android application with ease. Android Training Institutes in Chennai | Android Training in Chennai

    ReplyDelete
  14. Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
    Hadoop Training Chennai | PHP Training in Chennai

    ReplyDelete
  15. your article is more useful and informative.. thanks to share this... keep rocking..

    Android Training in chennai

    ReplyDelete
  16. such an interesting blog on mobile app development. Among three players in the market Android,iOS, Windows. Android is the NO: 1 OS used widely by the customers. Next to Android, iOS stood second in the market. As you have explained still android is in first the revenue generated by apple is equal to android since paid apps. The quality and features of apple iOS make more effective in the market. Thanks to admin.

    Regards:

    iOS Course in Chennai |
    iOS Training Chennai

    ReplyDelete
  17. Thanks for sharing your informative article. As every business owner desire to be the part of digital marketing, there is massive demand for attractive and responsive website. It automatically increases the career prospects of web design and development professionals. Taking Web designing course in Chennai will help students to enter web design industry with good salary package.

    ReplyDelete
  18. Nice piece of information on HTML5. With the expansion of smartphones and other portable gadgets, the demand for responsive website design that go comfy on all devices keeps on increasing. This leads to invention and expansion of HTM5 web technology.PHP Training in Chennai

    ReplyDelete