以Ajax方式顯示Lotus Notes視圖的javasript類庫—-NotesView2

一：簡介

NotesView2是一個使用javascript開發的開源的ajax組件，他可以讓Lotus Notes的視圖已ajax的形式顯示，不僅介面漂亮，而且給使用者很好的體驗，下面我們就開始研究下她。

你可以在這裡下載到她http://www.openntf.org/projects/pmt.nsf/ProjectLookup/NotesView2

，截止到現在最新的版本為2.1.7，下載後有兩個檔案，一個是nsf的資料庫，另一個是該版本對應的文檔，文檔裡簡要介紹了庫的使用方式，並沒有過多的去講解他的原理。

下面是使用該庫顯示的視圖樣式

二：NotesView2類庫庫分析

一共三個js類型的script庫NotesView2Lang_en，jsUtility，jsNotesView2.1.7。

1. NotesView2Lang_en中主要以json形式定義了NotesView2Lang對象，主要是提供狀態列，tooltip，prompt，和一些message的提示資訊。代碼如下：

var NotesView2Lang = {

status_ready : "Ready",

status_loading_data : "Retrieving data...",

status_selected_documents : "$ document(s) selected",

status_jumpto_fail : "Could not find '$'",

status_jumpto_success : "Found '$'",

tooltip_remove_sort : "Remove Sort",

tooltip_sort_ascending : "Sort Ascending",

tooltip_sort_descending : "Sort Descending",

tooltip_expand_category : "Expand Entry",

tooltip_collapse_category : "Collapse Entry",

tooltip_page_up : "Page Up",

tooltip_page_down : "Page Down",

tooltip_scroll_up : "Scroll Up",

tooltip_scroll_down : "Scroll Down",

prompt_jumpto : "Enter the text to jump to:",

prompt_search_input : "Search for: ",

prompt_search_go : "Go",

prompt_clear_search : "Clear Results",

prompt_query_builder : "Query Builder",

msg_search_results : "$ result(s) found",

msg_db_not_indexed : "Database is not full-text indexed (search may be slow)",

msg_db_is_indexed : "Database is full-text indexed",

msg_index_test_failed : "Cannot determine status of full-text index",

msg_startkey_and_restricttocategory_error : "A start key cannot be set when the view is restricted to a single category"

}

2.jsUtility中主要包括將xml文檔轉換為js對象和對javascript一些原生類型的擴充。有以下函數。

//主要完成xml文檔到js對象的轉換

1).function loadXMLRequest(url, callback,callbackContext, type, postData)；

2).function xmlToObject(xmlDoc,getAttributes,toLowerCase)；

//對javascript原生類型的擴充

3).String.prototype.trim = function(c,t)；

4).String.prototype.left = function(v)；

5).String.prototype.leftBack = function(s)；

6).String.prototype.right = function(v)；

7).String.prototype.rightBack = function(s)；

8).Array.prototype.contains = function(v)；

9).Date.prototype.adjust = function(yr,mn,dy,hr,mi,se)；

//主要針對firefox等非IE瀏覽器

10).HTMLElement.prototype.insertAdjacentElement=function(where,parsedNode)；

11).HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr)；

12).HTMLElement.prototype.insertAdjacentText = function(where,txtStr)；

13).function isNotANumber(v)

14).sleep = function(secs, agenturlbase) ；

3.jsNotesView2.1.7該庫為核心庫，大部分的功能都在這個庫中，庫中包含這四個對象，每個對象中有一些函數。

1).function NotesView2(db,name)；

2).function NotesViewNavigator2(view)；

3).function NotesViewEntry2(xml, view)；

4).function NotesViewColumn2(col)；

 

三：應用和原理分析

1. 拷貝資料庫中的代理，script庫，css等設計項目

2. 在$$ViewTemplateDefault表單中的必須要加入一個div("viewHolder")容器來呈現試圖.

3.HTMl Header中加入以下資訊，主要設定DB_NAME和VIEW_NAME

"<script>"+

"var DB_NAME = '/" + @ReplaceSubstring(@WebDbName;"'";"\\'") + "';"+

"var VIEW_NAME = '" + @ReplaceSubstring(@Subset(@ViewTitle;1);"'": "\\";"\\'":"\\\\") + "';"+

