Merge pull request #60 from urbytes21/dev_branch_3

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/mvc/mvc_ap.cpp

@@ -5,6 +5,7 @@
 #include "view/DisplayWidget.h"
 #include "view/EditorWidget.h"
 
+namespace mvc {
 class ContainerWindow : public Gtk::Window {
  public:
   ContainerWindow();
@@ -67,8 +68,9 @@ ContainerWindow::ContainerWindow()
   mainLayout_.append(*editorView_);   // Add bottom row
   set_child(mainLayout_);
 }
+}  // namespace mvc
 
 int main(int argc, char* argv[]) {
   auto app = Gtk::Application::create("org.gtkmm.example.singlemvc");
-  return app->make_window_and_run<ContainerWindow>(argc, argv);
+  return app->make_window_and_run<mvc::ContainerWindow>(argc, argv);
 }

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"
+
+mvvm::SharedData::SharedData() : data_{"Initial Data"} {}
+
+void mvvm::SharedData::setData(const std::string& data) {
+  this->data_ = data;
+  notifyObservers();
+}
+
+void mvvm::SharedData::notifyObservers() {
+  for (auto* o : observers_) {
+    o->onDataChanged(this->data_);
+  }
+}
+void mvvm::SharedData::addObserver(IObserver* obs) {
+  if (obs != nullptr)
+    observers_.push_back(obs);
+}
+
+std::string mvvm::SharedData::getData() const {
+  return data_;
+}

src/ap/mvvm/model/SharedData.h

@@ -0,0 +1,22 @@
+#pragma once
+#include <string>
+#include <vector>
+#include "../IObserver.h"
+
+namespace mvvm {
+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_;
+};
+}  // namespace mvvm

src/ap/mvvm/mvvm_ap.cpp

@@ -0,0 +1,71 @@
+#include <gtkmm.h>
+#include <memory>
+#include "model/SharedData.h"
+#include "view/DisplayWidget.h"
+#include "view/EditorWidget.h"
+#include "viewmodel/SharedDataVM.h"
+
+namespace mvvm {
+/**
+ * @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<SharedDataVM>, 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("MVVM 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_);
+
+  // 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_);
+}
+}  // namespace mvvm
+
+int main(int argc, char* argv[]) {
+  auto app = Gtk::Application::create("org.gtkmm.example.singlemvvm");
+  return app->make_window_and_run<mvvm::ContainerWindow>(argc, argv);
+}