Software Development With Uml and Java 2: Model, View, View-Model (MVVM) & Javafx

Life is great
VIA University College
Software Development with UML and Java 2

Model, View, View-model (MVVM) &
JavaFX
Part 1
Agenda
– MVVM – Model, View, View model
– Motivation
– Concept
– Responsibilities of the different parts
– Part 2: Connection and communication between the different parts

– Part 3: UML template
– Part 4: Examples and code
Dividing responsibilities
– Architectural pattern
– Similar approaches:
– MVC: Model, View, Controller
– MVP: Model, View, Presenter
– MVVM, how to:

– structure your GUI
– Structure your Data/Business Logic
– communicate with each other.
– MVVM is used across multiple platforms and languages:

– .NET, Android, JavaFX
– If you’re not careful, you might just end up with a class that does sort of
everything.
– It has GUI elements
– Lists of data
– Logic, like list-filtering, or sorting, translating from GUI to data in e.g. a file.
– When everything is bundled together, it’s difficult to:
– Test a feature, you’ll have to start the program, insert relevant stuff, click different places in the
GUI. We’re going to look at “automated” tests later in the semester.
– Maintain; you don’t have a clear picture of where stuff happens, and where to put new stuff.
– Add new functionality without modifying existing classes. We really want to avoid meddling with
already working stuff.
– If something breaks, it can be difficult to find.
MVVM in short
– Says something about how to structure a program, which will display
some data.
– Says nothing about client server systems, we’ll get to this later
View
View Model
model
• You can have many GUI views
View
View Model
model
• Each view will typically have a corresponding View model class
View
View Model
model
• Each view will typically have a corresponding View model class
• The Model can be any number of classes, grouped together, used by the View models
View
View Model
model
• Where do we put stuff?
View
View Model
model
User event Business logic
Presentation Take user input
handling Data (data manipulation) GUI state
Storage/ Parsing (XML,

data base
Rendering Translation Formatting Networking
JSON)
View
View Model
model
Take user input

data base
JSON)
Showing stuff to the user:

Data, images, graphs,
Presentation information
View
View Model
model
Take user input

data base
JSON)
Presentation
View
View Model
model

data base
JSON)
Buttons, radio buttons,

check boxes, textfields.
Any way of interacting with
Take user input
the system
Presentation
View
View Model
model

data base
JSON)
Take user input
Presentation
View
View Model
model
Business logic
Data (data manipulation) GUI state

data base
JSON)
Whenever a button is
clicked, something has to be
User event
done
handling
Take user input
Presentation
View
View Model
model
Business logic
Data (data manipulation) GUI state

data base
JSON)
Take user input
User event
Presentation
handling
View
View Model
model
Business logic
(data manipulation) GUI state

data base
JSON)
Any kind of data or

information
Data
Take user input
User event
Presentation
handling
View
View Model
model
Business logic
(data manipulation) GUI state

data base
JSON)
Take user input
User event
Presentation
handling Data
View
View Model
model
GUI state

data base
JSON)
Changing, modifying data.

Calculations, rules,
Business logic
validation.
(data manipulation)
Take user input
User event
Presentation
handling Data
View
View Model
model
GUI state

data base
JSON)
Take user input Business logic

(data manipulation)
User event
Presentation
handling Data
View
View Model
model
data base
JSON)
Is a button enabled or disabled?

GUI state Is a radio button selected?
Which element in a list is selected?
Take user input Business logic

(data manipulation)
User event
Presentation
handling Data
View
View Model
model
data base
JSON)
Business logic
Take user input GUI state (data manipulation)
User event
Presentation
handling Data
View
View Model
model
data base
Rendering Translation Networking
JSON)
Data can be held in one form, e.g. a

Formatting double for currency.
But the GUI will show it as a String
Business logic
User event
Presentation
handling Data
View
View Model
model
data base
JSON)
A Person class with information will
be an object in the Model.
Formatting In the GUI the Person data is put
into different text-fields,
checkboxes, etc.
Business logic
User event
Presentation
handling Data
View
View Model
model
data base
JSON)
Formatting
Business logic
User event
Presentation
handling Data
View
View Model
model
data base
Translation Networking
JSON)
Showing images, graphs,

Rendering charts, etc.
Formatting
Business logic
User event
Presentation
handling Data
View
View Model
model
data base
JSON)
Rendering Formatting
Business logic
User event
Presentation
handling Data
View
View Model
model
Storage/
data base
You may receive XML or

