Cross-platform development: phonegap mobile development framework

With the increasing popularity of Google's Android phones and Apple's iPhone phones, more and more developers are joining the ranks of mobile application developers. Currently, Android, the runner-up among mobile terminals, is developed based on the Java language, while Apple's iPhone is developed based on the C language. If applications written by developers need to run on different mobile devices at the same time, they must master multiple development languages, which has become a major challenge for the development team, in an interview with 51cto, the chief architect of China's famous mobile software Shang mail also mentioned the difficulty of cross-platform software development. To further simplify mobile app programming, many companies have released solutions. Adobe's "air for Android" makes it possible for flash to develop local apps for Android. Nitobi also developed an open-source mobile application solution phonegap.

Phonegap is an open-source mobile application development platform. It uses only HTML and JavaScript to create applications that can run on multiple mobile devices. Phonegap abstracts and simplifies the complex APIs provided by mobile devices, and provides a series of rich APIs for developers to call. If you use HTML, JavaScript, or Java, you can use the APIS provided by phonegap to call various functions. phonegap allows you to create applications running on various mobile phone platforms, which is undoubtedly a good news for mobile app developers. Currently, phonegap supports the vast majority of features in iPhone/iPad, Android, Symbian, palm, and blackberry versions. For details about the support in the official documentation, see:

In this article, we will explain how to install the phonegap development framework and cooperate with eclipse in a simple example of helloworld that can be run on the Android platform.

Install the phonegap framework based on the android SDK

First, you must understand that the SDK for the mobile device application must be installed in the development environment when you use the phonegap framework to develop mobile applications. For example, to develop an application running on Android, you must install the android SDK package. To develop an iPhone application, you must install the iPhone SDK. This article describes how to install phonegap Based on the android SDK.

No matter which platform the mobile app is developed, you must first download it from the official website of phonegap.

Phonegap package (). The latest version is 0.9.1. After downloading and decompressing it, you will find Several folders as shown in:

Here, because we are building Android applications, only phonegap-android is useful to us.

Because phonegap works together with the SDK of the Ruby language and the target mobile device, in addition to downloading phonegap, developers must install the following software (taking android as an example)

◆ Android SDK. We recommend that you install the latest version, such as Android 2.1 or 2.2.

◆ Eclipse IDE

◆ Apache ant 1.8.1

◆ JDK 1.5 or above

◆ Android eclipse development plug-in ADT

◆ Ruby 1.9.1. You are advised to download 1.9.1 from the official website for installation.

In addition, we also need to set the runtime environment variables in windows. First, add the following system environment variables to control panel-system-environment variables.

◆ Java_home: point to the installed JDK directory, such as C:/jdk15

◆ Ant_home: point to the installed apache_ant directory, such as D:/ant.

◆ Android_home; point to the installed Android SDK directory, such as D:/androidsdk

Set the path and add Ruby, JDK, Android SDK, and ant to the original path, for example:

 
 

  
  
c:/ruby/bin;c:/jdk15/bin;d:/ant/bin;d:/androidsdk/tools  
  
  
 
 
 

Download the Windows version of Ruby 1.9.1 and install it in the specified directory.

After completing the above work, we will use the scaffolding function of the phonegap framework to quickly generate an android prototype program.

 

Use phonegap to generate Android-based prototype programs

1 enter the phonegap-android directory, and enter the MS-DOS mode, in the command line, run the command in the following format:

 
 

  
  
ruby bin/droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"  
  
  
 
 
 

The preceding parameters are described as follows:

Android_sdk_path specifies the android SDK installation location, for example:

D:/androidsdk. Do not write "/" here. It should be "/" as the separator.

Name: name of the Android app to be generated.

Package_name: the package name in the source code of the generated Android Application. Note that there must be at least one layer of package relationship, that is, the form of COM. xxxx.

Www: Specifies the Location Directory Name of HTML, javascipt, and CSS stored in the application.

Path: the directory location of the project prototype project generated through phonegap. Note that the directory location cannot be specified as the workspace Workspace of eclipse.

The following is an example:

 
 

  
  
ruby bin/droidgap “d:/androidsdk” HelloWorldGap com.phonegap www  
  
  
“d:/HelloWorldGap”  
  
  
 
 
 

