android学习笔记之JQueryMobile Demo

今天知道了jQuery UI,原来jQuery UI 非常好,jQuery也并不是在后台js操作dom元素的时候好用,UI也很给力。最近在看android,在了解了jquery UI后顺便也看了看jQuery Mobile,将jQuery Mobile集成到APP中,步骤如下:

在集成过程中参考了http://www.betterbing.net/wp-admin/post-new.php的过程:

第一步: 到http://jquerymobile.com/ 下载最新的 JQuery Mobile的API 包,

第二步: 将下载好的文件解压,放到android项目的assets文件夹中。需要jquery.mobile-1.4.5.min.css,jquery.min.js,jquery.mobile-1.4.5.min.js资源文件

第三步: 在assets文件夹下新建一个sample文件夹。并在sample文件夹中新建一个index.html文件

Page Title

 

Page Title

Page content goes here.

Page Footer



第四步:编辑res/loyout/activity_main.xml





第五步,编辑MainActivity.java的内容如下:

package com.geolo.android;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView mWebView = (WebView)findViewById(R.id.webView01);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.loadUrl("file:///android_asset/sample/index.html");
}
}

最后运行调试就OK了,当然这个只是个最基本的页面,这样做的好处是可以在WebView中引用网页,然后业务展示放到jsp页面中,可以加快开发APP。