J2EE项目实训Struts框架技术——第4章 Struts Tiles框架及应用（第1部分）

1、杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料第4章 struts tiles框架及应用（第1/3部分）在应用系统的模型层的开发中，一般都遵循分层设计和开发实现的基本原则，通过合理地分层可以隔离某个层中的组件变化所造成的对其它层中组件的影响。而能否将分层隔离的设计思想具体应用于web应用系统的表示层的设计和开发实现中，从而达到分离页面的外观感觉（页面的布局）和具体的页面内容呢？在j2se的图形用户界面（gui）的开发中，可以应用布局管理器（layout）实现在gui容器组件（如窗口和对话框）中指定各个视图组件在容器组件中的分布位置；而在常规的web应用系统的开发中，实现将web页面布

2、局和内容相互分离是使用jsp技术中的文件包含技术。在jsp的技术规范中提供了动态（通过include动作）和静态（借助include指令）的包含技术实现。而更好的实现技术，则是应用本章将要介绍的struts 框架中所集成的tiles子框架技术。因为tiles框架是一种功能强大、而易用的动态模板和布局框架。其中的页面模板可以定义页面中的页头、导航菜单条、页面内容和页脚等各个页面组成元素的位置，而页面模板中的各个具体的内容页面是在实际应用时再被包含进来并填充这些位置。应用struts框架中的tiles框架技术是保持web应用系统的用户界面达到良好的一致性和易用性的一种有效的手段。因为用户界面的一致

3、性也将意味着用户界面中的各个组件的可重用，而可重用性将可导致应用系统不容易崩溃并且易于维护和功能扩展。1.1 struts tiles框架技术tiles 框架是由apache软件基金会（apache software foundation）发起的一个开放源代码项目，它也是一个框架、并为web应用系统的表示层的开发者提供在 servlet组件和jsp页面组件中包含其他web页面资源的功能，从而使得web应用系统的表示层开发者可以用预定义的页面组件（在tiles 框架中称为 tile）来组装各个目标页面。应用tiles 框架可以重复地使用视图组件并减少在web应用系统中的视图页面组件中重复的 ht

4、ml标签和jsp脚本的源代码。tiles框架补充和完善了struts框架，并且从 struts 1.1版开始，成为 struts框架系统发布包中的一部分。1.1.1 图形用户界面中的布局管理器1、图形用户界面中的布局管理器技术概况1）java awt和swing gui技术中的布局管理器传统的gui（graphics user interface，图形用户界面）工具包，如java awt和java swing系统包中，都提供了一些功能强大的布局管理器的系统包，利用布局管理器技术可以在gui容器组件（如窗口和对话框）中指定各个视图组件在容器组件中的排列状态和分布位置。2）使用布局管理器对表示层开

5、发所带来的主要优点应用布局管理器有助于创建复合式的图形用户界面，一个复合式图形用户界面是由一些简单的基本界面元素所构成的。因为，利用布局管理器来创建图形用户界面对应用系统的表示层的开发实现有以下主要的优点：1) 可重用性：基本界面组件可以被重用、并可以将各个不同的基本界面组件再次组合成各种不同的复合式界面。2) 可扩展性：可以方便地扩展基本的界面组件的功能，从而创建出更复杂的界面组件。3) 可维护性: 由于每个基本界面组件之间是相互独立的，因此当复合式界面组件中的某个局部区域组件发生变化时，不会影响到用户界面中的其它的区域组件。因此在一个应用系统中，使用布局和布局管理器能帮助封装图形用户界面中

6、的物理区域，以便对图形用户界面中的各个组成元素改动调整时不会影响到对该应用程序中其他图形用户界面组件或者影响达到最小化。2、如何使布局管理器技术应用于web应用系统的表示层开发中1）标准的j2ee web技术中并没有提供对页面布局的直接支持由于在标准的j2ee web技术中（如jsp规范）并没有直接提供对布局或布局管理器的支持。为了能够在j2ee web应用系统中应用布局管理器、并简化web页面的开发，提高web页面的可重用性和可扩展性，在struts tiles框架中提供了一种动态模板机制。利用模板技术实现对web网页的布局进行定义，并且同一个模板可以被多个不同的web页面所共用。此外，ti

