【Java设计模式】组合视图模式：增强应用程序中UI的一致性

一、概述

在Java中，组合视图设计模式有助于管理复杂的层次视图。本文将详细介绍该模式的意图、解释、编程示例、适用场景、实际应用、优点和权衡。同时，还将提供示例代码的下载链接，方便读者进行学习和实践。

二、组合视图设计模式的意图

组合视图设计模式的主要目标是将对象组合成树结构，以表示部分 - 整体层次结构。这允许客户端统一对待单个对象和对象的组合，简化了复杂层次视图的管理。

三、组合视图模式的详细解释及实际示例

实际示例：
- 组合视图设计模式的一个现实世界示例是Web应用程序中仪表板的布局。考虑一个金融仪表板，它显示各种小部件，如股票图表、最近的交易、账户余额和新闻提要。这些小部件中的每一个都是可以独立更新和管理的单独视图组件。通过使用组合视图模式，这些单独的小部件被组合成一个统一的仪表板视图。这种方法允许轻松地重新组织仪表板，添加新的小部件而不会干扰现有的小部件，并对整体布局进行一致的管理。这种视图的层次结构组合反映了仪表板的不同部分如何被视为单独的实体和更大整体的一部分。
通俗解释：
- 组合视图模式是指一个主视图由较小的子视图组成。这个组合视图的布局基于一个模板。然后，视图管理器决定在这个模板中包含哪些子视图。
维基百科解释：
- 组合视图由多个原子子视图组成。模板的每个组件都可以动态地包含在整体中，页面的布局可以独立于内容进行管理。该解决方案基于模块化动态和静态模板片段的包含和替换来创建组合视图。它通过鼓励模块化设计促进了视图原子部分的重用。

四、Java中组合视图模式的编程示例

一个新闻网站希望根据用户的偏好向不同用户显示当前日期和新闻。新闻网站将根据用户的兴趣替换不同的新闻提要组件，默认为本地新闻。
由于这是一个Web开发模式，需要一个服务器来演示它。这个示例使用Tomcat 10.0.13来运行Servlet，并且这个编程示例仅适用于Tomcat 10+。
首先，有一个AppServlet，它是一个在Tomcat 10+上运行的HttpServlet。

java">public class AppServlet extends HttpServlet {private String msgPartOne = "<h1>This Server Doesn't Support";private String msgPartTwo = "Requests</h1>\n"+ "<h2>Use a GET request with boolean values for the following parameters<h2>\n"+ "<h3>'name'</h3>\n<h3>'bus'</h3>\n<h3>'sports'</h3>\n<h3>'sci'</h3>\n<h3>'world'</h3>";private String destination = "newsDisplay.jsp";public AppServlet() {}@Overridepublic void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {RequestDispatcher requestDispatcher = req.getRequestDispatcher(destination);ClientPropertiesBean reqParams = new ClientPropertiesBean(req);req.setAttribute("properties", reqParams);requestDispatcher.forward(req, resp);}@Overridepublic void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {resp.setContentType("text/html");PrintWriter out = resp.getWriter();out.println(msgPartOne + " Post " + msgPartTwo);}@Overridepublic void doDelete(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {resp.setContentType("text/html");PrintWriter out = resp.getWriter();out.println(msgPartOne + " Delete " + msgPartTwo);}@Overridepublic void doPut(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {resp.setContentType("text/html");PrintWriter out = resp.getWriter();out.println(msgPartOne + " Put " + msgPartTwo);}
}

这个Servlet不属于该模式的一部分，它只是将GET请求转发到正确的JSP。PUT、POST和DELETE请求不受支持，只会显示错误消息。
此示例中的视图管理通过一个JavaBean类：ClientPropertiesBean完成，该类存储用户偏好。

