Lotus Domino应用开发课程--第九章 在Web中使用JavaScript.doc

第9章 在Web中使用JavaScript第9章在Web中使用JavaScript19.1简介19.2把JavaScript添加到表单中29.2.1编写JavaScript29.2.2把JavaScript添加到Domino表单中49.3JavaScript在域中的应用69.3.1验证域69.3.2计算域的值79.3.3显示域相关的帮助89.4使用JavaScript显示对话框109.4.1学习内容表单109.4.2对话框视图119.5Domino产生的JavaScript139.1 简介现在很多人都对JavaScript有所了解。它是面向对象的一种语言，由Netscape公司开发出来，语法类似于Java，但并不完全一样，它在客户机上执行，它并不支持那种真正的面向对象的语言所支持的特别复杂的特性，如多态和继承，而且它几乎独立于We b的开发工具存在。JavaScript赖以成名的特性是其将原来必须由服务器完成的功能交由客户机代替，但是这与Domino 又有什么关系呢？任何We b服务器都能容纳包含JavaScript代码的HTML网页。如果你使用了Domino，你就可以使用所有的Domino开发工具，包括由公式决定的隐藏属性、计算域、视图列公式、C G I域等，使用这些工具你可以创建动态JavaScript。而且Domino 与JavaScript的优势联合起来可以使你的We b应用程序功能更为强大考虑以下脚本，当用户点击某个按钮，根据用户的浏览器类型，你可以把用户转向到另一个U R L。在此，我们可以使用下面的方法完成这个功能。function goThere() browser = navigator.appName;if (browser = Microsoft Internet Explorer) url = /msie.html; else if (browser = Netscape) url = /nn.html; else url = /other.html;self.location = url;在这个例子中，所有的条件由JavaScript定义。现在，我们看第二个例子，由Domino开发：function goThere() self.location = ;在这个例子中，由下面的公式返回：app : = HTTP_USER_AGENT ;If(Contains(app; MSIE); /msie.html; Contains(app; Mozilla);/nn.html; /other.html );由于我们使用Notes公式计算U R L，JavaScript语句数量被大幅度减少。我们所关心的就是：首先，这意味着用户只需要下载较少的JavaScript。在这个简单的例子中其区别并不明显，但随着例子复杂性的增加，更少的代码对加快下载速度至关重要。其次，这意味着我们只需要调试更少的源程序代码，从而使我们的JavaScript程序拥有良好的可读性。请注意这样一个事实，服务器端的脚本语句要比客户机端的脚本语句的安全性好得多。用户常常可以在其浏览器中关闭JavaScript程序的运行，可以看到JavaScript程序的源代码（并可以随意改变本地的副本）。但是用户不能访问服务器上的JavaScript程序，更不能绕过这些程序的运行。9.2 把JavaScript添加到表单中9.2.1 编写JavaScript在编写JavaScript语句时可以把你的代码直接插入网页中的下面的标识符之间:在浏览器中，可以通过JavaScript代码获取和修改Html各种对象的属性。在浏览器中获得一个表单的名称，你可以使用下面的代码：var formName = ;Html对象除了有各种属性外，还有事件，我们可以使用JavaScript为这些事件编写代码，时间触发时执行这些代码。例如，当用户把鼠标移到链接上后，先是一个对话框。My File关于JavaScript和Html的详细知识，请参考其它书籍。下面是常常被用来触发JavaScript函数的事件。l 按钮对象的点击事件。l 文档对象的装载事件。l 选定对象的改变事件。l 文本域的得到和失去焦点事件。一个H T M L按钮使用类型属性为按钮的标签来定义。下面的H T M L定义了一个按钮标签，当点击时，触发onClick事件，调用d o S o m e t h i n g函数：当网页被下载在浏览器装载完毕时，一个H T M L文档的装载事件被触发。装载事件由H T M L的标签的onLoad()定义，例如：function MyFunction() alert(“yeah!”);你还可以在和标签之间调用Myfunction() 函数来完成同样的任务。例如function MyFunction() alert(“yeah!”);MyFunction() ;和onLoad不同的是中的不在函数中的代码，当页面装载时立即执行。一般把它放在页面的标签中，不要把它放在页面的下部。而标签中的onLoad是在页面装载完毕时执行。一般情况下，当域中的值改变时，会触发onChange事件，我们可以在其中编写JavaScript代码处理事件。对于文本域，Domino把它转换成标签，当文本域得到焦点时，触发获得焦点事件onFocus，当文本域失去焦点时，触发onBlur事件。为了更好的控制Html中的对象，必须了解其对象模型，Designer的主页给出了这个模型。图表 1 JavaScript对象模型9.2.2 把JavaScript添加到Domino表单中把JavaScript添加到表单中有几种方式：1） 把JavaScript代码写在标签中，在表单中设置为“内置Html文本”。图表 2 使用内置Html把添加JavaScript到表单2） 在表单的JS Header事件中写入JavaScript图表 3 使用JS Header 添加JavaScript函数到表单Domino生成页面时，JS Header中的JavaScript被包含在标签中。3） 在其它元素的Web事件中写入JavaScript4）在数据库中，创建JavaScript脚本资源库，然后引入到表单或者页面中。 （1）创建脚本资源库图表 4 创建脚本资源库 （2）插入到表单中图表 5 使用脚本资源库 （3）在浏览器中御览，查看源代码：图表 6 查看使用脚本资源库的Html源文件9.3 JavaScript在域中的应用9.3.1 验证域验证公式（Input Validation）是Notes表单中的内嵌功能。当用户提交表单时可以使用验证公式验证用户输入的有效性。例如，为了保证考试成绩域ExamScore的值大于0且小于1 0 0，你可以为这个域创建一个有效性验证公式：if(Thisvalue100;Failure(成绩应介于0和100之间.);success)比如说，如果用户在ExamScore域中输入120然后将表单提交，则Failure 消息被显示，而且将不保存文档。不幸的是，这种验证需要一个从客户机到服务器的消息传递过程，这将增加服务器的工作量。使用JavaScript，可以在客户端进行这种验证而完全不涉及服务器。我们在客户端用JavaScript编写校验脚本，提交表单的时候，触发事件，执行脚本，如果检查通过则提交，如果不能通过检查，则终止提交。基本原理时，当提交表单保存文档时，会触发表单的onSubmit事件，如果onSubmit返回true，则提交表单，如果返回false，则终止提交表单。依据这一特性，写一个域的验证函数，在onSubmit事件中调用。 首先在表单的JS Header中写一个校验函数function validateField(f) /f 为域对象 var v=parseInt(f.value) /转为为整数 if (v=0& v=100) /校验范围 return true else alert(+:成绩应介于0和100之间.); f.focus(); return false然后在表单的OnSubmit事件中调用该函数如果输入值符合要求，返回true，提交表单，否则，终止提交表单。当前例子中，文档对象包含一个表单，用forms0引用，当然也可以用表单名字引用：document.forms“_StudentTestForm”。在JavaScript引用表单的名字需要在Notes的表单名前加上一个下划线。值得注意的是，我们可以针对不同功能的域编写通用的域校验函数。请读者参考其它书籍。9.3.2 计算域的值在Designer中设计表单时，我们可以创建计算域，该计算域的值是其它几个值的计算结果。计算域的值在保存时才计算。有时我们需要在保存前就看到计算结果，那么可以在浏览器中使用JavaScript。在第七章，我讲自定义搜索表单时，需要计算Query域得值。图表 7 使用JavaScript计算域的值Query域得值，是由Title，Words，和Connector三个域的值组合而成的。当这三个域得值发生变化的时候，修改Query域得值。可以实时看到Query的变化。为了完成这个功能，需要使用Title，Words，Connector三个域的onChange事件。编写一个事件处理函数update（），他们任意一个值变化时，更新Query的值。在表单的JS Header中定义update函数如下：function update() window.status = Updating query;form = document.formsMySearch; /参考表单顶部的内置html文本。words = form.Words.value;title = form.Title.value;connector = getRadioValue(form.Connector);conditions = new Array();cond1 = (words = ) ? : (FIELD InfoBody CONTAINS + words +) ;cond2 = (title = ) ? : (FIELD InfoSubject CONTAINS + title +) ;if (cond1 != ) conditionsconditions.length = cond1;if (cond2 != ) conditionsconditions.length = cond2;query = conditions.join( + connector + );form.Query.value = query; /修改Query的值。因为不能直接获取Radio的值，所以用了一个函数获取单选按钮的值。function getRadioValue(radio) for (i = 0; iradio.length; i+) if (radioi.checked) return radioi.value; return null;把update（）函数放到三个域的onChange事件中。 修改Title，Words，Connector域的值，Query会自动更新：图表 8 JavaScript计算结果9.3.3 显示域相关的帮助Notes客户端的一个非常好的功能就是域相关的帮助，当设计一个表单的时候，可以为每个域提供一个简短的帮助信息，当那个域获得焦点的时候，它的帮助显示在状态条上。但，这一功能在浏览器中不能直接支持。使用JavaScript可以轻松地把这种功能复制到We b表单。我们定义两个函数：showHelp（）显示帮助；clearHelp（）清除帮助。当点击一个可编辑域时，该域获得焦点，则该域的获得焦点事件发生。当在可编辑域外点击时，该域失去焦点，则该域的失去焦点事件发生。在这个例子中，域的获得焦点事件发生时调用showHelp函数，这个函数以域本身为自变量。域的失去焦点事件发生时调用clearHelp函数。在表单的JS Header中定义这两个函数：function showHelp(obj) help= 请输入在标题中搜索的单词.window.status=help;function clearHelp() window.status=;在域的onFocus和onBlur中分别调用。图表 9 用JavaScript显示域帮助对于一个拥有大量的域的表单来说，这个简单的办法将使JavaScript语句变得极其冗长。因此，也可以采取另一种办法，使用一个允许多值的域将域名映射为帮助文本，使用计算域产生相应的JavaScript。在表单上创建两个多值域，FieldNames存储域的名称，FieldHelp存储域的帮助信息。FieldNames的值 Title:Words:Connector。FieldHelp的值 “请输入在标题中搜索的单词”：“请输入在正文中搜索的单词”：“请选择搜索单词之间的连接符。”在显示时计算域“showHelp”中使用下面的公式：if ( = + FieldNames + ) help= + FieldHelp + ;计算域的结果如下：if ( =Title) help=请输入在标题中搜索的单词.;if ( =Words) help=请输入在正文中搜索的单词.;if ( =Connector) help=请选择搜索单词之间的连接符。;把两个函数的代码作为“内置html”文本写在表单的上部图表 10 公式和JavaScript的结合把计算域showHelp的计算结果作为JavaScript函数的一部分。注意在域的“高级”附签做下面设置：图表 11 设置计算域的显示格式9.4 使用JavaScript显示对话框对于Notes客户端的开发者来说，另外一个漂亮的组件是对话框。对话框在使数据输入表单尽量简单的情况下提供一组域与按钮群帮助用户轻松输入数据。联合使用设计区域和LotusScript 的D i a l o g B o x方法， 公式PickList，prompt可以轻松创建对话框从而简化表单界面。Domino在Web上不能使用这种功能，主要是由于它将任何东西都转换为H T M L形式，但是H T M L中没有类似对话框那样的组件。然而，仍然可以通过JavaScript创建对话框。打开“IBM认证系统”数据库，在学习内容管理中，创建了一个对话框，为学习内容“选择分类”。图表 12 使用JavaScript创建对话框这个例子有几部分协同工作，将分别讨论下面几部分：1） 学习内容表单LearningContentForm2） 对话框显示的视图PickListForLearningCatalog。9.4.1 学习内容表单学习内容表单主要包含了LearningSubject，CatalogLabelPath等几个域。LearningSubject是学习内容的主题；CatalogLabelPath是学习内容所属分类。我们要做的就是显示一个对话框，可供选择分类。在CatalogLabelPath的右边创建了一个计算文本，公式如下：If(IsDocBeingEdited;选择分类;)当文当处于编辑状态时，显示“选择分类”链接，其它状态，显示空值。这样在只读模式下看不到该链接。该链接是调用了一个JavaScript函数：openPicker。有3个参数，第一个参数是数据库的名称，第二个参数是需要设置的域的值，这里设置分类CatalogLabelPath的值。第三个参数是选择对话框中视图的第几列。openPicker函数定义在表单的JS Header中：function openPicker(databasePath, fieldName, columnNumber)window.PickListColumnNumber = columnNumber;window.PickListFieldName = fieldName;windowOpener(/+databasePath+/PickListForLearningCatalog?OpenView,Picker, width=350 , height=300, status, resize, scrollbars);这个函数为window对象增加一个变量，存储域的名称“CatalogLabelPath”，用windowOpener（）函数打开视图URL“PickListForLearningCatalog”。windowOpener（）函数定义如下，判断对话框窗口是否已经打开，如已打开，则重用，未打开，则用window的open函数新打开一个窗口。function windowOpener(url, name, args) if (typeof(popupWin) != object)popupWin = window.open(url,name,args); else if (!popupWin.closed) popupWin.location.href = url; else popupWin = window.open(url, name,args);popupWin.focus();9.4.2 对话框视图为了在视图PickListForLearningCatalog中产生单选按钮供我们选择，在视图的第一列用公式产生单选按钮： 用Implode函数把视图后面几列的值组合成一个值，用逗号作为分割，便于后面的处理，这样可以通过序号返回视图的某一列。为了显示视图，给视图创建了一个表单模板：$ViewTemplate for PickListForLearningCatalog，在表单的底部用html通用文本创建了两个链接“确定”和“取消”。确定 : 取消单击“取消”，关闭窗口。单击“确定”返回选择的值，其中调用了一个passBackValue函数。在JS Header中定义。function passBackValue( )frm = document.forms0;var k = checkRadioButtonSelected( frm.docs); /调用函数得到RadioButton的值。if (k=-1) return alert(请选择一项.); else if (k=0) vals = frm.docs.value.split( , ); /把一个值分割成数组 else vals = frm.docsk.value.split( , );/使用eval函数得到父窗口需要赋值的域obj = eval( window.opener.document.forms0. + window.opener.PickListFieldName );/根据指定的序号返回值obj.value = vals window.opener.PickListColumnNumber - 1 ;window.close();passBackValue（）调用了一个函数checkRadioButtonSelected获得RadioButton的值：function checkRadioButtonSelected( e ) if ( !e0) /handle single item group firstif ( e.checked ) return 0; else return -1 else /handle multi-item groupsreturn isSomethingSelected( e );function isSomethingSelected( obj )for (var r=0; r obj.length; r+)if ( objr.checked ) return r;return -1这样就完成了Web中对话框的创建，对其它形式的对话框原理是相同的，只是样式可能会不同。9.5 Domino产生的JavaScript在“数据库属性”对话框中，有一个默认情况下为启用的属性：“web访问:当生成页面时使用JavaScript”，将这个属性启用将导致Domino将表单转换为H T M L的方法有非常重大的变化。最明显的变化就是Domino将不自动生成S u b m i t按钮。这个变化主要是由该属性改变导致的其他变化产生的。默认情况下， Domino把任何不能转换为Domino URL的活动按钮忽略掉。能够转换成功的情况下，Domino将把按钮转换为JavaScript按钮，按纽激活_doClick（）函数。主要完成两件事：1） 在_Click