After running the preceding command, you will find that a hellowolrdgap project directory is generated on disk D, and phonegap has generated the project framework for us.

Import the project to eclipse

If the Android for Eclipse plug-in ADT is installed, we can import the project generated by phonegap to eclipse. First, open eclipse and create an android project, as shown in figure

The name of the input project name is hellogapandroid. In Create project from existing source, select the directory of the project generated using phonegap. In eclipse, we will see the following structure:

The WWW directory under assets stores the HTML, JavaScript, and CSS files needed in the project. In addition, check that the phonegap. jar file exists under the lib directory of the project.

Next, we will try to run this project and see the following results in the simulator:

The running result shows the "index.html" page of the "logs" display in phonegap, which demonstrates some of the functions. You can try it out.

 

Compile the helloworld Program

Next, we will compile the helloworld program on this basis. Switch to index.html. In code mode, delete the code generated by the original phonegap and write the following code:

 
 

  
  
<!DOCTYPE HTML>    
  
  
 
  
     
  
    <meta name="viewport" content="width=320; user-scalable=no" />      <meta http-equiv="Content-type" content="text/html; charset=utf-8">    
  
  
    <title>PhoneGap Android App</title>    
  
  
             <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>            
  
  
           <script type="text/javascript" charset="utf-8">    
  
  
                      var showMessageBox = function() {     
  
  
              navigator.notification.alert("Hello World of PhoneGap");     
  
  
                      }     
  
  
                        function init(){     
  
  
            document.addEventListener("deviceready", showMessageBox, true);                    
  
  
                      }     
  
  
  </script>    
  
  
   
  
<body onload="init();"  >    
  
  
  </body>    
  
  
 
  
 
 
 

As you can see, this is actually a common HTML and JavaScript code. First, in the onload-triggered method init, The phonegap encapsulated event is called through the Javascript callback method.

Deviceready. This event is triggered when the device loads its application. The phonegap API must be introduced for calling. The callback function showmessagebox calls the method navigator. Notification. Alert encapsulated by phonegap. This method is actually

A text prompt box is displayed. The running result is as follows:

 

Improve the helloworld Program

Next, we will improve this program. The function is that we can enter a name in the text box, and then click "OK". The Prompt window will display Hello + your input name. Modify the program code as follows:

 
 

  
  
<!DOCTYPE HTML>    
  
  
    
  
  
 
  
    
  
  
   
  
    
  
  
    <meta name="viewport" content="width=320; user-scalable=no" />    
  
  
    
  
  
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">    
  
  
    
  
  
    <title>PhoneGap</title>    
  
  
    
  
  
              <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>            
  
  
    
  
  
              <script type="text/javascript" charset="utf-8">    
  
  
    
  
  
              var displayHello = function() {     
  
  
    
  
  
                        var name =      document.getElementById("firstname").value;     
  
  
    
  
  
                        navigator.notification.alert("name" + name);     
  
  
    
  
  
            }     
  
  
    
  
  
   </script>    
  
  
    
  
  
   
  
    
  
  
  <body onload="init();" id="bdy" >    
  
  
    
  
  
            <div id="txt">    
  
  
    
  
  
            <input   type="text" name="firstname" id="firstname" />    
  
  
    
  
  
            </div>    
  
  
    
  
  
            <div id ="btn">    
  
  
    
  
  
    <a href="#" class="btn" onclick="displayHello();">Say Hello</a>    
  
  
    
  
  
            </div>    
  
  
    
  
  
        </div>    
  
  
    
  
  
  </body>    
  
  
    
  
  
 
  
   
 
 

If you know HTML and JavaScript, the above program is easy to understand. A text box named firstname is added, and the displayhello () method called in The onclick event of the button is passed through the document. the JavaScript method of getelementbyid obtains the name entered by the user, and then uses navigator. notification. shows the output result of the alert method. The input interface and output result are as follows:

Summary

The phonegap open-source framework is used to encapsulate the SDK for mobile devices. In the future, when developing mobile applications, we only need to call the APIS encapsulated by phonegap, with the existing Java, HTML, CSS, and JavaScript technologies, you can easily develop them. For more information, see the phonegap help documentation.

For more information about Android development, see