Skip to content

Commit 794795a

Browse files
jinishavoraohbusiluwatar
authored
task: MVVM design pattern using zkoss framework. (iluwatar#1678)
* MVVM design pattern using zkoss framework. * MVVM Design pattern updates for issues reported by SonarCloud. * MVVM Design pattern updates for coverage issues reported by SonarCloud. * MVVM Design pattern updates for coverage issues (removing lombok @DaTa) reported by SonarCloud. * MVVM Design pattern updates for coverage issues reported by Sonar - TEST cases added for Equals and ToString * MVVM Design Pattern - updating missing/todo details. * MVVM Design Pattern - adding lombok.config * MVVM Design Pattern - Removing xml, updating pom.xml and README as per suggested changes in code review * Update model-view-viewmodel/README.md * Update model-view-viewmodel/README.md * Update model-view-viewmodel/README.md * Update model-view-viewmodel/README.md * MVVM Design Pattern - Updated pom.xml and Readme based on Suggested changes * added type as xml * MVVM Design Patterm - root pom.xml and module pom.xml updated * Update pom.xml Co-authored-by: Subhrodip Mohanta <hello@subho.xyz> Co-authored-by: Ilkka Seppälä <iluwatar@users.noreply.github.com>
1 parent 2b7d181 commit 794795a

File tree

15 files changed

+730
-2
lines changed

15 files changed

+730
-2
lines changed

‎model-view-viewmodel/README.md

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
layout: pattern
3+
title: Model-View-ViewModel
4+
folder: model-view-viewmodel
5+
permalink: /patterns/model-view-viewmodel/
6+
categories: Architectural
7+
tags:
8+
- Decoupling
9+
---
10+
11+
## Also known as
12+
13+
Model–View–Binder
14+
15+
## Intent
16+
17+
To apply "[Separation of Concerns](https://java-design-patterns.com/principles/#separation-of-concerns)" to separate the logic from the UI components and allow developers to work on UI without affecting the logic and vice versa.
18+
19+
## Explanation
20+
21+
Wikipedia says
22+
23+
> Model–view–viewmodel (MVVM) is a software architectural pattern that facilitates the separation of the development of the graphical user interface (the view) – be it via a markup language or GUI code – from the development of the business logic or back-end logic (the model) so that the view is not dependent on any specific model platform.
24+
25+
**Programmatic Example**
26+
27+
Zkoss implementation:
28+
29+
> ViewModel will hold the business logic and expose the data from model to View
30+
31+
```java
32+
public class BookViewModel {
33+
@WireVariable
34+
private List<Book> bookList;
35+
private Book selectedBook;
36+
private BookService bookService = new BookServiceImpl();
37+
38+
public Book getSelectedBook() {
39+
return selectedBook;
40+
}
41+
42+
@NotifyChange("selectedBook")
43+
public void setSelectedBook(Book selectedBook) {
44+
this.selectedBook = selectedBook;
45+
}
46+
47+
public List<Book> getBookList() {
48+
return bookService.load();
49+
}
50+
51+
/** Deleting a book.
52+
*/
53+
@Command
54+
@NotifyChange({"selectedBook","bookList"})
55+
public void deleteBook() {
56+
if (selectedBook != null) {
57+
getBookList().remove(selectedBook);
58+
selectedBook = null;
59+
}
60+
}
61+
```
62+
63+
> View will have no logic, only UI elements
64+
65+
```xml
66+
<zk>
67+
<window title="List of Books" border="normal" width="600px" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.iluwatar.model.view.viewmodel.BookViewModel')">
68+
<vbox hflex="true">
69+
<listbox model="@bind(vm.bookList)" selectedItem="@bind(vm.selectedBook)" height="400px" mold="paging">
70+
<listhead>
71+
<listheader label="Book Name"/>
72+
<listheader label="Author"/>
73+
</listhead>
74+
<template name="model" var="book">
75+
<listitem >
76+
<listcell label="@bind(book.name)"/>
77+
<listcell label="@bind(book.author)"/>
78+
</listitem>
79+
</template>
80+
</listbox>
81+
</vbox>
82+
<toolbar>
83+
        <button label="Delete" onClick="@command('deleteBook')" disabled="@load(empty vm.selectedBook)" />
84+
    </toolbar>
85+
<hbox style="margin-top:20px" visible="@bind(not empty vm.selectedBook)">
86+
<vbox>
87+
<hlayout>
88+
Book Name : <label value="@bind(vm.selectedBook.name)" style="font-weight:bold"/>
89+
</hlayout>
90+
<hlayout>
91+
Book Author : <label value="@bind(vm.selectedBook.author)" style="font-weight:bold"/>
92+
</hlayout>
93+
<hlayout>
94+
Book Description : <label value="@bind(vm.selectedBook.description)" style="font-weight:bold"/>
95+
</hlayout>
96+
</vbox>
97+
</hbox>
98+
</window>
99+
</zk>
100+
```
101+
102+
Note:
103+
* To deploy this, go to model-view-viewmodel folder and run:
104+
* mvn clean install
105+
* mvn jetty:run -Djetty.http.port=9911
106+
* In browser, http://localhost:9911/model-view-viewmodel/
107+
108+
## Class diagram
109+
110+
![alt text](./etc/model-view-viewmodel.png "MVVM pattern class diagram")
111+
112+
## Applicability
113+
114+
* When looking for clean architecture, with better reusability, testability and maintainability.
115+
116+
## Tutorials
117+
118+
* [Zkoss Demo](https://www.zkoss.org/zkdemo/getting_started/mvvm)
119+
* [Learn MVVM](https://www.learnmvvm.com/)
120+
* [Android Developer CodeLabs](https://codelabs.developers.google.com/codelabs/android-databinding)
121+
122+
## Typical Use Case
123+
124+
* Android apps
125+
* .NET framework applications
126+
* JavaScript applications
127+
128+
## Real world examples
129+
130+
* ZK Framework [zkoss.org](https://www.zkoss.org/)
131+
* KnockoutJS [knockoutjs.com](https://knockoutjs.com/)
132+
133+
## Consequences
134+
135+
* John Gossman has criticized the MVVM pattern and its application in specific uses, stating that MVVM can be "overkill" when creating simple user interfaces. For larger applications, he believes that generalizing the viewmodel upfront can be difficult, and that large-scale data binding can lead to lower performance - Ref: [MVVM-Wiki](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel)
136+
137+
* Can be hard to design ViewModel for larger applications.
138+
* For complex databinding, debugging can be difficult.
139+
140+
## Credits
141+
142+
* [ZK MVVM](https://www.zkoss.org/wiki/ZK%20Developer's%20Reference/MVVM)
143+
* [GeeksforGeeks MVVM Intro](https://www.geeksforgeeks.org/introduction-to-model-view-view-model-mvvm/)
144+
* [ZK MVVM Book](http://books.zkoss.org/zk-mvvm-book/9.5/)
145+
* [Microsoft MVVM](https://docs.microsoft.com/en-us/archive/msdn-magazine/2009/february/patterns-wpf-apps-with-the-model-view-viewmodel-design-pattern)

‎model-view-viewmodel/etc/model-view-viewmodel.png

39.6 KB
Loading

‎model-view-viewmodel/etc/model-view-viewmodel.urm.puml

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@startuml
2+
package com.iluwatar.model.view.viewmodel {
3+
class Book {
4+
- author : String
5+
- description : String
6+
- name : String
7+
+ Book(name : String, author : String, description : String)
8+
# canEqual(other : Object) : boolean
9+
+ equals(o : Object) : boolean
10+
+ getAuthor() : String
11+
+ getDescription() : String
12+
+ getName() : String
13+
+ hashCode() : int
14+
+ setAuthor(author : String)
15+
+ setDescription(description : String)
16+
+ setName(name : String)
17+
+ toString() : String
18+
}
19+
interface BookService {
20+
+ load() : List<Book> {abstract}
21+
}
22+
class BookServiceImpl {
23+
- designPatternBooks : List<Book>
24+
+ BookServiceImpl()
25+
+ load() : List<Book>
26+
}
27+
class BookViewModel {
28+
- bookList : List<Book>
29+
- bookService : BookService
30+
- selectedBook : Book
31+
+ BookViewModel()
32+
+ deleteBook()
33+
+ getBookList() : List<Book>
34+
+ getSelectedBook() : Book
35+
+ setSelectedBook(selectedBook : Book)
36+
}
37+
}
38+
BookViewModel --> "-bookService" BookService
39+
BookServiceImpl --> "-designPatternBooks" Book
40+
BookViewModel --> "-bookList" Book
41+
BookViewModel --> "-selectedBook" Book
42+
BookServiceImpl ..|> BookService
43+
@enduml

‎model-view-viewmodel/lombok.config

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
config.stopBubbling = true
2+
lombok.addLombokGeneratedAnnotation = true

‎model-view-viewmodel/pom.xml

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<project xmlns="http://maven.apache.org/POM/4.0.0"
3+
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4+
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
5+
<modelVersion>4.0.0</modelVersion>
6+
<parent>
7+
<artifactId>java-design-patterns</artifactId>
8+
<groupId>com.iluwatar</groupId>
9+
<version>1.24.0-SNAPSHOT</version>
10+
</parent>
11+
<groupId>com.iluwatar</groupId>
12+
<artifactId>model-view-viewmodel</artifactId>
13+
<version>1.24.0-SNAPSHOT</version>
14+
<properties>
15+
<zk.version>9.0.0</zk.version>
16+
<guava.version>19.0</guava.version>
17+
<jetty-maven-plugin.version>9.4.28.v20200408</jetty-maven-plugin.version>
18+
<maven-war-plugin.version>2.1.1</maven-war-plugin.version>
19+
<maven-assembly-plugin.version>2.2</maven-assembly-plugin.version>
20+
<maven.build.timestamp.format>yyyy-MM-dd</maven.build.timestamp.format>
21+
<packname>-${project.version}-FL-${maven.build.timestamp}</packname>
22+
</properties>
23+
<packaging>war</packaging>
24+
<name>model-view-viewmodel</name>
25+
<description>model-view-viewmodel</description>
26+
<licenses>
27+
<license>
28+
<name>GNU LESSER GENERAL PUBLIC LICENSE, Version 3</name>
29+
<url>https://www.gnu.org/licenses/lgpl.html</url>
30+
<distribution>repo</distribution>
31+
</license>
32+
</licenses>
33+
<repositories>
34+
<repository>
35+
<id>ZK CE</id>
36+
<name>ZK CE Repository</name>
37+
<url>https://mavensync.zkoss.org/maven2</url>
38+
</repository>
39+
<repository>
40+
<id>ZK EVAL</id>
41+
<name>ZK Evaluation Repository</name>
42+
<url>https://mavensync.zkoss.org/eval</url>
43+
</repository>
44+
</repositories>
45+
<pluginRepositories>
46+
<pluginRepository>
47+
<id>zkmaven</id>
48+
<name>ZK Maven Plugin Repository</name>
49+
<url>https://mavensync.zkoss.org/maven2/</url>
50+
</pluginRepository>
51+
</pluginRepositories>
52+
<dependencies>
53+
<dependency>
54+
<groupId>org.zkoss.zk</groupId>
55+
<artifactId>zkbind</artifactId>
56+
<version>${zk.version}</version>
57+
</dependency>
58+
<dependency>
59+
<groupId>org.junit.jupiter</groupId>
60+
<artifactId>junit-jupiter-engine</artifactId>
61+
<scope>test</scope>
62+
</dependency>
63+
<dependency>
64+
<groupId>com.google.guava</groupId>
65+
<artifactId>guava-testlib</artifactId>
66+
<version>${guava.version}</version>
67+
<scope>test</scope>
68+
</dependency>
69+
</dependencies>
70+
<build>
71+
<finalName>${project.artifactId}</finalName>
72+
<plugins>
73+
<!-- Run with Jetty -->
74+
<plugin>
75+
<groupId>org.eclipse.jetty</groupId>
76+
<artifactId>jetty-maven-plugin</artifactId>
77+
<version>${jetty-maven-plugin.version}</version>
78+
<configuration>
79+
<webApp>
80+
<contextPath>/${project.artifactId}</contextPath>
81+
<allowDuplicateFragmentNames>true</allowDuplicateFragmentNames>
82+
</webApp>
83+
<scanIntervalSeconds>5</scanIntervalSeconds>
84+
</configuration>
85+
</plugin>
86+
<!-- Build war -->
87+
<plugin>
88+
<artifactId>maven-war-plugin</artifactId>
89+
<groupId>org.apache.maven.plugins</groupId>
90+
<version>${maven-war-plugin.version}</version>
91+
</plugin>
92+
<!-- Pack zips -->
93+
<plugin>
94+
<artifactId>maven-assembly-plugin</artifactId>
95+
<version>${maven-assembly-plugin.version}</version>
96+
<executions>
97+
<execution>
98+
<id>webapp</id>
99+
<phase>package</phase>
100+
<goals>
101+
<goal>single</goal>
102+
</goals>
103+
<configuration>
104+
<finalName>model-view-viewmodel${packname}</finalName>
105+
<appendAssemblyId>false</appendAssemblyId>
106+
<descriptors>
107+
<descriptor>src/main/assembly/webapp.xml</descriptor>
108+
</descriptors>
109+
</configuration>
110+
</execution>
111+
</executions>
112+
</plugin>
113+
</plugins>
114+
</build>
115+
</project>

‎model-view-viewmodel/src/main/assembly/webapp.xml

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<assembly
2+
xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.0"
3+
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4+
xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.0 http://maven.apache.org/xsd/assembly-1.1.0.xsd">
5+
<id>webapp</id>
6+
<formats>
7+
<format>zip</format>
8+
</formats>
9+
<fileSets>
10+
<fileSet>
11+
<directory>${project.basedir}/src/main/java</directory>
12+
<outputDirectory>/${project.artifactId}/src</outputDirectory>
13+
</fileSet>
14+
<fileSet>
15+
<directory>${project.basedir}/src/main/webapp</directory>
16+
<outputDirectory>/${project.artifactId}/WebContent</outputDirectory>
17+
</fileSet>
18+
</fileSets>
19+
<files>
20+
<file>
21+
<source>${project.build.directory}/${project.artifactId}.war</source>
22+
<outputDirectory>/</outputDirectory>
23+
</file>
24+
</files>
25+
</assembly>

‎model-view-viewmodel/src/main/java/com/iluwatar/model/view/viewmodel/Book.java

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
* The MIT License
3+
* Copyright © 2014-2021 Ilkka Seppälä
4+
*
5+
* Permission is hereby granted, free of charge, to any person obtaining a copy
6+
* of this software and associated documentation files (the "Software"), to deal
7+
* in the Software without restriction, including without limitation the rights
8+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
* copies of the Software, and to permit persons to whom the Software is
10+
* furnished to do so, subject to the following conditions:
11+
*
12+
* The above copyright notice and this permission notice shall be included in
13+
* all copies or substantial portions of the Software.
14+
*
15+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
* THE SOFTWARE.
22+
*/
23+
24+
package com.iluwatar.model.view.viewmodel;
25+
26+
import lombok.AllArgsConstructor;
27+
import lombok.Data;
28+
29+
@AllArgsConstructor
30+
@Data
31+
public class Book {
32+
33+
private String name;
34+
private String author;
35+
private String description;
36+
37+
}

‎model-view-viewmodel/src/main/java/com/iluwatar/model/view/viewmodel/BookService.java

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
package com.iluwatar.model.view.viewmodel;
2+
3+
import java.util.List;
4+
5+
public interface BookService {
6+
/* List all books
7+
* @return all books
8+
*/
9+
public List<Book> load();
10+
}

0 commit comments

Comments
 (0)