Java中的复合视图设计模式（Composite View Design Pattern）

栏目: 后端 · 发布时间: 5年前

内容简介：使用由多个子视图组成的复合视图。整个模板的每个子视图可以整体动态地包括在内，并且可以独立于内容来管理页面的布局。Apache Tiles和SiteMesh  框架使用Composite View Design Pattern。为简单起见，这种模式分为若干部分，如问题，动因，结构，解决方案，实施等。

使用由多个子视图组成的复合视图。整个模板的每个子视图可以整体动态地包括在内，并且可以独立于内容来管理页面的布局。

Apache Tiles和SiteMesh  框架使用Composite View Design Pattern。

为简单起见，这种模式分为若干部分，如问题，动因，结构，解决方案，实施等。

目 录

  • 问题
  • 动因
  • 解决方案
  • 说明
  • 结构 - 类图，序列图
  • 参与者和责任
  • 履行
  • 后果
  • 适用性
  • 现实世界的例子
  • 参考

问题

（问题部分描述了开发人员面临的设计问题）

您希望从模块化的原子组件部件构建视图，这些部件组合在一起以创建复合整体，同时独立地管理内容和布局。

动因

（本节描述了列出影响问题和解决方案的原因和动机。动因列表突出了人们可能选择使用模式并提供使用模式的理由的原因）

  • 您需要在多个视图中重复使用的常见子视图，例如页眉，页脚和表格，这些子视图可能出现在每个页面布局中的不同位置。
  • 您在子视图中有内容可能经常更改或可能受某些访问控制的约束，例如限制对特定角色的用户的访问。
  • 您希望避免在多个视图中直接嵌入和复制子视图，这使得布局更改难以管理和维护。

解决方案

使用由多个原子子视图组成的复合视图。整个模板的每个子视图可以整体动态地包括在内，并且可以独立于内容来管理页面的布局。

例如，门户网站包含许多独立的子视图，例如新闻源，天气信息和单个页面上的股票报价。可以独立于内容来管理页面的布局。

此模式的另一个好处是，Web设计人员可以对站点的布局进行原型设计，将静态内容插入每个模板区域。随着站点开发的进展，实际内容将替换这些占位符。该方法提供了改进的模块化和可重用性，以及改进的可维护性。

结构体

我们使用UML类图来显示解决方案的基本结构，本节中的UML序列图介绍了解决方案的动态机制。

下面是表示Composite View Design Pattern关系的类图。

类图

Java中的复合视图设计模式（Composite View Design Pattern）

序列图

Java中的复合视图设计模式（Composite View Design Pattern）

参与者和责任

Client - 客户端发送到视图。

View- 视图。

SimpleView- 表示的复合整体的原子部分。它也被称为视图片段或子视图。

CompositeView- 复合视图由多个视图组成。这些视图中的每一个要么是一个简单视图，要么本身可能是一个复合视图。

Template- 模板，代表视图布局。

这种模式如何运作

为了理解这种模式，我们举一个例子。在下图中，您可以看到网页的典型结构。

Java中的复合视图设计模式（Composite View Design Pattern）

这种结构称为“经典布局”。模板根据此布局组织页面，将每个“块”放在所需的位置，以使标题上升，页脚向下等。

可能会发生这种情况，例如点击链接，只需要更改页面的一部分，通常是正文。

Java中的复合视图设计模式（Composite View Design Pattern）

如您所见，页面不同，但它们的区别仅在于正文部分。但是请注意，页面是不同的，它不像框架集中的框架刷新！

使用复合视图模式，页面的其他部分已被重用，并且已保留布局一致性。

履行

在此示例中，View管理是使用标准 JSP 标记实现的，例如 jsp:include  标记。使用标准标签来管理视图的布局和组合是一种易于实施的策略。

标准标签视图管理策略 示例   ： 

<html>
   <body>
      <jsp:include
         page=<font>"/jsp/CompositeView/javabean/banner.seg"</font><font> flush=</font><font>"true"</font><font>/>
      <table width=</font><font>"100%"</font><font>>
         <tr align=</font><font>"left"</font><font> valign=</font><font>"middle"</font><font>>
            <td width=</font><font>"20%"</font><font>>
               <jsp:include page=</font><font>"/jsp/CompositeView/javabean/ProfilePane.jsp"</font><font>
                  flush=</font><font>"true"</font><font>/>
            </td>
            <td width=</font><font>"70%"</font><font> align=</font><font>"center"</font><font>>
               <jsp:include page=</font><font>"/jsp/CompositeView/javabean/mainpanel.jsp"</font><font>
                  lush=</font><font>"true"</font><font>/>
            </td>
         </tr>
      </table>
      <jsp:include page=</font><font>"/jsp/CompositeView/javabean/footer.seg"</font><font>
         flush=</font><font>"true"</font><font>/>
   </body>
</html>
</font>

Apache Tiles与Spring MVC集成的 示例 

Apache Tiles是一个免费的开源模板框架，完全基于Composite设计模式。在Apache Tiles中，通过组合称为Tiles的子视图组合来构建页面。

第1步： 提供依赖关系配置 

<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-jsp</artifactId>
    <version>3.0.7</version>
</dependency>

第2步： 定义平铺布局文件 

