PhoneGap / Cordova Unzip Plugin for android

While developing A phoneGap application i faced a problem in unzipping a folder. I downloaded a folder in zip from server using FileTransfer API.
I searched a lot for UnZIP plugin of phone gap but did not find any one the net . Than i started writing a fresh cordova plugin for unzipping

There is few prerequisite before using this plugin
Node.js and Cordova CLI or PhoneGap's CLI


Installation : 1 . Open Your terminal and go to your project directory
2 . Enter this command

phonegap  plugin add https://github.com/ashishanautiyal/Unzip-PhoneGap--Plugin.git
  

or If you using cordova

cordova  plugin add https://github.com/ashishanautiyal/Unzip-PhoneGap--Plugin.git

or you can download the plugin from Git repo Manually

https://github.com/ashishanautiyal/Unzip-PhoneGap--Plugin.git



3 .I Assume you downloaded the plugin manually from git repo

Copy the com folder inside the src folder under your android project

4 .Copy ExtractZipFile.js file inside your www folder and make its reference in index.html

5 . Open res/xml/config.xml file from your project and paste the line

   <feature name="ExtractZipFile">
                        <param name="android-package" value="com.phonegap.plugin.ExtractZipFile.ExtractZipFilePlugin"/>
                </feature>

or 

 <plugin name="ExtractZipFile" value="com.phonegap.plugin.ExtractZipFile.ExtractZipFilePlugin" />

or Usage :

function extractOK(status)
{
    console.log("extractOK");
}

function extractError(error)
{ 
    console.log("extractError "+error);
}


function extractFile(zipfile)
{
    console.log("Extracting "+ zipfile);
    extractZipFile.unzip(zipfile, extractOK, extractError);
}

Get the file reference and pass as parameter in function extractFile(zipfile) . And you are done with extractFile


Git Repo Link : https://github.com/ashishanautiyal/Unzip-PhoneGap--Plugin

Read more ►

Show loading screen in Phonegap app over inAppBrowser

The trick is very simple for showing the loading screen in phonegap application.You Just need to call activityStart function of the notification.

For hiding the loading screen in phonegap just call activityStop function.

The loading screen is very helpful while making Ajax call or while using the inappbrowser.It is really useful when loading the external link in inappbrowser.It is useful because you can not create a loading screen through your HTML in client side if you are loading the external link.Because inappbrowser overlay on the application.You can show the loading screen when loadstart events fire in Inappbrowser hide it when loadstop events fire.

Here is an example of loading screen with inappbrowser.

This phonegap loading screen only works with the android .And if you will touch the screen The loading screen will get hide.

Read more ►

how to write hello world programe in android using phonegap

In The last blogpost we discused how to set the workspace for the android app developement in phonegap aka cordova.

In this post will write the "Hello world" programe for android using cordova .

So here are the steps for creating your first app in phonegap.

Step 1 : Set your work space as i wrote in last blogpost

Step 2 : Create a www & libs folder inside the Asset folder .

Step 3 : Create a js and css folder inside the www folder .

step 4 : create a index.html file inside the www folder .

Step 5 : Copy the cordova-2.7.0.jar file from downloaded phonegap folder to your projects asset/libs folder.

Step 6 : Right click on the cordova-2.7.0.jar file which you copied into asset/libs folder .A select menu will appear choose the "Buid Path" .And then select "Add To Build Path" .

Step 7 : Now copy the cordova-2.7.0.js file from downloaded phonegap folder to your projects asset/www/js folder.

Step 8 : Now open your index.html file from www folder . I assume you are familiar with web developement . make a reference of cordova-2.7.0.js in your index.html page. 

<script src="js/cordova-2.7.0.js" type="text/javascript"></script>

step 9 : Create a main.js file inside js folder . and refrence it in index .html page 

<script src="main.js" type="text/javascript"></script> 

Step 10: Write inside the body tag of index.html 

    <p>Hello World </p>

Step 11: Now Save all www folder files and Open the MainActivity.java file which you will found under the src folder.

Step 12: Keep the first line which start with "package" and  Remove the all other lines of that file .

Step 13: Copy the following lines in in the file .

  import android.os.Bundle;

import org.apache.cordova.*;

public class MainActivity extends DroidGap {

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        super.loadUrl("file:///android_asset/www/index.html");

        

    }

   

}

Step 14:Now save the file . Clean the project . Build the project. Run the application . And you application is done .

Feel free to ask your doubts through comments  

Read more ►

How to Use PhoneGap on Linux Ubuntu for Android Application Development ?

This tutorial will tell the step by step process to Use the PhoneGap in Ubuntu for making native app using web technology like HTML5 ,CSS3 ,JavaScript Etc.

First of all you are needed to set up workspace . The software we will need for this are.

1.eclipse IDE

2.Sdk

3.Phone gap

Download Sdk from here http://developer.android.com/sdk/index.html . Unzip this file into your working directory. This will download two folder Eclipse and Sdk .And you are done with the eclipse and sdk installation. Next thing you need to download the PhoneGap . Download phone gap and unzip it to anywhere in your hard drive . This will download two folder doc and lib . The lib folder is the folder which will come in use for development . The lib file contains folder Android , ios windows etc. As we are discussing here the android open the android folder . And now our workspace is all set for the android app development .

Now you open your eclipse IDE which you Downloaded earlier in the folder adt-bundle-linux-x86-20130219/Eclipse.

Click on the new menu and select Android Application Project. It will lead you to a new window. Fill the "Application name field " with "javacourseblog" and click next.

 Keep clicking next until find the Activity name field . Insert Javacourseblog there in Activity name and click finish.

Your file system will look like this

Now find the asset folder under the root folder of your project and create folder by name "WWW".

Now open the folder lib/android which we downloaded earlier.

Copy the XML folder and paste it inside the res folder in your eclipse ide .

Now locate the cordova-2.7.0.jar file inside the lib/android folder and copy it from there and paste it to inside libs which is inside the root folder in eclipse IdE.

Now locate cordova-2.7.0.js file in the lib/android folder and rename it to coredova.js . Then copy it to WWW folder which you created earlier inside the asset folder in Eclipse IDE.

If everything is done your work space is set to develop android app using phonegap and web technology .

Read more ►