fred's world: 十一月 2012

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>