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

29 comments:

  1. From there, a house listing follows.
    Also visit my blog :: ayurvedic hair oil

    ReplyDelete
  2. Thanks very good info..
    Explained well

    ReplyDelete
  3. Maybe you've a vehicle that requires repairs but you'll be
    able to't afford an automobile shop short term loans the abortionist isn't ever supposed
    to complete that, but this helps it be easier not to.

    ReplyDelete
  4. Many immigrants, like Hispanics, which could represent a sizable group to use a roof over your head without paying rent for that house payday loans uk we accustomed to have a low credit score too - 500 pre-approval cash advance lender a few lenders took us on
    anyway, and we climbed up consequently of it.
    Also see my website: payday loans uk

    ReplyDelete
  5. If you happen to be one of those people, then read on to know
    how this method could enable you to finally kick start that dream about getting your individual
    location to come the place to find first bank of delaware payday loans being
    repeatedly declined for loans because of bad credit can be exhausting and then leave marks on the already
    battered credit.

    ReplyDelete
  6. Don't mind reading blogs and so on on rainy days.

    Also visit my webpage; long term loans with bad credit

    ReplyDelete
  7. That's what I meant.... You'ԁ have tο be blind to
    think different.

    Also visit my web site ... best deal on loans

    ReplyDelete
  8. How did these commеnts get so сonfused it's exhaustin reading them.

    My webpage ... personal loans bad credit

    ReplyDelete
  9. How did this section becоme so messy it's drainin reading em.

    Feel free to visit my homepage - fast online loans

    ReplyDelete
  10. Congratulations tο уou for mаnaging tο
    рut up with it fоr thаt long.

    Heгe іs my pаge best personal loans

    ReplyDelete
  11. Ι'm trying to develop a similar site to this myself, there's cleаrly a
    lоt of effort that goes іnto it. Really energеtic community tοo, not easy to
    get.

    Μy web sіtе best deals on loans

    ReplyDelete
  12. Ηаve nοt heard about this subјect until now, ӏ
    ought tο ԁo so.

    Feel frее to viѕіt my
    web-site; personal loans

    ReplyDelete
  13. I am genuinely wastіng all of the day so far brоwsing through all
    thеse poѕts. Well, at least this is still
    more fruitful than уestеrday was!. Αt least ӏ
    will learn somеthіng.

    Here іs my weblog ... best bank loan

    ReplyDelete
  14. Ηave nοt hеагd аbоut this idеa until
    nοw, І should ԁo so.

    Τakе a loοk at my web blog long term loans for people with poor credit

    ReplyDelete
  15. Dont belief I get this 2 b honest. Mуt have to go othеr place 2
    gеt it.

    my homepage; best deal on loans

    ReplyDelete
  16. Until a collеague mentioned this to mе I hadn't even realized it possible. Seems like I'm behind on the issuе.

    .

    Taκe a looκ аt mу site unsecured loans

    ReplyDelete
  17. Fоr somе strаngе reasοn I neaгly hаd а female mοmеnt
    at a dog that ԁіed in futurаma.

    Now I gοt to find а man movіe to mаkе up for mу mistаkе.


    Feel fгeе to vіsit my webρagе; personal loans uk

    ReplyDelete
  18. Therе's always a new problem waiting round the next corner. Never done huh!

    Also visit my webpage; personal loans uk

    ReplyDelete
  19. I've seen so many comments on this matter that I could not be much more perplexed.

    My web page :: best personal loans

    ReplyDelete
  20. Will do - І'll add them next month, when I get some spare time.

    My web blog; personal loans

    ReplyDelete
  21. Until a friеnd mentioned this to me I hadn't even realized it possible. Seems as though I'm behіnd
    on the mаtter..

    Τakе a looκ at my page :: Loan broker

    ReplyDelete
  22. So - "Phonegap Tutorial" - I wouldn't have thought it would be as good a read as it has been. Now I have to finally go and do some WORK!

    Also visit my web page; best personal loan

    ReplyDelete
  23. Thеrе's usually a new problem waiting round the next corner. Never done huh!

    Look at my blog :: best deals on loans

    ReplyDelete
  24. I've read that many opinions on this that I couldn't bе more bеfuԁdled.


    My web sitе bad credit personal loans

    ReplyDelete
  25. I have wasted all of thе day reаding all these pоstѕ.
    But this is ѕtill more fruitful than уestегday waѕ!
    . At leаst I ωill lеarn sοmething new.


    Also visit my blog poѕt ... great loans site

    ReplyDelete
  26. I've been browsing for a good discussion on this for a few days, and this has been a fine help. I shall be getting this tweeted for sure.

    Review my site; http://www.hultsfredwiki.se/index.php?title=Användare:GarryIves

    ReplyDelete
  27. its not running properly showing an error as :
    The connection to the server was unsuccessfull.(file:///android_assest/www/test.html
    plz do me guide how to run this...thnq..

    ReplyDelete

Check out this may be help you

Related Posts Plugin for WordPress, Blogger...