Android(安卓)Platform 3.0 SDK和Eclipse ADT安装记录五
目录：
一、在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_animationsfunction 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不是这样写的，请参考官网：
http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
）
<?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://thecodeplayer.com/
http://www.iteye.com/news/25389
11. HTML5.JP（日文）
http://www.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
http://jquery.com/
17.Underscore.js
http://underscorejs.org/
18.Moment.js
http://momentjs.com/
19.modernizr
http://modernizr.com/
----------------------------------
三、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）
更多相关文章
- 32位Ubuntu10.04上编译Android2.3
- Android(安卓)Studio使用教程（二）
- android开发工具简介及下载地址
- Android(安卓)2.3.3 SDK 源代码关联Eclipse
- Android开机画面修改
- 编译Android(安卓)VNC Server
- fedroa16 编译android 4.0.1
- -Android数据库SQLiteDatabase的使用
- RxJava教程（四）在Android中使用RxJava