blog.Ring.idv.tw

JavaScript

用CSS3 Transitions來模擬Path app的選單特效

上圖是Path App for iPhone的選單特效,但其實我並不常用Path... 只是某次同事介紹我使用時,我一直覺得它的選單特效很好玩!

心想應該也可以試著用CSS Transitions模擬出來,那何謂CSS Transitions?從規格書上的解釋:

CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.

也就是說~ 一般我們在設定CSS屬性值之後會立即呈現出效果,而透過CSS Transitions可以讓我們控制該效果要在多久的時間內如何來呈現,所以本文就是用CSS Transitions和一些JavaScript來模擬這個特效,有興趣可以參考下述的程式碼或直接觀看範例:

Demo

Path Menu in CSS3 Transitions

function on(n,angle,delay)
{
	n.style.webkitTransition = "all 150ms linear";
	n.style.webkitTransitionDelay = delay+"ms";
	n.style.webkitTransform = "rotate(-540deg)";
	var sx = radius * Math.cos(angle*(Math.PI/180));
	var sy = radius * Math.sin(angle*(Math.PI/180));
	n.style.left = sx+"px";
	n.style.top = sy+"px";
	var sx2 = sx *0.91;
	var sy2 = sy *0.91;
	sx *= 0.9;
	sy *= 0.9;
	function round2(e)
	{
		e.stopPropagation();
		n.removeEventListener("webkitTransitionEnd",round2,false);	
		n.style.webkitTransition = "all 100ms ease-out";
		n.style.webkitTransform = "rotate(-360deg)";
		n.style.left = sx+"px";
		n.style.top = sy+"px";
		function round3(e)
		{
			e.stopPropagation();
			n.removeEventListener("webkitTransitionEnd",round3,false);	
			n.style.left = sx2+"px";
			n.style.top = sy2+"px";
		}
		setTimeout(function(){
			n.addEventListener("webkitTransitionEnd",round3,false);
		},1);
	}
	n.addEventListener("webkitTransitionEnd",round2,false);
}
function off(n,angle,delay)
{
	n.style.webkitTransition = "all 150ms ease-out";
	n.style.webkitTransform = "rotate(-630deg)";
	var sx = radius * Math.cos(angle*(Math.PI/180));
	var sy = radius * Math.sin(angle*(Math.PI/180));
	n.style.left = sx+"px";
	n.style.top = sy+"px";
	function round2(e)
	{
		e.stopPropagation();
		n.removeEventListener("webkitTransitionEnd",round2,false);	
		n.style.webkitTransition = "all 150ms linear";
		n.style.webkitTransitionDelay = delay+"ms";
		n.style.webkitTransform = "rotate(-900deg)";
		n.style.left = "0px";
		n.style.top = "0px";
	}
	n.addEventListener("webkitTransitionEnd",round2,false);
}

2012-08-27 14:29:03 | Add Comment

The async and defer Script Attributes

上圖是HTML的Parsing Model,從圖中來看較值得注意的即為「Tree Construction」至「Script Execution」這一段,這段的意思是當HTML Parser在剖析HTML syntax並建構DOM (Document Object Model)的時候,若遇到「<script>」時會先暫停手邊的工作,等待執行完該Script之後再繼續Parsing,但是若遇到「<script src="external.js"></script>」時,它則需要等待下載該Script檔案完成後並執行該Script。

根據上述的HTML Parsing Model,我們就不難知道為何有些網頁總是會出現部份內容(或空白),然後可能需要等待一些時間後才會完整呈現,這時候除了調整Script的位置之外,我們還有更好的方式,那就是藉由Script element的「async」或「defer」屬性來加以改善。

Normal execution

<script src="external.js"></script>

這是一般常見的用法,但大多數的時候其實我們並不需要採用此同步的方式來執行

P.S. 一般的內嵌外部廣告仍需要採用此方式,因為它需要同步對DOM進行一些操作,如:document.write()。

Deffered execution

<script defer src="external.js"></script>