"var RESTRICT_TO = '" + @ReplaceSubstring(RestrictTo;"'": "\\";"\\'":"\\\\") + "';"+

"</script>"+

"<LINK REL=\"stylesheet\" TYPE=\"text/css\" href=\"/" + @WebDbName + "/" + sheet + "\">"

4.JS Header中，主要是切換樣用並定義oView

var oView;

function changeStyle(){

var i = document.getElementById('styleChanger').selectedIndex;

var sheets = new Array("none.css","plain.css","pretty.css");

document.cookie = "viewstyle=" + sheets[i];

var s = document.location.href;

if(s.indexOf("&cache=") != -1)s=s.left("&cache=");

document.location = s+"&cache="+Math.random();

}

function changeCategory(){

var o = document.getElementById('catChanger');

var cat = o.options[o.selectedIndex].text;

if(o.selectedIndex==0)cat = "";

if(cat){

document.location.href = DB_NAME + '/' + VIEW_NAME + '?openview&restricttocategory=' + escape(cat);

}else{

document.location.href = DB_NAME + '/' + VIEW_NAME + '?openview';

}

}

5.onLoad中添加如下代碼：

//建立一個NoteView2對象

oView = new NotesView2(DB_NAME,VIEW_NAME);

//設定一些基本的設定

oView.hideSelectionMargin = true;

oView.openDocument = function(viewEntry){

var cnow = new Date();

var urlString = "jushtnm2/?OpenAgent&JMDocID=0000"+viewEntry.noteId+"');&"+cnow.valueOf();

var winName = "win"+newWinName;

var winWidth = eval(screen.availWidth-10);

var winHeight = eval(screen.availHeight-50);

var jwfDoc=window.open(urlString,winName,'top=1,left=1,fullscreen=no,menubar=no,status,scrollbars=yes,toolbar=no,resizable,height='+winHeight+',width='+winWidth);

jwfDoc.focus();

}

oView.actionButtonDisplay = 3;

oView.linesToShow = 31;

oView.linesToGet = 36;

oView.restrictToCategory = RESTRICT_TO;

//增加試圖上方的按鈕，可以自訂按鈕在此填加

oView.addAction("全部展開", function(){oView.expandAllEntries()});

oView.addAction("全部收合", function(){oView.collapseAllEntries()});

oView.addAction("重新整理", function(){oView.refresh()});

oView.addAction("跳至", function(){oView.jumpTo()});

oView.addAction("查詢",function(){oView.toggleSearchBar();});

create_object_array()

//使用render方法來呈現試圖，在render方法中使用?ReadDesign命令來擷取試圖的xml文檔，然後調用loadXMLRequest，xmlToObject等方法進行解析，解析後主要使用drawView()方法來動態畫出試圖。

oView.render(document.getElementById('viewHolder'));

6. 操作試圖上的對象

使用o.navigator.selected來擷取一個選中的NotesViewEntry2對象數組

使用o.refresh(), o.expandAllEntries(), o.collaspseAllEntries(), o.jumpTo(), o.toggleSearchBar()這些方法來相應視圖上的按鈕操作

7. NotesViewEntry2類：

屬性（都為唯讀）

.unid :文檔的unid

.position :String, 該實體在視圖中的位置, ex: 1.2.3.1

.noteId :String, 該實體的note id

.children :String, 實體的孩子數量

.descendants :String, 實體後代的數量

.siblings :String,實體兄弟的數量

.isResponse :String, 是否為相應文檔

.indent :文檔在視圖中的層級, 使用getLevel()函數來擷取精確的結果

.columnValues :a hash of all column values for this entry, access using column number as a string (0 based) ex: var columnThreeValue = entry.columnValues['2']

.isCategory :Boolean, 實體時候分類的標記

.view :a handle to the NotesView2 object this entry is a part of 

.isExpanded :Boolean, 實體當前是否展開的標誌

函數：

getLevel() ：Number, 返迴文檔在試圖中的層級

8.如果你要想使用搜尋功能，可以運行agtSearchView 和 agtIsDBIndexed 代理。

9.以上這些只是初步的研究，以後深入後在寫吧.

