Jquery mobile is famous for the User Interface design and it is easy to use with phonegap. Moreover jquery mobile can provide some default settings on buttons and other stuff which is quite convenient thus in order to ease my works, this time I will try to develop an Android App with phonegap and jquery mobile.
I used Eclipse for this app development. Install one if you don't have it. It is a tool that people normally used for java and Android application development.
Moreover, you have to install the Android plugin for eclipse before you start building the Android app.
Go to ADT Plugin Installation Page to take a look and install the plugin.
After installed the ADT Plugin, restart the eclipse.
Steps to create the simple Android Application:
1) Go to PhoneGap Official Site to download phonegap and go to JqueryMobile Official Site to download the jquery mobile's latest version.
2) First create a new mobile project at eclipse:
File->New->Android Application Project-> Next
Fill in the application name and keep clicking "Next" , you can change some settings if you want. Then click finish.
A Android Project has been created.
Will continue to write this tomorrow, have sacrificed my time to play with Unity 3D (*ノ_<*)
---------------------------------------------------------------------------------
This the second part of creating a simple Android application using cordova/phonegap with the use of jquery mobile.
For part 1, we have create a new Android Project. Now
after created the Android Project in Eclipse and downloaded the latest version of Phonegap (Cordova).
Follow the steps below to start including the cordova into the Android Project:
1. Copy the cordova-2.9.0.jar into the
Android project folder called "libs". This jar located at phonegap2.9.0/lib/android <- this can be replaced with the jar of other application platforms you would like to use
Android project folder called "libs". This jar located at phonegap2.9.0/lib/android <- this can be replaced with the jar of other application platforms you would like to use
2. Next create a folder called "www" under the "assets" folder in the Android project.
3. Then copy the cordova.js file into the "www" folder you created in step 2. This javascript file (js) is located at the same folder of the cordova-2.9.0.jar (i.e. phonegap2.9.0/lib/android)
4. Go to the "src" folder, amend the coding of the MainActivity.java like this:
package com.test1; //This is my package name
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
5. Create a index.html file under the "www" folder, feel free to create the html file~ e.g.
<html>
<body>
<h1>>333333333333333< Here we arE~~~~</h1>
</body>
</html>
After you right clicked the Android project and choose “Run”, you need to choose the device or emulator to deploy the application. Then after the application have been deployed to the devices or emulator, you should see the android emulator or your phone is showing the screen like this:
o(>▽<)o
Cheers~
No comments:
Post a Comment