PhoneGap

This post describes  how to setup your development environment for Cordova and run a simple application.


Requirements 
Eclipse 3.4+

    Install SDK + Cordova
    Download and install Eclipse Classic
    Download and install Android SDK
    Download and install ADT Plugin
    Download the latest copy of [PhoneGap and extract its contents. We will be working with the Android directory. 

    Setup New Project
                                                  Launch Eclipse, and select menu item New > Android Project. Fill out the three panels of the New Android Project wizard shown below.


    1.Enter Application Name and click Next    .



    2.Now don't change anything just click Next again. 




    3. In this window you will see Configure launcher icon , Here you can set your icon for application.After selecting icon,Click Next. 






    4.Now again click Next 



    5.click Next 

     6. Now you can see your project structure given below.

     

    And the magic of cordova will start now .See the below steps for integrate cordova with android app.


    In the root direct    ory of your project, create two new directories: 
    /libs
    assets/www 

    Note :- If libs and assets are already there then only create www subfolder in assets.

    Copy     cordova-2.7.0.js from your Cordova download earlier to assets/www
    Copy cordova-2.7.0.jar from your Cordova download earlier to /libs
    Copy xml folder from your Cordova download earlier to /res

    * Verify that cordova-2.7.0.jar is listed in the Build Path for your project. Right click on the /libs folder and go to Build Paths/ > Configure Build Path.... Then, in the Libraries tab, add cordova-2.7.0.jar to the project. If Eclipse is being temperamental, you might need to refresh (F5) the project once again. 
    ***Note:- You can find xml folder in phonegap-2.9.1\lib\android\example\res when you will extract 
    phonegap-2.9.1 zip, In this folder you will get a config.xml.









      • Now if cordova-x.x.x is not added in Libraries then Click-> Add Jars.. and select cordova-x.x.x jar from libs.
        Edit your project's main Java file found in the src folder in Eclipse:
        Add import org.apache.cordova.*;
        Change the class's extend from Activity to DroidGap
        Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");








          Right click on AndroidManifest.xml and select Open With > XML Editor
          Paste the following permissions 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" />






        • Now  Support orientation changes by pasting the following inside the <activity> tag. 
          • android:configChanges="orientation|keyboardHidden|screenSize"
                 You can see the android-manifest.xml changed below..


        *Hello World

        Create a new file index.html in  assets/www folder with below code..

          <!DOCTYPE HTML>
          <html>
          <head>
          <title>JavaArc Hello Phone Gap</title>
          <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
          </head>
          <body>
          <h1>Hello Phone Gap</h1>
          </body>
          </html>


         Deploy to Simulator
         Right click the project and go to Run As > Android Application
         Eclipse will ask you to select an appropriate AVD. If there isn't one, then you'll need to create it.

         Deploy to Device
         Make sure USB debugging is enabled on your device and plug it into your system. (Settings > Applications  > Development)
         Right click the project and go to Run As > Android Application
        Done!

        No comments:

        Post a Comment

        Subscribe to: Posts (Atom)