html5開發android應用

作爲非常看好未來手機網絡的我，也在一直研究Android平臺的應用的開發，也許是因爲自己更熟悉HTML及CSS、JS，並受到之前使用HTML和VC開發程序的影響，我也更願意使用HTML來做Android程序的UI….

在開發《華夏風雲》遊戲的時候，使用了基於Google Gear插件來做了很多離線應用，可惜Gear已經不在更新開發，被HTML5取代。下面介紹基於HTML 5 的Web 應用程序的本地存儲，不再廢話，例子說明一切。

HTML5讓我興奮，因爲它可以將桌面應用程序功能帶入瀏覽器中。但在國內，看着到處橫行的IE8版本以下的瀏覽器，覺得到能大規模使用HTML5技術的那天，還遙遙無期。但面對iOS及Android等平臺的手機用戶越來越多，基於Webkit內核的移動瀏覽器一定能讓HTML5先大規模應用起來。這將對對移動 Web 應用程序開發具有重大影響。

一、離線應用緩存 HTML 5 Offline Application Cache

如果在Apache下添加：

`1`	`AddType text/cache-manifest manifest`

如果爲Nginx，在添加：

`1`	`text/cache-manifest manifest;`

或者通過動態程序生成：

`1`	`header('Content-type: text/cache-manifest; charset=UTF-8');`

在服務器上添加MIME TYPE支:text/cache-manifest

新建清單文件 manifest

`01`	`CACHE MANIFEST`

`02`	`# This is a comment.`

`03`	`# Cache manifest version 0.0.1`

`04`	`# If you change the version number in this comment,`

`05`	`# the cache manifest is no longer byte-for-byte`

`06`	`# identical.`

07

`08`	`/app/static/default/js/models/prototype.js`

`09`	`/app/static/default/js/controllers/init.js`

10

`11`	`NETWORK:`

`12`	`# All URLs that start with the following lines`

`13`	`# are whitelisted.`

14

`15`	`http://a.com/`

16

17 CACHE:

`18`	`# Additional items to cache.`

`19`	`/app/static/default/images/main/bg.png`

20

`21`	`FALLBACK:`

`22`	`demoimages/ images/`

建立manifest文件之後，需要在HTML文檔中聲明：
聲明清單文件 manifest

    <!doctype html>   <html manifest="notebook.manifest">       <head>           <meta charset="UTF-8" />     <meta name = "viewport" content = "width = device-width, user-scalable = no">           <title>NoteBook</title>       </head>       <body>       </body>   </html>

創建 NAME.manifest:
給 <html> 標籤加 manifest 屬性：

二、Key-Value Storage

三、Using the JavaScript Database

四、Android下使用WebView來做基於HTML5的App

見如下AndroidManifest.xml

`01`	`< ?xml` `version="1.0"` `encoding="utf-8"?>`

`02`	`<manifest` `android:versionName="1.0"` `android:versionCode="1"` `package="com.xinze.joke"` `xmlns:android="http://schemas.android.com/apk/res/android">`

`03`	`<application` `android:label="@string/app_name"` `android:icon="@drawable/icon">`

`04`	`<activity` `android:label="@string/app_name"` `android:theme="@android:style/Theme.NoTitleBar"` `android:configChanges="orientation\|keyboardHidden\|navigation"` `android:name=".Joke">`

`05`	`<intent` `-filter="">`

`06`	`<action` `android:name="android.intent.action.MAIN">`

`07`	`<category` `android:name="android.intent.category.LAUNCHER">`

`08`	`</category></action></intent>`

`09`	`</activity>`

`10`	`</application>`

`11`	`<uses` `android:name="android.permission.INTERNET"` `-permission="">`

`12`	`</uses></manifest>`

注意：

`1`	`<uses` `android:name="android.permission.INTERNET"` `-permission=""></uses>`

，允許網絡應用，必須！！

Android主程序代碼：

001 package com.xinze.joke;

002

003 import android.app.Activity;

004 import android.app.AlertDialog;

005 import android.app.AlertDialog.Builder;

006

007 import android.content.DialogInterface;

008

009 import android.os.Bundle;

010 import android.view.KeyEvent;

011 import android.view.View;

012 import android.view.Window;

013 import android.view.WindowManager;

014 import android.webkit.JsPromptResult;

015 import android.webkit.JsResult;

016 import android.webkit.WebChromeClient;

