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 ►

getUserMedia Introduction With The simple Source Code

getUserMedia  has came in web by Opera first . Opera called it <Device> which was used to get access to the native hardware like camera and mic of the user pc .

<device type="media" onchange="update(this.data)"></device>

<video autoplay></video>

<script>

  function update(stream) {

    document.querySelector('video').src = stream.url;

  }

</script>

This was the syntax of < device>

Soon after  the <device> the WhatWG  decided to bring a javascript api named navigator.getUserMedia()  . This API is the part of Web RTC which means web real time communication.

function getTheMedia() {

  // Note: Opera is unprefixed.

  return !!(navigator.mozGetUserMedia || navigator.webkitGetUserMedia ||

             navigator.msGetUserMedia || navigator.getUserMedia) ;

}

if (getTheMedia ()) {

  // its nice  to go!

} else {

  alert('your browser is not getUserMedia()  enabled ');

}

 The getUserMedia ask your permission for accessing your webcam and mic.

The navigator.getUserMedia take the first parameter {audio: true, video: true} and then couple of optional call back .

so the syntax of navigator.getUserMedia look like this.

navigator.getUserMedia({audio: true, video: true}, ifSuccessfull, ifError);

 function ifSuccessfull(stream) {
  // use the stream for further use ...
  }
 
  function error(){
  alert("your browser is not getUsermedia enabled")
  }

 getUserMedia enable you to access the hardware like camera and mic without any plugin . After accessing the user media you need to add this to the <video> src .The code will look like the below. 

function onFail(e) {

  video.src = 'fallbackvideo.webm';

}

function onSuccess(stream) {

  video.src = window.URL.createObjectURL(stream);

}

if (!navigator.getUserMedia) {

  fallback();

} else {

  navigator.getUserMedia(

{audio: true, video: true}

, onSuccess, onFail);

}

 Further you can add the css3 filter too it like you can rotate the video .And you can play with this Web Rtc API

Check The simple Demo here

Read more ►

How To Use JavaScript With HTML 5

HTML 5 is definitely the future of the web. So one must learn how to work on the JavaScript with Html 5.This article gives you the just introduction how to use JavaScript in html 5.

JavaScript moved a lot since Netscape livescript  . So the Html . As you all now traditional JavaScript have the DOM selector getElementById , getElementsByTagname,getElementsByClassname. The HTML 5 provide  javascript a new function called queryselector .So what does this query Selector does ? Before going into this lets see the syntax  of this function.

document.querrySelector(‘idname’);

Let’s see how its work?

If we have a HTML file like this.

<div>

<p id=’Australia’>Melbourne</p>

<p id=’US’>New York</p>

<p id=’Australia’>Sydney</p>

</div>

And now if you use function like document.querySelector(‘australia’).style.color =’red’; in your JavaScript file it will change the color of only first element with the id Australia to red. It means the Melbourne will turn into red and Sydney will not any effect on it.

There  is one more function  called document.querySelectorAll . If you will use this function like document.querySelectorAll(‘Australia’).style.color =’red’; it will turn all the elements associated with the Australia. It means it will turn Melbourne as we Sydney into red.

Read more ►

how to move a div using javascript

This tutorial is for how to move a DIV using java script . Here is the example  for moving a div by the help of javascript .
 
You have to make the div position Absolute for older browser . I made the ufo div position absolute for getting the div move using javascript  .

<html>
<head>
<style>
#ufo
{
position:absolute;}
</style>
<script>
function initial()
{
document.getElementById('ufo').style.left=200+'px';
document.getElementById('ufo').style.top=200+'px';
}
function right(){
document.getElementById('ufo').style.left=parseInt(document.getElementById('ufo').style.left)-5+'px';
}
function left(){
document.getElementById('ufo').style.left=parseInt(document.getElementById('ufo').style.left)+5+'px';
}
function top(){
document.getElementById('ufo').style.top=parseInt(document.getElementById('ufo').style.top)+5+'px';
}
function down(){
document.getElementById('ufo').style.top=parseInt(document.getElementById('ufo').style.top)-5+'px';
}
</script>
<link rel="stylesheet" href="main.css">
</head>
<body onload="initial()">
<div id = "ufo">
i am a moving dig. bring mouse over me fellas !!!! </div>
<button id="button" onClick="right();">Press here to move left</button>
<button id="button" onClick="left();">press here to move light</button>
<button id="button" onClick="top();">press here to move down</button>
<button id="button" onClick="down();">press here to move up</button>
</body>
</html>

If you wanna get animation using CSS3 in this . Here is the code for CSS3 make some animation .

#ufo
{
position:absolute;
display:block;
margin:auto;
text-align:center;
width:100px;
height:100px;
border:1px solid blue;
-webkit-transform:rotate(20deg);
background:-webkit-linear-gradient(top,yellow,green);
-webkit-border-radius:25px;
-webkit-box-shadow:rgba(110,110,110,.4) -10px 10px 10px;
text-shadow:rgba(110,110,110,.7) -1px 2px 3px;
}
#ufo:hover
{
width:200px;
height:200px;
-webkit-transform:rotate(70deg);
}
#button
{
height:30px;
weight:100px;
-webkit-transform:rotate(350deg);
margin:auto;
background:-webkit-linear-gradient(top,red,yellow);
-webkit-border-radius:25px;
-webkit-box-shadow:rgba(110,110,110,.4) -10px 10px 10px;
} 

Any doubt any query related to  this comment bellow .

Read more ►

Introduction of JavaScript:

Many people think java and JavaScript are little different .or the JavaScript is the subset of java. JavaScript is the very different from the java. The JavaScript is the world most misunderstood language. And at the same time you can say JavaScript is most popular computer language of the world. JavaScript is a object oriented language .Initially many thought and said about JavaScript it is not object oriented language it is object based language.  JavaScript have objects and it does not have classes like java. JavaScript is more object oriented than java . In JavaScript Objects are more dynamic .Objects are instance of a class in java .Class have more property and behavior in Java .In JavaScript objects are Dynamic collection property. If we have two property of the same name the new property will replace the new name which is more dynamic .The JavaScript have Object literal which creates new objects. As I said before JavaScript is a object oriented language .We will see all the JavaScript object oriented property in future .At the same time JavaScript is a functional language . So we will discuss all about JavaScript here in the JavaCourseBloghttp://javacourseblog.blogspot.in/.

Read more ►

All Php Error Types

Php error Types :
There are three main type of php errors .The Php error are listed below .

1. Notice 
2. Warning 
3. Fatal Error

Notice : This php error does't appear on the front end of the website . This appear only on the back end . And does not stop the php script from executing .

Warning : This Php error type is also same as the Notice , does not appear on the front end . This Type of Php error is only on back end . This normally appear when the include file not exist .

Fatal error : This php error type come in picture ,when the php script is wrong like some syntex error . This fatal error appear on the front end and stops the complete error from executing .

All php Error Types  :

1. E_ERROR
2. E_WARNING
3. E_PARSE
4. E_NOTICE
5. E_CORE_ERROR
6. E_CORE_WARNING
7. E_COMPILE_ERROR
8. E_USER_ERROR
9. E_USER_WARNING
10. E_USER_NOTIC
11. E_STRICT
12. E_RECOVERABLE_ERROR
13. E_ALL

Read more ►