android Html5学习代码

最新推荐文章于 2024-08-23 01:05:47 发布

踏雪羽翼

最新推荐文章于 2024-08-23 01:05:47 发布

阅读量1.3k

点赞数

分类专栏： android 文章标签： android html5 maqetta html5技术 web

本文链接：https://blog.csdn.net/u011324501/article/details/51567435

版权

android 专栏收录该内容

95 篇文章 3 订阅

订阅专栏

1、Android Html5技术的优势
　　1、Html5可以让你摆脱对平台的依赖，用户打开浏览器，直接就可以访问你的应用，而不需要经过各种Store的审核。
　　2、Html5支持音频、视频等多媒体，无需任何插件即可可观看收听。
　　3、用户可以离线使用，更新下载量及少，可以全部更新，也可以选择替换部分文件。
　　4、使用Html5，代码更安全安全。众所周知Web应用有一个很大的开发问题就是代码安全的问题，但现在Android Html5可以将Web代码全部加密，本地应用解密后再运行，大大的提供了代码的安全性。

　　5、Html5可以做到跨平台，多数核心代码不用重写，在许多地方都可以用到，包括移动应用、移动网站、手机网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。减少工作量,便于后期维护。

2、HTML5可视化设计工具：Maqetta。

下载地址：http://www.3987.com/xiazai/2/43/48139.html

Maqetta 是IBM公司在2014年4月发布多的，一个创建桌面和移动用户界面的HTML5设计编辑工具，并同时宣布将项目捐助给开源机构Dojo基金会。Maqetta提供WYSIWYG可视化HTML5用户界面设计功能，仅需简单的拖曳操作，支持桌面和移动用户界面。

Maqetta 只需解压后运行下面文件然后打开：http://localhost:50000/maqetta 就可以注册使用，可以制作简单网页。

3、在eclipse新建工程中将制作好的html网页加到assets文件下：

4、使用webview显示，详细代码如下：

package com.example.webview;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;

public class MainActivity extends Activity {

	private WebView webView;
	private Button button;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		 //实例化WebView对象 
		webView = new WebView(this); 
        //设置WebView属性，能够执行Javascript脚本 
		webView.getSettings().setJavaScriptEnabled(true);    
//        setContentView(webView); 		
		setContentView(R.layout.main);
		webView = (WebView)findViewById(R.id.webview);

        //设置WebView属性，能够执行Javascript脚本 
		webView.getSettings().setJavaScriptEnabled(true);

		button = (Button)findViewById(R.id.button);
		button.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				 try { 
			         //设置打开的页面地址 
			         webView.loadUrl("file:///android_asset/file1.html"); 
			     }catch(Exception ex){ 
		            ex.printStackTrace(); 
		         } 
			}
		});			
		
	}

}

布局代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >


    <Button 
        android:layout_width="fill_parent"
        android:id="@+id/button"
        android:layout_height="wrap_content"/>
    <WebView 
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>
</LinearLayout>

file1代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Untitled</title>
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" data-dojo-config="'parseOnLoad':true,'async':true,'packages':[{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'maqettaSamples','location':'../../../samples'},{'name':'maqetta','location':'../../maqetta'},{'name':'shapes','location':'../../shapes'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}],'themeMap':[['Android','',['themes/android/android.css']],['BlackBerry','',['themes/blackberry/blackberry.css']],['iPad','',['themes/ipad/ipad.css']],['iPhone','',['themes/iphone/iphone.css']],['.*','',['themes/iphone/iphone.css']]],'mblThemeFiles':[],'mblLoadCompatPattern':''"></script>
<script type="text/javascript">
require([
  "dijit/dijit",
  "dojo/parser",
  "maqetta/space",
  "maqetta/AppStates",
  "dojox/mobile",
  "dojox/mobile/deviceTheme",
  "dojox/mobile/Button",
  "dojox/mobile/RadioButton",
  "clipart/StreetMap",
  "dojox/mobile/SpinWheelTimePicker",
  "dojox/mobile/ValuePickerTimePicker",
  "clipart/Computer",
  "clipart/Camera"
]);
</script>
<style>@import "themes/claro/claro.css";@import "app.css";
</style>
<script type="text/javascript" src="app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"></meta>
</head>
<body data-maq-device="androidtablet" data-maq-flow-layout="false" data-maq-comptype="mobile" class="claro" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}">
 <a>
</a>
 <button data-dojo-type="dojox/mobile/Button" id="button" style="position: absolute; z-index: 900; width: 240px; height: 92px; left: 52px; top: 197px;" οnclick="location.href='file2.html'">
   统计表格</button>
 <div data-dojo-type="dojox/mobile/ValuePickerTimePicker" style="position: absolute; z-index: 900; width: 233px; height: 169px; left: 46px; top: 17px;"></div>
 </body>
</html>