java">public class ClientPropertiesBean implements Serializable {private static final String WORLD_PARAM = "world";private static final String SCIENCE_PARAM = "sci";private static final String SPORTS_PARAM = "sport";private static final String BUSINESS_PARAM = "bus";private static final String NAME_PARAM = "name";private static final String DEFAULT_NAME = "DEFAULT_NAME";private boolean worldNewsInterest;private boolean sportsInterest;private boolean businessInterest;private boolean scienceNewsInterest;private String name;public ClientPropertiesBean() {worldNewsInterest = true;sportsInterest = true;businessInterest = true;scienceNewsInterest = true;name = DEFAULT_NAME;}public ClientPropertiesBean(HttpServletRequest req) {worldNewsInterest = Boolean.parseBoolean(req.getParameter(WORLD_PARAM));sportsInterest = Boolean.parseBoolean(req.getParameter(SPORTS_PARAM));businessInterest = Boolean.parseBoolean(req.getParameter(BUSINESS_PARAM));scienceNewsInterest = Boolean.parseBoolean(req.getParameter(SCIENCE_PARAM));String tempName = req.getParameter(NAME_PARAM);if (tempName == null || tempName == "") {tempName = DEFAULT_NAME;}name = tempName;}// Lombok生成的getter和setter
}

这个JavaBean有一个默认构造函数，还有一个接受HttpServletRequest的构造函数。
这个第二个构造函数接受请求对象，解析出包含用户对不同类型新闻偏好的请求参数。
新闻页面的模板在newsDisplay.jsp中

<html>
<head><style>h1 {text-align: center;}h2 {text-align: center;}h3 {text-align: center;}.centerTable {margin-left: auto;margin-right: auto;}table {border: 1px solid black;}tr {text-align: center;}td {text-align: center;}</style>
</head>
<body>
<%ClientPropertiesBean propertiesBean = (ClientPropertiesBean) request.getAttribute("properties");%>
<h1>Welcome <%= propertiesBean.getName()%></h1>
<jsp:include page="header.jsp"></jsp:include>
<table class="centerTable"><tr><td></td><% if(propertiesBean.isWorldNewsInterest()) { %><td><%@include file="worldNews.jsp"%></td><% } else { %><td><%@include file="localNews.jsp"%></td><% } %><td></td></tr><tr><% if(propertiesBean.isBusinessInterest()) { %><td><%@include file="businessNews.jsp"%></td><% } else { %><td><%@include file="localNews.jsp"%></td><% } %><td></td><% if(propertiesBean.isSportsInterest()) { %><td><%@include file="sportsNews.jsp"%></td><% } else { %><td><%@include file="localNews.jsp"%></td><% } %></tr><tr><td></td><% if(propertiesBean.isScienceNewsInterest()) { %><td><%@include file="scienceNews.jsp"%></td><% } else { %><td><%@include file="localNews.jsp"%></td><% } %><td></td></tr>
</table>
</body>
</html>

这个JSP页面是模板。它声明了一个包含三行的表格，第一行有一个组件，第二行有两个组件，第三行有一个组件。
文件中的脚本是视图管理策略的一部分，根据JavaBean中的用户偏好包含不同的原子子视图。
以下是组合中使用的模拟原子子视图的两个示例：businessNews.jsp

<html>
<head><style>h2 {text-align: center;}table {border: 1px solid black;}tr {text-align: center;}td {text-align: center;}</style>
</head>
<body>
<h2>Generic Business News
</h2>
<table style="margin-right: auto; margin-left: auto"><tr><td>Stock prices up across the world</td><td>New tech companies to invest in</td></tr><tr><td>Industry leaders unveil new project</td><td>Price fluctuations and what they mean</td></tr>
</table>
</body>
</html>

localNews.jsp

<html>
<body>
<div style="text-align: center"><h3>Generic Local News</h3><ul style="list-style-type: none"><li>Mayoral elections coming up in 2 weeks</li><li>New parking meter rates downtown coming tomorrow</li><li>Park renovations to finish by the next year</li><li>Annual marathon sign ups available online</li></ul>
</div>
</body>
</html>

不同的子视图，如worldNews.jsp、businessNews.jsp等，根据请求参数有条件地包含。
如何使用
要尝试这个示例，请确保您安装了Tomcat 10+。设置您的IDE从模块构建WAR文件，并将该文件部署到服务器
IntelliJ：
在“运行”和“编辑配置”下，确保Tomcat服务器是运行配置之一。转到“部署”选项卡，并确保有一个名为“composite - view:war exploded”的工件正在构建。如果不存在，请添加一个。
确保该工件是根据“web”目录的内容和模块的编译结果构建的。将工件的输出指向一个方便的位置。运行配置并查看着陆页，按照该页面上的说明继续。