於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，再多的話便會有機會出現連線中斷的情況了，這點不太肯定，有錯的請指証。

Open Source Speech Recognition Engines - CMU Sphinx

一直都是寫sharepoint好像有點單調，所以也寫一下其他的文章吧！
最近工作需要關係，要去找一些有關Speech Recognition既open source engine，今天就為大家介紹一下Sphinx。

最新版的Sphinx4是以Java為核心的，比起之前用c++的第1至第3版本用起來容易很多，只要下載整個src，解壓lib的檔案，再行ant就完成基本設定，可以直接行demo了。但之前要編寫model與dictionary等等的過程就難得多了，小弟也在進條階段，有興趣的可以試試下。

參考網址：
http://cmusphinx.sourceforge.net/html/cmusphinx.php

活用DataFormWebpart小技巧 - 製作Archive列表

Sharepoint Designer是一個主要用來編輯網頁layout既工具(雖然個人認為其編輯介面相當不濟)，同時間亦可以插入與Sharepoint相關的用具，如：webpart、sharepoint controls等等
其中一個常用的webpart是DataFormWebpart，多數是用作表列式的去列出List中的資料。今次會做一個簡單的例子，示範如何用DataFormWebpart去製作一個網頁封存(Archive)。

1) 首先打開Data Source Library去選擇想製作Archive的List。

2) 把整個List拖進網頁內，就會出現最簡單的列表，亦是我們最常用的表列功能。

3) 為了讓Archive中能夠以日期(月份+年份)去分類顯示，所以先在List中多加一個Field，叫做ArchiveDate，而ArchiveDate是一個跟據EventDate計算出來的數值，計算方法如圖所示一樣，這樣就會顯示出如Jan04的格式了。

4) 回到網頁內的DataFormWebpart，在Sort and Group中，以ArchiveDate來把資料分組，再以EventDate來作優先排序。

5) 你可以在原始碼中加入()，這樣就可以在每個分組上加上文章的總數。

6) 分組完成後，再在主題上加上連結。

7) 那便大功告成了！

Sharepoint2007 - 自製Sitemap Webpart

小弟最近需要一個sitemap，但在Sharepoint中default的可以調控的選項太少，不太方便，所以直接寫了一個簡單的webpart去把左面navigation清楚的顯示出來。

如何建立webpart在這個post中已經教了大家，所以直接落去code的部份，究竟如何讀取navigation中的項目。

using Microsoft.SharePoint.Navigation;

// get current site info
SPWeb spweb = SPContext.Current.Web;
string spsiteurl = spweb.Url;

// get navigation
SPNavigation nav = spweb.Navigation;
SPNavigationNodeCollection nodeColl = nav.QuickLaunch;
foreach (SPNavigationNode node in nodeColl )
{
output.Write(node .Title+" - "+node .Url);
}

這是最簡單去表列所有node既方法，但是我們還需要管理權限的問題，讓用戶只能去到他所能看到的項目。所以加入了這個function去檢查用家的權限

// function to check if a user has the permission to read this node
private bool canReadNode(SPUser user, SPNavigationNode node)
{
string audience = "";

if (node.Properties["Audience"].ToString().StartsWith(";"))
{
audience = node.Properties["Audience"].ToString().Replace(";;;;", "");
}
else
{
audience = "";
}

if (audience.Equals(""))
{ return true; }
else
{
string[] stringSeparators = new string[] { "," };
String[] groupList = audience.Split(stringSeparators, StringSplitOptions.RemoveEmptyEntries);
foreach (String groupName in groupList)
{
if (bIsInGroup(user, groupName))
{
return true;
}
}
}
return false;
}

//function to check if an user is in a group
private bool bIsInGroup(SPUser user, string strname)
{
try
{
foreach (SPGroup group in user.Groups)
{
if (group.Name == strname)
return true;
}
}
catch (Exception exception)
{
WriteLogEvent(string.Format("An Error Occured | Exception Message:{0} StackTrace: {1}", exception.Message, exception.StackTrace));
}
return false;
}

其實SPNavigationNode還有其他的property如IsExternal與及Children等等，大家有興趣的可以繼續慢慢研究。

Sharepoint 2007 - 自製Webpart上手之路

Webpart是Sharepoint中常用的小模組，功能就像Widgets沒有兩樣，可以用來顯示表單(List)的內容，或是做出不同的小工具快可以。

傳統的編製Webpart方法頗為煩複，由編寫程式、生成dll、插入GAC(global assembly cache)再修改web.config，單看最簡單的Helloworld教程，恐怕也得花你兩三個小時才能學懂。但現在只要用STSDEV (Simple Tools for SharePoint 2007 Development)，一切就會變得簡單快捷。以下就來一個簡單使用教程

1) 首先，到http://www.codeplex.com/stsdev下載主程式(選Binary的就可以直接使用)。
2) 把下載回來的檔案解壓到你的磁碟


3) 打開你的Visual Studio，把STSDEV加入到External Tools中




4) 執行STSDEV，並建立新的webpart的project (如果之前沒有做過key file也可同時在此製作)


5) 打開剛創建了的project，會見到已經有兩個helloworld的webpart準備好了，你可以更改或著加增新的cs，如新增了新的cs file，也請更改一下feature.xml等config file。


6) 寫好了webpart的內容後，在上面點選DebugDeploy做第一次的Deploy，之後要更新的話，選DebugUpgrade就可以了。


7) 最後在你的site collection setting入面新增剛deploy的webpart便大功告成。你可以在webpart選擇畫面中揀選你的webpart了。

順帶一提，一個project是一整個feature，可以在site feature中activate整個feature，而且一個project中可以同時有多個webpart的。STSDEV提供的功能不止這麼簡單，大家試著玩玩吧！就可以發覺可以調教的東西多的事。如果看了以上的內容還未明白的話，還可以到它的網頁中看video。