readme fixes
This commit is contained in:
Ilkka Seppälä
parent
58ce3a2ab2
commit
374f4ae4c8
@ -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/)
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user