Build Cross-Platform Mobile Web+Native apps with Application Craft+PhoneGap platform in HTML5,CSS3 framework


Application Craft is one of the sophisticated cross-platform tool used to build Web App + PhoneGap combined apps for smart devices. The Application Craft is web app which runs in cross -platform(windows,Linux, Mac OS X) compatible with Chrome, Safari, Firefox. To start building apps with Application Craft , lets first sign up @ http://www.applicationcraft.com/

Lets create Mobile App from your developer site & start building apps. You have option either to design & code & put the PhoneGap controls.

  • Keep controls drag & drop & build apps for cross-platform mobile tools.

  • put the app in Live Preview & check in Smart Phone emulators.

PhoneGap 1.2 Installation for Android in Eclipse


PhoneGap , the open source framework for accessing native features in Mobile Web is quite appealing in the field of accessing Geolocation, Phone Contacts, Toggle Accelerometer, Call, Taking Snapshot, Vibration for Alerts ..

  • The installation of PhoneGap 1.2 for Android applications in eclipse is quite easy. Download PhoneGap 1.2 from www.phonegap.com & extract the .ZIP & switch to the Android folder .

  •  Create a new Android project in Eclipse for PhoneGap.

  • Now create a new folder called /libs & paste the phonegap-1.2.0.js from the Android folder of the PhoneGap SDK .ZIP.

  • Lets add a new folder called ‘/assets’ under project node in eclipse & create a subfolder under it called ‘www’ & paste the mobile webcontent of the mobile website including .css, .js & .html. Here, pasting the index.html from the Android folder of the PhoneGap.

  • Next , create a new folder names /xml under  /res folder under the project node in eclipse & paste the two .xml files named phonegap.xml & plugins.xml.

  • Next , lets add the following code in AndroidManifest.xml for accessing the device native features in Android Mobile Web apps.

<supports-screensandroid:largeScreens=“true”

android:normalScreens=“true”

android:smallScreens =“true”

android:resizeable =“true”

android:anyDensity =“true”

/>

<uses-permissionandroid:name=“android.permission.CAMERA”/>

<uses-permissionandroid:name=“android.permission.VIBRATE”/>

<uses-permissionandroid:name=“android.permission.ACCESS_COARSE_LOCATION”/>

<uses-permissionandroid:name=“android.permission.ACCESS_FINE_LOCATION”/>

<uses-permissionandroid:name= “android.permission.ACCESS_LOCATION_EXTRA_COMMANDS”

/>

<uses-permissionandroid:name=“android.permission.READ_PHONE_STATE”/>

<uses-permissionandroid:name=“android.permission.INTERNET”/>

<uses-permissionandroid:name=“android.permission.RECEIVE_SMS”/>

<uses-permissionandroid:name=“android.permission.RECORD_AUDIO”/>

<uses-permissionandroid:name=“android.permission.MODIFY_AUDIO_SETTINGS”/>

<uses-permissionandroid:name=“android.permission.READ_CONTACTS”/>

<uses-permissionandroid:name=“android.permission.WRITE_CONTACTS”/>

<uses-permissionandroid:name=“android.permission.WRITE_EXTERNAL_STORAGE”/>

<uses-permissionandroid:name=“android.permission.ACCESS_NETWORK_STATE”/>

<uses-permissionandroid:name=“android.permission.GET_ACCOUNTS”/>

<uses-permissionandroid:name=“android.permission.BROADCAST_STICKY”/>

<uses-featureandroid:name=“android.hardware.camera”/>

<uses-featureandroid:name=“android.hardware.camera.autofocus”/>

  •   Modify the following code in PhoneGapAndroidActivity,java :

package com.android.PhoneGap;

import android.app.Activity;

import android.os.Bundle;

import com.phonegap.*;

import com.android.PhoneGap.*;

public class PhoneGap_AndroidActivity 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”);

    }

}

  • Lets check the PhoneGap activity in Android as native application of Mobile web apps.

%d bloggers like this: