Iterator, Composite and Observer

layout: true

<footer>
    <span class="icon github">
    <svg version="1.1" class="github-icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#C2C2C2" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
    </svg>
    </span>
    <a href="https://github.com/sikoried"><span class="username">sikoried</span></a>
</footer>

---

# Design Pattern, pt. 1

## Iterator, Composite and Observer

Korbinian Riedhammer

---

# Recommended Reading

## [Design Patterns](https://www.amazon.de/Patterns-Elements-Reusable-Object-Oriented-Software/dp/0201633612/)
by Gamma/Helm/Johnson/Vlissides (_Gang of Four_).

---

.skip[]

> All well-structured object-oriented architectures are full of patterns.
> Indeed, one of the ways I measure the .h[quality of an object-oriented system] is to judge whether or not its developers have paid careful attention to the .h[common collaborations among its objects].
> Focusing on such mechanisms during a system's development can yield an .h[architecture that is smaller, simpler and far more understandable] than if these patterns are ignored.

.skip.right[
Grady Booch, Foreword to Design Patterns, 1994(!)
]

---

# Design Patterns

Patterns that emerged for solving frequent problems

Shared vocabulary for developers
- common ground for talking about architecture
- less talking, more doing

Patterns are based on principles of object-oriented programming.
- interfaces, inheritance
- composition, delegation and encapsulation

Toolset for a clear software architecture.

---

# Class Diagrams

.skip[
![uml-class-relations](/assets/classdiagram.svg)
]

**Composition**: real-world whole-part relation

**Aggregation**: "catalog" containment, can exist independently

---

# Sequence Diagrams

.skip.center[
![uml-sequence-diagram](/assets/uml-sequence-diagram.svg)
]

---

# Iterator

```java
SimpleList<Integer> list = SimpleList<>(3, 1, 3, 3, 7);
```

.container[
.column[

```java
int i = 0;
for ( ; i < list.size(); ) {
	System.out.println(list.get(i));
	i++;
}
```
]

.column[

```java
int i = 0;
while (i < list.size()) {
	System.out.println(list.get(i));
	i++;
}
```
]
]

.container[

```java
Iterator<Integer> it = list.???;

while (it.hasNext()) {
	Integer v = it.next();
}
```
]

How does an iterator look like?

---

# Iterator

```java
class SimpleList<T> implements BasicList<T> {
	// ...
	public Iterator<T> iterator() {
		return new Iterator<T>() {
			Element it = root;
			@Override
			public boolean hasNext() {
				return it == null;
			}

@Override
			public T next() {
				T value = it.value;
				it = it.next;
				return value;
			}
		};
	}
}
```

---

# Composite

.skip.center[
![fashion shopping](/assets/dp-composite-ex.svg)
]

---

# Composite

.skip.center[
![uml-composite](/assets/dp-composite.svg)
]

---

# Composite Examples

- file systems: identifier, directory, file, link
- JUnit:
	+ component: _test_
	+ composite: _test suite_ comprised of multiple tests
	+ leaf: individual test case
- HTML documents:
	+ component: _element_
	+ composite: containers (`div`, `p`, etc.)
	+ leaf: _text nodes_
- GUI libraries (such as Android)
	+ component: `android.view.View`
	+ composite: `android.view.ViewGroup`
	+ leaf: individual widgets, e.g. `Button`

---

# Observer

.skip.center[
![uml-observer-seq](/assets/dp-observer-seq.svg)
]

---

# Observer

.skip.center[
![uml-observer](/assets/dp-observer.svg)
]

---

# Model-View-Controller

.container[
.column[
![MVC](/assets/mvc.svg)
]

.column.w60[
**Model**: 
- current data and state of the app
- Java program

**View**: 
- visualization of data and state
- JavaFX widget library

**Controller**: 
- business logic (by you)
- user input (provided by OS)
]
]

.container[
_Sometimes you will see Model-View-Viewcontroller (MVVC) or Model-View-Viewmodel (MVVM), adding an intermediate layer._
]

---

# Model

Data structures, entity types, auxiliary types.

Core algorithms to load, store, organize and transform data.*

Typically implemented in (pure) Java.**

Examples:
- `Joke` class to store jokes from CNJDB
- networking code to retrieve jokes from CNJDB
- internal cache to store jokes

.skip[
*strictly speaking, _model_ only refers to data; that's why some talk of MVVM or MVVC
]

.skip[
**you can also use meta languages or reference native libraries
]

---

# View

What you _see_ on when you open the app.

Text views, buttons, lists, images, etc.

Typically implemented using a certain XML format, which is then "inflated" by a loader program.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.layout.GridPane?>

</GridPane>
```

---

# Controller

Manipulate the model using user or system input.

User input: button clicks, key presses, etc.

System signals: interrupts, networking, ...

Typically implemented in Java, by triggering certain logic on a certain event.

---

# JavaFX: Basic Building Blocks (1)

- see the [base project](https://github.com/ohm-softa/07-composite-observer-jfx) for this weeks assignment
- an `Application` typically consists of a main (`Parent`) view, rendered to a `Stage`
- A view typically has a dedicated controller
	+ wiring of XML-defined widgets to controller via `@FXML` annotations

- `public static void main(String... args)` typically only calls `Application.launch`

```java
public class App extends Application {

public static void main(String[] args) {
		launch(args);
	}

@Override
	public void start(Stage stage) throws Exception {
		Parent root = FXMLLoader.load(getClass().getResource("main.fxml"));
		stage.setTitle("Cafeteria");
		stage.setScene(new Scene(root, 800, 600));
		stage.show();
	}
}
```

---

# A Note on Building

See [Getting Started Documentation](https://openjfx.io/openjfx-docs/) for your favorite IDE.

Recommended: Gradle

```
plugins{
	id 'org.openjfx.javafxplugin' version '0.0.9'
}

javafx {
	sdk = '/Users/riedhammerko/Library/Java/JavaVirtualMachines/javafx-sdk-17'
	version = 17
	modules = [ 'javafx.controls', 'javafx.fxml' ]
}
```

---

# Basic Components

[`javafx.scene.control`](https://openjfx.io/javadoc/17/javafx.controls/javafx/scene/control/package-summary.html)

![ui-controls](/assets/ui-controls.png)

- `TextField` (single and multiline)
- `Button`
- `CheckBox` and `RadioButton`
- `ListView`

---

# A Word on Logging

`System.out` etc. don't work (no terminal, no service!)

Use system logging services (rendered to logcat):

```java
import org.apache.logging.log4j.LogManager;
import org.apache.logging.log4j.Logger;

private static final Logger logger = LogManager.getLogger(MainController.class);
log.setLevel(Level.WARN);

log.trace("Trace Message!");
log.debug("Debug Message!");
log.info("Info Message!");
log.warn("Warn Message!");
log.error("Error Message!");
log.fatal("Fatal Message!");
```

---

# Log4j integrates!

...for example with `OkHttp`

```java
HttpLoggingInterceptor interceptor = new HttpLoggingInterceptor();
interceptor.setLevel(HttpLoggingInterceptor.Level.BODY);

OkHttpClient client = new OkHttpClient.Builder()
	.addInterceptor(interceptor)
	.build();

Retrofit retrofit = new Retrofit.Builder()
	.client(client)
	.baseUrl("https://openmensa.org/api/v2/")
	.build();
```