7、les框架还允许定义可重用的tiles组件。而且简单的tiles组件可以再次被组合或扩展成为更复杂的tiles组件。2）为什么要在web应用系统中使用布局管理器由于在web网站的系统开发中，一般都需要各个web 页面在布局和风格等方面保持一致性，采用如此设计的策略主要目的是希望在将来修改页面布局和风格时，就不需要逐一修改web应用系统中的每一个页面。这种web应用系统中的页面内容与页面布局相互分离的设计效果，可以应用tiles 框架技术来实现。但在web应用系统中的web 页面中实现页面布局效果，常规的实现技术是应用html表格标签，通过将布局表格的边框线的宽度设定为0（以产生出无边框的表格）

8、，可以用这样的html表格来切割页面的版面，并在承担页面布局的html表格单元格中放置页面的内容信息。但如果采用这样的实现方式，将会导致在页面中大量的html表格版面配置的标签将与页面内容信息混杂在一起、并且紧密关联和藕合。3、应用jsp中的文件包含标签减少对相同标签的重复应用1）应用jsp中的文件包含标签的页面示例由于在很多web应用系统中，各个web页面的顶部和底部一般都是固定的（比如在页面的顶部摆放系统的logo图像，而在页面的底部提供版权和联系方式的信息）。因此，在开发实现时都会采取下面的【例4-1】所示的页面实现方法来达到减少对相同的标签的重复应用。【例4-1】 某个应用jsp中的文

9、件包含标签的页面示例应用jsp中的文件包含标签的页面2）使用include文件包含标签时所存在的主要问题由于jsp技术中的include文件包含标签其实是一种静态宏替换的方式，因此如果要修改或者调整的不只是页面中的头部和底部部分的页面内容，而是整个页面的布局形式和风格，那么就必须逐个页面进行修改；另外，大量的include标签被嵌套地使用，会使得对该页面的维护和功能扩展变得非常困难；最后也不利于对页面的跟踪调试，因为当主页面没有被修改时，容器将不会重新载入新的使用“include”语句调用的被包含的子页面，除非调用者页面和被调用者页面均被修改。因此，使用include指令不可能包含运行期的内容

10、而实现动态包含的效果。因为jsp include 指令是将被包含的目标资源作为一个静态对象（宏展开）来处理的。因此，它与基于模板的实现方法如tiles框架相比时，仍然是低效的。4、页面模板和模板页面1）什么是页面模板所谓的页面模板就是一个使用jsp 技术中的自定义标签库描述页面布局的jsp 页面。模板充当了页面布局 “定义”的角色，它定义和规定了web应用系统中的页面外观但并不指定页面的内容。而在运行期，用户可以将页面内容动态地插入到模板页面中。并且，web应用系统中的一个或多个页面可以使用同一个页面模板。下面将要介绍的tiles框架能够为页面的开发者提供动态页面模板的技术支持。2）为什么要应

11、用页面模板技术使用页面模板技术的主要目的是为了在web应用系统内获取固定的外观和感觉（布局和风格），而不必分别为每个不同的页面单独进行页面定义和设计。这样不仅能够大大地减少页面中的重复的标签数量，也提高了页面的可维护性。另外，在模板页面中也可以应用如层叠式样式表 (css)等标准的html 组件，利用样式表可以保持模板页面内部的一致性，并进一步最小化改变所造成的影响。5、在页面模板技术中使用动态包含的各种方法示例1）采用include动作标签来包含动态的内容在jsp页面中，可以采用如下所示的include 动作标签：而将head.jsp页面资源作为一个动态对象加以处理。请求发送给该资源，而且包

12、含对该资源处理的结果。2）使用tiles模板技术动态包含页面资源在该模板页面中，可以利用tiles框架中的标签来定义模板页面的布局。然后在执行时再将实际的目标内容页面包含进来。从而达到页面的布局和页面的内容相互分离的效果，下面的【例4-2】为达到该设计效果的模板页面示例，并请注意其中的黑体部分的标签内容。通过标签来定义模板页面布局中的各个组成元素。【例4-2】应用tiles模板技术的模板页面示例tiles模板页面对比【例4-1】和【例4-2】中的页面，可以了解到并没有在【例4-2】所示的页面中引入太多的新概念。而只是新增加了对tiles框架中标签库的使用，而tiles 标签库也和struts框

