corrected MVC, now with more hints (#68)

* corrected MVC, now with more hints

* new mording mvc lesson

Co-authored-by: RetoStutz <[email protected]>
Co-authored-by: RetoStutz <[email protected]>

Author: 3 people

Tutorial/Erste Komponente/Validierung/task-info.yaml

@@ -1,24 +1,28 @@
 type: choice
 is_multiple_choice: true
 options:
-- text: Ich kenne den groben Inhalt des Hardwarekataloges und weiss, wie ich diesen in meinem Projekt einsetzen kann.
+- text: "Ich kenne den groben Inhalt des Hardwarekataloges und weiss, wie ich diesen\
+    \ in meinem Projekt einsetzen kann."
   is_correct: true
-- text: Ich weiss, wo ich im Hardwarekatalog Hilfe zur elektrischen Montage der Bauteile bekomme.
+- text: "Ich weiss, wo ich im Hardwarekatalog Hilfe zur elektrischen Montage der Bauteile\
+    \ bekomme."
   is_correct: true
-- text: Ich kenne die Funktionen von SimpleLED und SimpleButton und kann diese in einer einfache Applikation verwenden.
+- text: Ich kenne die Funktionen von SimpleLED und SimpleButton und kann diese in
+    einer einfache Applikation verwenden.
   is_correct: true
 - text: Ich kann eine einfache Applikation auf dem Raspberry Pi starten.
   is_correct: true
 files:
-- name: src/Component.java
-  visible: false
-- name: src/ErsteKomponente-ImplementationButton.run.xml
-  visible: false
 - name: src/Main.java
   visible: true
-- name: src/PIN.java
-  visible: false
 - name: src/SimpleButton.java
   visible: true
 - name: src/SimpleLED.java
   visible: true
+- name: src/PIN.java
+  visible: true
+- name: src/ErsteKomponente-ImplementationButton.run.xml
+  visible: true
+- name: src/Component.java
+  visible: true
+local_check: true

Tutorial/Erste Komponente/Zusammenfassung/task-info.yaml

@@ -2,13 +2,13 @@ type: theory
 files:
 - name: src/Main.java
   visible: true
-- name: src/Component.java
-  visible: false
-- name: src/PIN.java
-  visible: false
 - name: src/SimpleButton.java
   visible: true
-- name: src/ErsteKomponente-ImplementationButton.run.xml
-  visible: false
 - name: src/SimpleLED.java
   visible: true
+- name: src/PIN.java
+  visible: true
+- name: src/ErsteKomponente-ImplementationButton.run.xml
+  visible: true
+- name: src/Component.java
+  visible: true

Tutorial/ModelViewController/Kontroller/src/controller/Controller.java

@@ -12,10 +12,11 @@ public Controller(Model model) {
     }
 
     public void pressButton(){
-        //whenever the button is pressed, the model is updated
+        //whenever the function pressbutton is called, the model will be updated
+        //increment counter from model by one
         increase(model.counter);
 
-        //what happens when we press the button?
+        //set value ledGlows to true
         setValue(model.ledGlows, true);
 
         //using 'runLater' assures that new value is set on model
@@ -27,7 +28,8 @@ public void pressButton(){
     }
 
     public void ledOff(){
-        //what happens, when we lift the button?
+        //whenever the function ledOff is called, the model will be updated
+        // set value ledGlows to false
         setValue(model.ledGlows, false);
     }
 

Tutorial/ModelViewController/Kontroller/src/view/View.java

@@ -9,7 +9,7 @@
 import view.components.helpers.PIN;
 
 public class View extends PuiBase<Model, Controller> {
-    //declare all hardware components attached to RaspPi
+    //declare all hardware components attached to Pi
     //these are protected to give unit tests access to them
     protected SimpleButton button;
     protected SimpleLed    led;
@@ -20,7 +20,7 @@ public View(Controller controller, Context pi4J) {
 
     @Override
     public void initializeParts() {
-        //Which components are we using?
+        //Which components are we using? use the PIN PWM19 for the new component
         button = new SimpleButton(pi4J, PIN.D26, false);
         led    = new SimpleLed(pi4J, PIN.PWM19);
     }
@@ -29,19 +29,20 @@ public void initializeParts() {
     public void shutdown() {
         //what is there to do when we shut down the app?
         button.deRegisterAll();
+        led.off();
         super.shutdown();
     }
 
     @Override
     public void setupUiToActionBindings(Controller controller) {
-        //what happens, when we interact with the hardware?
+        //which methods of the controller must be called on a hardware event
         button.onDown(controller::pressButton);
         button.onUp(controller::ledOff);
     }
 
     @Override
     public void setupModelToUiBindings(Model model) {
-        //what happens, when the model registered that we interacted with the components?
+        //which event should be triggered when the model changes
         onChangeOf(model.counter)
                 .execute((oldValue, newValue) -> {
                     if (newValue != null) {

Tutorial/ModelViewController/Kontroller/task-info.yaml

@@ -5,17 +5,21 @@ files:
 - name: src/view/View.java
   visible: true
   placeholders:
-  - offset: 446
+  - offset: 442
     length: 27
     placeholder_text: /* TODO declare the SimpleLed. */
-  - offset: 726
+  - offset: 762
     length: 40
     placeholder_text: /* TODO initialize the SimpleLed */
-  - offset: 1134
+  - offset: 918
+    length: 42
+    placeholder_text: /* TODO deregister the functions and shutdown the components.
+      Don't forget to turn off the LED */
+  - offset: 1206
     length: 32
     placeholder_text: /* TODO register on the event "onUp" from the button the function
       "ledOff" of the controller */
-  - offset: 2137
+  - offset: 1649
     length: 85
     placeholder_text: "/* TODO create a listener on the \"ledGlows\" of the model,\
       \ and toggle the led */"
@@ -32,10 +36,10 @@ files:
 - name: src/controller/Controller.java
   visible: true
   placeholders:
-  - offset: 497
+  - offset: 549
     length: 31
     placeholder_text: /* TODO refresh the model to turn on the led */
-  - offset: 824
+  - offset: 942
     length: 32
     placeholder_text: /* TODO refresh the model to turn off the led */
 - name: src/util/mvcbase/ConcurrentTaskQueue.java

Tutorial/ModelViewController/Kontroller/task.md

@@ -1,35 +1,37 @@
 # Task 5/8: Kontroller
 In dieser Aufgabe geht es darum, den Kontroller in der ModelViewController-App zu schreiben und die 
 View mit einer LED zu erweitern.
-
----
 > **_Hinweis:_**
 >
 > Die Klassen *SimpleButton* und *SimpleLed* wurden bereits aus dem Hardwarekatalog kopiert und
 > in den Ordner view.components eingefügt.
----
 
 ## Aufgabe
-Die View und der Kontroller sollen implementiert werden.
+Um die Aufgabe zu erfüllen, müssen die Klassen *Controller.java* und *View.java* angepasst werden.
+> **_Hinweise:_**
+> Es existiert im Model neu die Variable *LedGlows*. Diese soll den Zustand der LED wiedergeben. TRUE bedeutet, die LED
+> leuchtet und FALSE bedeutet, die LED ist dunkel.
 
 ### Programmierung
+*Kontroller*
+- Auf das Ereignis Button gedrückt: aktualisiere im Model den Status von *ledGlows*.
+- Auf das Ereignis Button nicht mehr gedrückt: aktualisiere im Model den Status von *ledGlows*.
+
+<div class="hint">
+  Die Variablen des Models können mit <i>GetValue</i> und <i>SetValue</i> abgefragt oder geändert werden.
+</div>
+
 *View*
 - Deklaration von SimpleLed.
 - Initialisation von SimpleLed.
-- Registration des Event *onUp* des Buttons auf die Funktion *ledOff* des Kontrollers.
-- Ein Listener auf die variable *LedGlows* des Models soll die LED steuern.
+- Registration der Funktion *ledOff* vom Kontroller beim Event *onUp* des Buttons.
+- Mit *LedGlows* des Models die LED steuern.
 
-*Kontroller*
-- Auf das Drücken des Buttons: die LED soll leuchten nach update des Models.
-- Auf das Beenden des Drückens des Buttons: die LED soll nicht mehr leuchten nach update des Models.
+<div class="hint">
+  Für die Registration von <i>ledOff</i> und die Ansteuerung der LED kann fast der gleiche Syntax wie für <i>pressButton</i>
+oder die Ausgabe des Counters verwendet werden.
+</div>
 
----
-> **_Hinweise:_**
-> Die Aufgabe erfordert Änderungen in der View und dem Kontroller.
-> 
-> Es existiert im Model neu die Variable *LedGlows*. Sobald diese auf *True* gesetzt ist, soll auch die LED leuchten.
-> Wenn der Button nicht mehr gedrückt wird, soll die LED nicht mehr leuchten.
----
 
 ### Check Programmierung
 Die Programmierung lässt sich mit dem Button *Check* überprüfen. Nach erfolgreich abgeschlossenem Test kann mit der

Tutorial/ModelViewController/Model/src/controller/Controller.java

@@ -12,12 +12,13 @@ public Controller(Model model) {
     }
 
     public void pressButton(){
-        //whenever the button is pressed, the model is updated
+        //whenever the function pressbutton is called, the model will be updated
+        //set new message
         setValue(model.message, "You pressed the Button "+(get(model.counter)+1)+" Times");
-
+        //increment counter from model by one
         increase(model.counter);
 
-        //what happens when we press the button?
+        //set value ledGlows to true
         setValue(model.ledGlows, true);
 
         //using 'runLater' assures that new value is set on model

Tutorial/ModelViewController/Model/src/model/Model.java

@@ -3,6 +3,9 @@
 import util.mvcbase.ObservableValue;
 
 public class Model {
+    //Variables that are to be available in the view must be recorded as observables.
+    //This allows project-specific functions to be called which automatically update the view
+    //in the event of value changes.
     public final ObservableValue<Integer> counter  = new ObservableValue<>(0);
     public final ObservableValue<Boolean> ledGlows = new ObservableValue<>(false);
     public final ObservableValue<String>  message  = new ObservableValue<>("You pressed the Button 0 Times");

Tutorial/ModelViewController/Model/src/view/View.java

@@ -10,7 +10,7 @@
 import view.components.helpers.PIN;
 
 public class View extends PuiBase<Model, Controller> {
-    //declare all hardware components attached to RaspPi
+    //declare all hardware components attached to Pi
     //these are protected to give unit tests access to them
     protected LedButton ledButton;
 
@@ -20,27 +20,28 @@ public View(Controller controller, Context pi4J) {
 
     @Override
     public void initializeParts() {
-        //Which components are we using?
+        //Which components are we using? use the PINs D26 and PWM19
         ledButton = new LedButton(pi4J, PIN.D26, false, PIN.PWM19);
     }
 
     @Override
     public void shutdown() {
         //what is there to do when we shut down the app?
         ledButton.btnDeRegisterAll();
+        ledButton.ledOff();
         super.shutdown();
     }
 
     @Override
     public void setupUiToActionBindings(Controller controller) {
-        //what happens, when we interact with the hardware?
+        //which methods of the controller must be called on a hardware event
         ledButton.btnOnDown(controller::pressButton);
         ledButton.btnOnUp(controller::ledOff);
     }
 
     @Override
     public void setupModelToUiBindings(Model model) {
-        //what happens, when the model registered that we interacted with the components?
+        //which event should be triggered when the model changes
         onChangeOf(model.message).execute((oldValue, newValue) -> System.out.println(newValue));
 
         onChangeOf(model.ledGlows).execute(((oldValue, newValue) -> ledButton.ledSetState(newValue)));

Tutorial/ModelViewController/Model/task-info.yaml

@@ -15,25 +15,27 @@ files:
 - name: src/view/View.java
   visible: true
   placeholders:
-  - offset: 445
+  - offset: 441
     length: 30
     placeholder_text: /* TODO declare the LedButton */
-  - offset: 671
+  - offset: 694
     length: 59
     placeholder_text: /* TODO initialize the LedButton */
-  - offset: 846
-    length: 29
+  - offset: 869
+    length: 57
     placeholder_text: /* TODO implement the Shutdown */
-  - offset: 1056
+  - offset: 1124
     length: 92
-    placeholder_text: /* TODO connect the interactions from the button with the function of the controller
-      */
-  - offset: 1322
+    placeholder_text: /* TODO connect the interactions from the button with the function
+      of the controller */
+  - offset: 1365
     length: 88
-    placeholder_text: /* TODO give out the message stored in the model to the console, when the message changes */
-  - offset: 1420
+    placeholder_text: "/* TODO give out the message stored in the model to the console,\
+      \ when the message changes */"
+  - offset: 1463
     length: 94
-    placeholder_text: /* TODO create a listener on the "ledGlows" of the model, and toggle the led */
+    placeholder_text: "/* TODO create a listener on the \"ledGlows\" of the model,\
+      \ and toggle the led */"
 - name: src/view/components/helpers/PIN.java
   visible: false
 - name: src/view/components/Component.java
@@ -47,13 +49,14 @@ files:
 - name: src/model/Model.java
   visible: true
   placeholders:
-  - offset: 241
+  - offset: 458
     length: 105
-    placeholder_text: /* TODO create an Observable of type String with the name "message" */
+    placeholder_text: /* TODO create an Observable of type String with the name "message"
+      */
 - name: src/controller/Controller.java
   visible: true
   placeholders:
-  - offset: 414
+  - offset: 458
     length: 83
     placeholder_text: /* TODO refresh the model with the new message */
 - name: src/ModelViewController-Model.run.xml