目录：
一、在Aptana 3上安装ADT插件
二、HTML5教程链接集
三、PhoneGap全屏问题
四、PhoneGap后退键和退出问题
五、easeljs demo
六、arctic.js demo
--------------------------------------------------
一、在Aptana 3上安装ADT插件
1. ADT插件的更新网址：
https://dl-ssl.google.com/android/eclipse/
（20150608：或者用http://dl.google.com/android/eclipse/
回避安全连接）
Android ADT必需的Eclipse插件：
更新仓库在Preferrences->Install/Update->Avalable Software Sites中，默认被屏蔽，需要，勾选它，才可以在Help->Install New Software对话框中看到。第一次刷新列表会很慢。
Eclipse Indigo Update Sitehttp://download.eclipse.org/releases/indigoEnabled
(1) Eclipse Java development tools
（在Programming Languages节点下）
(2) Eclipse Web Developer Tools
（在Web, XML, Java EE and OSGi Enterprise Development节点下）
2. 指定Android SDK路径
3. 修改.js默认关联编辑器
Preferences->General->Editors->File Associations
默认改为
JavaScript Source Editor
这是Aptana的默认js编辑器，被WDT的js编辑器覆盖了。
4. 创建Android工程
5. 修改工程属性，增加Web特性
工程->右键->Properties->Project Natures->勾选Web
如果不勾选，Aptana自带的HTML编辑器（非WDT的）的代码提示将失效。
6. 添加phonegap支持
(1) 阅读phonegap教程：http://phonegap.com/start#android
(2) 添加phonegap的库（参考phonegap发布包内的例子），修改AndroidManifest.xml，添加一些固定的文件。
7. 测试html
(1) 创建html和js文件到assets目录
(2) 在打开html编辑器的情况下按Run按钮，打开本地浏览器（而非Android模拟器），进行本地浏览器（FireFox）测试。
(3) 尝试用Android模拟器运行
(4) Aptana 3对js和html的代码提示和调试功能都比较弱，不过比一般的编辑器要好些。
(5) 简单测试例子（修改自minijoe的测试文件
原始链接：
https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations
我添加了touchmove事件监听器以防止触碰屏幕时卡死界面
）
assets\www\clock.js
// Simplified version of MDC clock example; original version was published
// without explicit copyright notice under the MIT license at
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Basic_animations
function clock() {
var now = new Date();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
ctx.save();
ctx.translate(w / 2, h / 2);
var scale = Math.min(w, h) / 400;
ctx.scale(scale, scale);
ctx.beginPath();
ctx.fillStyle = '#325fA2';
ctx.arc(0, 0, 142 + 6, 0, Math.PI * 2, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#ffffff';
ctx.arc(0, 0, 142 - 6, 0, Math.PI * 2, true);
ctx.fill();
ctx.rotate(-Math.PI / 2);
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineWidth = 8;
ctx.lineCap = "round";
// Hour marks
for (i = 0; i < 12; i++) {
ctx.save();
ctx.rotate(i * Math.PI / 6);
ctx.fillRect(110, -2, 10, 4);
ctx.restore();
}
// Minute marks
ctx.lineWidth = 5;
for (i = 0; i < 60; i++) {
if (i % 5 != 0) {
ctx.save();
ctx.rotate(i * Math.PI / 30);
ctx.beginPath();
ctx.moveTo(117, 0);
ctx.lineTo(120, 0);
ctx.stroke();
ctx.restore();
}
}
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr % 12;
// write Hours
ctx.save();
ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min +
(Math.PI / 21600) * sec)
ctx.fillRect(-5, -5, 85, 10);
ctx.restore();
// write Minutes
ctx.save();
ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
ctx.fillRect(-3, -3, 112 + 6, 6);
ctx.restore();
// Write seconds
ctx.save();
ctx.rotate(sec * Math.PI / 30);
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(-30, 0);
ctx.lineTo(83, 0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
ctx.fill();
// outer circle
ctx.beginPath();
ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
ctx.stroke();
ctx.fillStyle = "#555";
ctx.beginPath();
ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
ctx.restore();
}
clock();
setInterval(clock, 1000);
var touches = []
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
console.log("touchmove");
touches = event.touches;
}, false);
assets\www\clock.html
<html>
<head>
<title>Canvsout</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>
AndroidManifest.xml
（
注意：新版本的PhoneGap的AndroidManifest.xml不是这样写的，请参考官网：
）
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.iteye.weimingtom.andhtml"
android:versionCode="1"
android:versionName="1.0" >
<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:resizeable="true"
android:smallScreens="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" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
<uses-sdk android:minSdkVersion="10" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".AndHtmlActivity"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="org.apache.cordova.DroidGap"
android:configChanges="orientation|keyboardHidden"
android:label="@string/app_name" >
<intent-filter>
</intent-filter>
</activity>
</application>
<!--
<uses-sdk android:minSdkVersion="10" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".AndHtmlActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
-->
</manifest>
AndHtmlActivity.java
package com.iteye.weimingtom.andhtml;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
public class AndHtmlActivity extends DroidGap {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/clock.html");
}
}
------------------------------
二、HTML5教程链接集
1. Canvas tutorial - MDN
可能有些内容特定于FireFox，但大部分例子应该也可用于Android手机上（可能需要一些修改，见上）
https://developer.mozilla.org/en/Canvas_tutorial
2. Sony Ericsson WebSDK Packager
PhoneGap官方推荐的工具，提供一个AIR模拟器（需要预先安装AIR运行时）和几个示例（都是基于PhoneGap）
http://developer.sonymobile.com/wportal/devworld/technology/other/web/websdkpackager
3. Cross-platform Development with PhoneGap
webos的官方PhoneGap例子
https://developer.palm.com/content/resources/develop/cross_platform_development.html
4. Web App Samples
Tizen官方提供的开源游戏示例（完整的游戏，比较复杂，有些是基于jquery的，推荐）
https://developer.tizen.org/resources/sample-web-applications
5. Windows Phone界面的网页Demo
http://m.microsoft.com/windowsphone/en-us/demo/default.aspx
6. Getting Started (CSS Tutorial)
MDN的CSS教程
https://developer.mozilla.org/en/CSS/Getting_Started
7. Making Isometric Real-Time Games with HTML5, CSS3 and Javascript
HTML5网页游戏开发
http://shop.oreilly.com/product/0636920020011.do
https://github.com/andrespagella/Making-Isometric-Real-time-Games
8. Arctic.js
http://dev.classmethod.jp/smartphone/as3-like-coding-arctic-js/
https://github.com/DeNADev/Arctic.js
9. ActionScript入門Wiki
关于HTML5 Canvas和第三方JavaScript库的教程（日文）
http://www40.atwiki.jp/spellbound/pages/1779.html
10. Learn HTML5, CSS3, Javascript - video style tutorials | TheCodePlayer
HTML5教程，可观看录像演示
http://www.iteye.com/news/25389
11. HTML5.JP（日文）
12. Construct 2
http://www.scirra.com/construct2
13. 15 Best HTML5 Game Engines
http://webinsightlab.com/technology/15-best-html5-game-engines/
14. EaselJS
http://www.createjs.com/#!/EaselJS
https://github.com/CreateJS/EaselJS/
zoe
精灵导出工具
http://www.createjs.com/#!/Zoe/download
15. Arctic.js
https://github.com/DeNADev/Arctic.js
16. jQuery
17. Underscore.js
18. Moment.js
19. modernizr
----------------------------------
三、PhoneGap全屏问题
在调用loadUrl之前执行：
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
参见：
http://blog.csdn.net/webdisk008/article/details/6701967
http://bbs.phonegapcn.com/thread-989-1-1.html
----------------------------------
（20120731）
四、PhoneGap后退键和退出问题
/**
* @see http://stackoverflow.com/questions/8602722/phonegap-android-back-button-close-app-with-back-button-on-homepage
*/
function onBackKeyDown() {
if($.mobile.activePage.is('#home')){
if (navigator && navigator.app && navigator.app.exitApp) {
console.log('navigator.app.exitApp()');
navigator.app.exitApp();
}
} else {
if (navigator && navigator.app && navigator.app.backHistory) {
console.log('navigator.app.backHistory');
navigator.app.backHistory();
}
}
}
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
五、easeljs demo
<html>
<head>
<!--
http://127.0.0.1:8020/testeaseljs/index.html
-->
<script src="easeljs-0.4.2.min.js"></script>
<script>
function init() {
elementCanvasStage = document.getElementById("canvasStage")
stage = new Stage(elementCanvasStage);
//stage.autoClear = true;
stage.onClick = onStageClick;
var g = new Graphics();
g.setStrokeStyle(1);
g.beginStroke(Graphics.getRGB(255,0,0));
g.beginFill('#CCCCCC');
g.drawRect(0, 0, elementCanvasStage.width, elementCanvasStage.height);
shape = new Shape(g);
shape.x = shape.y = 0;
stage.addChild(shape);
bmp = new Bitmap("images/preview6.png");
stage.addChild(bmp);
bmp.regX = bmp.image.width >> 1;
bmp.regY = bmp.image.height >> 1;
bmp.x = 0;
bmp.y = 0;
bmp.scaleX = -0.5;
bmp.scaleY = 0.5;
bmp.skewX = 90;
bmp.skewY = 90;
text = new Text("", "16px Arial", "#0000FF");
stage.addChild(text);
text.x = 0;
text.y = 0;
text.textBaseline = 'top';
stage.update();
}
function onStageClick(event) {
bmp.x = event.stageX;
bmp.y = event.stageY;
text.text = "onClick:(" + event.stageX + ", " + event.stageY + ")";
stage.update();
}
</script>
</head>
<body onload="init();">
<img src="images/preview6.png" style="display: none; z-index: -1"/>
<canvas id="canvasStage" width="640" height="480"></canvas>
</body>
</html>
六、arctic.js demo
<html>
<!--
http://127.0.0.1:8020/testarcticjs/index.html
-->
<head>
<script src="./arctic.js"></script>
<script>
// see http://blob.geishatokyo.com/archives/103811
function init() {
var Shape = arc.display.Shape;
var Sprite = arc.display.Sprite;
var Class = arc.Class;
var System = arc.System;
var Game = arc.Game;
var Align = arc.display.Align;
var TextField = arc.display.TextField;
var Event = arc.Event;
var system = new System(640, 480, 'canvasStage');
system.setGameClass(Class.create(Game, {
initialize : function(params) {
this.shape = new Shape();
this.addChild(this.shape);
this.shape.beginFill(0xCCCCCC, 1);
this.shape.drawRect(0, 0, 640, 480);
this.shape.endFill();
this.sprite = new Sprite(this._system.getImage('images/preview6.png'));
this.addChild(this.sprite);
this.sprite.setAlign(Align.CENTER);
this.sprite.setScaleX(-0.5);
this.sprite.setScaleY(0.5);
this.sprite.setX(0);
this.sprite.setY(0);
this.sprite.setRotation(90);
this.tf = new TextField();
this.addChild(this.tf);
this.tf.setAlign(Align.TOP_LEFT);
this.tf.setColor(0x000000);
this.tf.setFont('Arial', 16, false);
this.tf.setText('');
this.tf.setX(0);
this.tf.setY(0);
this.addEventListener(Event.TOUCH_END, this.onTouch);
},
update : function() {
},
onTouch : function(event) {
this.sprite.setX(event.x);
this.sprite.setY(event.y);
this.tf.setText('TOUCH_END:(' + event.x + ',' + event.y + ')');
}
}));
system.load(['images/preview6.png']);
}
</script>
</head>
<body onload="init();">
<canvas id="canvasStage">
</canvas>
</body>
</html>
（TODO）
相关推荐
5、配置Eclipse与Android SDK连接 在Eclipse中，选择“Window” -> “Preferences” -> “Android”。在右侧的“SDK Location”中，浏览并选择你之前安装的Android SDK的根目录。点击“Apply”然后“OK”，Eclipse会...
勾选你想要安装的版本，例如Android 4.4（KitKat）或更高版本，以及对应的SDK Platform和System Image。同时，你也可以选择安装其他必要的工具，如Build Tools。点击“Install X packages...”，然后在弹出的对话框...
这篇指南将详细介绍如何在2018年配置基于Windows操作系统的Android开发环境，包括Eclipse IDE、Android Development Toolkit (ADT)、Java Development Kit (JDK) 和 Android Software Development Kit (SDK)。...
在Android应用程序开发中，SDK（Software Development Kit）和ADT（Android Developer Tools）是不可或缺的工具。本资源提供了SDK版本22.6.2和ADT版本22.6.2，这两个组件对于搭建完整的Android开发环境至关重要。...
本文将详细介绍如何安装和配置JDK、Eclipse、Android SDK以及ADT插件。 首先，我们需要安装Java Development Kit (JDK)。JDK是Java编程语言的基础，它包含了编译器、调试器和其他必要的工具，使得开发者能够编写、...
- 也可以选择安装 Android SDK Tools 和 Android SDK Platform-Tools。 ##### 5.4. 配置 Android SDK 环境变量 - 在系统环境变量中新建 `ANDROID_HOME`，变量值为 Android SDK 的安装路径。 - 修改 `Path` 变量，...
而ADT（Android Developer Tools）是集成开发环境（IDE）Eclipse中的一个插件，专门用于Android应用开发，它提供了图形化的用户界面，用于创建、编辑和管理项目，以及调试代码。 Android SDK包括两个主要部分：SDK ...
本文详细介绍了 Android ADT 的安装过程，包括安装 ADT、安装 Android SDK、解决 adb.exe 缺失问题、配置 Eclipse 环境和解决 Android 插件安装问题等方面的内容。通过遵循本文的步骤，可以轻松地安装 Android ADT ...
ADT（Android Development Tools）插件是Eclipse IDE的一个插件，用于简化Android应用程序的开发流程。虽然如今更推荐使用Android Studio，但ADT依然为老项目的维护提供了便利。 #### 八、Android NDK NDK（Native ...
通过SDK Manager，开发者可以选择需要的API级别，安装相应的SDK Platform、SDK Build Tools、Android Emulator等。 2. **SDK Platforms**: 包含了不同版本的Android操作系统，比如Android 2.3 (Gingerbread)到...
总之，配置`Android-64-SDK.rar`与Eclipse的开发环境涉及解压SDK、设置环境变量、集成SDK到Eclipse、安装ADT插件、创建项目、使用AVD管理器以及进行开发和调试。虽然当前Android Studio已成为主流开发工具，但理解这...
打开SDK Manager（在Eclipse的"窗口" -> "Android SDK Manager"），勾选想要的Android版本及其对应的平台工具和build-tools，然后点击“安装包”(Install Packages)按钮进行下载安装。 至此，我们就成功地在Mac ...
在进入Android应用开发的世界之前，首先需要正确地搭建Android SDK 2.3和Eclipse的开发环境。这个过程虽然看似繁琐，但遵循正确的步骤，你可以轻松完成。以下是一份详细的搭建指南，旨在帮助你顺利开始Android编程之...
为了在Eclipse中进行Android应用开发，我们需要安装Android Development Toolkit (ADT) 插件。ADT提供了针对Android开发的集成工具，包括代码编辑、调试、构建和测试等功能。 以下是如何在Eclipse中添加Android ADT...
安装和配置Android-21 SDK后，开发者可以创建AVD来模拟Android 5.0设备，测试应用在不同配置下的行为。此外，利用SDK Manager工具，开发者可以更新SDK组件，获取新版本的API和工具。 总之，"android-21 SDK"对于想...
### Android SDK 下载安装及配置教程 #### 第一步：安装 JDK **背景介绍：** 进行 Android 开发前，首先需要确保 Java 开发工具包 (JDK) 的正确安装。这是因为 Android 开发工具如 Eclipse 和 Android Studio 均...
6. **ADT Bundle**: 虽然现在Google推荐单独下载和管理SDK组件，但在过去，ADT Bundle（Android Developer Tools Bundle）包含了Eclipse IDE和Android SDK，使得开发者可以一站式获取所有必要的开发工具。...
在Windows 10环境下配置JDK（Java Development Kit）、Eclipse集成开发环境以及Android SDK（Software Development Kit）和ADT（Android Development Tools）是进行Java和Android应用开发的重要步骤。以下是详细配置...
在本文中，我们将详细讨论如何在Windows环境下安装Android 2.3.3 SDK，并与Eclipse 3.7.1集成。首先，我们需要确保具备必要的软件环境，即Java Development Kit (JDK)。JDK 1.5及以上版本是安装Android SDK的基础，...