Parsing (XML, JSON from somewhere
else, and it must be
JSON) translated into objects
Business logic
User event
Presentation
handling Data
View
View Model
model
Storage/
data base
Rendering Formatting Parsing (XML,

JSON)
Business logic
User event
Presentation
handling Data
View
View Model
model
Storage/ Accessing a database, or other
data base
Translation
kind of persistent storage Networking
Rendering Formatting Parsing (XML,

JSON)
Business logic
User event
Presentation
handling Data
View
View Model
model
Business logic Storage/
Take user input GUI state (data manipulation) data base
User event Parsing (XML,
Presentation
handling Data JSON)
View
View Model
model
Between languages, or
from one valuta to
another. From JSON to
XML. Translation Networking
Presentation
handling Data JSON)
View
View Model
model
Networking
Rendering Formatting Translation

Presentation
handling Data JSON)
View
View Model
model
Connecting a client program to a
server program
Networking

Presentation
handling Data JSON)
View
View Model
model
Sometimes a part of the Model.
Often a separate “cloud”
Networking

Presentation
handling Data JSON)
View
View Model
model
Networking

Presentation
handling Data JSON)
View
View Model
model
Some simple input validation.
Is the input actually a number?
Input Is it in the general form of an email?
validation Is it a phone number?
Networking

Presentation
handling Data JSON)
View
View Model
model
Does the email already exist?
Does the number actually make
Data sense?
validation Does the name contain numbers?
Input Networking
validation
Presentation
handling Data JSON)
View
View Model
model
Input Networking
validation
Rendering Data
Formatting Translation
validation
Presentation
handling Data JSON)
View
View Model
model
Input Networking
validation
Rendering Data
validation
Presentation
handling Data JSON)
View
View Model
model
End of part 1
Life is great

Model, View, View-model (MVVM)
Part 2
Agenda
– Communication between the different parts
Dependencies
– Who knows about who, and how does communication happen?
Input Networking
validation
Rendering Data
validation
Presentation
handling Data JSON)
View
View Model
model
View
View Model
model
View
View Model
Has a reference model
View
View Model
Has a reference model Has a reference
Think private
field variable
Bindings
View
View Model
• The View model calls methods on the model
Bindings
View
View Model
Bindings
View
View Model
Bindings
View
View Model
In JavaFX
– So far a lot of fluffy concepts

– How do we translate this to JavaFX?
View
View Model
model
End of part 2
Life is great

Part 3
Agenda
– UML diagrams, how to structure your classes
Best practices for JavaFX?
In JavaFX
– So far a lot of fluffy concepts

– How do we translate this to JavaFX?
View
View Model
model
View1.FXML
View
View1Ctrllr
View1VM
View
model
<<interface>>
DataModel
DataList DataContainer
Model DataLogic LogicHelper
DataModelImpl
View3
View2
View1
View
View3Ctrllr
View2Ctrllr
View1Ctrllr
View3VM
View2VM
View1VM
View
model
<<interface>>
DataModel
DataModelImpl
View1 View2 View3
View
View1Ctrllr View2Ctrllr View3Ctrllr
View1VM View2VM View3VM

View
model
<<interface>>
DataModel
DataModelImpl
View1 View2 View3
View

View
model
<<interface>>
DataModel
DataModel2
DataList
DataList2 DataContainer
DataContainer2
Model DataLogic
DataLogic2 LogicHelper
LogicHelper2
DataModelImpl
DataModel2Impl
View1 View2 View3
S O L I D principles
View

View
model
<<interface>> <<interface>>
DataModel2 DataModel
DataModel2Impl DataModelImpl
View1 View2 View3
View

View
model
MVVM, bind everything together
– We have the core structure of our program, but how is everything started?
When are the classes created?
– Let’s introduce classes responsible for this.
View1 View2 View3
View

View
model
View1 View2 View3

JavafX::Applicati
on
Just a
placeholder
name
MyApplication
+ start()
launches <<interface>>
<<interface>>
StartApp
+ main() DataLogic LogicHelper
View1 View2 View3

JavafX::Applicati
on

MyApplication
+ start()
launches <<interface>>
<<interface>>
StartApp
+ main()
View1 View2 View3

JavafX::Applicati ViewHandler
on
VMFactory View1VM View2VM View3VM

MyApplication
+ start()
launches
ModelFactory <<interface>> <<interface>>
StartApp
+ main()
View1 View2 View3

on

