互动出版网 China-Pub. com 专业图书网上第一专营店 独家提供样章 52剖析 WIki94 在代码清单5-6中,可以看到五个属性,并且我敢肯定你自己可以推论出它们的意义,具体 见表5-1。 表5-1DWK的配置属性 属性名 连接数据库所需要的JDBC驱动程序的完全限定类名 databaseurI 用于连接数据库的URI(连接字符串 databaseusername 如果数据库要求输入用户名( Derby数据库默认不需要用户名),就使用这个值 databasepassword 如果数据库要求输入用户密码,这个值就是用户的密码 editlockTime 一个用户在编辑文章时,该文章将会被锁定一段时间,这样其他用户就不能同 时编辑它。这个值定义了锁定的时间长度,单位为秒 这样,数据库连接信息就被抽取到数据库之外。以后只要你愿意,就可以很容易地切换使用其 他不同的 RDBMS。不过,切换数据库还需要修改构建数据库表的代码,很快我们就可以看到。 522客户端代码 到日前为止,我们已经看过所有的配置文件,现在可以继续来看一些实际的代码,先从客户 端代码开始。不过,首先要了解 WIki应用程序的界面,如图5-3所示。注意,登录后所看到的界 面不一定完全是这样的。事实上,当第一次访问Dwk的时候,“ FrontPage”文章还不存在,所 以只有创建这个文章之后,才可以看到图5-3所示的界面 Thus n the fant page tca be edtad. ws tk any ethe arck Last deed wae排200045MT40n Imel by cwl 图5-3Dwik的首页,用户登录后看到的第一个页面 以看到,这个界面被分成多个区域。首先是顶部区域,标题在左边,用户名和登录链接在 右边。顶部区域下面是顶部导航条,里面列出一些选项,可用于用户正在看的文章。左侧是另 个导航条,用户可以在里面选择其他的文章或视图。右侧是当前文章的显示区。最下面是页脚部 分,它提供一个到DWR站点的链接,或者在编辑文章时,提供一个倒数计时器,显示文章被锁 定的剩余时间。 记住这个界面,我们继续向前,了解这些部分是如何拼在一起的。先从样式表开始,它是应
5.2 剖析 DWiki 94 在代码清单5-6中，可以看到五个属性，并且我敢肯定你自己可以推论出它们的意义，具体 见表5-1。 表5-1 DWiki的配置属性 属 性 名 描 述 databaseDriver 连接数据库所需要的JDBC驱动程序的完全限定类名 databaseURI 用于连接数据库的URI（连接字符串） databaseUsername 如果数据库要求输入用户名（Derby数据库默认不需要用户名），就使用这个值 databasePassword 如果数据库要求输入用户密码，这个值就是用户的密码 editLockTime 一个用户在编辑文章时，该文章将会被锁定一段时间，这样其他用户就不能同 时编辑它。这个值定义了锁定的时间长度，单位为秒 这样，数据库连接信息就被抽取到数据库之外。以后只要你愿意，就可以很容易地切换使用其 他不同的RDBMS。不过，切换数据库还需要修改构建数据库表的代码，很快我们就可以看到。 5.2.2 客户端代码 到目前为止，我们已经看过所有的配置文件，现在可以继续来看一些实际的代码，先从客户 端代码开始。不过，首先要了解DWiki应用程序的界面，如图5-3所示。注意，登录后所看到的界 面不一定完全是这样的。事实上，当第一次访问DWiki的时候，“FrontPage”文章还不存在，所 以只有创建这个文章之后，才可以看到图5-3所示的界面。 图5-3 DWiki的首页，用户登录后看到的第一个页面 可以看到，这个界面被分成多个区域。首先是顶部区域，标题在左边，用户名和登录链接在 右边。顶部区域下面是顶部导航条，里面列出一些选项，可用于用户正在看的文章。左侧是另一 个导航条，用户可以在里面选择其他的文章或视图。右侧是当前文章的显示区。最下面是页脚部 分，它提供一个到DWR站点的链接，或者在编辑文章时，提供一个倒数计时器，显示文章被锁 定的剩余时间。 记住这个界面，我们继续向前，了解这些部分是如何拼在一起的。先从样式表开始，它是应
互动出版网 China-Pub. com 专业图书网上第一专营店 独家提供样章 52剖析 WIki95 用程序用户界面视觉和感观的基础。 styles.css文件是DWik应用程序的样式表,再普通不过了。为了节省篇幅,就不再列出这段 代码,不过在继续下面内容之前请你仔细阅读它,不要打瞌睡哦! 样式表开头使用*{}标记为文本定义全局样式。除此之外,还定义了顶部导航条以上页面的 样式、导航条自身的样式、左侧导航条的样式、文章显示区的样式、页脚区域的样式、链接的样 式,以及顶部导航条和左侧导航条上链接被单击和被悬浮的效果。当然,如果之前看过样式表(如 果读过前面的章节,就一定看过样式表),这里就不会感到好奇了。 2. index. jsp 就用户界面而言, index.jsp页面是DWk客户端代码的核心。不过,令人吃惊的是,它里 面除了基本的页面结构,就没有什么了。可以自己看一下它的代码,如代码清单5-7所示。 代码清单5-7DWik应用程序的主要标记代码—— index.jsp <title>- A DWR-Based wikis/title <script src=dwr/engine. js"></script> wr/util.js"></script <script src="js/RolloversClass. js"></script> table width="yux. borders"U"aligns"center"cellpadding=U- td cla
5.2 剖析 DWiki 95 用程序用户界面视觉和感观的基础。 1. styles.css styles.css文件是DWiki应用程序的样式表，再普通不过了。为了节省篇幅，就不再列出这段 代码，不过在继续下面内容之前请你仔细阅读它，不要打瞌睡哦！ 样式表开头使用*{ }标记为文本定义全局样式。除此之外，还定义了顶部导航条以上页面的 样式、导航条自身的样式、左侧导航条的样式、文章显示区的样式、页脚区域的样式、链接的样 式，以及顶部导航条和左侧导航条上链接被单击和被悬浮的效果。当然，如果之前看过样式表（如 果读过前面的章节，就一定看过样式表），这里就不会感到好奇了。 2. index.jsp 就用户界面而言，index.jsp页面是DWiki客户端代码的核心。不过，令人吃惊的是，它里 面除了基本的页面结构，就没有什么了。可以自己看一下它的代码，如代码清单5-7所示。 代码清单5-7 DWiki应用程序的主要标记代码——index.jsp
互动出版网 China-Pub. com 专业图书网上第一专营店 独家提供样章 52剖析 DWik <span id="userInfo if (request getUser Principal(!= null)t <%-request getUserPrincipal(. getName (% <a href="loginok jsp </td> </tr> <td colspan=2 class="cssTopNav"align="center"> <img src="img/articleo. gif id=article class="cssClickable onClick="WIki. articleClicked (; onMouseOut="Rollovers. imgOut(this) <img src="img/edito. gif" id="edit" class="cssClickable nClick="DWiki. editClickedo on MouseOver="Rollovers. imgOver(this); onMouseOut="Rollovers. imgOut(this); <img src="img/history. gif" id=history" class="cssClickable onClick="Wiki. historyClickedo) onMouseOver="Rollovers. imgOver(this); onMouseOut="Rollovers. imgOut (this);"> <img src="img/comments.gif id="comments class="cssClickable onClick="DWiki. commentsClicked(; n MouseOver=Rollovers, imgOver(this) onMouseOut="Rollovers. imgOut(this);"> </td </tr> <tr> <table border="o"cellspacing="o"cellpadding=0"> td valign="top class="cssLeftNa <img src="img/frontPageo gif id= frontPage class="cssClickable"onClick="DWiki getArticle(Front Page);
5.2 剖析 DWiki 96
互动出版网 China-Pub. com 专业图书网上第一专营店 独家提供样章 52剖析 WIki9 on MouseOver="Rollovers. imgOver(this); lovers. imgOut(this);"><br> <img src="img/allArticlesIndexo gif" id="allArticlesIndex onClick="Wiki. getArticle('AllArticlesIndex); on MouseOver="Rollovers. imgOver(this) onMouseout="Rollovers. imgOut (this);"><br> onClick="Dwiki getArticle('Search); on MouseOut="Rollovers. imgOut(this);"><br> <img src="img/helpo.gif" id="help class="cssClickable onClick="DWiki getArticle('DWikiHelp') nMouseover="Rollovers. imgover(this) onMouseOut="Rollovers. imgOut (this);"><br> <td width=100% class="CssArticl <span id="loading Message">Loading icleContents" style="displa ></span> <span id="articleEditing" style="display: none;"> You are now editing the article entitled: <b><span id="articleEditing title"> </span></b ><br> <textarea id="articleEditing text cols= 80 rOws="10></textarea> <br><br> input type="button" value=" Click To Save Changes Click="Wiki. updateArticle( <span ida"articleHistory"style="display: none;"></span> <span id-articleComments" style"display: none; ></span> </td r < tr valign=° middle" <td height- 22 colspan="2"class"cssFooter"align="center id="statusBar"> PoweredBy<ahref=http://getahead.org/dwr">dwr</a>
5.2 剖析 DWiki 97
互动出版网 China-Pub. com 专业图书网上第一专营店 独家提供样章 52剖析 WIki98 </td> </table </td> </table> </html> 在导入样式表之后,会看到DWR相关文件的导入语句。除了导入标准的 engine.js外,i 要导入uti1.js,其中包含许多工具函数。随后导入 Articled类的客户端代理。 DWikiclass 和Ro1 overclass是DWk需要导入的最后两个 JavaScript。这样,文档的<head>部分就结束 了 续向前,看看<body>部分。首先注意到的是, onload方法调用了 DWikiclass实例的 init()方法( WIki变量指向这个实例,它是在 DWikic1ass.js文件中创建的)。我们很快可 以看到这个方法的具体内容,暂时认为由它负责在启动阶段初始化应用程序。 文档体的剩余部分则是许多直观的用于构建界面的标记语句。里面也会有少量的 Java scriplet 代码,负责提交用户名。当用户首次访问页面的时候,页面的右上角显示的用户名为“匿名用户 ( Anonymous User)”。你可以看到,这个是通过调用 request. getUserPrincipal来完成的。如 果 request. getUserprincipa1()返回nu11,表明用户尚未登录,他或她是匿名用户。如果返 回的不是nu1l,则可调用 request. getUserprincipa1(). getName(),它返回用户登录的名字 并将其显示出来。这样可以为应用程序添加一点个性化的内容,让用户感到亲切,使用户更喜欢这 个应用程序。 用户名旁边是登录链接,你会发现,它指向一个新窗口。现在讨论登录过程 为了实现之前讨论的登录过程,需要请求受保护的资源1 ogino.jsp,最终生成1ogin.jsp 页面。作为基于Aax的Web20应用程序,我们当然觉得重新加载这个页面不合适,不是吗?因 此,这里采用了另外的方法,首先在新的窗口中打开所谓的登录“流程”。当登录成功时,仅仅 需要更新页面右上角所显示的用户名。随后的所有请求将成为实际登录后的请求。 接下来,看看顶部导航菜单的标记代码。你会注意到,这里都是简单的<img>标签,每个<img> 标签都附带一个onc1ick事件处理函数,它们都调用 DWikiclass实例中的方法。这些方法的命 名方式为按钮的名字加“ Clicked”,例如 articleclicked()、 editclicked() historyclicked()以及 commentsclicked()。你可以看到,每个图片还附带 onMouseover和 onMouseout事件处理函数,它们调用了Ro1 loversclass实例( Rollovers变量指向的实例)中 的 imgover()和 imgout(方法。这些方法以特定图片的引用作为参数,利用<img>标签的ID处理 典型的 JavaScript翻转效果。这里并没有什么不寻常的东西。 接下来是左侧导航条的标记代码,你会看到它的每一项基本上类似于顶部导航条中的每
5.2 剖析 DWiki 98 在导入样式表之后，会看到DWR相关文件的导入语句。除了导入标准的engine.js外，还 要导入util.js，其中包含许多工具函数。随后导入ArticleDAO类的客户端代理。DWikiClass 和RolloversClass是DWiki需要导入的最后两个JavaScript。这样，文档的<head>部分就结束 了。 继续向前，看看<body>部分。首先注意到的是，onLoad方法调用了DWikiClass实例的 init()方法（DWiki变量指向这个实例，它是在DWikiClass.js文件中创建的）。我们很快可 以看到这个方法的具体内容，暂时认为由它负责在启动阶段初始化应用程序。 文档体的剩余部分则是许多直观的用于构建界面的标记语句。里面也会有少量的Java scriplet 代码，负责提交用户名。当用户首次访问页面的时候，页面的右上角显示的用户名为“匿名用户 （Anonymous User）”。你可以看到，这个是通过调用request.getUserPrincipal来完成的。如 果request.getUserPrincipal()返回null，表明用户尚未登录，他或她是匿名用户。如果返 回的不是null，则可调用request.getUserPrincipal().getName()，它返回用户登录的名字 并将其显示出来。这样可以为应用程序添加一点个性化的内容，让用户感到亲切，使用户更喜欢这 个应用程序。 用户名旁边是登录链接，你会发现，它指向一个新窗口。现在讨论登录过程。 为了实现之前讨论的登录过程，需要请求受保护的资源loginOk.jsp，最终生成login.jsp 页面。作为基于Ajax的Web 2.0应用程序，我们当然觉得重新加载这个页面不合适，不是吗？因 此，这里采用了另外的方法，首先在新的窗口中打开所谓的登录“流程”。当登录成功时，仅仅 需要更新页面右上角所显示的用户名。随后的所有请求将成为实际登录后的请求。 接下来，看看顶部导航菜单的标记代码。你会注意到，这里都是简单的<img>标签，每个<img> 标签都附带一个onClick事件处理函数，它们都调用DWikiClass实例中的方法。这些方法的命 名方式为按钮的名字加“ Clicked ”， 例 如 articleClicked() 、 editClicked() 、 historyClicked()以及commentsClicked()。你可以看到，每个图片还附带onMouseOver和 onMouseOut事件处理函数，它们调用了RolloversClass实例（Rollovers变量指向的实例）中 的imgOver()和imgOut()方法。这些方法以特定图片的引用作为参数，利用<img>标签的ID处理 典型的JavaScript翻转效果。这里并没有什么不寻常的东西。 接下来是左侧导航条的标记代码，你会看到它的每一项基本上类似于顶部导航条中的每一