以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下载