Post something

於Sharepoint中使用window.onload

window.onload是很多developer常用的技巧，在網頁載入完畢後去執行javascript。
你可能試過用相同的方法，於 tag中寫了window.onload 的function，好像這樣
window.onload = function(){
alert('Window is onload!!');
}
但在網頁載入完成後，卻沒有觸發到event，為什麼會這樣的呢？
原因是在 tag內有這個
onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();"

那麼當你需要加window.onload function時要怎辦？
其實_spBodyOnLoadWrapper這個function會執行Arry _spBodyOnLoadFunctionNames中的function

例子：
fucntion runMeDuringOnload(){
alert('I am onload');
}
_spBodyOnLoadFunctionNames.push('runMeDuringOnload');
這樣就能執行

網頁開發好幫手 - Firebug ，簡易使用教程

什麼是Firebug？
Firebug是Firefox的一個附加元件(plug-in)，有著很多強大的功能，特別有助於網頁的開發。

如何安裝Firebug？
先到Firefox的附加元件下載頁，搜尋Firebug就能輕易找到。

安裝完成後，可以於右下角找到一個「曱甴」的圖示，按下就能開啟Firebug的介面。開啟所有項目。(Cookie是另一附加元件的選項 - FireCookie)

開啟完成後，你就可以體驗到Firebug的強大功能了。

Firebug有什麼功能呢？
1 - 網頁瀏覽速度一目了然
先選取「網路」(Net)，每一個HTML Request的大小、存取時間、標頭(Header)甚至回應(Response)的內容也能一覽無遺。讓你可以準備知道要求(Request)是否成功發出，與及能網頁瀏覽時速度的樽頸位置。


2 - 直接執行Javascript指令
選擇「主控台」(Console)，就能看到Firebug的log，當中包括了Javascript的exception與及其他重要資料。同時，在下方可以鍵入你想執行的Javascript指令，方便於瀏覽網頁過程中進行測試。


3 - 觀察網頁內容
先選取「觀察」，再把滑鼠移至網頁內，下面的html原始碼會標亮相應內容，令你能即時知道該部份的原始碼，方便修改。同時，右方的樣式(style)會顯示該部份受影響的css style(包括被override)，令你清楚每個字、每一個table的style是怎樣形成。


4 - 網頁內容即時修改功能
在觀察的過程中，在html原始碼上右鍵，選擇「編輯html」或在原始瑪上連按左鍵，就能對該部份作出修改，效果亦會即時在瀏覽器上出現，當然這不會影響原檔案。

你亦可對樣式(style)進行修改，或是暫時關閉某些樣式的設定，同樣效果也是即時在瀏覽器上出現。


5 - 設立script中斷點
先選擇「Script」，在原始碼左邊點擊來設立中斷點，以後再使用各樣trace功能來debug。


6 - 詳列DOM內容
先選擇「DOM」，就能看到現有網頁內各DOM的情況。


Firebug功能實在非常強大，靈活運用幾乎能解決大部份遇到的frontend編程問題。

還有什麼有關Firebug的資訊？
其實Firebug已經開返了非Firefox使用的版本名叫「Firebug Lite」
http://getfirebug.com/lite.html
另外，你可以安裝其他Firefox元件來加強Firebug的功能，例如：FireCookie，可以讓你即時觀察現處網頁的Cookie與及進行修改。


快來試一試，你就會知道網頁開發並不是什麼難事。

繪製Sharepoint表單(List)的圖表(Chart)

在Sharepoint中可以用Excel service來製作圖表，但是資料來源卻不能是Sharepoint中的表單，市面上有不少的webpart配以flash來做到，但是要有質素的就要付錢，不用錢的質素卻令人卻步，加上用上他人的flash來製作，限制很大，不容易修改。

簡單講解整個流程
1) 利用ajax call Sharepoint web service來提取表單的內容。
2) 將內容編輯成所需要的格式
3) 使用javascript library Flotr 去繪畫圖表


在看了 http://darrenjohnstone.net/2007/06/15/drawing-charts-in-office-live/ 中的做法之後，得到了一點啟發，就是利用ajax與Sharepoint SOAP的web service去提取表單資料，但這示範中的後段部份是用flash，難易控制外觀，加上xslt transform真的不易處理，所以放棄了後面的部份，而只使用前段利用web service去提取資料的部份。

以下是這段source code的中心，簡單的示範如何去用ajax call sharepoint web service，只要明白這個部份，基本上就可以利用web service去做更多效果。

// Gets all of the list items in a specified list and view
// Params:
// list: list name
// view: view name
// columns: an array of column names in the view to retrieve
//
// Returns:
// The response XML from lists.asmx-->GetListItems or null on an error
this.getListItems = function(list, view, columns)
{
var a = new ActiveXObject("Microsoft.XMLHTTP");
var cols = "";
if(a == null) return null;
for (var i = 0; i < name="'">";
}
cols += "";

a.Open("POST", this.getRootUrl() + "_vti_bin/Lists.asmx", false);
a.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
a.setRequestHeader("SOAPAction", "http://schemas.microsoft.com/sharepoint/soap/GetListItems");
var d = ''
+ ""
+ ""
+ ""
+ "" + list + "";

if (view != "")
 d += "" + view + "";
d += "" + cols + ""
+ ""
+ ""
+ "";
a.Send(d);

if (a.status != 200)
 return null;
else
 return a.responseXML;
}

這一段就是利用ajax call的部份，值得留意的是firefox與其他非IE瀏覽器並不支援Microsoft.XMLHTTP 的，所以我使用了XMLHttpRequest來取代，讀取回來的是xml格式的表單數據，所以下一部份就是要在xml提取所需要的資料了。

未完待續...

Google Chrome 帶你進入3D既網上世界

Google又有搞作，安裝Google Chrome with 3D之後，再配戴3D眼鏡，你就可以睇到3D既網頁啦。
http://www.google.com/intl/en/landing/chrome/cadie/

Javascript原來可以這樣玩…

今日在網上看了一篇文章，原來Javascript可以做出這樣不可思議的效果
請看看以下這圖，這個波能在視窗中自由穿梭，視窗數量、大小、位置都可以自由控制，而且還與用家的行動同步，即是你可以去改變視窗，與此同時波可以繼續走，看著它感到有點不可思議。



快到以下連結試試看~
http://experiments.instrum3nt.com/markmahoney/ball/#

Cookies的容量限制

想過試用著cookies去記錄用戶的操作模式(user behavior)，但用的時候卻發覺cookies可接納的容量太少了，想多存一點資料的話看來不能由cookies入手。
Cookies的限制有多少？大致如下
1) 每個domain只可以儲20個cookies
2) 每個cookies的size只有4k

Firefox的限制似乎更大，一個domain的cookies總容量大約只有10k，再多的話便會有機會出現連線中斷的情況了，這點不太肯定，有錯的請指証。