<tiles-definitions>
    <definition name=<font>"template-def"</font><font>
           template=</font><font>"/WEB-INF/views/tiles/layouts/defaultLayout.jsp"</font><font>>  
        <put-attribute name=</font><font>"title"</font><font> value=</font><font>""</font><font> />  
        <put-attribute name=</font><font>"header"</font><font>
           value=</font><font>"/WEB-INF/views/tiles/templates/defaultHeader.jsp"</font><font> />  
        <put-attribute name=</font><font>"menu"</font><font>
           value=</font><font>"/WEB-INF/views/tiles/templates/defaultMenu.jsp"</font><font> />  
        <put-attribute name=</font><font>"body"</font><font> value=</font><font>""</font><font> />  
        <put-attribute name=</font><font>"footer"</font><font>
           value=</font><font>"/WEB-INF/views/tiles/templates/defaultFooter.jsp"</font><font> />  
    </definition>  
    <definition name=</font><font>"home"</font><font> <b>extends</b>=</font><font>"template-def"</font><font>>  
        <put-attribute name=</font><font>"title"</font><font> value=</font><font>"Welcome"</font><font> />  
        <put-attribute name=</font><font>"body"</font><font>
           value=</font><font>"/WEB-INF/views/pages/home.jsp"</font><font> />  
    </definition>  
</tiles-definitions>
</font>

第3步： ApplicationConfiguration和其他类 

@Controller
@RequestMapping(<font>"/"</font><font>)
<b>public</b> <b>class</b> ApplicationController {
    @RequestMapping(
        value = {
            </font><font>"/"</font><font>
        },
        method = RequestMethod.GET)
    <b>public</b> String homePage(ModelMap model) {
        <b>return</b> </font><font>"home"</font><font>;
    }
    @RequestMapping(
        value = {
            </font><font>"/apachetiles"</font><font>
        },
        method = RequestMethod.GET)
    <b>public</b> String productsPage(ModelMap model) {
        <b>return</b> </font><font>"apachetiles"</font><font>;
    }

    @RequestMapping(
        value = {
            </font><font>"/springmvc"</font><font>
        },
        method = RequestMethod.GET)
    <b>public</b> String contactUsPage(ModelMap model) {
        <b>return</b> </font><font>"springmvc"</font><font>;
    }
}

<b>public</b> <b>class</b> ApplicationInitializer <b>extends</b>
AbstractAnnotationConfigDispatcherServletInitializer {

    @Override
    <b>protected</b> Class << ? > [] getRootConfigClasses() {
        <b>return</b> <b>new</b> Class[] {
            ApplicationConfiguration.<b>class</b>
        };
    }

    @Override
    <b>protected</b> Class << ? > [] getServletConfigClasses() {
        <b>return</b> <b>null</b>;
    }

    @Override
    <b>protected</b> String[] getServletMappings() {
        <b>return</b> <b>new</b> String[] {
            </font><font>"/"</font><font>
        };
    }
}
</font>

最后，在ApplicationConfiguration类中，我们使用TilesConfigurer和TilesViewResolver类来实现集成：

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = <font>"com.baeldung.tiles.springmvc"</font><font>)
<b>public</b> <b>class</b> ApplicationConfiguration <b>extends</b> WebMvcConfigurerAdapter {
    @Bean
    <b>public</b> TilesConfigurer tilesConfigurer() {
        TilesConfigurer tilesConfigurer = <b>new</b> TilesConfigurer();
        tilesConfigurer.setDefinitions(
            <b>new</b> String[] {
                </font><font>"/WEB-INF/views/**/tiles.xml"</font><font>
            });
        tilesConfigurer.setCheckRefresh(<b>true</b>);

        <b>return</b> tilesConfigurer;
    }

    @Override
    <b>public</b> <b>void</b> configureViewResolvers(ViewResolverRegistry registry) {
        TilesViewResolver viewResolver = <b>new</b> TilesViewResolver();
        registry.viewResolver(viewResolver);
    }

    @Override
    <b>public</b> <b>void</b> addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(</font><font>"/static/**"</font><font>)
            .addResourceLocations(</font><font>"/static/"</font><font>);
    }
}
</font>

第4步： 平铺模板文件 

<html>
    <head>
        <meta
          http-equiv=<font>"Content-Type"</font><font> content=</font><font>"text/html; charset=ISO-8859-1"</font><font>>
        <title><tiles:getAsString name=</font><font>"title"</font><font> /></title>
        <link href=</font><font>"<c:url value='/static/css/app.css' />"</font><font> 
            rel=</font><font>"stylesheet"</font><font>>
        </link>
    </head>
    <body>
        <div <b>class</b>=</font><font>"flex-container"</font><font>>
            <tiles:insertAttribute name=</font><font>"header"</font><font> />
            <tiles:insertAttribute name=</font><font>"menu"</font><font> />
        <article <b>class</b>=</font><font>"article"</font><font>>
            <tiles:insertAttribute name=</font><font>"body"</font><font> />
        </article>
        <tiles:insertAttribute name=</font><font>"footer"</font><font> />
        </div>
    </body>
</html>
</font>

后果

  • 改善模块化和重用
  • 添加基于角色或基于策略的控制
  • 增强可维护性
  • 降低可维护性
  • 降低性能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
智能革命

智能革命

李彦宏 等 / 中信出版集团 / 2017-5-1 / 68.00元

人类历史上的历次技术革命，都带来了人类感知和认知能力的不断提升，从而使人类知道更多，做到更多，体验更多。以此为标准，李彦宏在本书中将人工智能定义为堪比任何一次技术革命的伟大变革，并且明确提出，在技术与人的关系上，智能革命不同于前几次技术革命，不是人去适应机器，而是机器主动来学习和适应人类，并同人类一起学习和创新这个世界。“人工智能”正式写入2017年政府工作报告，折射出未来人工智能产业在我国经济发......一起来看看 《智能革命》 这本书的介绍吧!

码农工具
CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3