【Java计划模式】组合视图模式：增强应用步伐中UI的同等性 ...

【Java计划模式】组合视图模式：增强应用步伐中UI的同等性

一、概述

在Java中，组合视图计划模式有助于管理复杂的条理视图。本文将具体先容该模式的意图、表明、编程示例、适用场景、实际应用、优点和权衡。同时，还将提供示例代码的下载链接，方便读者进行学习和实践。
二、组合视图计划模式的意图

组合视图计划模式的主要目标是将对象组合成树结构，以表示部分 - 整体条理结构。这允许客户端统一对待单个对象和对象的组合，简化了复杂条理视图的管理。
三、组合视图模式的具体表明及实际示例

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

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

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

1. public class AppServlet extends HttpServlet {
2.     private String msgPartOne = "<h1>This Server Doesn't Support";
3.     private String msgPartTwo = "Requests</h1>\n"
4.             + "<h2>Use a GET request with boolean values for the following parameters<h2>\n"
5.             + "<h3>'name'</h3>\n<h3>'bus'</h3>\n<h3>'sports'</h3>\n<h3>'sci'</h3>\n<h3>'world'</h3>";
6.     private String destination = "newsDisplay.jsp";
7.     public AppServlet() {
8.     }
9.     @Override
10.     public void doGet(HttpServletRequest req, HttpServletResponse resp)
11.             throws ServletException, IOException {
12.         RequestDispatcher requestDispatcher = req.getRequestDispatcher(destination);
13.         ClientPropertiesBean reqParams = new ClientPropertiesBean(req);
14.         req.setAttribute("properties", reqParams);
15.         requestDispatcher.forward(req, resp);
16.     }
17.     @Override
18.     public void doPost(HttpServletRequest req, HttpServletResponse resp)
19.             throws ServletException, IOException {
20.         resp.setContentType("text/html");
21.         PrintWriter out = resp.getWriter();
22.         out.println(msgPartOne + " Post " + msgPartTwo);
23.     }
24.     @Override
25.     public void doDelete(HttpServletRequest req, HttpServletResponse resp)
26.             throws ServletException, IOException {
27.         resp.setContentType("text/html");
28.         PrintWriter out = resp.getWriter();
29.         out.println(msgPartOne + " Delete " + msgPartTwo);
30.     }
31.     @Override
32.     public void doPut(HttpServletRequest req, HttpServletResponse resp)
33.             throws ServletException, IOException {
34.         resp.setContentType("text/html");
35.         PrintWriter out = resp.getWriter();
36.         out.println(msgPartOne + " Put " + msgPartTwo);
37.     }
38. }

复制代码

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

1. public class ClientPropertiesBean implements Serializable {
2.     private static final String WORLD_PARAM = "world";
3.     private static final String SCIENCE_PARAM = "sci";
4.     private static final String SPORTS_PARAM = "sport";
5.     private static final String BUSINESS_PARAM = "bus";
6.     private static final String NAME_PARAM = "name";
7.     private static final String DEFAULT_NAME = "DEFAULT_NAME";
8.     private boolean worldNewsInterest;
9.     private boolean sportsInterest;
10.     private boolean businessInterest;
11.     private boolean scienceNewsInterest;
12.     private String name;
13.     public ClientPropertiesBean() {
14.         worldNewsInterest = true;
15.         sportsInterest = true;
16.         businessInterest = true;
17.         scienceNewsInterest = true;
18.         name = DEFAULT_NAME;
19.     }
20.     public ClientPropertiesBean(HttpServletRequest req) {
21.         worldNewsInterest = Boolean.parseBoolean(req.getParameter(WORLD_PARAM));
22.         sportsInterest = Boolean.parseBoolean(req.getParameter(SPORTS_PARAM));
23.         businessInterest = Boolean.parseBoolean(req.getParameter(BUSINESS_PARAM));
24.         scienceNewsInterest = Boolean.parseBoolean(req.getParameter(SCIENCE_PARAM));
25.         String tempName = req.getParameter(NAME_PARAM);
26.         if (tempName == null || tempName == "") {
27.             tempName = DEFAULT_NAME;
28.         }
29.         name = tempName;
30.     }
31.     // Lombok生成的getter和setter
32. }

复制代码

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

