Configure a combination of phonegap and jquery mobile to develop Android applications

Source: Internet
Author: User

Phonegap and jquery mobile are used to develop Android Application configurations.

To meet work requirements, we use phonegap and jquery moblie to develop Android applications.

These technologies have never been used before. It can be said that they have never heard of them at all. They are really emotional. In the field of development, the technology is changing with each passing day, and the knowledge can never be learned. Even for Java development, there are still a lot of professional directions under the subdivision. There are still too many technologies not involved, and you need to be specialized in a single field and have a wealth of knowledge. We can't do it all, so we have to be a professional talent in today's society.

Let's get down to the point:

Phonegap is an open-source development framework that uses HTML, CSS, and JavaScript to build cross-platform mobile applications. It allows developers to take advantage of the core features of iPhone, Android, palm, Symbian, BlackBerry, Windows Phone, and Beda smartphones-including geographic location, accelerator, contacts, sound and vibration.

Jquery mobile is a front-end development framework that is jointly launched by (MT) Media Temple with a number of mobile device manufacturers and software companies for touch screen smartphones and tablets and online applications. Built on jquery and jquery UI class libraries, jquery Mobile provides front-end developers with a unified UI interface system compatible with all mainstream mobile device platforms. Outstanding elasticity, lightweight, and progressive enhancement features and accessibility.

 

1. first you need to download phonegap, you can go to the following website download: http://phonegap.com/in the top right corner of the home page there is a download icon, click to download its compressed version, now the latest version is phonegap1.5.0, the downloaded file name is: phonegap-phonegap-120.12.16.5.0-0-gde1960d.zip.

2. after the download is complete, decompress the package, which contains its introduction documents and sample files (including Android, IOS, BlackBerry, and so on). Here we only need to use Android, in the decompressed file, in the android folder under the Lib folder, we find the cordova-1.5.0.jar (in fact, that is, the other website named phonegap. jar), The cordova-1.5.0.js has an XML folder

3. Create an android Project

4. create four directories under the root directory of the project.
/Libs
/Assets/WWW

/Assets/CSS

/Assets/JS

5. Copy the cordova-1.5.0.js to the/assets/JS directory.
6. Copy cordova-1.5.0.jar to the/libs directory.
7. Copy the XML folder to the/RES directory.
8. Make some modifications to the main java source code file in the SRC Source code file.
Change the class from inherited activity to inherited droidgap.
Replace setcontentview () with super. loadurl ("file: // android_asset/www/index.html ");
Add: Import com. phonegap .*;
Delete import Android. App. Activity

import org.apache.cordova.DroidGap;import android.os.Bundle;public class App extends DroidGap {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);//        setContentView(R.layout.main);        super.loadUrl("file:///android_asset/www/index.html");    }}

The layout of the project is as follows:

Now you have no jquery mobile. We first configure phonegap, and then:

1. Add the following XML code to androidmanifest. xml:

<supports-screens  android:largeScreens="true"  android:normalScreens="true"  android:smallScreens="true"  android:resizeable="true"  android:anyDensity="true"  />  <uses-permission android:name="android.permission.CAMERA" />  <uses-permission android:name="android.permission.VIBRATE" />  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />  <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />  <uses-permission android:name="android.permission.READ_PHONE_STATE" />  <uses-permission android:name="android.permission.INTERNET" />  <uses-permission android:name="android.permission.RECEIVE_SMS" />  <uses-permission android:name="android.permission.RECORD_AUDIO" />  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />  <uses-permission android:name="android.permission.READ_CONTACTS" />  <uses-permission android:name="android.permission.WRITE_CONTACTS" />  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />   <uses-permission android:name="android.permission.GET_ACCOUNTS" />  

2. SetAndroid: configchanges = "orientation | keyboardhidden" is added to the default activity tag.

 

3. Create an index.html file under/assets/www/directory as follows:

<!DOCTYPE HTML>  

4. Join jquery mobile support, go to its official website download: http://jquerymobile.com/blog/2012/01/26/jquery-mobile-1-0-1-released/#download,

Now the latest stable version is 1.0.1, you can download the zip package containing the desired file, name: jquery.mobile-1.0.1.zip (JavaScript, CSS, and images), and then download the jquery-1.6.4.min.js

Download the package and decompress it. Put jquery.mobile-1.0.1.min.css under the assets/CSS directory, put jquery. mobile-1.0.1.min.js and jquery-1.6.4.min.js under the assets/JS directory.

5.modify index.html

<! Doctype HTML> 

The running result is as follows:

 

Turn: http://www.myexception.cn/android/434545.html

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.