以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.JPG

二: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下载


本文转自生鱼片博客园博客,原文链接:http://www.cnblogs.com/carysun/archive/2008/03/28/NotesView2.html,如需转载请自行联系原作者

目录
相关文章
|
前端开发
thymeleaf实现ajax请求的两种方式
thymeleaf实现ajax请求的两种方式
|
JSON 前端开发 JavaScript
Ajax请求服务端的五种方式
Ajax请求服务端的五种方式
|
前端开发
$.ajax()的实现方式
$.ajax()的实现方式
|
存储 JSON 前端开发
使用 ajax 的方式给 zTree 提供数据 | 学习笔记
快速学习使用 ajax 的方式给 zTree 提供数据
121 0
使用 ajax 的方式给 zTree 提供数据 | 学习笔记
|
XML JSON 前端开发
关于Ajax原理与使用方式,收藏这一篇文章就够了!!
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
关于Ajax原理与使用方式,收藏这一篇文章就够了!!
|
JSON 前端开发 Java
【Spring MVC】(四)Spring MVC响应视图(字符串的方式、ModelAndView 对象、JSON 数据)、统一异常处理(普通请求、AJAX 请求)
【Spring MVC】(四)Spring MVC响应视图(字符串的方式、ModelAndView 对象、JSON 数据)、统一异常处理(普通请求、AJAX 请求)
403 0
【Spring MVC】(四)Spring MVC响应视图(字符串的方式、ModelAndView 对象、JSON 数据)、统一异常处理(普通请求、AJAX 请求)
|
JSON 前端开发 JavaScript
Ajax请求服务端的五种方式
Ajax请求服务端的五种方式
105 0
|
XML 存储 缓存
Ajax之GET、POST请求方式
本文将详细地介绍使用 XHR 对象发送请求的两种方式 GET 和 POST。
237 0
|
数据采集 JSON 移动开发
常用的三种请求方式ajax,axios,fetch
常用的三种请求方式ajax,axios,fetch
500 0
|
JavaScript 前端开发 Python
Django中ajax技术和form表单两种方式向后端提交文件
一、Form表单方式提交: form表单提交文件或者图像时需要对form中的属性进行如下设置: 1、method="post" //提交方式 post 2、enctype="multipart/form-data" //不对字符编码。
1906 0