13、架中其他的标签库一样，在具体应用时并不需要进行特别的处理。同时请读者注意，在tiles模板的页面中是不包含任何实际的页面内容，而在运行期再将实际的页面内容插入到对应的位置定义标签中（如【例4-2】中的“pagehead”和“menubar”等标记）。1.1.2 应用tiles框架创建复合式web页面1、struts tiles框架技术及具体的应用1）struts tiles框架技术tiles框架能利用预定义的页面组件（称为 tile）来动态地组装页面。tiles 框架补充和完善了struts框架，当然开发者也可以将它独立于struts 框架而单独应用tiles框架。因为tiles 框架只是 s

14、truts 框架中的一个插件，它也可以被单独地使用。2）tiles框架技术的实现原理tiles框架是基于 jsp技术实现的，因此，如果希望在整个 web 网站中应用tiles框架技术，那么所有基于tiles框架的页面文件都必须是由应用服务器来提供的，因此要将这些页面文件设计为服务器端的动态jsp页面文件。tiles框架为web页面的创建提供了一种模板机制，它能将web网页的布局和页面的内容相互分离。同时它也允许页面开发者先创建出页面模板，然后在运行时动态地将页面内容插入到页面模板文件中；尽管tiles框架也是建立在jsp技术中的“include包含指令”的基础上，但它提供了比jsp的“incl

15、ude包含指令”更强大的功能。tiles框架具有如下几个方面特性：1) 创建可重用的模板tiles框架主要是将一个完整的web页面划分成几个独立的部分（区域），而每个部分都分别对应不同的jsp内容页面文件，这样将能够大大地提高页面元素的可重用性和可维护性。2) 在运行时动态地构建和装载页面的内容3) 定义可重用的tiles组件（tiles框架允许在专门的xml文件中配置定义tiles组件）4) 并且支持页面的国际化（国际化是面向多语言环境的商业应用系统中不可或缺的一部分） 2、为什么要应用tiles框架技术在开发web网站应用系统时，常常要求同一网站中的所有web页面或者某个模块中的各个页面要

16、求保持一致的外观，比如要求有相同的布局、页头、页尾和菜单项目等。图4.1所示为某个web网站应用系统中页面的布局定义方案。利用页面布局可以实现复合式网页的效果，同时应用页面布局技术也能够达到统一规划页面的风格效果。图4.1 某个页面的布局定义方案示例head area（页头区）left area（左菜单区）body area（显示信息的内容区）3、应用tiles模板技术创建复合式的web页面1）tiles框架中的模板技术tiles模板页面其实是一种描述页面布局的jsp页面，但tiles模板页面仅仅定义web页面的样式和布局风格，而不指定页面的具体内容。2）使用tiles框架中的模板技术所体现出

17、的主要优点采用tiles框架中的模板机制，能够大大地提高页面的可重用性和可维护性，因为在模板页面中定义了一批web网页共同的布局。如果web网页的布局需要发生变化，只需要修改模板文件中的有关布局的定义，而无需修改各个具体的内容网页文件；在web应用系统运行时，才把特定的页面内容插入到模板页面中；同一个模板可以被多个不同的web页面所共用，使用页面模板可以轻松地实现web应用系统中的各个页面保持相同的外观和布局，而无需为每个页面分别单独进行布局设计和实现。1.1.3 应用tiles框架构建web应用系统的表示层1、tiles框架中的tiles组件1）tiles组件就是web 页面中的某个区域为了

18、最大程度地提高页面的可重用性和可维护性，在tiles框架中引入了tiles组件的概念。tiles组件可以是一个完整的网页，也可以为网页的一部分。并且简单的tiles组件可以再次组合成更加复杂的tiles组件，或被扩展为其他复杂的tiles组件。所谓tiles框架中的tiles组件其实就是web 页面中的某个矩形区域在tiles框架中称为tile。这些不同的矩形区域构成了一个完整的页面，一个页面可以仅仅由一个区域所构成，当然也可以分割成几个不同的区域。tile也可以由其他tile装配而成、并且tile 可以递归构建，并表现为一个树形结构。图4.2所示显示了某个web应用系统中的各个tiles组件

19、（区域）的示例。图4.2 应用tiles组件的示例2）tiles框架中的定义（definition）在tiles框架技术中, 一个完整的web页面，包括布局和对它们的各个tiles组件的路径声明，可以表现为一个称为是定义（definition）的对象。为了能够完整地组装一个特定的web页面，开发者可以简单地引用tiles框架中的某个“定义”。tiles框架技术中的“定义”也像struts 框架中的其他组件定义一样，是通过一个xml 格式的文件来进行配置定义的，系统在启动时将会预先装入该配置文件。3）定义tiles组件的方法tiles框架允许页面的开发者通过xml配置文件（如名称为tiles-d

