界面定制开发培训.doc

文档名称文档密级界面定制开发培训手册1前言32界面定制的范围33界面定制的基础知识33.1XML语言33.1.1一个XML最基本的构成是：33.1.2基本概念：33.1.3XML文件的显示53.1.4节点匹配路径XPath63.1.5XSL的句法与函数73.1.6文档对象模型DOM（Document Object Model）103.2坐席概述133.3HTML格式的界面定制脚本133.3.1界面定制文档的基本构成133.3.2常用的HTML标记153.3.3根据ID来进行组件操作的方法。153.4工具应用154界面定制184.1一个基本的界面184.1.1显示界面结构184.1.2页面代码结构184.2编写一个页面224.2.1界面定制中常用的方法224.2.2界面定制中用到的COM组件234.2.3在CommonFun.vbs文件中定义的常用的全局函数244.2.4定制举例254.3定制捷径284.3.1记录日志284.3.2数据显示284.3.3调用其他页面294.3.4根据返回结果动态显示294.4界面调试304.4.1在没有现场真实环境情况下进行界面定制的方法304.4.2界面定制调试时一些常见问题的定位314.5界面定制涉及的配置334.5.1坐席显示的配置331 前言本文讲述了ICD3.0坐席的界面定制需要的基本知识，和一些常用的界面定制方法。其中的应用方面为根据实际定制经验编写，由于水平所限难免有误，一切请根据现场的实际测试结果为准。2 界面定制的范围界面定制指的是在ICD3.0坐席中嵌入基于web的页面，这些页面的定制编写工作。该页面基于htm使用xsl解析iuas返回的xml格式的数据，嵌入java scripe和vb scripe。基于界面定制工作原理为，通过编写xml脚本，调用接口或数据库存储过程实现定制出特定功能的页面常见的页面定制内容有：话费查询等调用接口实现的业务受理等。总的来说对于调用接口、对数据库信息进行查询、修改等操作均可通过界面定制实现。但对于坐席自带非使用xml脚本实现的功能，不属于界面定制范围，如坐席的基本接续功能、质检功能、投诉受理页面、系统自带的黑名单的页面的定制。注意：随坐席版本一起发布的综合查询、质检查询等界面及相应存储过程不属于界面定制范围，现场不能修改。由于这些界面属于发布版本，如果进行定制，当版本升级后会冲掉现场的定制结果。如果用户有这方面的需求请提交研发处理，或者重新定制与原版本不冲突的全新页面并定义新的存储过程。3 界面定制的基础知识3.1 XML语言界面定制需掌握的XML基本知识3.1.1 一个XML最基本的构成是：XML声明处理指示（可选）XML元素3.1.2 基本概念：1. 元素：元素是XML文件内容的基本单元。从语法上讲，一个元素包含一个起始标记、一个结束标记以及标记之间的数据内容。其形式是：标记数据内容/标记2. 字符数据：处于起始标记与结束标记之间的数据内容，可以是任何合法的UNICODE字符，但不能包含标记中需要用到的一些特殊字符，如><&"'3. 标记：除了注释和CDATA部分以外，所有符号“”和符号“”之间的内容都称为标记。其基本形式为：标记名 （属性名=“属性取值”）标记的语法规定：标记必不可少，任何XML文件都必须有一个根元素，也就是说，标记必不可少。大小写有所区分。要有正确的结束标记，结束标记除了要和开始标记在拼写和大小写上完全相同，还必须在前面加上一个斜杠“/”。为了简便起见，当一对标记之间没有任何文本内容时，可以不写结束标记，而在开始标记的最后惯以斜杠“/”来确认。这样的标记称为“空标记”。标记要正确嵌套。标记命名要合法。标记应该以字母、下划线“_”或冒号“：”开头，后面跟字母、数字、句号“.”、冒号、下划线或连字符“-”，但是中间不能有空格，而且任何标记不能以“xml”起始。有效使用属性。最后要指出的是，标记中可以包含任意多个属性。在标记中，属性以名称/取值对出现，属性名不能重复，名称与取值之间用等号“=”分隔，且取值用引号引起来。4. 属性：在元素标记中成对出现的名称、取值。元素值必须用双引号括起来。5. CDATA：当字符数据中包含大量的特殊字符，需用大量的实体引用时，为了便于输入与查看，可将这些数据放在CDATA数据块中。CDATA的形式如下：！CDATA文本内容如：以下包括大量实体引用的字符数据 <联系人> <姓名>张三</姓名> <EMAIL></EMAIL> </联系人>可改为： !CDATA 张三 6. 注释：注释是用“！-”和“-”引起来的。要注意的是，注释不能嵌套。7. 处理指示：处理指示是用来给处理XML文件的应用程序提供信息的。其形式为：？处理指示名 处理指示信息？3.1.3 XML文件的显示1. 层叠样式单：CSS层叠样式单的基本形式为：.类名 样式属性：取值；样式属性：取值；. 在XML文件中引用层叠样式单CSS的方法：在XML文件的文件头中增加以下声明：2. XSLXSL语言本身也遵从XML语法规范，通过XML进行定义，是XML的具体应用。使用XSL定义XML文档显示方式的基本思想是：通过定义转换模板，将XML源文档转换为带样式信息的可浏览文档。目前界面定制工作就是采用XSL将XML脚本转换为HTML脚本语言后进行显示的。在XML文件中引用层叠样式单CSS的方法：在XML文件的文件头中增加以下声明：XSL的几条主要语句： 主要语句含 义xsl:stylesheet声明语句xsl:template相当于编程中函数的概念xsl:template match = 相当于函数调用，去匹配引号中指定的节点xsl:apply-templates应用模板函数xsl:apply-templates select =应用模板函数的调用，跳转到引号中指定的模板xsl:for-each select = 循环语句，遍历与引号中的属性值相同的节点xsl:value-of select = 赋值语句，取出引号中指定的属性值3.1.4 节点匹配路径XPath在利用XSL进行转换的过程中，匹配的概念非常重要。在模板声明语句xsl:template match = 和模板应用语句xsl:apply-templates select = 中，用引号括起来的部分必须能够精确地定位节点。具体的定位方法则在XPath中给出。之所以要在XSL中引入XPath的概念，目的就是为了在匹配XML文档结构树时能够准确地找到某一个节点元素。在界面定制中只用到了路径匹配，所以以下只介绍路径匹配，另外还有位置匹配、属性及属性值匹配、亲属关系匹配、条件匹配，可参考相关资料。以下用于匹配举例的XML文档树： 路径匹配路径匹配与文件路径的表示相仿，比较好理解。有以下几个符号：符 号含 义举 例匹配结果/指示节点路径/A/C/D节点A的子节点C的子节点D，即id值为d2的D节点/根节点/所有路径以/后指定的子路径结尾的元素/E所有E元素，结果是所有三个E元素/C/E所有父节点为C的E元素，结果是id值为e1和e2的两个E元素*路径的通配符/A/B/C/*A元素B元素C元素下的所有子元素，即name值为b的B元素、id值为d1的D元素和id值为e1和e2的两个E元素/*/*/D上面有两级节点的D元素，匹配结果是id值为d2的D元素/*所有的元素|逻辑或/B | /C所有B元素和C元素3.1.5 XSL的句法与函数1. 文档结构 前面说过，XSL文档本身是XML文档，因此文档的第一句自然是：接下来是样式单部分： 也可以写作： xsl:transform与xsl:stylesheet具有相同的含义，都表示元素所包含的内容为样式单。xsl:stylesheet元素必须包含有version属性，用以指示该XSL文档遵从哪一个版本的XSL标准。另外，xmlns:xsl指示了XSL的命名空间，在XSLT标准中，定义了XSLT的命名空间为/1999/XSL/Transform。XSLT在进行转换时，首先遍历XML源文档树，找到要处理的节点，然后将定义好的模板信息施加到该节点中。 2. 模板及应用 xsl:template是模板元素，通常每个xsl:template有一个节点匹配属性，由match=指定。在对模板进行匹配时使用xsl:apply-templates，选择要匹配的模板，相当于一个调用的过程。对节点的匹配规则遵照XPath。不同的模板设计，可以导致同一个文档有不同的输出效果。xsl:template元素有一个mode属性，可以根据需要去匹配不同模式的模板。若将前例作如下修改： 学生花名册 .titlefont-size:15pt; font-weight:bold; color:blue 学生花名册 .titlefont-size:15pt; font-weight:bold; color:red 如果要将TITLE输出为蓝色，则用下面语句匹配：如果要将title输出为红色，则写为：此外，模板总是与节点相对应的，一个节点可能对应于不同的模板，那么如何确定各模板匹配的先后次序呢？XSLT中可为xsl:template设置优先级，写法是： /n为优先级数3. 计算节点值 在使用XSLT进行转换时，常常需要获取节点值，使用xsl:value-of元素可达到这个目的，如下例：得到的是学生原籍的值，select属性指定要获取的是哪一个节点的节点值。 4. 循环处理 使用xsl:for-each可对所选节点依次进行处理，如例中在生成表格处理中，就是利用循环将各个学生的信息取出放入表格中的，写法是： 5. 排序 对于用xsl:for-each或xsl:apply-templates匹配的节点，可使用xsl:sort将所选节点内容进行排序，如：排序方式举 例含 义按大小写排序以id为关键字按大写优先排序以id为关键字按小写优先排序按字母顺序排序以id为关键字按字母升序排序以id为关键字按字母降序排序按数据类型排序以id为关键字按文本类型排序，如对于一组id数据101，2，44，305来说，排序结果是101，2，305，44以id为关键字按数据类型排序，上面一组数据的排序结果是2，44，101，305另外，还有一种指定排序的方法，就是在前面学生花名册例中所使用的order-by：也可使得输出学生时按名字排序。 6. 元素与属性创建 XSLT是一个动态的样式单，在处理过程中可产生新的元素或元素属性，方法如下：内 容元 素举 例转换结果创建元素xsl:element学生花名册学生花名册创建属性xsl: attributecolor:blue 学生花名册学生花名册创建文本xsl:text（可以保护文本中的空白字符） 这是学生花名册 输出文字：这是学生花名册创建处理指令xsl:processing-instructionhref=book.csstype=text/css创建注释xsl:comment以下是学生花名册，请勿删改！7. 节点拷贝 在对XML文档进行处理时，XSLT还可以通过拷贝的方式复制节点，方法是利用xsl:copy和xsl:copy-of。其中xsl:copy只拷贝当前节点，不包括子节点和属性；而xsl:copy-of的拷贝内容则包括当前节点、子节点和属性。例如对于：A is a char 如果样式单写为如下形式： copy-of : copy : 转换后生成如下代码： copy-of : A is a char copy : 由此可见，两种拷贝方式结果大相径庭。 8. 输出格式与编码问题 XSLT是一个转换语言，它的目的是将XML源文档转换为另一种格式文档，它的输出结果可以是HTML文档，也可以是带CSS的XML文档。具体的输出格式由xsl:output 指定。如果要输出为HTML文档，则写为：同样，要输出XML文档写为：如果文档中不出现xsl:output，将缺省输出为XML文档，但如果在匹配模板时使用了标记，则输出为HTML文档。输出为HTML文档时系统都会自动加上下面语句：此外，还可以利用xsl:output指定编码方式，如UTF-8，UTF-16，GB2312等。例如：它指定了该XSLT的输出结果是HTML格式，编码方式为中文。3.1.6 文档对象模型DOM（Document Object Model）DOM是由W3C提出的标准应用程序接口。DOM的四个基本接口 在DOM接口规范中，有四个基本的接口：Document，Node，NodeList以及NamedNodeMap。在这四个基本接口中，Document接口是对文档进行操作的入口，它是从Node接口继承过来的。Node接口是其他大多数接口的父类，象Documet，Element，Attribute，Text，Comment等接口都是从Node接口继承过来的。NodeList接口是一个节点的集合，它包含了某个节点中的所有子节点。NamedNodeMap接口也是一个节点的集合，通过该接口，可以建立节点名和节点之间的一一映射关系，从而利用节点名可以直接访问特定的节点。下面将对这四个接口分别做一些简单的介绍。 1. Document接口 Document接口代表了整个XML/HTML文档，因此，它是整棵文档树的根，提供了对文档中的数据进行访问和操作的入口。由于元素、文本节点、注释、处理指令等都不能脱离文档的上下文关系而独立存在，所以在Document接口提供了创建其他节点对象的方法，通过该方法创建的节点对象都有一个ownerDocument属性，用来表明当前节点是由谁所创建的以及节点同Document之间的联系。在DOM树中，Document接口同其他接口之间的关系如下图所示：由图可以看出，Document节点是DOM树中的根节点，也即对XML文档进行操作的入口节点。通过Docuemt节点，可以访问到文档中的其他节点，如处理指令、注释、文档类型以及XML文档的根元素节点等等。另外，从上图我们还可以看出，在一棵DOM树中，Document节点可以包含多个处理指令、多个注释作为其子节点，而文档类型节点和XML文档根元素节点都是唯一的。关于Document接口的IDL（Interface Definition Language接口定义语言）定义和其中一些比较常用的属性和方法的详细介绍在许多参考书都可以找到，我们将在后面结合实际例子给予介绍。 2. Node接口 Node接口在整个DOM树中具有举足轻重的地位，DOM接口中有很大一部分接口是从Node接口继承过来的，例如，Element、Attr、CDATASection等接口，都是从Node继承过来的。在DOM树中，Node接口代表了树中的一个节点。一个典型的Node接口如下图所示：如图所示，Node接口提供了访问DOM树中元素内容与信息的途径，并给出了对DOM树中的元素进行遍历的支持。同样，我们将在后面结合实际例子详细说明Node接口的具体使用方法。 3. NodeList接口 NodeList接口提供了对节点集合的抽象定义，它并不包含如何实现这个节点集的定义。NodeList用于表示有顺序关系的一组节点，比如某个节点的子节点序列。另外，它还出现在一些方法的返回值中，例如GetNodeByName。在DOM中，NodeList的对象是live的，换句话说，对文档的改变，会直接反映到相关的NodeList对象中。例如，如果通过DOM获得一个NodeList对象，该对象中包含了某个Element节点的所有子节点的集合，那么，当再通过DOM对Element节点进行操作（添加、删除、改动节点中的子节点）时，这些改变将会自动地反映到NodeList对象中，而不需DOM应用程序再做其他额外的操作。NodeList中的每个item都可以通过一个索引来访问，该索引值从0开始。 4. NamedNodeMap接口 实现了NamedNodeMap接口的对象中包含了可以通过名字来访问的一组节点的集合。不过注意，NamedNodeMap并不是从NodeList继承过来的，它所包含的节点集中的节点是无序的。尽管这些节点也可以通过索引来进行访问，但这只是提供了枚举NamedNodeMap中所包含节点的一种简单方法，并不表明在DOM规范中为NamedNodeMap中的节点规定了一种排列顺序。NamedNodeMap表示的是一组节点和其唯一名字的一一对应关系，这个接口主要用在属性节点的表示上。与NodeList相同，在DOM中，NamedNodeMap对象也是live的。3.2 坐席概述我们定制的界面将会被嵌入坐席中使用，下面就是坐席的显示。其中面积最大的右侧页面就是我们定制的成果了。下方是点击后能显示相应页面的按钮，这需要对数据库的配置表进行配置，每个按钮对应多个页面，可以通过页面下方的标签进行选择，这也是通过配置表进行配置的。3.3 HTML格式的界面定制脚本3.3.1 界面定制文档的基本构成界面定制文档还是一个HTML脚本文件，通过在HTML脚本中内嵌XML及XSL脚本文件实现界面的动态显示。声讯费清单查询 document.body.oncontextmenu=function()var obj=event.srcElement;if(obj & obj.tagName!=INPUT)event.returnValue=false;return false; 首先是HTML脚本的HEAD区，在HEAD区中指明本网页的标题名，链接的CSS文件，及包含的VBScript脚本、Jscript脚本文件，定义的全局函数、变量。然后是HTML脚本的BODY区，内嵌的XML及XSL就包含在此区，使用标记区别。在XML脚本后紧接着的是HTML表格脚本定义，界面的布局、风格在此设置。3.3.2 常用的HTML标记(1)：表格定义(2)：表格中的行定义(3)：表格中的单元格定义(4)：用于为HTML中的各标记设置一个ID，用DIV标记定义的ID可以类似于程序语言中的组件名来使用。如为一个标记定义ID为tdText，则可用tdText.InnerText来代表该单元格的内容值。写法如下：。也可以直接写为。(5)：字体设置(6)：用于接受输入的组件标记，若type属性设置为Text，则为编辑框，若为button，则为按钮。(7)：定义一个Memo文本框(8)：定义一个ComboBox组合框(9)：Select标记内使用，为ComboBox组合框中的单选项(10)：增加一个超级链接3.3.3 根据ID来进行组件操作的方法。（1）可以直接用ID来代表其组件。如：作如下定义的编辑框 获取输入值的写法如下：edtReceptNo.value（2）也可借用getElementByID方法来获取一Textarea组件进行操作，这一方法对所有组件都通用。如：作如下定义的文本框获取其值的写法如下：document.getElementByID(“edtRemark”).InnerText作如下定义的编辑框 获取输入值的写法如下：document.getElementByID(“edtReceptNo”).value3.4 工具应用1. Microsoft Script Editor该工具是微软提供的脚本编译工具，主要可以对脚本进行单步跟踪。1） 安装一般Office的安装盘中会带有，可以从Word中进入该工具。如图所示。安装后该程序不会创建快捷方式，在安装目录下会有一个MSE7.EXE，即相应程序。2） 调试编写脚本完成后，在安装了坐席的机器上可以使用该工具对编写的脚本进行调试，包括设置断点、单步跟踪等，其功能与VC等软件类似。界面如下图所示。3） 坐席组件由于我们定制的页面是嵌入到坐席中使用的，与普通的网页不同，会与坐席进行信息交互，最常见