2009/07/01 volume 10 issue 10

千格科技電子報 10
第 期

編輯的話

大家好，我是艾瑞克。又到了本期電子報發刊的時間囉。
如果你問我，最近最紅的網路服務是甚麼，艾瑞克一定不加思索的告訴你：
Plurk (噗浪)。這種一次僅能發布140 字的微網誌真的有很大的魅力，讓艾瑞克身邊的
客戶朋友們都一一加入了Plurk的行列。偶爾上去看看朋友們的動態和喃喃自語，其實
也是一種舒壓的管道唷。

這一期的征服程式碼，除了針對Notes的應用之外，我們也開始準備了一些Web
開發應用上會時用到的技巧。像是Javascript的應用等，如果你對於Web 的開發有興
趣的話，也請您繼續關注千格電子報所提供的豐富內容。

那麼，就讓我們開始這一期的內容吧！如果各位對於千格電子報有任何的批評指
教，都歡迎寫信至epaper@softwork.com.tw，我們誠摯歡迎您的意見與回饋！謝謝。

千格電子報 總主筆 艾瑞克

您可以在網路上閱讀這份電子報 http://qp8.softwork.com.tw/epaper
 2009/07/01 volume 10 issue 10

征服程式碼 – 活用 Notes 活動外框

Lotus Notes 的外框簡單好用，但可惜他是固定的，如果像是文件圖書館這種可能隨著

文件的增多而需要更多的視界來檢視各個分類的時候，就需要活動式的外框了，下面提
供一個簡單的程式來說明如何新建視界與外框來達到這個需求。

想要能增加更多的視界來檢索需要的文件，第一步當是就是先建立一個新視界，當然一
般使用者是無法變更設計的，所以我們可以在存檔的時候加上一段程式碼來讓一般使用
者也可以建立新的視界。

在這之前我們需要一個範本視界來做為新建視界的參考如色調、樣式顯示欄位等等，假
設我們已先經建好一個範本視界，我們只要先取得這個視界就能以這個視界為範本來建
立新視界，再來只要透過NotesDatabase.CreateView就可以建立新視界了。

接下來就是新增加一個項目給外框，利用NotesOutlineEntry 的SetNamedElement 就可
以達成我們的目標，若要移除這個項目，一樣可以透過NotesOutlineEntry 的
RemoveEntry來達成，以下是一個簡單的範例程式：

Option Public

Dim db As NotesDatabase
Dim Outline As NotesOutline
Sub Initialize
On Error Goto errhandle

Dim ws As New NotesUIWorkspace

Dim ss As New NotesSession

Dim vw As NotesView
Dim tmpvw As NotesView
Dim uidoc As NotesUIDocument
Dim doc As NotesDocument

Set db = ss.CurrentDatabase
Set tmpvw = db.GetView( "SW_ByCategoryTemplete" )

P2
 2009/07/01 volume 10 issue 10

Set uidoc = ws.CurrentDocument

Set doc = uidoc.Document

Dim AllCategories As Variant

Dim Categories As Variant
Redim AllCategories( Ubound( doc.GetItemValue( "AllCategories" ) ) )
Redim Categories( Ubound( doc.GetItemValue( "Categories" ) ) )
AllCategories = doc.GetItemValue( "AllCategories" )
Categories = doc.GetItemValue( "Categories" )

Dim i As Integer
For i = 0 To Ubound( Categories )
Set vw = db.GetView( "SW_" & Categories( i ) )
If vw Is Nothing And Categories( i ) <> "" Then
Set Outline = db.GetOutline( "SW_DocLibOutline" )
Call db.CreateView( "SW_" & Categories( i ) , , tmpvw , 1 )
Call CreateOutlineEntry( Categories( i ) )
End If
Next

Dim RemoveCategories As Variant

RemoveCategories = Fulltrim( Arrayreplace( AllCategories , Categories , "" ) )
Redim Preserve RemoveCategories( Ubound( RemoveCategories ) )
For i = 0 To Ubound( RemoveCategories )
Set vw = db.GetView( "SW_" & RemoveCategories( i ) )
If Not vw Is Nothing And RemoveCategories( i ) <> "" Then
Set Outline = db.GetOutline( "SW_DocLibOutline" )
Call vw.Remove
Call RemoveOutlineEntry( RemoveCategories( i ) )
End If
Next

Exit Sub
errhandle:
Msgbox "Initialize Error: " & Error & "(" & Erl & ")"
Print "Initialize Error: " & Error & "(" & Erl & ")"

P3
 2009/07/01 volume 10 issue 10

End Sub

Sub CreateOutlineEntry( Category As String )

On Error Goto errhandle

Dim oe As NotesOutlineEntry

Set oe = Outline.CreateEntry( Category , oe , 1 , 0 )

oe.FrameText = "NotesView"

Call oe.SetNamedElement( db , "SW_" & Category , OUTLINE_CLASS_VIEW )

Call Outline.Save
Exit Sub
errhandle:
Msgbox "CreateOutlineEntry Error: " & Error & "(" & Erl & ")"
Print "CreateOutlineEntry Error: " & Error & "(" & Erl & ")"
End Sub
Sub RemoveOutlineEntry( RemoveCategory As String )
On Error Goto errhandle

Dim removeoe As NotesOutlineEntry

Set removeoe = Outline.GetFirst()