20、efs.xml）来配置和定义出本系统中的tiles组件，一个tiles定义声明了一组属性，以便将页面布局描述成为一个独立的对象并对页面布局中的每一部分进行标识声明。下面的【例4-3】所示的代码为基于tiles框架的某个web应用系统中的tiles-defs.xml文件中的配置内容示例。在该示例中为某个web应用系统中的用户登陆、注册和用户信息的修改等三种应用环境设计tiles组件。【例4-3】 定义tiles组件的xml配置文件示例 【例4-3】示例中的标签元素中的“name属性”指定了某个tiles组件的名字，而其中的“path属性”则指定tiles组件所使用的模板页面文件路径和文件名称，标

21、签元素中的子标签元素用于定义向模板页面文件（本示例为tileslayout.jsp）中的指定名称定位处实际所插入的具体内容网页文件的名称。在【例4-3】示例中还应用了tiles框架中的tiles组件定义时的继承技术，利用继承特性可以扩充某个基础布局的定义，重新定义当中所管理的页面资源。在【例4-3】示例中的douserlogin定义扩充自dousermanage的定义，并重新定义了其中的pagecontent属性，其它未重新定义的属性将直接继承自dousermanage的定义。如果基础布局的细节改变了，那么根据此扩展的其它布局定义也会改变。这就将面向对象技术中的继承和封装原理应用到动态页面设计

22、之中。另外，如果将来要改变页面的版面配置布局的方式，可以直接修改在tiles-defs.xml文件中的某个定义中的“path属性”所指向的目标布局的jsp页面为另一种布局的jsp页面；当然，如果需要修改所应用的某个内容页面，也只需要更改在tiles-defs.xml文件中某个定义中的标签中由“value属性”所指定的目标内容jsp页面；对表示层中的布局和内容的更改和维护工作都集中在tiles框架中的tiles-defs.xml定义配置文件中，并达到将布局配置与页面内容相互分离的目的。2、添加与tiles框架有关的系统包和配置文件1）包含tiles框架所需要的各个系统包文件 在struts框架的

23、系统jar包文件中已经包含有运行tiles框架所需要的各个jar包文件，如果在web应用系统中使用了tiles框架，应该检查和保证以下的各个jar包文件必须位于web应用系统中的web-inf/lib目录中：struts.jar、commons-digester.jar、commons-beanutils.jar、commons-collections.jar和commons-logging.jar。2）包含tiles框架所需要的标签库的描述文件此外，还应该把与tiles标签库有关的描述文件struts-tiles.tld拷贝到web-inf目录下。图4.3所示为某个web应用系统中包含til

24、es框架所需要的标签库的描述文件struts-tiles.tld的图示。图4.3包含tiles框架所需要的标签库的描述文件3）在struts-config.xml配置文件中添加与tiles框架有关的插件配置项目虽然在stuts框架中附带了tiles框架的系统，但在默认情况下tiles框架系统并未启用。要启用tiles框架，需要在struts-config.xml配置文件中添加与tiles框架有关的插件配置项目，具体的配置项目内容请见【例4-4】所示。在tiles框架中是采用xml格式的文件作为系统的配置文件，并用它来管理各个页面配置的相关资源，当web应用系统启动时，tiles框架的插件系统程

25、序tilesplugin类会加载和解析这个配置文件。本示例中所采用的配置文件放置在/web-inf/的目录下、并且文件名称为tiles-defs.xml。【例4-4】添加与tiles框架有关的插件配置项目的示例在【例4-4】的插件配置项目中添加tilesplugin插件的定义，tilesplugin插件用于加载tiles组件的配置文件；同时再为该插件定义两个属性项目，其一为“definitions-config”以指示与tiles框架有关的定义配置文件tiles-defs.xml的名称和目录路径，如果系统中有多个不同的定义配置文件，则它们之间用逗号分隔；另一各属性为“definitions-p

