图2 　多彩文本工具栏的层次方框图
 3.3  详细实现
 打开窗口页面加载，调用两个功能模块，一个为工具栏的初始化另一个为编辑框的初始化。
    窗口初始化后，编辑框中的内容根据用户的操作来调用相应的格式化函数模块，函数的调用主要是通过键盘和鼠标的事件驱动来实现，其中工具栏功能模块的动作程序流程图和编辑框功能模块的操作流程图如图3图4所示。

图3  工具栏的动作程序流程图

图4  编辑框模块的操作程序流程图
 3.3.1  整体CSS样式的定义
 首先是定义CSS样式，其主要通过设置其ID分别来控制编辑窗口和弹出框窗口，当对应窗口中有所定义对象时就对其进行所定义的CSS样式操作,这个主要是从全局角度来控制。
 其实现结构如下：
 结束
 弹出框的初始化实现原理与编辑框的基本一样。
 3.3.2  工具栏初始化模块
 此模块在页面被打开时就自动运行，主要是运用CSS样式排列精确定位，把工具栏中的图标精确定位到我们指定的位置，在此模块中首先定义四个数组，一个数组中元素值为每个图标的宽度，另一个为每个图标所要实现的功能描述，第三个为每个图标所实现具体功能的文本描述，最后一个其每个元素的值为通过单击对应的工具图标所要调用的函数名及其所要传递的参数。根据图标的个数，通过一循环，每循环一次就精确定位一个图标的位置，设置键盘的TAB键可用，并把其相应的标题数组中的元素赋给标题值，把功能数组中的函数名一次赋给相应图标的单击事件，为了使工具栏更具有人性化，在每一次循环中给每一个图标都设置鼠标的划过、悬停、及单击时让其相应的图标位置发生一定的变化，然后把这一函数语句在窗口装载时让其运行，完成工具栏的初始化操作。
 其伪码程序为：
 函数名（）{
 数组1={各图标宽度}；
 数组2={各图标对应功能}；
 数组3={各图标标题}；
 数组4={各图标对应功能函数}；
 动态语句=添加层定义其起始坐标和高度并设置tab键的操作；
 for（var i=0，i<数组1.length，i++）{
 动态语句+=span定义其高和宽值并设置其tab键操作；
 动态语句+=嵌套span并定义其样式
 +=title=数组3[i]
 +=鼠标单击设置为函数1
 +=鼠标按下设置为样式1
 +=鼠标悬停设置为样式2
 +=鼠标弹起设置为样式3
        +=鼠标划过设置为样式4；
 +=图标的相对路径；
 }
 执行动态语句；
 3.3.3  编辑区域的初始化模块
 该模块在页面被打开时也是自动调用的，其首先定义一个全局变量，其为一个对象，然后再通
过CSS样式表定义其边框等内部属性,再对弹出框初始化及把该编辑框的状态设置为可编辑，当鼠标在此编辑框中的单击、双击等都调用开始定义对象的相应方法。
 其伪码程序为：
 函数名（无参数）｛
 定义一个实例；
 设定其样式；
 编辑状态为可编辑；
 鼠标单击调用实例的方法1；
 鼠标双击调用实例的方法2；
 丢失光标调用实例的方法3；
 ｝
 3.3.4  弹出框类型判断模块
 弹出框的框架一开始就被设定，始终位于该编辑窗口的中央位置，只是没被调用之前处于隐藏状态，该模块主要是根据其传递的参数来判断做出相应的处理，如果该参数为字体或者是文本颜色，则首先通过其对象的方法得到选区，然后调用标题数组中的元素作为弹出框的标题，并通过方法函数得到所要执行操作的动态语句，通过相应的语句来实现，最近通过该对象的一个方法得到这些语句。
 3.3.5　弹出框的隐藏模块
 弹出框一开始处隐藏状态就是由该函数开设定的，此模块通过把弹出框所处的层的index值设为－1，并让其可见性为假，并且鼠标对其相应的单击操作都设为无效。
 其伪码程序为：
 函数名（无参数）{
 层叠顺序为底层;
 可见性为隐藏;
 内容样式为空;
 鼠标划过、鼠标单击、鼠标按下皆无反应;
 }
 3.3.6  弹出框的显示模块
 该模块通过其传递过来的参数值被赋给了所显示弹出框的类型变量，并判断是否对所要执行操作的对象已经执行，如果已经执行了相应的操作弹出框仍旧直接隐藏，否则就创建一个弹出框实例，然后调用其实例的方法，来获得弹出框的标题及内部格式化语句，鼠标在其上的单双击等动作调用相应的函数来执行所要操作对象的动态代码.
 其实现原理为：
 函数名（参数）{
 变量1，变量2=弹出框变量.参数；
 if(弹出框类型==参数)
   弹出框隐函数；
 else{
 层叠顺序=-1；
 变量1=弹出框数组[参数]；
 if(变量1==""||参数为链接框)
 弹出框数组项=变量1=新创建弹出框对象；
 变量1.可见性为空；
 变量1.height=变量1.width=100；
 变量1.标题为函数1返回值；
 变量1.内容为函数2返回值；
 变量1.onkeydown调用函数3；
 变量1.onclick调用函数4；
 变量1.mouseover调用函数5；
 执行弹出框的显示函数；
 }
 }
 3.3.7  颜色框模块
 它的形成与作用原理为利用颜色可以用3位十六进制数来表示其RGB色，定义一个数组，其元素之间的差值为一等差数列也即颜色的渐变跨度，通过循环的嵌套来达到颜色渐变的效果，最外层的代表其RED色所表示颜色的对应值，且最外层每循环一次就动态的形成一组操作语句，执行后也就得到颜色框的一行。最内层代表BLUE色所表示的颜色的对应值，且其循环一次就形成颜色框的一个单元格。左边的方框时刻显示鼠标在颜色框中悬停位置的颜色。
 

图5　 颜色框的显示图
 3.3.8  表情框模块
 所显示的所有表情都和工具栏图标被放置在一个文件夹中，对此弹出框的格式化主要是根据表情的数目改成一个循环，每一行的表情个数定为9个，并设定鼠标的单击事件所对应的函数，此弹出框的设置及调用相对于其它弹出框要稍简单一些。
 
 
图6　 表情框的显示图
 3.3.9  字体类型弹出框模块
　　形成该弹出框之前首先定义一个数组，数组中每一元素包括对所有待选择字体的定义名称，及一个布尔值，来判断此种字体是否被选中。通过一个函数来布局字体风格的弹出框的显示格式，然后根据用户的操作来改变所选择区域中的字体显示风格设置。

图7 　字体风格框的显示图
 3.3.10  链接框模块
 其主要是包括两种形式的超链接，一种是直接添加超链接，另一种是对所选文本添加超链接；还要考虑连接的类型即HTTP、FTP及EMAIL连接，首先利用一函数来判断所要添加超链接的类型，默认的为HTTP协议的连接，再一个就是判断所要添加连接的文本是否为空；然后就是判断用户的所选择的连接类型，来形成一个添加链接的执行语句，等待调用执行。

图8 　连接框的显示图
 3.3.11  字号弹出框 
 形成该弹出框之前首先定义一个数组，数组中每一元素包括对所有待选择字号的定义名称和其对应字体大小;一个布尔值，来判断此种字号是否被选中。通过一个函数来布局字体风格的弹出框的显示格式，然后根据用户的操作来改变所选择区域中的字体显示大小设置,其调用过程和字体风格原理一致。
 
 图9   字号弹出框

3.3.12  其它剩余图标对应的功能模块
 这个模块主要是针对以上叙述模块以外的部分功能，因为他们的实现功能函数所使用的命令基本一样，只是命令的参数不同罢了，其每一个图标的单击事件所对应的响应事件函数是同一个命令只是传递的命令参数不同，其参数就是在初始化工具栏时所建立的功能数组中的元素，通过判断其参数来执行相应的操作。
 3.3.13  各功能模块的公用模块
 这个模块的主要功能是在各功能模块调用之前首先保存通过鼠标所创建的热区，对鼠标所选择
的内容进行保存与加亮。
    3.3.14  单独的编辑界面的测试，结果如图10所示。

图10  编辑界面的截图
 3.3.14  各功能模块之间的墨盒测试，最终结果如图11所示，其为作为中间插件放到后台的显示页面。
 
图11  多彩文本作为中间插件放到信息发布系统的截图
 结束语
 本设计实现了多彩文本的设计，并就一些难点在论文中给出了解决思路。本系统以Internet网络作为载体，可以实现文本的多种格式化操作，格式化操作完成后能够实现存储和原样再现等功能,所有这些功能都不受时间、空间和地域的限制。
 基于Web页的多彩文本是现在国内外研究的热门之一，由于各种因素的综合原因，本系统还需要进一步完善:
 （1）、对文本相应的格式化后能够显示其格式化后所对应的代码语句。
 （2）、各模块之间的调用关系区分不是太明显，容易让读者感到迷惑。
  (3)、字体和字号两个图标是自己用Photoshop做的，由于不很专业与其它图标搭配不是非常和谐。
 以上几个方面还有待于进一步的深入研究，使其变得更加完善。
参考文献
1  张海藩.软件工程导论.第四版.北京:清华出版社.2003.
2  萨师煊.计算机系统概论.第三版.北京:高等教育出版社.2000.2.
3  白鉴聪,王进.java script网页效果大师.机械工业出版社.2003.
4  白鉴聪,潘军锋,罗剑波等.PHP4编程与实例.第一版.北京:机械工业出版社.2001.1.
5 （美）Paul McFedries著　欧阳宇,张治坤等译.java script开发使用手册.机械工业出版社.2002.2.
6  (美)Jesus Castagnetto等著.薛忠胜,扬登峰等译.PHP高级编程.机械工业出版社.2001.1.
7  季强.新编Dreamweaver MX网页设计与制作.第四版.西北工业大学出版社.2004..9.
8  德州学院教务处. .附件1：毕业论文（设计）格式参考样例.2006.3.

首页 上一页 1 2 下一页 尾页 2/2/2

相关论文