1. <html>
2. <head>
3.     <style>
4.         h1 {
5.             text-align: center;
6.         }
7.         h2 {
8.             text-align: center;
9.         }
10.         h3 {
11.             text-align: center;
12.         }
13.        .centerTable {
14.             margin-left: auto;
15.             margin-right: auto;
16.         }
17.         table {
18.             border: 1px solid black;
19.         }
20.         tr {
21.             text-align: center;
22.         }
23.         td {
24.             text-align: center;
25.         }
26.     </style>
27. </head>
28. <body>
29. <%ClientPropertiesBean propertiesBean = (ClientPropertiesBean) request.getAttribute("properties");%>
30. <h1>Welcome <%= propertiesBean.getName()%></h1>
31. <jsp:include page="header.jsp"></jsp:include>
32. <table class="centerTable">
33.     <tr>
34.         <td></td>
35.         <% if(propertiesBean.isWorldNewsInterest()) { %>
36.         <td><%@include file="worldNews.jsp"%></td>
37.         <% } else { %>
38.         <td><%@include file="localNews.jsp"%></td>
39.         <% } %>
40.         <td></td>
41.     </tr>
42.     <tr>
43.         <% if(propertiesBean.isBusinessInterest()) { %>
44.         <td><%@include file="businessNews.jsp"%></td>
45.         <% } else { %>
46.         <td><%@include file="localNews.jsp"%></td>
47.         <% } %>
48.         <td></td>
49.         <% if(propertiesBean.isSportsInterest()) { %>
50.         <td><%@include file="sportsNews.jsp"%></td>
51.         <% } else { %>
52.         <td><%@include file="localNews.jsp"%></td>
53.         <% } %>
54.     </tr>
55.     <tr>
56.         <td></td>
57.         <% if(propertiesBean.isScienceNewsInterest()) { %>
58.         <td><%@include file="scienceNews.jsp"%></td>
59.         <% } else { %>
60.         <td><%@include file="localNews.jsp"%></td>
61.         <% } %>
62.         <td></td>
63.     </tr>
64. </table>
65. </body>
66. </html>

复制代码

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

1. <html>
2. <head>
3.     <style>
4.         h2 {
5.             text-align: center;
6.         }
7.         table {
8.             border: 1px solid black;
9.         }
10.         tr {
11.             text-align: center;
12.         }
13.         td {
14.             text-align: center;
15.         }
16.     </style>
17. </head>
18. <body>
19. <h2>
20.     Generic Business News
21. </h2>
22. <table style="margin-right: auto; margin-left: auto">
23.     <tr>
24.         <td>Stock prices up across the world</td>
25.         <td>New tech companies to invest in</td>
26.     </tr>
27.     <tr>
28.         <td>Industry leaders unveil new project</td>
29.         <td>Price fluctuations and what they mean</td>
30.     </tr>
31. </table>
32. </body>
33. </html>

复制代码

localNews.jsp

1. <html>
2. <body>
3. <div style="text-align: center">
4.     <h3>
5.         Generic Local News
6.     </h3>
7.     <ul style="list-style-type: none">
8.         <li>
9.             Mayoral elections coming up in 2 weeks
10.         </li>
11.         <li>
12.             New parking meter rates downtown coming tomorrow
13.         </li>
14.         <li>
15.             Park renovations to finish by the next year
16.         </li>
17.         <li>
18.             Annual marathon sign ups available online
19.         </li>
20.     </ul>
21. </div>
22. </body>
23. </html>

复制代码

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

当出现以下环境时使用组合视图计划模式：

• 您想要表示对象的部分 - 整体条理结构。
  
• 您预计组合结构将来大概会包含任何新组件。
  
• 您盼望客户端能够忽略对象组合和单个对象之间的区别。客户端将统一对待组合结构中的所有对象。
  

六、组合视图模式在Java中的实际应用

• 图形用户界面（GUI），此中小部件可以包含其他小部件（比方，包含面板、按钮和文本字段的窗口）。
  
• 文档结构，比方包含行的表格的表示，行又包含单元格，所有这些都可以作为统一条理结构中的元素进行处理。
  

七、组合视图模式的优点和权衡

优点：

• 添加新组件的高度机动性：由于组合和叶节点被统一对待，因此更容易添加新的组件类型。
  
• 简化客户端代码：客户端可以统一对待组合结构和单个元素，减少了客户端代码的复杂性。
  

权衡：

• 过度泛化：如果将所有内容都计划为组合，系统计划大概会变得更加复杂，特别是如果您的应用步伐不须要如许做。
  
• 束缚执行困难：将组合的组件限制为仅某些类型大概会更困难。
  

八、源码下载

https://download.csdn.net/download/weixin_42545951/89696137
通过本文的先容，相信大家对Java中的组合视图模式有了更深入的了解。在实际开发中，公道运用该模式可以进步UI的同等性和可维护性，但须要留意克制过度泛化和束缚执行的困难。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。