MyApplication
+ start()
launches
StartApp
+ main()
ModelFactory mf = new ModelFactory();
View1 View2 View3
ViewModelFactory vmf = new ViewModelFactory(mf);
ViewHandler vh = new ViewHandler(vmf);
on

MyApplication
+ start()
launches
StartApp
+ main()
View1 View2 View3

on

MyApplication
+ start()
launches
StartApp
+ main()
View1 View2 View3

on

creates
MyApplication
+ start()
launches
ModelFactory creates
StartApp
+ main()
End of part 3
Life is great

Part 4
Agenda
– Previously:
1. Concept, motivation, different parts, responsibilities
2. Communication and interaction
3. UML Template
– Code and examples

GUI ViewModel
Private StringProperty text;
ABCD
A BCD
This is a label. There are many like it.
But this one is mine.
OK
If a Property in the
ViewModel is updated, it can
be reflected in the GUI
A 50
B 30
C 20
A = 50%
B = 30%
C = 20%
A 50
B 30
C 20
A = 60%
B = 15%
C = 25%
A 60
B 15
C 25
A = 60%
B = 15% External
modifier
C = 25%
– We’ll start with the Pie Chart view
A = 60%
B = 15% External
modifier
C = 25%
View3
View2
PieChartView
PieChartController
JavafX:: + init(vm : PieChartViewModel) : void

ViewHandler
Application
PieChartViewModel
VMFactory
ChartApp
+ start()
<<interface>>
launches DataModel
ModelFactory
StartChartApp
+ main() DataModelImpl
The program
A 60
B 15
C 25
A = 60%
B = 15% External
modifier
C = 25%
View3
View2
PieChartView
PieChartController
JavafX:: + init() : void

ViewHandler
Application
PieChartViewModel
VMFactory
ChartApp
+ start()
<<interface>>
launches DataModel
ModelFactory
StartChartApp
View3
View2
PieChartView View3
View2
TextChartView
PieChartController TextChartController
+ init() : void + init() : void
JavafX:: ViewHandler
Application
PieChartViewModel TextChartViewModel
VMFactory
ChartApp
+ start()
<<interface>>
launches
ModelFactory DataModel
StartChartApp
Bindings again
public class PieChartViewModel {
public class PieChartView {
private DoubleProperty x;
@FXML private DoubleProperty y;
Label eventLabel; private DoubleProperty z;
private StringProperty updateTimeStamp;
@FXML
PieChart pieChart;
private Model model;
private PieChartViewModel viewModel; Bind is one direction.
public PieChartViewModel(Model model) {
private PieChart.Data x = new
Changes made in PieChartView::x will
PieChart.Data("X", 0); this.model = model;
private PieChart.Data y = new be pushed to PieChartViewModel::x.
PieChart.Data("Y", 0); x = new SimpleDoubleProperty();
private PieChart.Data z = new PieChart.Data("Z", 0); y = new SimpleDoubleProperty();
But not vice versa z = new SimpleDoubleProperty();
public PieChartView() { updateTimeStamp = new SimpleStringProperty("Last update: ");
} }
public void init(PieChartViewModel pieChartViewModel) { public void updatePieChart() {
this.viewModel = pieChartViewModel;
double[] vals = model.getDataValues();
x.setValue(vals[0]);
x.pieValueProperty().bind(viewModel.xProperty()); If you use the method
y.setValue(vals[1]);
y.pieValueProperty().bind(viewModel.yProperty());
z.pieValueProperty().bind(viewModel.zProperty()); bindBiDirectional, changes are pushed
z.setValue(vals[2]);
updateTimeStamp.setValue("Last updated: " + model.getLastUpdateTim
eventLabel.textProperty().bind(viewModel.updateTimeStampProperty()); }
both was.
ObservableList<PieChart.Data> datas = FXCollections.observableArrayList(x,public
y, z);DoubleProperty xProperty() {
pieChart.setData(datas); return x;
} }
public void onUpdateButton(ActionEvent actionEvent) {
public DoubleProperty yProperty() {
viewModel.updatePieChart();
}
return y;
} }
public DoubleProperty zProperty() {

return z;
}
Data in the ViewModel is reflected in the View
public StringProperty updateTimeStampProperty() {
return updateTimeStamp;
}
}
@FXML
PieChart pieChart;
private PieChartViewModel viewModel;
private PieChart.Data x = new PieChart.Data("X", 0); this.model = model;
private PieChart.Data y = new PieChart.Data("Y", 0); x = new SimpleDoubleProperty();
z = new SimpleDoubleProperty();
} }
x.pieValueProperty().bind(viewModel.xProperty()); x.setValue(vals[0]);
y.pieValueProperty().bind(viewModel.yProperty()); y.setValue(vals[1]);
z.pieValueProperty().bind(viewModel.zProperty()); z.setValue(vals[2]);

} }
}
return y;
} }