NotesView2下載

一：簡介

NotesView2是一個使用javascript開發的開源的ajax組件，他可以讓Lotus Notes的視圖已ajax的形式顯示，不僅介面漂亮，而且給使用者很好的體驗，下面我們就開始研究下她。

你可以在這裡下載到她http://www.openntf.org/projects/pmt.nsf/ProjectLookup/NotesView2

，截止到現在最新的版本為2.1.7，下載後有兩個檔案，一個是nsf的資料庫，另一個是該版本對應的文檔，文檔裡簡要介紹了庫的使用方式，並沒有過多的去講解他的原理。

下面是使用該庫顯示的視圖樣式

二：NotesView2類庫庫分析

一共三個js類型的script庫NotesView2Lang_en，jsUtility，jsNotesView2.1.7。

1. NotesView2Lang_en中主要以json形式定義了NotesView2Lang對象，主要是提供狀態列，tooltip，prompt，和一些message的提示資訊。代碼如下：

var NotesView2Lang = {

status_ready : "Ready",

status_loading_data : "Retrieving data...",

status_selected_documents : "$ document(s) selected",

status_jumpto_fail : "Could not find '$'",

status_jumpto_success : "Found '$'",

tooltip_remove_sort : "Remove Sort",

tooltip_sort_ascending : "Sort Ascending",

tooltip_sort_descending : "Sort Descending",

tooltip_expand_category : "Expand Entry",

tooltip_collapse_category : "Collapse Entry",

tooltip_page_up : "Page Up",

tooltip_page_down : "Page Down",

tooltip_scroll_up : "Scroll Up",

tooltip_scroll_down : "Scroll Down",

prompt_jumpto : "Enter the text to jump to:",

prompt_search_input : "Search for: ",

prompt_search_go : "Go",

prompt_clear_search : "Clear Results",

prompt_query_builder : "Query Builder",

msg_search_results : "$ result(s) found",

msg_db_not_indexed : "Database is not full-text indexed (search may be slow)",

msg_db_is_indexed : "Database is full-text indexed",

msg_index_test_failed : "Cannot determine status of full-text index",

msg_startkey_and_restricttocategory_error : "A start key cannot be set when the view is restricted to a single category"

}

2.jsUtility中主要包括將xml文檔轉換為js對象和對javascript一些原生類型的擴充。有以下函數。

//主要完成xml文檔到js對象的轉換

1).function loadXMLRequest(url, callback,callbackContext, type, postData)；

2).function xmlToObject(xmlDoc,getAttributes,toLowerCase)；

//對javascript原生類型的擴充

3).String.prototype.trim = function(c,t)；

4).String.prototype.left = function(v)；

5).String.prototype.leftBack = function(s)；

6).String.prototype.right = function(v)；

7).String.prototype.rightBack = function(s)；

8).Array.prototype.contains = function(v)；

9).Date.prototype.adjust = function(yr,mn,dy,hr,mi,se)；

//主要針對firefox等非IE瀏覽器

10).HTMLElement.prototype.insertAdjacentElement=function(where,parsedNode)；

11).HTMLElement.prototype.insertAdjacentHTML = function(where,htmlStr)；

12).HTMLElement.prototype.insertAdjacentText = function(where,txtStr)；

13).function isNotANumber(v)

14).sleep = function(secs, agenturlbase) ；

3.jsNotesView2.1.7該庫為核心庫，大部分的功能都在這個庫中，庫中包含這四個對象，每個對象中有一些函數。

1).function NotesView2(db,name)；

2).function NotesViewNavigator2(view)；

3).function NotesViewEntry2(xml, view)；

4).function NotesViewColumn2(col)；

 

三：應用和原理分析

1. 拷貝資料庫中的代理，script庫，css等設計項目

2. 在$$ViewTemplateDefault表單中的必須要加入一個div("viewHolder")容器來呈現試圖.

3.HTMl Header中加入以下資訊，主要設定DB_NAME和VIEW_NAME

"<script>"+

"var DB_NAME = '/" + @ReplaceSubstring(@WebDbName;"'";"\\'") + "';"+

"var VIEW_NAME = '" + @ReplaceSubstring(@Subset(@ViewTitle;1);"'": "\\";"\\'":"\\\\") + "';"+