file2代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Untitled</title>
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" data-dojo-config="'parseOnLoad':true,'async':true,'packages':[{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'maqettaSamples','location':'../../../samples'},{'name':'maqetta','location':'../../maqetta'},{'name':'shapes','location':'../../shapes'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}],'themeMap':[['Android','',['themes/android/android.css']],['BlackBerry','',['themes/blackberry/blackberry.css']],['iPad','',['themes/ipad/ipad.css']],['iPhone','',['themes/iphone/iphone.css']],['.*','',['themes/iphone/iphone.css']]],'mblThemeFiles':[],'mblLoadCompatPattern':''"></script>
<script type="text/javascript">
require([
  "dijit/dijit",
  "dojo/parser",
  "maqetta/space",
  "maqetta/AppStates",
  "dojox/mobile",
  "dojox/mobile/deviceTheme",
  "dojox/mobile/Button",
  "dojox/mobile/ToggleButton",
  "dojox/mobile/CheckBox",
  "clipart/PlayControl",
  "dojox/mobile/Slider"
]);
</script>
<style>@import "themes/claro/claro.css";@import "app.css";
</style>
<script type="text/javascript" src="app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"></meta>
</head>
<body data-maq-device="android_480x800" data-maq-flow-layout="true" data-maq-comptype="mobile" class="claro" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}">
 <label style="position: absolute; z-index: 900; left: 16px; top: 30px;">
角色列表</label>
 <table border="1" style="border-collapse:collapse;table-layout:fixed;position:absolute;z-index:900;left:16px;top:60px;width:436px;height:151px;">
<colgroup>
     <col></col>
     <col></col>
     <col></col>
   </colgroup>
   <tbody>
     <tr>
       <td>
         选项</td>
       <td>
         爱好</td>
       <td>
         习惯</td>
     </tr>
     <tr>
       <td>
        <input type="checkbox" data-dojo-type="dojox/mobile/CheckBox" style="position: absolute; z-index: 900; left: -1px; top: 55.5px;"></input>
      </td>
       <td>
          </td>
       <td>
          </td>
     </tr>
     <tr>
       <td>
        <input type="checkbox" data-dojo-type="dojox/mobile/CheckBox" checked="true" style="position: absolute; z-index: 900; left: 1px; top: 92.5px;" οnkeyup="davinci.states.setState('Normal')" οnkeydοwn="davinci.states.setState('Normal')"></input>
      </td>
       <td>
          </td>
       <td>
          </td>
     </tr>
     <tr>
       <td>
          <input type="checkbox" data-dojo-type="dojox/mobile/CheckBox" checked="true" style="position: absolute; z-index: 900; height: 19px; width: 19px; left: 1px; top: 122.19999999999999px;"></input>
</td>
       <td>
          </td>
       <td>
          </td>
     </tr>
   </tbody>
 </table>
 <button data-dojo-type="dojox/mobile/Button" style="position: absolute; z-index: 900; left: 36px; top: 287px;" οnclick="location.href='file3.html'">
 添加</button>
 <button data-dojo-type="dojox/mobile/Button" style="position: absolute; z-index: 900; left: 146px; top: 287px; width: 64px; height: 32px;" οnkeydοwn="davinci.states.setState('')">
删除</button>
 </body>
</html>

file3代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Untitled</title>
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" data-dojo-config="'parseOnLoad':true,'async':true,'packages':[{'name':'gridx','location':'../gridx'},{'name':'clipart','location':'../../clipart'},{'name':'maqettaSamples','location':'../../../samples'},{'name':'maqetta','location':'../../maqetta'},{'name':'shapes','location':'../../shapes'},{'name':'zazl','location':'../../zazl'},{'name':'widgets','location':'../../custom'}],'themeMap':[['Android','',['themes/android/android.css']],['BlackBerry','',['themes/android/android.css']],['iPad','',['themes/android/android.css']],['iPhone','',['themes/android/android.css']],['.*','',['themes/android/android.css']]],'mblThemeFiles':[],'mblLoadCompatPattern':''"></script>
<script type="text/javascript">
require([
  "dijit/dijit",
  "dojo/parser",
  "maqetta/space",
  "maqetta/AppStates",
  "dojox/mobile",
  "dojox/mobile/deviceTheme",
  "dojox/mobile/Button"
]);
</script>
<style>@import "themes/claro/claro.css";@import "app.css";
</style>
<script type="text/javascript" src="app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"></meta>
</head>
<body data-maq-device="android_480x800" data-maq-flow-layout="true" data-maq-comptype="mobile" class="claro" data-maq-ws="collapse" id="myapp" data-maq-appstates="{}">
 <select style="width: 159px; position: absolute; z-index: 900; left: 311px; top: 19px;">
<option value="Item 1">
     Item 1</option>
   <option value="Item 2">
     Item 2</option>
   <option value="Item 3">
     Item 3</option>
   <option value="5">
     5</option>
   <option value="6">
     6</option>
   <option value="7">
     7</option>
   <option value="8">
     8</option>
   <option value="9">
     9</option>
 </select>
 <embed src="http://write.blog.csdn.net/postlist"></embed>
 <img></img>
 <button data-dojo-type="dojox/mobile/Button" style="position: absolute; z-index: 900; width: 242px; height: 76px; left: 83px; top: 266px;" οnclick="location.href='file1.html'">
   Button</button>
</body>
</html>

代码下载地址：点击打开链接