Compare commits
1 Commits
fixComposi
...
dependabot
Author | SHA1 | Date | |
---|---|---|---|
b0b39a8621 |
@ -10,28 +10,26 @@ tags:
|
||||
- Presentation
|
||||
---
|
||||
|
||||
## Intent
|
||||
## Name
|
||||
**Composite View**
|
||||
|
||||
## Intent
|
||||
The purpose of the Composite View Pattern is to increase re-usability and flexibility when creating views for websites/webapps.
|
||||
This pattern seeks to decouple the content of the page from its layout, allowing changes to be made to either the content
|
||||
or layout of the page without impacting the other. This pattern also allows content to be easily reused across different views easily.
|
||||
|
||||
## Explanation
|
||||
|
||||
Real-world example
|
||||
|
||||
Real World Example
|
||||
> A news site wants to display the current date and news to different users
|
||||
> based on that user's preferences. The news site will substitute in different news feed
|
||||
> components depending on the user's interest, defaulting to local news.
|
||||
|
||||
In plain words
|
||||
|
||||
In Plain Words
|
||||
> Composite View Pattern is having a main view being composed of smaller subviews.
|
||||
> The layout of this composite view is based on a template. A View-manager then decides which
|
||||
> subviews to include in this template.
|
||||
|
||||
Wikipedia says
|
||||
|
||||
Wikipedia Says
|
||||
> Composite views that are composed of multiple atomic subviews. Each component of
|
||||
> the template may be included dynamically into the whole and the layout of the page may be managed independently of the content.
|
||||
> This solution provides for the creation of a composite view based on the inclusion and substitution of
|
||||
@ -44,7 +42,6 @@ Since this is a web development pattern, a server is required to demonstrate it.
|
||||
This example uses Tomcat 10.0.13 to run the servlet, and this programmatic example will only work with Tomcat 10+.
|
||||
|
||||
Firstly there is `AppServlet` which is an `HttpServlet` that runs on Tomcat 10+.
|
||||
|
||||
```java
|
||||
public class AppServlet extends HttpServlet {
|
||||
private String msgPartOne = "<h1>This Server Doesn't Support";
|
||||
@ -94,13 +91,12 @@ public class AppServlet extends HttpServlet {
|
||||
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
This servlet is not part of the pattern, and simply forwards GET requests to the correct JSP.
|
||||
PUT, POST, and DELETE requests are not supported and will simply show an error message.
|
||||
|
||||
The view management in this example is done via a javabean class: `ClientPropertiesBean`, which stores user preferences.
|
||||
|
||||
```java
|
||||
public class ClientPropertiesBean implements Serializable {
|
||||
|
||||
@ -140,13 +136,11 @@ public class ClientPropertiesBean implements Serializable {
|
||||
// getters and setters generated by Lombok
|
||||
}
|
||||
```
|
||||
|
||||
This javabean has a default constructor, and another that takes an `HttpServletRequest`.
|
||||
This second constructor takes the request object, parses out the request parameters which contain the
|
||||
user preferences for different types of news.
|
||||
|
||||
The template for the news page is in `newsDisplay.jsp`
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
@ -204,7 +198,6 @@ The template for the news page is in `newsDisplay.jsp`
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
This JSP page is the template. It declares a table with three rows, with one component in the first row,
|
||||
two components in the second row, and one component in the third row.
|
||||
|
||||
@ -212,9 +205,7 @@ The scriplets in the file are part of the
|
||||
view management strategy that include different atomic subviews based on the user preferences in the Javabean.
|
||||
|
||||
Here are two examples of the mock atomic subviews used in the composite:
|
||||
|
||||
`businessNews.jsp`
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
@ -242,9 +233,7 @@ Here are two examples of the mock atomic subviews used in the composite:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
`localNews.jsp`
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
@ -270,15 +259,11 @@ Here are two examples of the mock atomic subviews used in the composite:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
The results are as such:
|
||||
|
||||
1) The user has put their name as `Tammy` in the request parameters and no preferences:
|
||||
|
||||
1) The user has put their name as `Tammy` in the request parameters and no preferences:
|
||||

|
||||
|
||||
2) The user has put their name as `Johnny` in the request parameters and has a preference for world, business, and science news:
|
||||
|
||||

|
||||
|
||||
The different subviews such as `worldNews.jsp`, `businessNews.jsp`, etc. are included conditionally
|
||||
@ -319,7 +304,6 @@ that are included in the page dynamically. Most modern Javascript libraries, lik
|
||||
with components.
|
||||
|
||||
## Consequences
|
||||
|
||||
**Pros**
|
||||
* Easy to re-use components
|
||||
* Change layout/content without affecting the other
|
||||
@ -332,11 +316,10 @@ with components.
|
||||
* Increases potential for display errors
|
||||
|
||||
## Related patterns
|
||||
|
||||
* [Composite (GoF)](https://java-design-patterns.com/patterns/composite/)
|
||||
* [View Helper](https://www.oracle.com/java/technologies/viewhelper.html)
|
||||
|
||||
## Credits
|
||||
|
||||
* [Core J2EE Patterns - Composite View](https://www.oracle.com/java/technologies/composite-view.html)
|
||||
* [Composite View Design Pattern – Core J2EE Patterns](https://www.dineshonjava.com/composite-view-design-pattern/)
|
||||
|
||||
|
2
pom.xml
2
pom.xml
@ -41,7 +41,7 @@
|
||||
<spring.version>5.0.17.RELEASE</spring.version>
|
||||
<spring-boot.version>2.0.9.RELEASE</spring-boot.version>
|
||||
<spring-data.version>2.0.14.RELEASE</spring-data.version>
|
||||
<h2.version>1.4.190</h2.version>
|
||||
<h2.version>2.1.210</h2.version>
|
||||
<junit.version>4.12</junit.version>
|
||||
<junit-jupiter.version>5.7.1</junit-jupiter.version>
|
||||
<junit-vintage.version>${junit-jupiter.version}</junit-vintage.version>
|
||||
|
Reference in New Issue
Block a user