採用「defer」的作法,HTML Parser仍會持續進行剖析並建構DOM,但會在背景同時下載external.js,待檔案下載完成且DOM也建構完成之後,按照Script的先後順序依序執行,並發生在DOMContentLoaded事件執行之前,。

Asynchronous execution

<script async src="external.js"></script>

採用「async」的作法和「defer」有點類似,兩者皆不會影響到HTML Parser的進行,但兩者最大的差別在於「async」並不保證Script的執行順序,而是採用先下載完成就先執行的模式,並發生在window's load event執行之前。

參考資源

Running scripts in WebKit

Asynchronous and deferred JavaScript execution explained

2012-06-26 13:21:06 | Add Comment

PhoneGap 1.0.0 for Android

PhoneGap 最初是由「Nitobi」這間位於加拿大的公司在2008年8月所發起的,而到2010年中IBM也開始參與投入研發。它是一套能讓你選擇採用「New BSD」或「MIT」license的Open Source Mobile Framework,它主要的目的在於能讓開發人員透過一些Web技術(HTML+JavaScript)來存取行動裝置的Native API,而且它支援了Android、iOS、Blackberry、WebOS、Windows Phone 7等平台的支援,就在上個月的29日它發佈了PhoneGap 1.0.0。

開發人員只需要撰寫一份HTML+JavaScript的程式,就可以在這些平台上存取這些行動裝置所提供的功能,如:Camera, Compass, Contacts等...,然而為何需要有這個Framework的存在呢?這最大的原因就在於我們現階段仍無法透過Web來存取上述這些裝置功能,而W3C雖然正在針對行動裝置制定標準的Device APIs,不過現階段仍無法透過Web來存取照相機或相簿等功能(Android 3.0將支援Media Capture API),所以你可以將PhoneGap當做是一個「過渡性」的產品,或者等未來Web都已支援這些Native APIs,但卻有一致性或相容性等其它問題時,也許那時PhoneGap仍然是一個好的選擇,這就像是HTML5與Flash現階段的情況,看看Google+首波合作的遊戲商就可以知道了.. 16款遊戲中有15款採用Flash來開發

探討 PhoneGap 1.0.0 for Android

本文並不是一篇教你如何使用PhoneGap建立HelloWorld的無痛上手,而是將深入探討PhoneGap 1.0.0在Android平台上如何扮演Web與Native API之間的橋梁角色,有興趣的朋友請至Github - phonegap下載。

本文會採用Notification.alert這個簡單的API來說明這之間的流程,至於為什麼JavaScript上早已經有alert功能,為何還需要Notification.alert呢?這兩者之間最大的差別就在於Notification.alert可以讓你「客製化」一些資訊,如:標題(title)或按鈕上的文字(buttonLabel)。

下述是PhoneGap所定義的Notification.alert的API

navigator.notification.alert(message, alertCallback, 〔title〕, 〔buttonName〕)

用法如下:

function alertDismissed() {
    // do something
}
navigator.notification.alert(
    'You are the winner!',  // message
    alertDismissed,         // callback
    'Game Over',            // title
    'Done'                  // buttonName
);

JS - Notification.prototype.alert

接著直接將PhoneGap的JS原始碼翻來看(phonegap-1.0.0.js),它會執行「PhoneGap.exec」。

Notification.prototype.alert = function(message, completeCallback, title, buttonLabel) {
    var _title = (title || "Alert");
    var _buttonLabel = (buttonLabel || "OK");
    PhoneGap.exec(completeCallback, null, "Notification", "alert", [message,_title,_buttonLabel]);
};

JS - PhoneGap.exec

這部份就是JavaScript如何和Native API溝通的橋梁,這裡有個「callbackId」,它是由「service name + counter」所組成的,例:Notification2,並以此callbackId為key,以callback funcation為value先暫存在PhoneGap.callbacks的陣列。

