Compare commits
2 Commits
all-contri
...
fixComposi
Author | SHA1 | Date | |
---|---|---|---|
374f4ae4c8 | |||
58ce3a2ab2 |
@ -1737,7 +1737,8 @@
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/47126749?v=4",
|
||||
"profile": "http://no website",
|
||||
"contributions": [
|
||||
"review"
|
||||
"review",
|
||||
"code"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
@ -320,11 +320,14 @@ This project is licensed under the terms of the MIT license.
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><a href="https://www.linkedin.com/in/abhinav-vashisth-06613b208/"><img src="https://avatars.githubusercontent.com/u/89785800?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Abhinav Vashisth</b></sub></a><br /><a href="https://github.com/iluwatar/java-design-patterns/commits?author=vashisthabhinav" title="Documentation">📖</a></td>
|
||||
<td align="center"><a href="http://no website"><img src="https://avatars.githubusercontent.com/u/47126749?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kevin</b></sub></a><br /><a href="https://github.com/iluwatar/java-design-patterns/pulls?q=is%3Apr+reviewed-by%3AKevinyl3" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/iluwatar/java-design-patterns/commits?author=Kevinyl3" title="Code">💻</a></td>
|
||||
<td align="center"><a href="http://no website"><img src="https://avatars.githubusercontent.com/u/47126749?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kevin</b></sub></a><br /><a href="https://github.com/iluwatar/java-design-patterns/pulls?q=is%3Apr+reviewed-by%3AKevinyl3" title="Reviewed Pull Requests">👀</a></td>
|
||||
<td align="center"><a href="https://github.com/Shrirang97"><img src="https://avatars.githubusercontent.com/u/28738668?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shrirang</b></sub></a><br /><a href="https://github.com/iluwatar/java-design-patterns/pulls?q=is%3Apr+reviewed-by%3AShrirang97" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/iluwatar/java-design-patterns/commits?author=Shrirang97" title="Code">💻</a></td>
|
||||
<td align="center"><a href="https://github.com/interactwithankush"><img src="https://avatars.githubusercontent.com/u/18613127?v=4?s=100" width="100px;" alt=""/><br /><sub><b>interactwithankush</b></sub></a><br /><a href="https://github.com/iluwatar/java-design-patterns/commits?author=interactwithankush" title="Code">💻</a></td>
|
||||
<td align="center"><a href="https://github.com/yuhangbin"><img src="https://avatars.githubusercontent.com/u/17566866?v=4?s=100" width="100px;" alt=""/><br /><sub><b>CharlieYu</b></sub></a><br /><a href="https://github.com/iluwatar/java-design-patterns/commits?author=yuhangbin" title="Code">💻</a></td>
|
||||
<td align="center"><a href="https://github.com/Leisterbecker"><img src="https://avatars.githubusercontent.com/u/20650323?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Leisterbecker</b></sub></a><br /><a href="https://github.com/iluwatar/java-design-patterns/commits?author=Leisterbecker" title="Code">💻</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><a href="http://rosaecrucis.cn"><img src="https://avatars.githubusercontent.com/u/35420129?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DragonDreamer</b></sub></a><br /><a href="https://github.com/iluwatar/java-design-patterns/commits?author=castleKing1997" title="Code">💻</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
@ -10,26 +10,28 @@ tags:
|
||||
- Presentation
|
||||
---
|
||||
|
||||
## 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
|
||||
@ -42,6 +44,7 @@ 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";
|
||||
@ -91,12 +94,13 @@ 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 {
|
||||
|
||||
@ -136,11 +140,13 @@ 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>
|
||||
@ -198,6 +204,7 @@ 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.
|
||||
|
||||
@ -205,7 +212,9 @@ 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>
|
||||
@ -233,7 +242,9 @@ Here are two examples of the mock atomic subviews used in the composite:
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
`localNews.jsp`
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
@ -259,11 +270,15 @@ 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
|
||||
@ -304,6 +319,7 @@ 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
|
||||
@ -316,10 +332,11 @@ 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/)
|
||||
|
||||
|
Reference in New Issue
Block a user