fred's world

2012年11月2日星期五

phonegap-splashscreen

其实就是自定义一个启动页面，不顾完全可以不用这么做，MainActivity就可以充当启动页面来做，这个是官方的例子就顺便学习一下。同时这里也有延迟加载的例子。

<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
//navigator.splashscreen.show();
navigator.splashscreen.hide();
}
</script>
</head>
<body>
<h1>Example</h1>
</body>
</html>

package com.fanfq.phonegap.splashscreen;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// The first line 'super.setIntegerProperty' sets the image to be
// displayed as the splashscreen. If you have named your image anything
// other than splash.png you will have to modify this line. The second
// line is the normal 'super.loadUrl' line but it has a second parameter
// which is the timeout value for the splash screen. In this example the
// splash screen will display for 10 seconds. If you want to dismiss the
// splash screen once you get the "deviceready" event you should call
// the navigator.splashscreen.hide() method.
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 10000);
}
}

phonegap-event

监听各类事件，我用的是phonegap2.0.0的版本，越高级的版本支持功能就越多。

<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
// details plz see http://docs.phonegap.com/en/2.0.0/cordova_events_events.md.html#Events
document.addEventListener("deviceready", onDeviceReadyEvent, false);
document.addEventListener("pasue", onPasueEvent, false);
document.addEventListener("resume", onResumeEvent, false);
document.addEventListener("online", onlineEvent, false);
document.addEventListener("offline", offlineEvent, false);
document.addEventListener("backbutton", onBackbuttonEvent, false);
document.addEventListener("batterycritical", onBatterycriticalEvent, false);
document.addEventListener("batterylow", onBatterylowEvent, false);
document.addEventListener("batterystatus", onBatterystatusEvent, false);
document.addEventListener("menubutton", onMenubuttonEvent, false);
document.addEventListener("startcallbutton", onStartcallbuttonEvent, false);
document.addEventListener("volumedownbutton", onVolumedownbuttonEvent, false);
document.addEventListener("volumeupbutton", onVolumeupbuttonEvent, false);
// Cordova is ready
//
function onDeviceReadyEvent() {
$("#msg").append("==>onDeviceReadyEvent<p/>");
}
function onPasueEvent() {
$("#msg").append("==>onPasueEvent<p/>");
}
function onResumeEvent() {
$("#msg").append("==>onResumeEvent<p/>");
}
function onlineEvent() {
$("#msg").append("==>onlineEvent<p/>");
}
function offlineEvent() {
$("#msg").append("==>offlineEvent<p/>");
}
function onBackbuttonEvent() {
$("#msg").append("==>onBackbuttonEvent<p/>");
}
function onBatterycriticalEvent() {
$("#msg").append("==>onBatterycriticalEvent<p/>");
}
function onBatterylowEvent() {
$("#msg").append("==>onBatterylowEvent<p/>");
}
function onBatterystatusEvent() {
$("#msg").append("==>onBatterystatusEvent<p/>");
}
function onMenubuttonEvent() {
$("#msg").append("==>onMenubuttonEvent<p/>");
}
function onStartcallbuttonEvent() {
$("#msg").append("==>onStartcallbuttonEvent<p/>");
}
function onVolumedownbuttonEvent() {
$("#msg").append("==>onVolumedownbuttonEvent<p/>");
}
function onVolumeupbuttonEvent() {
$("#msg").append("==>onVolumeupbuttonEvent<p/>");
}
</script>
</head>
<body>
<h1>Event Example</h1>
<div id="msg"></div>
</body>
</html>

2012年11月1日星期四

phonegap-notification

phonegap notification 的sample有点坑爹哇，与想象的有点差距其实就是个弹出对话框。
如图：

<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
// Empty
}
// alert dialog dismissed
function alertDismissed() {
// do something
}
// Show a custom alertDismissed
//
function showAlert() {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}
</script>
</head>
<body>
<p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>
</body>
</html>

2012年10月25日星期四

cocos2d就不多介绍了，下载地址 http://www.cocos2d-x.org/ 当前最高的版本是2.0.3支持了ios6的新特性。

安装cocos2dx，

fanfq-macbook:Downloads fanfangqing$ cd cocos2d-2.0-x-2.0.3
fanfq-macbook:cocos2d-2.0-x-2.0.3 fanfangqing$ ls
AUTHORS create-blackberry-project.vbs
CHANGELOG document
CocosDenshion extensions
README.mdown external
build-win32.bat install-templates-msvc.bat
cocos2d-win32.vc2008.sln install-templates-xcode.sh
cocos2d-win32.vc2010.sln licenses
cocos2d-win32.vc2012.sln make-all-linux-project.sh
cocos2dx samples
create-android-project.bat scripting
create-android-project.sh template
create-blackberry-project.sh tools
fanfq-macbook:cocos2d-2.0-x-2.0.3 fanfangqing$ sudo ./install-templates-xcode.sh
Password:
cocos2d-x template installer

Installing Xcode 4 cocos2d-x iOS template
----------------------------------------------------

...creating destination directory: /Users/fanfangqing/Library/Developer/Xcode/Templates/cocos2d-x/
...copying cocos2d files
...copying CocosDenshion files
...copying extension files
...copying template files
done!

Installing Xcode 4 Chipmunk iOS template
----------------------------------------------------

...copying Chipmunk files
done!

Installing Xcode 4 Box2d iOS template
----------------------------------------------------

...copying Box2D files
done!

Hello World for IOS

打开xocde创建新的工程，会发现左边多了一个cocos2dx的选项。

创建一个HelloCocos2d工程，run