26、arser-validate”，表示需要对tiles-defs.xml文件在解析时进行语法方面的检查。可选值包括“true”和“false”，默认值为true。因此如果在tiles-defs.xml文件中有标签的语法错误，则可以在系统启动时能够看到下面图4.4所示的异常抛出信息。图4.4 指示在tiles-defs.xml文件中的标签语法错误的异常提示信息的图示4）在/web-inf/的目录下添加tiles-defs.xml文件在tiles-defs.xml文件中定义出本web应用系统中所需要应用的各个tiles组件，具体的配置项目的内容请见【例4-3】所示。3、设计web应用系统中的模板页面

27、由于模板页面是作为布局定义的一个jsp文件，在该模板页面中并不实际包含页面的内容，而只不过包含标签。该标签定义模板页面中的各个tiles组件（“活动”的区域）。在本示例中，将模板页面从上至下分为四个区域系统的logo区显示系统的logo图像（请见【例4-5】中的“logoimage”定义），全局导航条区以显示系统中的各个全局菜单（请见【例4-5】中的“globalmenubar”定义），页面的内容区以显示实际的页面内容（请见【例4-5】中的“pagecontent”定义），最后为系统的版权和联系方式信息的显示区（请见【例4-5】中的“authorarea”定义）。某个web应用系统中的模板页面

28、的具体内容请见【例4-5】所示，其中的黑体部分的标签内容为布局定义标签。【例4-5】某个web应用系统中的模板页面内容示例 蓝梦bbs论坛系统 tiles的参数称为属性（attribute），tile 的属性在插入tile 时定义，并仅在tile 内可见。并且它对子tile 和包含该tile 的页面也是不可见的。这样在同一个tile 被在一个页面中使用数次的情况下也可以避免名称冲突。开发人员可以专注于如何最好地使用好tile 而不用担心名称冲突。4、设计模板页面中的logo区标志图像所在的内容子页面webbbslogo.jsp在该webbbslogo.jsp中添加本web应用系统的logo标志

29、图像的标签，该webbbslogo.jsp页面为普通的jsp页面，具体的结果请见下图4.5所示。考虑本书的篇幅，没有将该页面的具体内容标签附录出。图4.5 本web应用系统的logo标志图像5、设计模板页面中的全局导航条菜单项目的内容子页面webbbsmenubar.jsp在该webbbsmenubar.jsp中添加本web应用系统的全局导航条菜单项目标签，并为每个菜单项目添加对应的超链接。该webbbsmenubar.jsp页面也为普通的jsp页面，具体的结果请见下面的图4.6所示的页面预览图示。考虑本书的篇幅，也没有将该页面的具体内容附录出。图4.6 本web应用系统的全局导航条菜单项目6

30、、设计模板页面中的具体功能的各个内容页面根据web应用系统中的各个功能的要求设计出对应的内容页面文件，下面以实现用户登陆功能的douserlogin.jsp文件和实现用户注册功能的douserregister.jsp为示例来说明如何进行内容页面的设计开发。在实现用户登陆功能的douserlogin.jsp页面中只需要包含有登陆表单的内容，而不再需要重复地包含logo区标志图像和全局导航条菜单项目等内容。该douserlogin.jsp页面也为普通的jsp页面，具体的结果请见下图4.7所示。考虑本书的篇幅，同样也没有将该douserlogin.jsp页面的具体内容附录出。图4.7 douserl

31、ogin页面中的登陆表单对于在实现用户注册功能的douserregister.jsp页面中也只需要包含有注册表单的内容，同样也不再需要重复地包含logo区标志图像和全局导航条菜单项目等内容。该douserregister.jsp页面也为普通的jsp页面，具体的结果请见下图4.8所示。考虑本书的篇幅，同样也没有将该douserregister.jsp页面的具体内容附录出。其中的用户图像文件由于是动态定位的，因此在静态预览中不能正确地显示出。图4.8 douserregister页面中的注册表单7、设计模板页面中的版权信息显示的页面authorarea.jsp在该authorarea.jsp中添加本web应用系统中的版权信息显示的具体内容及标签，该authorarea.jsp页面也为普通的jsp页面，具体的结果请见下面的图4.9所示。考虑本书的篇幅，没有将该页面的具体内容附录出。图4.9 版权信息显示的authorarea.jsp页面预览图示8、设计系统中的某个具体功能的请求页面下面以实现用户登录功能为示例进行说明，设计系统中的用户登录功能请求的目标页面tilesuserlogin.jsp，该tilesuserlogin.jsp页面也称为主调页面。在