网页设计作业个人网站模板基于模板库的动态网页的设计研究及实现
作者:赵 洋 张素宁 陈未如
来源:《现代电子技术》2008年第20
        要:动态网页是指网页能依据不同的情况做出动态的响应。在对基于模板的动态网页设计问题进行分析的基础上,使用JSP 这种动态网页技术,并使用Struts模板标签,说明模板技术是如何将网页所要实现的功能和网页中的图形、文字等的布局进行分离的,并把模板库思想动态网页相结合,最终将页面按照整体各部分的功能类型分类,总结归纳出多个不同的页面模板,组成一种小型应用系统的常用模板库。
        关键词:模板库;动态网页;JSPStruts
        中图分类号:TP311.52文献标识码:B文章编号:1004373X(2008)2011603
        Research and Realization of Dynamic Web Pages Based on Template Storage
        ZHAO Yang,ZHANG Suning,CHEN Weiru
        (School of Computer Science and Technology,Shenyang Institute of Chemical Technology,Shenyang,110142,China)
        AbstractDynamic web page is that the web page can make dynamic response according to different situation.The design of dynamic web page,which is based on template is analyzed.Using JSP and Struts based on analysis,the problem about separation between the design of web page and the function is illustrated.Finally,the common page type is generalized,the common template storage,which is used in small application system is implemented.
        Keywordstemplate storage;dynamic web page;JSP;Struts
        1
        目前,随着各种应用软件的开发趋于系统化,模板技术被广泛地应用于各种应用系统的开发设计中,使用模板可以方便管理网络应用程序,它事先搭建出一些常用的框架结构,系统设计人员可以根据自己的需要方便地从模板库中选择模板,而不用自己重新去搭建系统模型,
节省了用户的开发时间<sup>[1]</sup>。简单的说,模板技术是一种使用相同的代码来实现不同的函数和类的技术。通过定义模板函数和模板类,使不同的函数和类共享同一段代码,从而提高开发效率。
        动态网页是指网页能依据不同的情况做出动态的响应。模板技术应用在C++中的核心思想是通过将所要实现的函数或者类的功能,与这个函数或者类的数据类型分离,从而实现不同的函数和类共享同一段代码;而将模板技术应用于动态网页的设计时,主要是利用模板技术的这种将功能和数据类型分离的思想,把网页所要实现的功能和网页中的图形、文字等的布局进行分离。因为动态网页和C++的内涵是完全不同的,所以把模板技术应用于动态网页中,让网页的程序员只需专注于内核的程序、算法的开发和调试,而网页的界面则由网页美术设计人员利用自己最熟悉的可视化编辑器设计页面布局,无需担心破坏任何嵌入到页面的代码<sup>[2]</sup>。在这种意义上实现系统设计人员工作上真正的合作与分工。
        在本设计应用中,JSP 这种动态网页技术为例,并使用Struts模板标签,说明模板技术是如何将网页所要实现的功能和网页中的图形、文字等的布局进行分离的,并最终使页面按照整体各个部分的功能类型分类,总结归纳出多个不同的页面模板,组成一种小型应用系统的常用模板库。
        2 基于模板库的动态网页的设计研究
        2.1 模板思想
        通过模板可以创建很多结构相似的东西,模板帮助避免许多重复的工作,这对创建网络应用程序是一件很方便的事情。
        在大多数的网络应用程序中,经常需更换的是内容。JSP很容易做到这一点,模板是一种JSP文件,它包含参数化了的内容。因为JSP默认提供一个include机制-jsp:include>标签。一个标准页面可以通过改变include文件来改变它的内容。当需要改变的不仅是页面的内容,还包括此页面的布局时,用Java提供的布局管理机制可以帮人们更形象地理解这些问题。
        当容器中的组件改变时,布局管理器会决定怎么样将新的组件部署到容器中。此外,容器本身也可以作为其他容器的组件,从而实现嵌套。在一些简单的情况下,JSP就可以作为一个网络应用程序的模板,其功能则等价于布局管理器。模板隐藏了Web页面布局的实现方法,换句话说,它隐藏了布局的法则。假如布局法则需要改变,则这些改变将会受限于模板。Web页面通过实现这个模板来改变内容。
        模板集成了布局法则,当要改变布局时,需要做的仅是改变模板。这些改变会引起相关页面布局的改变,而不需要去改变这些页面本身。在门户应用程序中,这就意味着当大量页面需要采用同样布局时在时间上的节省。
        2.2 基于模板库的动态网页设计
        StrutsJakarta-Apache论坛下的一个开源项目,它提供类集、标签库和一些能作为Web开发基础的接口。网络应用程序框架使用MVCModelViewController)模式,能简化网络站点的开发。Struts正是这样的一个框架。
        标签库的功能是将Java代码从JSP页面中移走,这意味这不懂JavaWeb设计者也可以维护一个基于JSPWeb站点。
        Struts框架中,用3个模板标签来实现模板:
        Template标签库定义了处理页面布局的标签,它可以帮助用户在拥有许多相同的情况下,只需改变模板,就可以使用所有页面产生同样的效果。
        插入标签InsertTag-template:insert>:该标签可以在应用程序的JSP页面中插入动态模板,在容器/集合单元文件(collecting unit file)中使用。它定义了当前容器要使用的模板,类似于Java GUI中的container.setLayout(layout)方法。在它之后用<template:put>标签定义组件。
        放入标签PutTag—template:put>:它是<template:insert>标签的子标签,在容器/集合单元文件(collecting unit file)中使用。其定义了组成容器/集合单元的组件/内容,类似于Java GUI中的container.add(component)方法。每个PutTag标签必须有一个相关组件的名称。
        获得标签GetTag—template:get>:在作为模板的JSP文件中使用,它告诉模板由PutTag标签定义的不同组件的名称。类似于Java GUI中的layout.addLayoutComponent(componentName,component)方法。
        Struts 1.1开始,引入另一种模板机制—Tiles,现在它已经成为了模板机制的一个主要分支。Tiles机制定义与Tiles网络站点中,并且与Struts定义的模板标签兼容。事实上,Tiles是模板标签的一个扩展集。Tiles允许传递参数,从而对容器有更多的控制权。当想要使模板
