Hybrid application Development Hello HTML5 (i)

This is an introductory tutorial on hybrid application development, and if you don't understand native application development, try mixed-mode application development. This tutorial uses Android, HTML5, and Cordova to illustrate the sample.

One, create the development environment and download the development package:

for Android development environment Building Please check the Internet, this tutorial does not explain.

related development packages for use:

1. Android 4.4.2  
2. Sencha Touch 2.4.x
3. Cordova 3.4.0  

two. Create a hybrid app

1. Create Android project as shown, by default click Next until you finish creating.

2, add Cordova-3.4.0.jar to the project.

3, under the Res folder, create the name XML folder, and then under the XML folder, create a file named Config. config, with the following content:

<?xml version= "1.0" encoding= "UTF-8"? ><widget xmlns = "http://www.w3.org/ns/widgets" id = "IO.C        Ordova.hellocordova "Version =" 2.0.0 "> <name>hello cordova</name> <description>    A Sample Apache Cordova application that responds to the Deviceready event.    </description> <author href= "Http://cordova.io" email= "[email protected]" > Apache Cordova Team </author> <access origin= "*"/> <!--<content src= "http://mysite.com/myapp.html"/> for Exter      NAL pages--<content src= "index.html"/> <preference name= "loglevel" value= "DEBUG"/> <!-- <preference name= "SplashScreen" value= "resourcename"/> <preference name= "backgroundcolor" value= "0xFFF" /> <preference name= "Loadurltimeoutvalue" value= "20000"/> <preference name= "InAppBrowserStorageEnab Led "value=" true "/> <preference name=" DisallowoverscrOll "value=" true "/>-<!--this was required for native Android hooks--<feature name=" APP "        ; <param name= "Android-package" value= "org.apache.cordova.App"/> </feature></widget>

4, modify the Mainactivity.java file, the code is as follows:

Package Code.android.hybrid;import Org.apache.cordova.config;import Org.apache.cordova.cordovaactivity;import Android.os.bundle;import android.app.activity;import android.view.menu;/** *  * @author Zei Jiping * @since 2015-08-12 * * * public class Mainactivity extends cordovaactivity {@Overridepublic void onCreate (Bundle savedinstancestate) { Super.oncreate (savedinstancestate); Super.init ();//Load your Applicationsuper.loadurl (Config.getstarturl ());}}

5, create a folder named WWW under the Assets folder and create a file named Index.html. The contents of the index.html file are as follows:

<! DOCTYPE html>
 

 

  6. Run the project and test it. To this, a hybrid application is created. If you are familiar with the HTML5 framework such as jquery Mobile or Sencha Touth, you can enrich the interface. as follows .  
 
 Three, rich UI interface
 
 There is no telling how Sencha touch is used, and there is time to separate out Sencha touch tutorials. 
 
 
  
 

 

 

 

 

 
        
 

 

 

 
Hybrid application Development Hello HTML5 (i)