"var RESTRICT_TO = '" + @ReplaceSubstring(RestrictTo;"'": "\\";"\\'":"\\\\") + "';"+

"</script>"+

"<LINK REL=\"stylesheet\" TYPE=\"text/css\" href=\"/" + @WebDbName + "/" + sheet + "\">"

4.JS Header中，主要是切換樣用並定義oView

var oView;

function changeStyle(){

var i = document.getElementById('styleChanger').selectedIndex;

var sheets = new Array("none.css","plain.css","pretty.css");

document.cookie = "viewstyle=" + sheets[i];

var s = document.location.href;

if(s.indexOf("&cache=") != -1)s=s.left("&cache=");

document.location = s+"&cache="+Math.random();

}

function changeCategory(){

var o = document.getElementById('catChanger');

var cat = o.options[o.selectedIndex].text;

if(o.selectedIndex==0)cat = "";

if(cat){

document.location.href = DB_NAME + '/' + VIEW_NAME + '?openview&restricttocategory=' + escape(cat);

}else{

document.location.href = DB_NAME + '/' + VIEW_NAME + '?openview';

}

}

5.onLoad中添加如下代碼：

//建立一個NoteView2對象

oView = new NotesView2(DB_NAME,VIEW_NAME);

//設定一些基本的設定

oView.hideSelectionMargin = true;

oView.openDocument = function(viewEntry){

var cnow = new Date();

var urlString = "jushtnm2/?OpenAgent&JMDocID=0000"+viewEntry.noteId+"');&"+cnow.valueOf();

var winName = "win"+newWinName;

var winWidth = eval(screen.availWidth-10);

var winHeight = eval(screen.availHeight-50);

var jwfDoc=window.open(urlString,winName,'top=1,left=1,fullscreen=no,menubar=no,status,scrollbars=yes,toolbar=no,resizable,height='+winHeight+',width='+winWidth);

jwfDoc.focus();

}

oView.actionButtonDisplay = 3;

oView.linesToShow = 31;

oView.linesToGet = 36;

oView.restrictToCategory = RESTRICT_TO;

//增加試圖上方的按鈕，可以自訂按鈕在此填加

oView.addAction("全部展開", function(){oView.expandAllEntries()});

oView.addAction("全部收合", function(){oView.collapseAllEntries()});

oView.addAction("重新整理", function(){oView.refresh()});

oView.addAction("跳至", function(){oView.jumpTo()});

oView.addAction("查詢",function(){oView.toggleSearchBar();});

create_object_array()

//使用render方法來呈現試圖，在render方法中使用?ReadDesign命令來擷取試圖的xml文檔，然後調用loadXMLRequest，xmlToObject等方法進行解析，解析後主要使用drawView()方法來動態畫出試圖。

oView.render(document.getElementById('viewHolder'));

6. 操作試圖上的對象

使用o.navigator.selected來擷取一個選中的NotesViewEntry2對象數組

使用o.refresh(), o.expandAllEntries(), o.collaspseAllEntries(), o.jumpTo(), o.toggleSearchBar()這些方法來相應視圖上的按鈕操作

7. NotesViewEntry2類：

屬性（都為唯讀）

.unid :文檔的unid

.position :String, 該實體在視圖中的位置, ex: 1.2.3.1

.noteId :String, 該實體的note id

.children :String, 實體的孩子數量

.descendants :String, 實體後代的數量

.siblings :String,實體兄弟的數量

.isResponse :String, 是否為相應文檔

.indent :文檔在視圖中的層級, 使用getLevel()函數來擷取精確的結果

.columnValues :a hash of all column values for this entry, access using column number as a string (0 based) ex: var columnThreeValue = entry.columnValues['2']

.isCategory :Boolean, 實體時候分類的標記

.view :a handle to the NotesView2 object this entry is a part of 

.isExpanded :Boolean, 實體當前是否展開的標誌

函數：

getLevel() ：Number, 返迴文檔在試圖中的層級

8.如果你要想使用搜尋功能，可以運行agtSearchView 和 agtIsDBIndexed 代理。

9.以上這些只是初步的研究，以後深入後在寫吧.

NotesView2下載