Do Until removeoe Is Nothing
If RemoveCategory = removeoe.Label Then
Call Outline.RemoveEntry( removeoe )
Call Outline.Save
End If
Set removeoe = Outline.GetNext( removeoe )
Loop

Exit Sub
errhandle:
Msgbox "RemoveOutlineEntry Error: " & Error & "(" & Erl & ")"
Print "RemoveOutlineEntry Error: " & Error & "(" & Erl & ")"
End Sub

P4
 2009/07/01 volume 10 issue 10

Web應用程式碼技巧 -
利用JavaScript 來達到網頁動畫效果
在WEB2.0的概念普遍被接受後，許多網頁已經採用AJAX等技術來達成區塊式的網頁
設計。因此，許多網站就開始增加一些動態的效果。雖然這些效果在網頁的讀取及效
能沒有顯著的幫助，在閱讀上卻可以使內容或各個功能更具生動。

但是由於網頁仍是文件的關係，在效果設計上仍有許多限制，例如無法旋轉、內容無
法自由縮放、無法輕易製作圓形(角)的邊界…等等。本篇文章以IE為例，將先闡述相關
的概念後再講述如何達到簡易的網頁動畫效果。

相關議題1 - 如何計算"真正的"座標位置

我們在JavaScript常用style中的width/height及left/top來計算網頁物件的寬/高及X/Y座
標，但這個方式只有在position屬性是絕對定位及物件沒有被包覆在其他物件中的情況
下才可以使用。因此我們會採用JavaScript提供的offsetLeft等屬性來取得真正的位置，
並利用迴圈來加總相對於頁面中的真正座標。

function getLeftPos(targetElement)
{
var returnValue = targetElement.offsetLeft;

while((targetElement = targetElement.offsetParent) != null){

returnValue += targetElement.offsetLeft;
}
return returnValue;
};

上面的程式碼是在以迴圈計算網頁物件(targetElement)真正的X標，透過迴圈直到
(targetElement = targetElement.offsetParent) != null 條件成立為止(沒有其他的母物
件)，一路加總X座標的數值。

P5
 2009/07/01 volume 10 issue 10

相關議題2 -如何取得網頁中最上層的深度值

這個議題的作法相當簡單，只要以DOM的 document.getElementsByTagName(“*”) 來
抓取所有的網頁物件，再取得最大數值就可以達成。請參考下方程式碼。

function getMaxZIndex()
{
var ElementList = document.getElementsByTagName("*");
var Result = 0;
for(var i = 0;i < ElementList.length;i++)
{
if(parseInt(ElementList.item(i).style.zIndex) > Result)
{
Result = parseInt(ElementList.item(i).style.zIndex);
}
}
return Result;
}

P6
 2009/07/01 volume 10 issue 10

相關議題3- 網頁中的時間軸

有用過Flash的人都知道，Flash非常容易製作時間軸動畫，透過關鍵影隔的長度以及變
形的設計，就可以做出隨時間變化的漸進動畫。然而在網頁中，我們必須自行觸發計
時器並撰寫漸進變化效果的程式碼。

var AA_UTP_HR_Temp_Timmer;
var AA_UTP_HR_Temp_Element;
function AA_UTP_HR_RUN(EndHeight , AnimeSpeed)
{

if(parseInt(AA_UTP_HR_Temp_Element.currentStyle["height"] , 10)
+ AnimeSpeed >= EndHeight)
{
AA_UTP_HR_Temp_Element.style.height = EndHeight + "px";
window.clearTimeout(AA_UTP_HR_Temp_Timmer);
return;
}

AA_UTP_HR_Temp_Element.style.height =
parseInt(AA_UTP_HR_Temp_Element.currentStyle["height"] , 10) +
AnimeSpeed;
AA_UTP_HR_Temp_Timmer =
window.setTimeout("AA_UTP_HR_RUN(" + EndHeight + "," +
AnimeSpeed + ");",1);

上面這段程式就是在使目標物件 var AA_UTP_HR_Temp_Elemen 每一個固定時間

(AnimeSpeed)產生高度增加10Px的漸進動畫。當本次變形尚未抵達目標值EndHeight
時，會繼續建立Timeout的觸發，否則就將計時器移除。

P7
 2009/07/01 volume 10 issue 10

相關議題4-JavsScript的物件導向寫法
雖然JavaScript並非物件導向程式語言，但是仍可用一些技巧來達成類似的效果。但是
然只能達到"物件化"的效果，無法實作出繼承、介面等等複雜的OOP。

function TestClass(a,b)
{
this.var_a = a / 2;
this.var_b = b * 2;

function getTotal()
{
Return a+b;
};
this.getTotal = getTotal;
};

var NewClass = new TestClass(a,b);

在上述的程式碼中，我們可以跟標準的OOP語言(如Java)的Class作簡單的對照。因為
JavaScript並沒有Class的宣告，但其實function就是一個Object，因此我們可以透過建
立新的function來達到建立新的Class的效果。在建構子的部分則是在TestClass的函數
本體，成員方法則是以 this.getTotal = getTotal; 來建立並指派。

千格電子報的內容，您是否還滿意? 千格科技有限公司
我們需要您的指教與回饋，請寫信 台北市信義區信義路四段 415 號12F-1
至 epaper@softwork.com.tw 電話: (02)27209061 傳真: (02)27204678

P8