return z;
}
Data in the ViewModel is reflected in the View
public StringProperty updateTimeStampProperty() {
}
}
@FXML
PieChart pieChart;
} }

} }
}
return y;
} }

return z;
}
Update public StringProperty updateTimeStampProperty() {
}
}
@FXML
PieChart pieChart;
} }

} }
}
return y;
} }

return z;
}
}
}
public class DataModel implements Model {
private DoubleProperty y;
private DoubleProperty z;
private double x;
private StringProperty updateTimeStamp; private double y;
private double z;
private String lastUpdate;
this.model = model; private Random random = new Random();
x = new SimpleDoubleProperty();
y = new SimpleDoubleProperty();
z = new SimpleDoubleProperty(); @Override
updateTimeStamp = new SimpleStringProperty("Last update: "); public double[] getDataValues() {
}
return new double[]{x, y, z};
public void updatePieChart() { }
@Override
z.setValue(vals[2]); public String getLastUpdateTimeStamp() {
updateTimeStamp.setValue("Last updated: " + model.getLastUpdateTimeStamp()); return lastUpdate;
); }
}
yList(x,public
return x; public void recalculateData() {
}
int first = random.nextInt(100)+1;
public DoubleProperty yProperty() { int second = random.nextInt(100)+1;
return y; int bottom = Math.min(first, second);
}
int top = Math.max(first, second);
return z; x = bottom;
}
y = top - bottom;
public StringProperty updateTimeStampProperty() { z = 100 - top;
return updateTimeStamp; calTimeStamp();
}
}
}
private double x;
private double z;
}
@Override
); }
}
yList(x,public
}
}
}
y = top - bottom;
}
}
}
@FXML
PieChart pieChart;
} }

} }
}
return y;
} }

return z;
}
}
}
public class PieCh
private Double
@FXML private Double
Label eventLabel; private Double
private String
@FXML
PieChart pieChart;
private Model
public PieChar
private PieChart.Data x = new PieChart.Data("X", 0); this.model
private PieChart.Data y = new PieChart.Data("Y", 0); x = new Si
private PieChart.Data z = new PieChart.Data("Z", 0); y = new Si
z = new Si
public PieChartView() { updateTime
} }
public void init(PieChartViewModel pieChartViewModel) { public void up
double[] v
x.pieValueProperty().bind(viewModel.xProperty()); x.setValue
y.pieValueProperty().bind(viewModel.yProperty()); y.setValue
z.pieValueProperty().bind(viewModel.zProperty()); z.setValue
updateTime

y, z);DoubleP
} }
public DoubleP
}
return y;
} }
public DoubleP
return z;
}
Update public StringP
return upd
}
}
@FXML
PieChart pieChart;
} }
updateTimeStamp.setValue("Last updated: " + model.getLastUpdateTi

} }
}
return y;
} }

return z;
}
}
}
@FXML
PieChart pieChart;
} }
updateTimeStamp.setValue("Last updated: " + model.getLastUpdateTi

} }
}
return y;
} }

return z;
}
}
}
private double x;
private double z;
}
@Override
ty()); }
}
ArrayList(x,public
}
}
}
y = top - bottom;
}
}
}
private double x;
private double z;
}
@Override
ty()); }
}
ArrayList(x,public
}
}
}
y = top - bottom;
}
}
}
@FXML
PieChart pieChart;
} }

} }
}
return y;
} }

