mardi 15 août 2023

how to organize files/folders when using Model-View-ViewModel design pattern

I've watched tons of tutorials on the Mode-View-ViewModel design pattern for Xamarin.Forms, and none of them approach the "how to organize the folder and file structure when using this design pattern" the same. Usually these tutorials are just demo-ing a little piece of functionality, so it doesn't matter as much.

However, it's important to me because I'm writing an actual app.

The way I'm approaching this has got to be wrong, but I'm not sure how I'm supposed to do this. Maybe someone could tell me what I should do?

Setup
I've just created a blank project. My folder structure is basically this:

MyWidgetApp     
    > Dependencies     
    v App.xaml            
           App.xaml.cs     
    v MainPage.xaml            
           MainPage.xaml.cs

The next step for the VMMV design pattern is to add some folders, right?

Add folders
We should add folders for the design pattern. A View folder, a Model folder, and a ViewModel folder:

MyWidgetApp     
    > Dependencies     
    > Models     
    > Views     
    > ViewModels     
    v App.xaml
          App.xaml.cs   
    v MainPage.xaml
          MainPage.xaml.cs        

Next, we create a Model, a View, and a ViewModel for the widget. I want to mess with the Widget on an entirely different page than the MainPage. The model obviously goes into the Models folder:

v Models
     Widget.cs

However, the View and ViewModel are a little more complicated. I create a new "Content Page", and it creates two files; let's call them Widget.xaml (the View), and Widget.xaml.cs (the ViewModel).

The answer seems obvious, right? Put the Widget.xaml into the View folder and put Widget.xaml.cs into the ViewModel folder. Not only that, I should put MainPage.xaml into the View folder and MainPage.xaml.cs into the ViewModel folder, right? Heck, we may as well go whole hog and do it with App.xaml/cs, too!

MyWidgetApp     
     > Dependencies     
     v Models            
          Widget.cs     
     v Views            
          App.xaml            
          MainPage.xaml            
          Widget.xaml     
     v ViewModels            
          App.xaml.cs            
          MainPage.xaml.cs            
          Widget.xaml.cs

Set up Binding
Here is where I fall off a cliff.

Before I set up the files in the "obvious" way, filename.xaml.cs was literally a child of filename.xaml. Now they're in entirely different folders, and the normal ways that I was taught to bind don't work! It almost seems like I should put every single file into root and call it a day (and have the most disorganized file structure on Earth).

How am I supposed to organize the files/folders when using the Model-View-ViewModel design pattern in Xamarin.Forms? (or anywhere, really)

Aucun commentaire:

Enregistrer un commentaire