和容器具有动态特性时变的非常有用。此外,TilesStruts动作组件(Struts action components)结合的更为紧密。但是,Tiles会使代码变的更为复杂。
        基于网站的系统开发中,页面的设计基本上都遵循了一个模式,即包含导航、页面、页眉、页脚和主体,如图1所示。
        而在整个的页面中,导航、页眉、页脚一般不会改变,只有主体部分需要依照实际进行个性化的设置。这种一致性的布局为用户浏览网站提供了更多的方便。
        在理想状态下页面的代码反应了高层抽象的组织结构。应使用一种通用模板来说明页面结构,然后仅改变需要更改的内容,而这样的结构体系就是复合视图。
        在复合视图模式中,把对象看作是一种树状结构,父结点与子结点实现相同的接口,在J2EE设计模式中,视图的应用是其被称为复合视图模式的一大原因。该模式的思想继承了GOF的复合模式:把视图(页面)视为大量元素(导航页眉页脚主体)的集合,每个元素是一个叶结点,而每个元素也可以是一个容器,包含更多的子元素。复合视图模型中子元素在显示时的排列构造称为布局。在一个视图中将子元素处理得更好的解决方
案就是将视图的布局从视图中抽离出来,形成由一系列通用组件组成的模板。模板提供一组普通的组件,用于描述页面高层抽象的组织结构,可灵活修改和添加组件,动态地改变整个视图,而模板本身又具有可重用的性质3
        3 模板库的设计实现
        模板库的设计采用上述基于模板的动态网页设计思想,主要由StrutsTiles框架实现,系统采用Tomcat5.0作为应用服务器,Eclipse3.2作为前端开发工具,定义了模板页面:Manager_template.jspStudent_template.jsp来具体构架整个系统页面,其主要是根据一般应用系统的管理员和用户2种身份来设计的。模板Manager_template.jsp是管理员的页面模板,Student_template.jsp是用户的页面模板。这两个模板定义了2种布局方式,换句话说,它们定义了2种不同的布局法则。相应地,还可以定义其他的页面布局模板,Others_template.jsp

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。