return z;
}
}
}
public class PieChart
private DoublePro
@FXML private DoublePro
Label eventLabel; private DoublePro
private StringPro
@FXML
PieChart pieChart;
private Model mod
public PieChartVi
private PieChart.Data x = new PieChart.Data("X", 0); this.model =
private PieChart.Data y = new PieChart.Data("Y", 0); x = new Simpl
private PieChart.Data z = new PieChart.Data("Z", 0); y = new Simpl
z = new Simpl
public PieChartView() { updateTimeSta
} }
public void init(PieChartViewModel pieChartViewModel) { public void updat
double[] vals
x.pieValueProperty().bind(viewModel.xProperty()); x.setValue(va
y.pieValueProperty().bind(viewModel.yProperty()); y.setValue(va
z.pieValueProperty().bind(viewModel.zProperty()); z.setValue(va
updateTimeSta

y, z);DoubleProp
} }
public DoubleProp
}
return y;
} }
public DoubleProp
return z;
}
Update public StringProp
return update
}
}
public class PieChart
private DoublePro
@FXML private DoublePro
Label eventLabel; private DoublePro
private StringPro
@FXML
PieChart pieChart;
private Model mod
public PieChartVi
private PieChart.Data x = new PieChart.Data("X", 0); this.model =
private PieChart.Data y = new PieChart.Data("Y", 0); x = new Simpl
private PieChart.Data z = new PieChart.Data("Z", 0); y = new Simpl
z = new Simpl
public PieChartView() { updateTimeSta
} }
public void init(PieChartViewModel pieChartViewModel) { public void updat
Update call
x.pieValueProperty().bind(viewModel.xProperty());
double[] vals
x.setValue(va
y.setValue(va
y.pieValueProperty().bind(viewModel.yProperty());
done
z.pieValueProperty().bind(viewModel.zProperty()); z.setValue(va
updateTimeSta

y, z);DoubleProp
} }
public DoubleProp
}
return y;
} }
public DoubleProp
return z;
}
Update public StringProp
return update
}
}
Benefits
– It provides separation of concerns. Tightly coupled, change resistant, brittle code causes
all sorts of long-term maintenance issues that ultimately result in poor customer
satisfaction with the delivered software. A clean separation between application logic and
the UI will make an application easier to test, maintain, and evolve. It improves code re-
use opportunities and enables the developer-designer workflow.
– It is a natural pattern for XAML platforms. The key enablers of the MVVM pattern are the
rich data binding stack of the Silverlight platform, and dependency properties. The
combination of these provides the means to connect a UI to a view model.
– It enables a developer-designer workflow. When the UI XAML is not tightly coupled to the
code-behind, it is easy for designers to exercise the freedom they need to be creative
and make a good product.
– It increases application testability. Moving the UI logic to a separate class that can be
instantiated independently of a UI technology makes unit testing much easier.
– https://docs.microsoft.com/en-us/previous-versions/msp-n-p/hh848246(v=pandp.10)
End of part 4

Software Development With Uml and Java 2: Model, View, View-Model (MVVM) & Javafx

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Software Development With Uml and Java 2: Model, View, View-Model (MVVM) & Javafx

Uploaded by

Copyright:

Available Formats

Life is great

VIA University College

Software Development with UML and Java 2

– Part 2: Connection and communication between the different parts

– MVVM, how to:

– MVVM is used across multiple platforms and languages:

Storage/ Parsing (XML,

Storage/ Parsing (XML,

Showing stuff to the user:

Storage/ Parsing (XML,

Storage/ Parsing (XML,

Buttons, radio buttons,

Storage/ Parsing (XML,

Take user input

Storage/ Parsing (XML,

Take user input

Storage/ Parsing (XML,

Take user input

Storage/ Parsing (XML,

Any kind of data or

Take user input

Storage/ Parsing (XML,

Take user input

Storage/ Parsing (XML,

Changing, modifying data.

Take user input

Storage/ Parsing (XML,

Take user input Business logic

Is a button enabled or disabled?

Take user input Business logic

Data can be held in one form, e.g. a

Showing images, graphs,

You may receive XML or

Rendering Formatting Parsing (XML,

Rendering Formatting Parsing (XML,

Rendering Formatting Translation

Rendering Formatting Translation

Rendering Formatting Translation

Rendering Formatting Translation

Rendering Formatting Translation

Software Development with UML and Java 2

– So far a lot of fluffy concepts

Software Development with UML and Java 2

– So far a lot of fluffy concepts

Model DataLogic LogicHelper

Model DataLogic LogicHelper

View1VM View2VM View3VM

Model DataLogic LogicHelper

View1VM View2VM View3VM

View1VM View2VM View3VM

Model DataLogic LogicHelper

View1VM View2VM View3VM

Model DataLogic LogicHelper

View1VM View2VM View3VM

Model DataLogic LogicHelper

View1Ctrllr View2Ctrllr View3Ctrllr

View1Ctrllr View2Ctrllr View3Ctrllr

View1VM View2VM View3VM

View1Ctrllr View2Ctrllr View3Ctrllr

VMFactory View1VM View2VM View3VM

View1Ctrllr View2Ctrllr View3Ctrllr

VMFactory View1VM View2VM View3VM