Tuesday, October 9, 2012

Phonegap Tutorial

Phonegap Tutorial
This post for how to create sample android application using phonegap
 What is phonegap?
PhoneGap (previously called Apache Callback,[2][3] but now Apache Cordova[4]) is an open-source mobile development framework produced by Nitobi, purchased by Adobe Systems.[5][6] It enables software programmers to build applications for mobile devices using JavaScript, HTML5 and CSS3, instead of device specific languages such as Objective-C.[7] The resulting applications are hybrid, meaning that they are neither truly native (because all layout rendering is done via web views instead of the platform's native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device APIs).

Easily create apps with the only free open source framework that supports 7 mobile platforms.

Now we are going to see how to create sample application .
Step 1
Download phonegap  click here


Step 2
Then extract that download file and  android folder

Step 3
 Copy the coredove jar file

Step 4 
Then goto eclipse and create android sample project  and paste that coredova jar file to your  project lib folder.

 Step 5
Then add that jar file into your  Java build path.
Step 6
Then got your activity class extents with DroidGap




Sample Code
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import android.support.v4.app.NavUtils;
public class MainActivity extends DroidGap {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        } }


Step 7
Then goto resource  xml folder inside add config.xml file
Then goto assets folder and create html file


test.html


<!DOCTYPE html>
<html>
<head>
      <title>My Page</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
      <script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
      <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
            </script>
            <script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $(this).hide();
  });
   $(".more").click(function(){
    $(simplebool).show();
  });
});

</script>


 <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        // Empty
    }

    // alert dialog dismissed
    function alertDismissed() {
        // do something
    }

    // Show a custom alert
    //
    function showAlert() {
        navigator.notification.alert(
        'Contact added successfully!',  // message
        'hh',              // callback to invoke with index of button pressed
        'Test',            // title
        'Ok'          // buttonLabels
           
        );
    }

    </script>

     

<body>

<a  href="#" class="btn1" id="simplebool" data-role="button">Hide Me</a>
<div data-role="header">
      <a href="a.html" data-icon="delete" data-theme="d">Cancel</a>
      <h1>Add Contact</h1>
      <a onclick="showAlert();" data-icon="check"  data-theme="e">Save</a>
</div>

<div data-role="fieldcontain" class="ui-hide-label">
      <label for="username">Firstname:</label>
      <input type="text" name="firstname" id="firstname" value="" placeholder="Firstname"/>
</div>

      <div data-role="fieldcontain" class="ui-hide-label">
      <label for="username">Mobile No:</label>
      <input type="text" name="mobileno" id="mobileno" required="required" value="" placeholder="Mobile No"/>
</div>
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
      <legend>Choose Gender:</legend>
            <input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="checked" />
            <label for="radio-choice-21">Male</label>
            <input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2"  />
            <label for="radio-choice-22">Female</label>
    </fieldset>
</div>
     
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
      <ul>
                  <li><a href="a.html">Gmail</a></li>
                  <li><a href="b.html">Facebook</a></li>
                  <li><a href="c.html">Phone Contact</a></li>
                  <li><a class="more" href="#" data-icon="more">More</a></li>
            </ul>
            </div>
</div>
      </div>
      <div data-role="fieldcontain" class="ui-hide-label">
      <label for="username">Email Id:</label>
      <input type="text"    name="emailid" id="emailid" required="required" value="" placeholder="Email Id"/>
</div>
</body>
</head>
</html>
Output
Download Source code here

Download Phonegap Tutorial PDF

Check out this may be help you

Related Posts Plugin for WordPress, Blogger...