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