PhoneGap.exec = function(success, fail, service, action, args) {
    try {
        var callbackId = service + PhoneGap.callbackId++;
        if (success || fail) {
            PhoneGap.callbacks[callbackId] = {success:success, fail:fail};
        }
        
        var r = prompt(PhoneGap.stringify(args), "gap:"+PhoneGap.stringify([service, action, callbackId, true]));

而重點就在於下面這一行:

var r = prompt(PhoneGap.stringify(args), "gap:"+PhoneGap.stringify([service, action, callbackId, true]));

prompt」?沒錯~ PhoneGap 1.0.0 for Android就是透過JavaScript的「prompt」function將相關參數傳到原生的Java程式中,為何能這樣達成?原因就在於Android所設計的WebView元件,它讓開發人員能夠透過WebChromeClient來自訂JavaScript中的alert, confirm, prompt等功能的處理方式,而上述函式實際傳送到Java中的參數其實就如下圖所示:

DroidGap.java - onJsPrompt

上述所提供的「prompt」實際上就是呼叫DroidGap.java中的「onJsPrompt」函式(line:868),更確切的說「onJsPrompt」是被宣告在GapClient(inner class)中,詳細的細節請參考Source code。

public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

而「onJsPrompt」處理的方式就是先判斷所傳進來的「defaultValue」是否為「gap:」字串開頭,以本文的為例就是將「gap:['Notification','alert','Notification2',true]」進行拆解,再透過「pluginManager.exec」去執行。

if (reqOk && defaultValue != null && defaultValue.length() > 3 && defaultValue.substring(0, 4).equals("gap:")) {
       	JSONArray array;
        try {
        	array = new JSONArray(defaultValue.substring(4));
        	String service = array.getString(0);
        	String action = array.getString(1);
        	String callbackId = array.getString(2);
        	boolean async = array.getBoolean(3);
        	String r = pluginManager.exec(service, action, callbackId, message, async);
        	result.confirm(r);
        } catch (JSONException e) {
        	e.printStackTrace();
        }
}

PluginManager.java

基本上在PhoneGap for Android的原始碼中,它所提供的各式API也都稱為Plugin,意指為:Notification、Compass、Camera..等都稱為Plugin,實際上這些一個個的功能也都繼承於Plugin class(它實作IPlugin介面),所以該PluginManager就是用來管理這些Plugin。

在「pluginManager.exec」的函式中,主要就是取得這些特定的Plugin物件,並透過「plugin.execute」來執行。

PluginResult cr = plugin.execute(action, args, callbackId);  //line:119 in PluginManager.java

Notification.java

由於本文以Notification為例,所以上述函式(plugin.execute)會執行「Notification.execute」。

public PluginResult execute(String action, JSONArray args, String callbackId) {
		PluginResult.Status status = PluginResult.Status.OK;
		String result = "";		
		
		try {
			if (action.equals("beep")) {
				this.beep(args.getLong(0));
			}
			else if (action.equals("vibrate")) {
				this.vibrate(args.getLong(0));
			}
			else if (action.equals("alert")) {
				this.alert(args.getString(0),args.getString(1),args.getString(2), callbackId);
				PluginResult r = new PluginResult(PluginResult.Status.NO_RESULT);
				r.setKeepCallback(true);
				return r;
			}

從「Notification.execute」可以得知,它同時處理了Notification中的「beep」、「vibrate」、「alert」等功能,而實際的「alert」功能實現如下:

public synchronized void alert(final String message, final String title, final String buttonLabel, final String callbackId) {

	final PhonegapActivity ctx = this.ctx;
	final Notification notification = this;
		
	Runnable runnable = new Runnable() {
		public void run() {
	
			AlertDialog.Builder dlg = new AlertDialog.Builder(ctx);
			dlg.setMessage(message);
			dlg.setTitle(title);
			dlg.setCancelable(false);
			dlg.setPositiveButton(buttonLabel, new AlertDialog.OnClickListener() {
				public void onClick(DialogInterface dialog, int which) {
					dialog.dismiss();
					notification.success(new PluginResult(PluginResult.Status.OK, 0), callbackId);
				}
			});
			dlg.create();
			dlg.show();
		};
	};
	this.ctx.runOnUiThread(runnable);
}

實際上透過Android原生的「AlertDialog」來呈現對話框的介面。

至於點擊按鈕之後的callback應用就留待有興趣的朋友自行研究了~ 不過簡單來說它就是透過前端的Ajax(採用Recursive function)不斷地向原生Java中的CallbackServer.java(ServerSocket)請求,若有資訊(callbackId等)就回傳給前端的Ajax。

2011-08-15 22:52:00 | Comments (10)

jQuery Mobile - Adding a swipe to delete button to a listview component

最近試著研究了一下jQuery Mobile,發覺它目前(Beta1)沒有針對listview元件提供Swipe to Delete的效果,還好jQuery Mobile所支援的Touch Event已經包含了Swipe Event,如此~ 雖然官方尚未正式支援該效果,不過我們可以自行手動撰寫出這樣的效果!

下述程式已在iOS和Android行動裝置測試過:

實際測試範例

部分程式

function delItem(e)
{
        $(e).remove();
}
$(function()
{
        $('div').live('pageshow',function(event, ui)
        {
                if ( event.target.id.indexOf('swipedelete') >= 0)
                {
                        $('.aDeleteBtn').remove();
                        $('ul li.t').bind('swipeleft', function(e)
                        {
                                $('.aDeleteBtn').remove();
                        });
                        $('ul li.t').bind('swiperight', function(e)
                        {
                                var $li = $(this);
                                $('.aDeleteBtn').remove();
                                var id = $li.attr('id');
                                var $aDeleteBtn = $("<a href=\'javascript:delItem("+id+")\'>Delete</a>").attr({'class': 'aDeleteBtn ui-btn-up-r'});
                                $li.prepend($aDeleteBtn);
                        });
                }
        });
})

至於Touch-Event有沒有正式規格呢?其實是有的,可以參考W3C - Touch Events Specification,而且iOS 2.0以後早就均支援這些Touch Event(Safari Web Content Guide: Handling Events)

厭倦了針對任一行動平台就需要撰寫特定的程式碼了嗎?如果是的話~ 可以試試jQuery Mobile

參考資源

Adding iPhone style swipe to delete button to a listview component in jQuery Mobile

2011-07-19 15:55:40 | Add Comment

QuickDict - 快速查詢單字的書籤小程式

.2011/08/16 新增「Oxford Advanced Learner's Dictionary」字典
.2011/08/16 新增「Merriam-Webster.com」字典
.2011/08/16 移除「Google」字典
.2009/11/16 移除「Dr.eye」,並改使用「沪江小D」字典
.2009/11/16 新增「Dictionary.com」字典

QuickDict.是一個結合YahooGoogle沪江小DTheFreeDictionary.com等字典的書籤小程式

使用的方式相當簡單,首先進到「QuickDict」的頁面之後,將左上角QuickDict的Bookmarklet加到你的最愛,接下來就可以直接使用了!

使用方式

使用的方式有兩種,第一種是當你在網頁上選取某個英文單字之後,接著點擊這一個「QuickDict書籤]」,該程式就會將您所選取的英文單字,同時傳遞到上述四個網站進行查詢,並透過頁籤的方式呈現。

另一種使用方式則是當您「沒有選取任何單字」時,若是直接點擊此「QuickDict書籤」,此程式會自動提示一個文字輸入框供您輸入單字,按下「Enter」之後就會開始進行查詢。

後記

由於只花了一點時間來完成這個小東西,所以若是有任何問題或建議的話,可以直接留言給我,筆者會加以改善的,謝謝。

P.S. 眼尖的人應該會發現「QuickDict」的「Q」,筆者故意將它反轉 :D

2009-11-01 23:00:13 | Comments (15)

Previous Posts
Copyright (C) Ching-Shen Chen. All rights reserved.

::: 搜尋 :::

::: 分類 :::

::: 最新文章 :::

::: 最新回應 :::

::: 訂閱 :::

Atom feed
Atom Comment