017 import android.webkit.WebView;

018 import android.webkit.WebViewClient;

019

020 import android.webkit.WebStorage ;

021

022 public class Joke extends Activity {

023

024 /** Called when the activity is first created. */

025 @Override

026 public void onCreate(Bundle savedInstanceState) {

027 super.onCreate(savedInstanceState);

028

029 final WebView wv = new WebView(this);

030

031 // 覆蓋默認後退按鈕的作用，替換成WebView裏的查看歷史頁面

032 wv.setOnKeyListener(new View.OnKeyListener() {

033

034 @Override

035 public boolean onKey(View v, int keyCode, KeyEvent event) {

036 if (event.getAction() == KeyEvent.ACTION_DOWN) {

037 if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {

038 wv.goBack();

039 return true;

040 }

041 }

042 return false;

043 }

044 });

045

046 // 設置支持Javascript

047 wv.getSettings().setJavaScriptEnabled(true);

048

049 wv.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

050 wv.getSettings().setDatabaseEnabled(true);

051 wv.getSettings().setDatabasePath("/data/data/com.xinze.joke/databases");

052

053 // 創建WebViewClient對象

054 WebViewClient wvc = new WebViewClient() {

055

056 @Override

057 public boolean shouldOverrideUrlLoading(WebView view, String url) {

058 wv.loadUrl(url);

059 // 記得消耗掉這個事件。給不知道的朋友再解釋一下，Android中返回True的意思就是到此爲止吧,事件就會不會冒泡傳遞了，我們稱之爲消耗掉

060 return true;

061 }

062 };

063

064 // 設置WebViewClient對象

065 wv.setWebViewClient(wvc);

066

067 // 創建WebViewChromeClient

068 WebChromeClient wvcc = new WebChromeClient() {

069

070 // 處理Alert事件

071 @Override

072 public boolean onJsAlert(WebView view, String url, String message,final JsResult result) {

073 // 構建一個Builder來顯示網頁中的alert對話框

074 Builder builder = new Builder(Joke.this);

075 builder.setTitle("笑死不償命");

076 builder.setMessage(message);

077 builder.setPositiveButton(android.R.string.ok,new AlertDialog.OnClickListener() {

078 @Override

079 public void onClick(DialogInterface dialog, int which) {

080 result.confirm();

081 }

082 });

083 builder.setCancelable(false);

084 builder.create();

085 builder.show();

086 return true;

087 }

088

089 // 處理Confirm事件

090 @Override

091 public boolean onJsConfirm(WebView view, String url, String message,final JsResult result) {

092 Builder builder = new Builder(Joke.this);

093 builder.setTitle("刪除確認");

094 builder.setMessage(message);

095 builder.setPositiveButton(android.R.string.ok,new AlertDialog.OnClickListener() {

096

097 @Override

098 public void onClick(DialogInterface dialog, int which) {

099 result.confirm();

100 }

101

102 });

103 builder.setNeutralButton(android.R.string.cancel,new AlertDialog.OnClickListener() {

104

105 @Override

106 public void onClick(DialogInterface dialog, int which) {

107 result.cancel();

108 }

109

110 });

111 builder.setCancelable(false);

112 builder.create();

113 builder.show();

114 return true;

115 }

116

117 // 處理提示事件

118 @Override

119 public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,

120 JsPromptResult result) {

121 // 看看默認的效果

122 return super.onJsPrompt(view, url, message, defaultValue, result);

123 }

124

125 @Override

126 public void onExceededDatabaseQuota(String url, String

127 databaseIdentifier, long currentQuota, long estimatedSize, long

128 totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {

129 quotaUpdater.updateQuota(204801);

130 }

131

132 };

133

134 wv.loadUrl("http://192.168.1.14/index.html");

135

136 // 設置setWebChromeClient對象

137 wv.setWebChromeClient(wvcc);

138 setContentView(wv);

139 }

140 }

使用 JavaScript Database 的時候，需要特別注意：setDatabaseEnabled 以及 onExceededDatabaseQuota

轉自：http://www.lchots.com/html/2012/html5gj_0822/641.html

html5開發android應用

地圖座標

第二章 Go 編程環境

Tapestry 最新版5.1.0.5教程（十二）：自定義前綴prefix

html5開發android應用

Tapestry最新版5.1.0.5教程（八）：權限控制框架的實現-基礎篇

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結