本文详细介绍了在Aptana3上安装ADT插件的方法，并提供了HTML5和PhoneGap开发的相关教程和示例，包括创建Android工程、添加PhoneGap支持、测试html等内容。同时分享了arctic.js和easeljs的使用示例。
目录：
一、在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.youkuaiyun.com/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）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
