Add an MVVM example

Author: urbytes21

src/ap/CMakeLists.txt

@@ -18,4 +18,4 @@ target_sources(ap
 target_link_libraries(ap PRIVATE gtk4-settings)
 
 add_subdirectory(mvc)
-# add_subdirectory(mvvm)
+add_subdirectory(mvvm)

src/ap/README.md

@@ -45,13 +45,13 @@ View → Controller → Model
 ### 3. GTK4
 - [Refer](https://docs.gtk.org/gtk4/getting_started.html)
 
-### 4. Examples
-### 4.1. simple_ap
-- Cos:
-    - Quick, Simple
-- Pos:
-    - Dependency: e.g. what happen when we delete  Gtk::Label m_labelMonitorA;
-    - Scalability: 
-    - Reusability:
+### 4. Trade-offs: MVC vs MVVM
 
-### 4.2. mvc_ap
+| Aspect               | MVC                                                                 | MVVM                                                                 |
+|---------------------|---------------------------------------------------------------------|----------------------------------------------------------------------|
+| **Complexity**      | Lower — **Controller** is a thin pass-through                           | Slightly higher — **ViewModel** adds an extra layer                     |
+| **Coupling**        | Views know both **Controller** and **Model** (e.g., for initial data)       | **Views** know only the **ViewModel**                                       |
+| **Testability**     | Controller is testable, but **Views** are still tied to **Model** for reads | **ViewModel** is fully testable without GTK; Views are pure UI          |
+| **Scalability**     | Adding fields requires updating **Model**, **Controller**, and all **Views**    | Adding fields requires updating **Model** and **ViewModel**; Views update bindings only |
+| **Observer wiring** | Manual — Container wires each **View** to the **Model**                     | Self-contained — **Views** register via **ViewModel**; container stays clean|
+| **UI logic leakage**| Risk - Views may call `model_->getData()` directly                  | Eliminated - Views use `viewModel_->getCurrentText()` only          |

src/ap/mvc/IObserver.h

@@ -1,5 +1,6 @@
 #pragma once
 
+#include <string>
 class IObserver {
  public:
   virtual ~IObserver() = default;

src/ap/mvc/model/SharedData.cpp

@@ -9,7 +9,7 @@ void SharedData::setData(const std::string& data) {
 }
 
 void SharedData::notifyObservers() {
-  for (auto o : observers_) {
+  for (auto *o : observers_) {
     o->onDataChanged(this->data_);
   }
 }

src/ap/mvvm/CMakeLists.txt

@@ -0,0 +1,12 @@
+add_executable(mvvm_ap)
+
+target_sources(mvvm_ap
+    PRIVATE
+        mvvm_ap.cpp
+        model/SharedData.cpp
+        viewmodel/SharedDataVM.cpp
+        view/EditorWidget.cpp
+        view/DisplayWidget.cpp
+)
+
+target_link_libraries(mvvm_ap PRIVATE gtk4-settings)

src/ap/mvvm/IObserver.h

@@ -0,0 +1,8 @@
+#pragma once
+
+#include <string>
+class IObserver {
+ public:
+  virtual ~IObserver() = default;
+  virtual void onDataChanged(const std::string& newData) = 0;
+};

src/ap/mvvm/model/SharedData.cpp

@@ -0,0 +1,22 @@
+#include "SharedData.h"
+
+SharedData::SharedData() : data_{"Initial Data"} {}
+
+void SharedData::setData(const std::string& data) {
+  this->data_ = data;
+  notifyObservers();
+}
+
+void SharedData::notifyObservers() {
+  for (auto* o : observers_) {
+    o->onDataChanged(this->data_);
+  }
+}
+void SharedData::addObserver(IObserver* obs) {
+  if (obs != nullptr)
+    observers_.push_back(obs);
+}
+
+std::string SharedData::getData() const {
+  return data_;
+}

src/ap/mvvm/model/SharedData.h

@@ -0,0 +1,20 @@
+#pragma once
+#include <string>
+#include <vector>
+#include "../IObserver.h"
+
+class SharedData {
+ public:
+  SharedData();
+
+  void setData(const std::string& data);
+  std::string getData() const;
+
+  void addObserver(IObserver* obs);
+
+ private:
+  void notifyObservers();
+
+  std::string data_;
+  std::vector<IObserver*> observers_;
+};

src/ap/mvvm/mvvm_ap.cpp

@@ -0,0 +1,73 @@
+#include <gtkmm.h>
+#include <memory>
+#include "model/SharedData.h"
+#include "view/DisplayWidget.h"
+#include "view/EditorWidget.h"
+#include "viewmodel/SharedDataVM.h"
+
+/**
+ * @brief ContainerWindow wires up the MVVM triad:
+ * Key differences from MVC's ContainerWindow:
+ *  1. No Controller is created.
+ *  2. No manual addObserver() calls, each View self-registers with the ViewModel during construction.
+ *  3. Views receive a shared_ptr<SharedDataViewModel>, never a Model pointer.
+ */
+class ContainerWindow : public Gtk::Window {
+ public:
+  ContainerWindow();
+
+ private:
+  // Main Layout
+  Gtk::Box mainLayout_;
+  Gtk::Box topRowLayout_;  // Horizontal arrangement (2 Displays side-by-side)
+
+  // Model & ViewModel are shared
+  // View hold a shared_ptr to the ViewModel
+  std::shared_ptr<SharedData> dataModel_;
+  std::shared_ptr<SharedDataVM> viewModel_;
+
+  // Views
+  std::unique_ptr<EditorWidget> editorView_;
+  std::unique_ptr<DisplayWidget> displayViewLeft_;
+  std::unique_ptr<DisplayWidget> displayViewRight_;
+};
+
+ContainerWindow::ContainerWindow()
+    : mainLayout_(Gtk::Orientation::VERTICAL),
+      topRowLayout_(Gtk::Orientation::HORIZONTAL) {
+  set_title("MVC Integrated Demo");
+  set_default_size(600, 400);
+
+  // Step 1 – construct the Model.
+  dataModel_ = std::make_shared<SharedData>();
+
+  // Step 2 – construct the ViewModel; it subscribes to the Model internally.
+  viewModel_ = std::make_shared<SharedDataVM>(dataModel_);
+
+  // Step 3 – construct Views, passing only the ViewModel.
+  editorView_ = std::make_unique<EditorWidget>(viewModel_);
+  displayViewLeft_ = std::make_unique<DisplayWidget>("ZONE 2: MONITOR A (Blue)",
+                                                     "blue", viewModel_);
+  displayViewRight_ = std::make_unique<DisplayWidget>("ZONE 3: MONITOR B (Red)",
+                                                      "red", viewModel_);
+
+  dataModel_->addObserver(editorView_.get());
+  dataModel_->addObserver(displayViewLeft_.get());
+  dataModel_->addObserver(displayViewRight_.get());
+
+  // Layout, unchanged from MVC
+  displayViewLeft_->set_hexpand(true);
+  displayViewRight_->set_hexpand(true);
+  topRowLayout_.append(*displayViewLeft_);
+  topRowLayout_.append(*displayViewRight_);
+
+  editorView_->set_vexpand(false);
+  mainLayout_.append(topRowLayout_);
+  mainLayout_.append(*editorView_);
+  set_child(mainLayout_);
+}
+
+int main(int argc, char* argv[]) {
+  auto app = Gtk::Application::create("org.gtkmm.example.singlemvvm");
+  return app->make_window_and_run<ContainerWindow>(argc, argv);
+}

src/ap/mvvm/view/DisplayWidget.cpp

@@ -0,0 +1,33 @@
+#include "DisplayWidget.h"
+
+DisplayWidget::DisplayWidget(const std::string& title, const std::string& color,
+                             std::shared_ptr<SharedDataVM> vm)
+    : Gtk::Box(Gtk::Orientation::VERTICAL),
+      color_(color),
+      innerBox_(Gtk::Orientation::VERTICAL),
+      view_model_(std::move(vm)) {
+  frame_.set_label(title);
+  frame_.set_margin(10);
+
+  // get from the ViewModel's current state
+  updateLabel(view_model_->getCurrentText());
+
+  innerBox_.append(labelData_);
+  innerBox_.set_margin(20);
+
+  frame_.set_child(innerBox_);
+  this->append(frame_);
+
+  // self-register: now the VM will push future update to this View
+  view_model_->addObserver(this);
+}
+
+void DisplayWidget::updateLabel(const std::string& text) {
+  std::string markup = "<span foreground='" + color_ +
+                       "' size='x-large' weight='bold'>" + text + "</span>";
+  labelData_.set_markup(markup);
+}
+
+void DisplayWidget::onDataChanged(const std::string& newData) {
+  updateLabel(newData);
+}